Merge branch 'dev' of https://github.com/SyncrowIOT/web

lib/pages/routines/bloc/automation_scene_trigger_bloc/automation_status_update.dart

@@ -0,0 +1,39 @@
+
+import 'dart:convert';
+
+class AutomationStatusUpdate {
+  final String spaceUuid;
+  final bool isEnable;
+
+  AutomationStatusUpdate({
+    required this.spaceUuid,
+    required this.isEnable,
+  });
+
+  factory AutomationStatusUpdate.fromRawJson(String str) =>
+      AutomationStatusUpdate.fromJson(json.decode(str));
+
+  String toRawJson() => json.encode(toJson());
+
+  factory AutomationStatusUpdate.fromJson(Map<String, dynamic> json) =>
+      AutomationStatusUpdate(
+        spaceUuid: json["spaceUuid"],
+        isEnable: json["isEnable"],
+      );
+
+  Map<String, dynamic> toJson() => {
+        "spaceUuid": spaceUuid,
+        "isEnable": isEnable,
+      };
+
+  factory AutomationStatusUpdate.fromMap(Map<String, dynamic> map) =>
+      AutomationStatusUpdate(
+        spaceUuid: map["spaceUuid"],
+        isEnable: map["isEnable"],
+      );
+
+  Map<String, dynamic> toMap() => {
+        "spaceUuid": spaceUuid,
+        "isEnable": isEnable,
+      };
+}

lib/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart

@@ -0,0 +1,67 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_state.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+import 'package:syncrow_web/services/space_mana_api.dart';
+
+class CreateRoutineBloc extends Bloc<CreateRoutineEvent, CreateRoutineState> {
+  CreateRoutineBloc() : super(const CreateRoutineInitial()) {
+    on<SpaceOnlyWithDevicesEvent>(_fetchSpaceOnlyWithDevices);
+    on<SaveCommunityIdAndSpaceIdEvent>(saveSpaceIdCommunityId);
+    on<ResetSelectedEvent>(resetSelected);
+    on<FetchCommunityEvent>(_fetchCommunity);
+  }
+
+  String selectedSpaceId = '';
+  String selectedCommunityId = '';
+  List<CommunityModel> communities = [];
+  List<SpaceModel> spacesOnlyWithDevices = [];
+
+  Future<void> _fetchSpaceOnlyWithDevices(
+      SpaceOnlyWithDevicesEvent event, Emitter<CreateRoutineState> emit) async {
+    emit(const SpaceWithDeviceLoadingState());
+
+    try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
+      spacesOnlyWithDevices = await CommunitySpaceManagementApi()
+          .getSpaceOnlyWithDevices(
+              communityId: event.communityID, projectId: projectUuid);
+
+      emit(SpaceWithDeviceLoadedState(spacesOnlyWithDevices));
+    } catch (e) {
+      emit(SpaceTreeErrorState('Error loading spaces: $e'));
+    }
+  }
+
+  saveSpaceIdCommunityId(
+      SaveCommunityIdAndSpaceIdEvent event, Emitter<CreateRoutineState> emit) {
+    emit(const SpaceWithDeviceLoadingState());
+    selectedSpaceId = event.spaceID!;
+    selectedCommunityId = event.communityID!;
+    emit(const SelectedState());
+  }
+
+  resetSelected(ResetSelectedEvent event, Emitter<CreateRoutineState> emit) {
+    emit(const SpaceWithDeviceLoadingState());
+    selectedSpaceId = '';
+    selectedCommunityId = '';
+    emit(const ResetSelectedState());
+  }
+
+  Future<void> _fetchCommunity(
+      FetchCommunityEvent event, Emitter<CreateRoutineState> emit) async {
+    emit(const CommunitiesLoadingState());
+
+    try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      communities =
+          await CommunitySpaceManagementApi().fetchCommunities(projectUuid);
+      emit(const CommunityLoadedState());
+    } catch (e) {
+      emit(SpaceTreeErrorState('Error loading communities $e'));
+    }
+  }
+}

lib/pages/routines/bloc/create_routine_bloc/create_routine_event.dart

@@ -0,0 +1,51 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+
+abstract class CreateRoutineEvent extends Equatable {
+  const CreateRoutineEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class AddToIfContainer extends CreateRoutineEvent {
+  final SpaceModel spaceModel;
+
+  const AddToIfContainer(this.spaceModel);
+
+  @override
+  List<Object?> get props => [spaceModel];
+}
+
+class SpaceOnlyWithDevicesEvent extends CreateRoutineEvent {
+  final String communityID;
+  const SpaceOnlyWithDevicesEvent(this.communityID);
+
+  @override
+  List<Object> get props => [communityID];
+}
+
+class SaveCommunityIdAndSpaceIdEvent extends CreateRoutineEvent {
+  final String? communityID;
+  final String? spaceID;
+
+  const SaveCommunityIdAndSpaceIdEvent({this.communityID, this.spaceID});
+
+  @override
+  List<Object> get props => [communityID!, spaceID!];
+}
+
+class ResetSelectedEvent extends CreateRoutineEvent {
+  const ResetSelectedEvent();
+
+  @override
+  List<Object> get props => [];
+}
+
+
+class FetchCommunityEvent extends CreateRoutineEvent {
+  const FetchCommunityEvent();
+
+  @override
+  List<Object> get props => [];
+}

lib/pages/routines/bloc/create_routine_bloc/create_routine_state.dart

@@ -0,0 +1,53 @@
+
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+
+abstract class CreateRoutineState extends Equatable {
+  const CreateRoutineState();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class CreateRoutineInitial extends CreateRoutineState {
+  const CreateRoutineInitial();
+}
+
+class SpaceWithDeviceLoadingState extends CreateRoutineState {
+  const SpaceWithDeviceLoadingState();
+}
+
+class SpaceWithDeviceLoadedState extends CreateRoutineState {
+  final List<SpaceModel> spaces;
+
+  const SpaceWithDeviceLoadedState(this.spaces);
+
+  @override
+  List<Object?> get props => [spaces];
+}
+
+class SpaceTreeErrorState extends CreateRoutineState {
+  final String errorMessage;
+
+  const SpaceTreeErrorState(this.errorMessage);
+
+  @override
+  List<Object?> get props => [errorMessage];
+}
+
+class SelectedState extends CreateRoutineState {
+  const SelectedState();
+}
+
+
+class ResetSelectedState extends CreateRoutineState {
+  const ResetSelectedState();
+}
+
+class CommunityLoadedState extends CreateRoutineState {
+  const CommunityLoadedState();
+}
+
+class CommunitiesLoadingState extends CreateRoutineState {
+  const CommunitiesLoadingState();
+}

lib/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart

@@ -30,6 +30,7 @@ class FunctionBloc extends Bloc<FunctionBlocEvent, FunctionBlocState> {
         condition: event.functionData.condition ?? existingData.condition,
       );
     } else {
+      functions.clear();
       functions.add(event.functionData);
     }
 

lib/pages/routines/bloc/routine_bloc/routine_bloc.dart

@@ -1,11 +1,12 @@
 import 'dart:async';
 
-import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/automation_scene_trigger_bloc/automation_status_update.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_automation_model.dart';
 import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_scene_model.dart';
 import 'package:syncrow_web/pages/routines/models/delay/delay_fucntions.dart';
@@ -16,9 +17,6 @@ import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/services/devices_mang_api.dart';
 import 'package:syncrow_web/services/routines_api.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
-import 'package:syncrow_web/utils/constants/strings_manager.dart';
-import 'package:syncrow_web/utils/constants/temp_const.dart';
-import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
 import 'package:syncrow_web/utils/navigation_service.dart';
 import 'package:syncrow_web/utils/snack_bar.dart';
 import 'package:uuid/uuid.dart';
@@ -55,7 +53,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     on<TriggerSwitchTabsEvent>(_triggerSwitchTabsEvent);
     on<CreateNewRoutineViewEvent>(_createNewRoutineViewEvent);
     on<ResetErrorMessage>(_resetErrorMessage);
+    on<SceneTrigger>(_onSceneTrigger);
+    on<UpdateAutomationStatus>(_onUpdateAutomationStatus);
   }
+  String selectedSpaceId = '';
+  String selectedCommunityId = '';
 
   FutureOr<void> _triggerSwitchTabsEvent(
     TriggerSwitchTabsEvent event,
@@ -87,8 +89,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     final updatedIfItems = List<Map<String, dynamic>>.from(state.ifItems);
 
     // Find the index of the item in teh current itemsList
-    int index =
-        updatedIfItems.indexWhere((map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
+    int index = updatedIfItems
+        .indexWhere((map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
     // Replace the map if the index is valid
     if (index != -1) {
       updatedIfItems[index] = event.item;
@@ -97,9 +99,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
 
     if (event.isTabToRun) {
-      emit(state.copyWith(ifItems: updatedIfItems, isTabToRun: true, isAutomation: false));
+      emit(state.copyWith(
+          ifItems: updatedIfItems, isTabToRun: true, isAutomation: false));
     } else {
-      emit(state.copyWith(ifItems: updatedIfItems, isTabToRun: false, isAutomation: true));
+      emit(state.copyWith(
+          ifItems: updatedIfItems, isTabToRun: false, isAutomation: true));
     }
   }
 
@@ -107,8 +111,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     final currentItems = List<Map<String, dynamic>>.from(state.thenItems);
 
     // Find the index of the item in teh current itemsList
-    int index =
-        currentItems.indexWhere((map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
+    int index = currentItems
+        .indexWhere((map) => map['uniqueCustomId'] == event.item['uniqueCustomId']);
     // Replace the map if the index is valid
     if (index != -1) {
       currentItems[index] = event.item;
@@ -119,39 +123,43 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     emit(state.copyWith(thenItems: currentItems));
   }
 
-  void _onAddFunctionsToRoutine(AddFunctionToRoutine event, Emitter<RoutineState> emit) {
+  void _onAddFunctionsToRoutine(
+      AddFunctionToRoutine event, Emitter<RoutineState> emit) {
     try {
       if (event.functions.isEmpty) return;
 
-      List<DeviceFunctionData> selectedFunction = List<DeviceFunctionData>.from(event.functions);
+      // List<DeviceFunctionData> selectedFunction = List<DeviceFunctionData>.from(event.functions);
 
       Map<String, List<DeviceFunctionData>> currentSelectedFunctions =
           Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
-      if (currentSelectedFunctions.containsKey(event.uniqueCustomId)) {
-        List<DeviceFunctionData> currentFunctions =
-            List<DeviceFunctionData>.from(currentSelectedFunctions[event.uniqueCustomId] ?? []);
 
-        List<String> functionCode = [];
-        for (int i = 0; i < selectedFunction.length; i++) {
-          for (int j = 0; j < currentFunctions.length; j++) {
-            if (selectedFunction[i].functionCode == currentFunctions[j].functionCode) {
-              currentFunctions[j] = selectedFunction[i];
-              if (!functionCode.contains(currentFunctions[j].functionCode)) {
-                functionCode.add(currentFunctions[j].functionCode);
-              }
-            }
-          }
-        }
+      // if (currentSelectedFunctions.containsKey(event.uniqueCustomId)) {
+      //   List<DeviceFunctionData> currentFunctions =
+      //       List<DeviceFunctionData>.from(currentSelectedFunctions[event.uniqueCustomId] ?? []);
 
-        for (int i = 0; i < functionCode.length; i++) {
-          selectedFunction.removeWhere((code) => code.functionCode == functionCode[i]);
-        }
+      //   List<String> functionCode = [];
+      //   for (int i = 0; i < selectedFunction.length; i++) {
+      //     for (int j = 0; j < currentFunctions.length; j++) {
+      //       if (selectedFunction[i].functionCode == currentFunctions[j].functionCode) {
+      //         currentFunctions[j] = selectedFunction[i];
+      //         if (!functionCode.contains(currentFunctions[j].functionCode)) {
+      //           functionCode.add(currentFunctions[j].functionCode);
+      //         }
+      //       }
+      //     }
+      //   }
 
-        currentSelectedFunctions[event.uniqueCustomId] = List.from(currentFunctions)
-          ..addAll(selectedFunction);
-      } else {
-        currentSelectedFunctions[event.uniqueCustomId] = List.from(event.functions);
-      }
+      //   for (int i = 0; i < functionCode.length; i++) {
+      //     selectedFunction.removeWhere((code) => code.functionCode == functionCode[i]);
+      //   }
+
+      //   currentSelectedFunctions[event.uniqueCustomId] = List.from(currentFunctions)
+      //     ..addAll(selectedFunction);
+      // } else {
+      //   currentSelectedFunctions[event.uniqueCustomId] = List.from(event.functions);
+      // }
+
+      currentSelectedFunctions[event.uniqueCustomId] = List.from(event.functions);
 
       emit(state.copyWith(selectedFunctions: currentSelectedFunctions));
     } catch (e) {
@@ -163,15 +171,23 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     emit(state.copyWith(isLoading: true, errorMessage: null));
     List<ScenesModel> scenes = [];
     try {
-      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-
       BuildContext context = NavigationService.navigatorKey.currentContext!;
-      var spaceBloc = context.read<SpaceTreeBloc>();
-      for (var communityId in spaceBloc.state.selectedCommunities) {
-        List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
-        for (var spaceId in spacesList) {
-          scenes.addAll(await SceneApi.getScenes(spaceId, communityId, projectUuid));
+      var createRoutineBloc = context.read<CreateRoutineBloc>();
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
+        var spaceBloc = context.read<SpaceTreeBloc>();
+        for (var communityId in spaceBloc.state.selectedCommunities) {
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          for (var spaceId in spacesList) {
+            scenes
+                .addAll(await SceneApi.getScenes(spaceId, communityId, projectUuid));
+          }
         }
+      } else {
+        scenes.addAll(await SceneApi.getScenes(createRoutineBloc.selectedSpaceId,
+            createRoutineBloc.selectedCommunityId, projectUuid));
       }
 
       emit(state.copyWith(
@@ -188,18 +204,31 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  Future<void> _onLoadAutomation(LoadAutomation event, Emitter<RoutineState> emit) async {
+  Future<void> _onLoadAutomation(
+      LoadAutomation event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
     List<ScenesModel> automations = [];
+    final projectId = await ProjectManager.getProjectUUID() ?? '';
 
+    BuildContext context = NavigationService.navigatorKey.currentContext!;
+    var createRoutineBloc = context.read<CreateRoutineBloc>();
     try {
-      BuildContext context = NavigationService.navigatorKey.currentContext!;
-      var spaceBloc = context.read<SpaceTreeBloc>();
-      for (var communityId in spaceBloc.state.selectedCommunities) {
-        List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
-        for (var spaceId in spacesList) {
-          automations.addAll(await SceneApi.getAutomation(spaceId));
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
+        var spaceBloc = context.read<SpaceTreeBloc>();
+        for (var communityId in spaceBloc.state.selectedCommunities) {
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          for (var spaceId in spacesList) {
+            automations.addAll(
+                await SceneApi.getAutomation(spaceId, communityId, projectId));
+          }
         }
+      } else {
+        automations.addAll(await SceneApi.getAutomation(
+            createRoutineBloc.selectedSpaceId,
+            createRoutineBloc.selectedCommunityId,
+            projectId));
       }
       emit(state.copyWith(
         automations: automations,
@@ -215,14 +244,16 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onSearchRoutines(SearchRoutines event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _onSearchRoutines(
+      SearchRoutines event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
     await Future.delayed(const Duration(seconds: 1));
     emit(state.copyWith(isLoading: false, errorMessage: null));
     emit(state.copyWith(searchText: event.query));
   }
 
-  FutureOr<void> _onAddSelectedIcon(AddSelectedIcon event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onAddSelectedIcon(
+      AddSelectedIcon event, Emitter<RoutineState> emit) {
     emit(state.copyWith(selectedIcon: event.icon));
   }
 
@@ -236,7 +267,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     return actions.last['deviceId'] == 'delay';
   }
 
-  Future<void> _onCreateScene(CreateSceneEvent event, Emitter<RoutineState> emit) async {
+  Future<void> _onCreateScene(
+      CreateSceneEvent event, Emitter<RoutineState> emit) async {
     try {
       // Check if first action is delay
       // if (_isFirstActionDelay(state.thenItems)) {
@@ -295,10 +327,10 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       }).toList();
 
       BuildContext context = NavigationService.navigatorKey.currentContext!;
-      var spaceBloc = context.read<SpaceTreeBloc>();
+      var createRoutineBloc = context.read<CreateRoutineBloc>();
 
       final createSceneModel = CreateSceneModel(
-        spaceUuid: spaceBloc.state.selectedSpaces[0],
+        spaceUuid: createRoutineBloc.selectedSpaceId,
         iconId: state.selectedIcon ?? '',
         showInDevice: true,
         sceneName: state.routineName ?? '',
@@ -325,8 +357,10 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  Future<void> _onCreateAutomation(CreateAutomationEvent event, Emitter<RoutineState> emit) async {
+  Future<void> _onCreateAutomation(
+      CreateAutomationEvent event, Emitter<RoutineState> emit) async {
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
       if (state.routineName == null || state.routineName!.isEmpty) {
         emit(state.copyWith(
           errorMessage: 'Automation name is required',
@@ -422,10 +456,10 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         });
       }).toList();
       BuildContext context = NavigationService.navigatorKey.currentContext!;
-      var spaceBloc = context.read<SpaceTreeBloc>();
+      var createRoutineBloc = context.read<CreateRoutineBloc>();
 
       final createAutomationModel = CreateAutomationModel(
-        spaceUuid: spaceBloc.state.selectedSpaces[0],
+        spaceUuid: createRoutineBloc.selectedSpaceId,
         automationName: state.routineName ?? '',
         decisionExpr: state.selectedAutomationOperator,
         effectiveTime: EffectiveTime(
@@ -437,7 +471,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         actions: actions,
       );
 
-      final result = await SceneApi.createAutomation(createAutomationModel);
+      final result =
+          await SceneApi.createAutomation(createAutomationModel, projectUuid);
       if (result['success']) {
         add(ResetRoutineState());
         add(const LoadAutomation());
@@ -458,17 +493,21 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onRemoveDragCard(RemoveDragCard event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onRemoveDragCard(
+      RemoveDragCard event, Emitter<RoutineState> emit) {
     if (event.isFromThen) {
       final thenItems = List<Map<String, dynamic>>.from(state.thenItems);
-      final selectedFunctions = Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
+      final selectedFunctions =
+          Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
 
       thenItems.removeAt(event.index);
       selectedFunctions.remove(event.key);
-      emit(state.copyWith(thenItems: thenItems, selectedFunctions: selectedFunctions));
+      emit(state.copyWith(
+          thenItems: thenItems, selectedFunctions: selectedFunctions));
     } else {
       final ifItems = List<Map<String, dynamic>>.from(state.ifItems);
-      final selectedFunctions = Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
+      final selectedFunctions =
+          Map<String, List<DeviceFunctionData>>.from(state.selectedFunctions);
 
       ifItems.removeAt(event.index);
       selectedFunctions.remove(event.key);
@@ -491,131 +530,141 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     ));
   }
 
-  FutureOr<void> _onEffectiveTimeEvent(EffectiveTimePeriodEvent event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onEffectiveTimeEvent(
+      EffectiveTimePeriodEvent event, Emitter<RoutineState> emit) {
     emit(state.copyWith(effectiveTime: event.effectiveTime));
   }
 
-  FutureOr<void> _onSetRoutineName(SetRoutineName event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onSetRoutineName(
+      SetRoutineName event, Emitter<RoutineState> emit) {
     emit(state.copyWith(
       routineName: event.name,
     ));
   }
 
-  (List<Map<String, dynamic>>, List<Map<String, dynamic>>, Map<String, List<DeviceFunctionData>>)
-      _createCardData(
-    List<RoutineAction> actions,
-    List<RoutineCondition>? conditions,
-    Map<String, List<DeviceFunctionData>> currentFunctions,
-    bool isTabToRun,
-  ) {
-    final ifItems = isTabToRun
-        ? [
-            {
-              'entityId': 'tab_to_run',
-              'uniqueCustomId': const Uuid().v4(),
-              'deviceId': 'tab_to_run',
-              'title': 'Tab to run',
-              'productType': 'tab_to_run',
-              'imagePath': Assets.tabToRun,
-            }
-          ]
-        : conditions?.map((condition) {
-              final matchingDevice = state.devices.firstWhere(
-                (device) => device.uuid == condition.entityId,
-                orElse: () => AllDevicesModel(
-                  uuid: condition.entityId,
-                  name: condition.entityId,
-                  productType: condition.entityType,
-                ),
-              );
+  // (
+  //   List<Map<String, dynamic>>,
+  //   List<Map<String, dynamic>>,
+  //   Map<String, List<DeviceFunctionData>>
+  // ) _createCardData(
+  //   List<RoutineAction> actions,
+  //   List<RoutineCondition>? conditions,
+  //   Map<String, List<DeviceFunctionData>> currentFunctions,
+  //   bool isTabToRun,
+  // ) {
+  //   final ifItems = isTabToRun
+  //       ? [
+  //           {
+  //             'entityId': 'tab_to_run',
+  //             'uniqueCustomId': const Uuid().v4(),
+  //             'deviceId': 'tab_to_run',
+  //             'title': 'Tab to run',
+  //             'productType': 'tab_to_run',
+  //             'imagePath': Assets.tabToRun,
+  //           }
+  //         ]
+  //       : conditions?.map((condition) {
+  //             final matchingDevice = state.devices.firstWhere(
+  //               (device) => device.uuid == condition.entityId,
+  //               orElse: () => AllDevicesModel(
+  //                 uuid: condition.entityId,
+  //                 name: condition.entityId,
+  //                 productType: condition.entityType,
+  //               ),
+  //             );
 
-              final cardData = {
-                'entityId': condition.entityId,
-                'uniqueCustomId': const Uuid().v4(),
-                'deviceId': condition.entityId,
-                'title': matchingDevice.name ?? condition.entityId,
-                'productType': condition.entityType,
-                'imagePath': matchingDevice.getDefaultIcon(condition.entityType),
-              };
+  //             final cardData = {
+  //               'entityId': condition.entityId,
+  //               'uniqueCustomId': const Uuid().v4(),
+  //               'deviceId': condition.entityId,
+  //               'title': matchingDevice.name ?? condition.entityId,
+  //               'productType': condition.entityType,
+  //               'imagePath':
+  //                   matchingDevice.getDefaultIcon(condition.entityType),
+  //             };
 
-              final functions = matchingDevice.functions;
+  //             final functions = matchingDevice.functions;
 
-              for (var function in functions) {
-                if (function.code == condition.expr.statusCode) {
-                  currentFunctions[cardData['uniqueCustomId'] ?? ''] = [
-                    DeviceFunctionData(
-                      entityId: condition.entityId,
-                      functionCode: condition.expr.statusCode,
-                      value: condition.expr.statusValue,
-                      operationName: function.operationName,
-                    ),
-                  ];
-                  break;
-                }
-              }
+  //             for (var function in functions) {
+  //               if (function.code == condition.expr.statusCode) {
+  //                 currentFunctions[cardData['uniqueCustomId'] ?? ''] = [
+  //                   DeviceFunctionData(
+  //                     entityId: condition.entityId,
+  //                     functionCode: condition.expr.statusCode,
+  //                     value: condition.expr.statusValue,
+  //                     operationName: function.operationName,
+  //                   ),
+  //                 ];
+  //                 break;
+  //               }
+  //             }
 
-              return cardData;
-            }).toList() ??
-            [];
+  //             return cardData;
+  //           }).toList() ??
+  //           [];
 
-    final thenItems = actions.map((action) {
-      final matchingDevice = state.devices.firstWhere(
-        (device) => device.uuid == action.entityId,
-        orElse: () => AllDevicesModel(
-          uuid: action.entityId,
-          name: action.entityId,
-          productType: action.productType,
-        ),
-      );
+  //   final thenItems = actions.map((action) {
+  //     final matchingDevice = state.devices.firstWhere(
+  //       (device) => device.uuid == action.entityId,
+  //       orElse: () => AllDevicesModel(
+  //         uuid: action.entityId,
+  //         name: action.entityId,
+  //         productType: action.productType,
+  //       ),
+  //     );
 
-      final cardData = {
-        'entityId': action.entityId,
-        'uniqueCustomId': const Uuid().v4(),
-        'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
-        'title': action.actionExecutor == 'delay' ? 'Delay' : (matchingDevice.name ?? 'Device'),
-        'productType': action.productType,
-        'imagePath': matchingDevice.getDefaultIcon(action.productType),
-      };
+  //     final cardData = {
+  //       'entityId': action.entityId,
+  //       'uniqueCustomId': const Uuid().v4(),
+  //       'deviceId':
+  //           action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+  //       'title': action.actionExecutor == 'delay'
+  //           ? 'Delay'
+  //           : (matchingDevice.name ?? 'Device'),
+  //       'productType': action.productType,
+  //       'imagePath': matchingDevice.getDefaultIcon(action.productType),
+  //     };
 
-      final functions = matchingDevice.functions;
+  //     final functions = matchingDevice.functions;
 
-      if (action.executorProperty != null && action.actionExecutor != 'delay') {
-        final functionCode = action.executorProperty!.functionCode;
-        for (var function in functions) {
-          if (function.code == functionCode) {
-            currentFunctions[cardData['uniqueCustomId'] ?? ''] = [
-              DeviceFunctionData(
-                entityId: action.entityId,
-                functionCode: functionCode ?? '',
-                value: action.executorProperty!.functionValue,
-                operationName: function.operationName,
-              ),
-            ];
-            break;
-          }
-        }
-      } else if (action.actionExecutor == 'delay') {
-        final delayFunction = DelayFunction(
-          deviceId: action.entityId,
-          deviceName: 'Delay',
-        );
-        currentFunctions[cardData['uniqueCustomId'] ?? ''] = [
-          DeviceFunctionData(
-            entityId: action.entityId,
-            functionCode: 'delay',
-            value: action.executorProperty?.delaySeconds ?? 0,
-            operationName: delayFunction.operationName,
-          ),
-        ];
-      }
+  //     if (action.executorProperty != null && action.actionExecutor != 'delay') {
+  //       final functionCode = action.executorProperty!.functionCode;
+  //       for (var function in functions) {
+  //         if (function.code == functionCode) {
+  //           currentFunctions[cardData['uniqueCustomId'] ?? ''] = [
+  //             DeviceFunctionData(
+  //               entityId: action.entityId,
+  //               functionCode: functionCode ?? '',
+  //               value: action.executorProperty!.functionValue,
+  //               operationName: function.operationName,
+  //             ),
+  //           ];
+  //           break;
+  //         }
+  //       }
+  //     } else if (action.actionExecutor == 'delay') {
+  //       final delayFunction = DelayFunction(
+  //         deviceId: action.entityId,
+  //         deviceName: 'Delay',
+  //       );
+  //       currentFunctions[cardData['uniqueCustomId'] ?? ''] = [
+  //         DeviceFunctionData(
+  //           entityId: action.entityId,
+  //           functionCode: 'delay',
+  //           value: action.executorProperty?.delaySeconds ?? 0,
+  //           operationName: delayFunction.operationName,
+  //         ),
+  //       ];
+  //     }
 
-      return cardData;
-    }).toList();
+  //     return cardData;
+  //   }).toList();
 
-    return (thenItems, ifItems, currentFunctions);
-  }
+  //   return (thenItems, ifItems, currentFunctions);
+  // }
 
-  Future<void> _onGetSceneDetails(GetSceneDetails event, Emitter<RoutineState> emit) async {
+  Future<void> _onGetSceneDetails(
+      GetSceneDetails event, Emitter<RoutineState> emit) async {
     try {
       emit(state.copyWith(
         isLoading: true,
@@ -658,40 +707,46 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             ? '${action.entityId}_automation'
             : action.actionExecutor == 'delay'
                 ? '${action.entityId}_delay'
-                : action.entityId;
+                : const Uuid().v4();
 
-        if (!deviceCards.containsKey(deviceId)) {
-          deviceCards[deviceId] = {
-            'entityId': action.entityId,
-            'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
-            'uniqueCustomId': action.type == 'automation' || action.actionExecutor == 'delay'
-                ? const Uuid().v4()
-                : action.entityId,
-            'title': action.actionExecutor == 'delay'
-                ? 'Delay'
-                : action.type == 'automation'
-                    ? action.name ?? 'Automation'
-                    : (matchingDevice?.name ?? 'Device'),
-            'productType': action.productType,
-            'functions': matchingDevice?.functions,
-            'imagePath': action.type == 'automation'
-                ? Assets.automation
-                : action.actionExecutor == 'delay'
-                    ? Assets.delay
-                    : matchingDevice?.getDefaultIcon(action.productType),
-            'device': matchingDevice,
-            'name': action.name,
-            'type': action.type,
-          };
-        }
+        // if (!deviceCards.containsKey(deviceId)) {
+        deviceCards[deviceId] = {
+          'entityId': action.entityId,
+          'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+          'uniqueCustomId':
+              action.type == 'automation' || action.actionExecutor == 'delay'
+                  ? action.entityId
+                  : const Uuid().v4(),
+          'title': action.actionExecutor == 'delay'
+              ? 'Delay'
+              : action.type == 'automation'
+                  ? action.name ?? 'Automation'
+                  : (matchingDevice?.name ?? 'Device'),
+          'productType': action.productType,
+          'functions': matchingDevice?.functions,
+          'imagePath': action.type == 'automation'
+              ? Assets.automation
+              : action.actionExecutor == 'delay'
+                  ? Assets.delay
+                  : matchingDevice?.getDefaultIcon(action.productType),
+          'device': matchingDevice,
+          'name': action.name,
+          'type': action.type,
+          'tag': matchingDevice?.deviceTags?.isNotEmpty ?? false
+              ? matchingDevice?.deviceTags![0].name ?? ''
+              : '',
+          'subSpace': matchingDevice?.deviceSubSpace?.subspaceName ?? '',
+        };
+        // }
 
         final cardData = deviceCards[deviceId]!;
         final uniqueCustomId = cardData['uniqueCustomId'].toString();
 
+        if (!updatedFunctions.containsKey(uniqueCustomId)) {
+          updatedFunctions[uniqueCustomId] = [];
+        }
+
         if (action.type == 'automation') {
-          if (!updatedFunctions.containsKey(uniqueCustomId)) {
-            updatedFunctions[uniqueCustomId] = [];
-          }
           updatedFunctions[uniqueCustomId]!.add(
             DeviceFunctionData(
               entityId: action.entityId,
@@ -701,13 +756,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             ),
           );
           // emit(state.copyWith(automationActionExecutor: action.actionExecutor));
-        } else if (action.executorProperty != null && action.actionExecutor != 'delay') {
-          if (!updatedFunctions.containsKey(uniqueCustomId)) {
-            updatedFunctions[uniqueCustomId] = [];
-          }
-          final functions = matchingDevice?.functions;
+        } else if (action.executorProperty != null &&
+            action.actionExecutor != 'delay') {
+          final functions = matchingDevice?.functions ?? [];
           final functionCode = action.executorProperty?.functionCode;
-          for (DeviceFunction function in functions ?? []) {
+          for (DeviceFunction function in functions) {
             if (function.code == functionCode) {
               updatedFunctions[uniqueCustomId]!.add(
                 DeviceFunctionData(
@@ -721,9 +774,6 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
             }
           }
         } else if (action.actionExecutor == 'delay') {
-          if (!updatedFunctions.containsKey(uniqueCustomId)) {
-            updatedFunctions[uniqueCustomId] = [];
-          }
           final delayFunction = DelayFunction(
             deviceId: action.entityId,
             deviceName: 'Delay',
@@ -773,7 +823,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onResetRoutineState(ResetRoutineState event, Emitter<RoutineState> emit) {
+  FutureOr<void> _onResetRoutineState(
+      ResetRoutineState event, Emitter<RoutineState> emit) {
     emit(state.copyWith(
         ifItems: [],
         thenItems: [],
@@ -799,16 +850,32 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
   FutureOr<void> _deleteScene(DeleteScene event, Emitter<RoutineState> emit) async {
     try {
+      final projectId = await ProjectManager.getProjectUUID() ?? '';
+
       emit(state.copyWith(isLoading: true));
       BuildContext context = NavigationService.navigatorKey.currentContext!;
       var spaceBloc = context.read<SpaceTreeBloc>();
       if (state.isTabToRun) {
         await SceneApi.deleteScene(
-            unitUuid: spaceBloc.state.selectedSpaces[0], sceneId: state.sceneId ?? '');
+            unitUuid: spaceBloc.state.selectedSpaces[0],
+            sceneId: state.sceneId ?? '');
       } else {
         await SceneApi.deleteAutomation(
-            unitUuid: spaceBloc.state.selectedSpaces[0], automationId: state.automationId ?? '');
+            unitUuid: spaceBloc.state.selectedSpaces[0],
+            automationId: state.automationId ?? '',
+            projectId: projectId);
       }
+      // var createRoutineBloc = context.read<CreateRoutineBloc>();
+      // if (state.isTabToRun) {
+      //   await SceneApi.deleteScene(
+      //       unitUuid: createRoutineBloc.selectedSpaceId,
+      //       sceneId: state.sceneId ?? '');
+      // } else {
+      //   await SceneApi.deleteAutomation(
+      //       projectId: projectId,
+      //       unitUuid: createRoutineBloc.selectedSpaceId,
+      //       automationId: state.automationId ?? '');
+      // }
 
       add(const LoadScenes());
       add(const LoadAutomation());
@@ -836,21 +903,31 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   //   }
   // }
 
-  FutureOr<void> _fetchDevices(FetchDevicesInRoutine event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _fetchDevices(
+      FetchDevicesInRoutine event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true));
     try {
       final projectUuid = await ProjectManager.getProjectUUID() ?? '';
-
       List<AllDevicesModel> devices = [];
-
       BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var createRoutineBloc = context.read<CreateRoutineBloc>();
       var spaceBloc = context.read<SpaceTreeBloc>();
-      for (var communityId in spaceBloc.state.selectedCommunities) {
-        List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
-        for (var spaceId in spacesList) {
-          devices
-              .addAll(await DevicesManagementApi().fetchDevices(communityId, spaceId, projectUuid));
+
+      if (createRoutineBloc.selectedSpaceId == '' &&
+          createRoutineBloc.selectedCommunityId == '') {
+        for (var communityId in spaceBloc.state.selectedCommunities) {
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+          for (var spaceId in spacesList) {
+            devices.addAll(await DevicesManagementApi()
+                .fetchDevices(communityId, spaceId, projectUuid));
+          }
         }
+      } else {
+        devices.addAll(await DevicesManagementApi().fetchDevices(
+            createRoutineBloc.selectedCommunityId,
+            createRoutineBloc.selectedSpaceId,
+            projectUuid));
       }
 
       emit(state.copyWith(isLoading: false, devices: devices));
@@ -859,7 +936,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onUpdateScene(UpdateScene event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _onUpdateScene(
+      UpdateScene event, Emitter<RoutineState> emit) async {
     try {
       // Check if first action is delay
       // if (_isFirstActionDelay(state.thenItems)) {
@@ -926,7 +1004,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         actions: actions,
       );
 
-      final result = await SceneApi.updateScene(createSceneModel, state.sceneId ?? '');
+      final result =
+          await SceneApi.updateScene(createSceneModel, state.sceneId ?? '');
       if (result['success']) {
         add(ResetRoutineState());
         add(const LoadScenes());
@@ -945,7 +1024,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     }
   }
 
-  FutureOr<void> _onUpdateAutomation(UpdateAutomation event, Emitter<RoutineState> emit) async {
+  FutureOr<void> _onUpdateAutomation(
+      UpdateAutomation event, Emitter<RoutineState> emit) async {
     try {
       if (state.routineName == null || state.routineName!.isEmpty) {
         emit(state.copyWith(
@@ -1041,10 +1121,10 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       }).toList();
 
       BuildContext context = NavigationService.navigatorKey.currentContext!;
-      var spaceBloc = context.read<SpaceTreeBloc>();
+      var spaceBloc = context.read<CreateRoutineBloc>();
 
       final createAutomationModel = CreateAutomationModel(
-        spaceUuid: spaceBloc.state.selectedSpaces[0],
+        spaceUuid: spaceBloc.selectedSpaceId,
         automationName: state.routineName ?? '',
         decisionExpr: state.selectedAutomationOperator,
         effectiveTime: EffectiveTime(
@@ -1055,14 +1135,14 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         conditions: conditions,
         actions: actions,
       );
-
-      final result =
-          await SceneApi.updateAutomation(createAutomationModel, state.automationId ?? '');
+      final projectId = await ProjectManager.getProjectUUID() ?? '';
+      final result = await SceneApi.updateAutomation(
+          createAutomationModel, state.automationId ?? '', projectId);
 
       if (result['success']) {
         add(ResetRoutineState());
-        add(LoadAutomation());
-        add(LoadScenes());
+        add(const LoadAutomation());
+        add(const LoadScenes());
       } else {
         emit(state.copyWith(
           isLoading: false,
@@ -1080,6 +1160,7 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   Future<void> _onGetAutomationDetails(
       GetAutomationDetails event, Emitter<RoutineState> emit) async {
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
       emit(state.copyWith(
         isLoading: true,
         isUpdate: true,
@@ -1090,7 +1171,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         thenItems: [],
       ));
 
-      final automationDetails = await SceneApi.getAutomationDetails(event.automationId);
+      final automationDetails =
+          await SceneApi.getAutomationDetails(event.automationId, projectUuid);
 
       final Map<String, Map<String, dynamic>> deviceIfCards = {};
       final Map<String, Map<String, dynamic>> deviceThenCards = {};
@@ -1108,21 +1190,25 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           ),
         );
 
-        final deviceId = condition.entityId;
+        final deviceId = const Uuid().v4();
 
-        if (!deviceIfCards.containsKey(deviceId)) {
-          deviceIfCards[deviceId] = {
-            'entityId': condition.entityId,
-            'deviceId': condition.entityId,
-            'uniqueCustomId': const Uuid().v4(),
-            'title': matchingDevice.name ?? 'Device',
-            'productType': condition.productType,
-            'functions': matchingDevice.functions,
-            'imagePath': matchingDevice.getDefaultIcon(condition.productType),
-            'device': matchingDevice,
-            'type': 'condition',
-          };
-        }
+        // if (!deviceIfCards.containsKey(deviceId)) {
+        deviceIfCards[deviceId] = {
+          'entityId': condition.entityId,
+          'deviceId': condition.entityId,
+          'uniqueCustomId': const Uuid().v4(),
+          'title': matchingDevice.name ?? 'Device',
+          'productType': condition.productType,
+          'functions': matchingDevice.functions,
+          'imagePath': matchingDevice.getDefaultIcon(condition.productType),
+          'device': matchingDevice,
+          'type': 'condition',
+          'tag': matchingDevice.deviceTags?.isNotEmpty ?? false
+              ? matchingDevice.deviceTags![0].name
+              : '',
+          'subSpace': matchingDevice.deviceSubSpace?.subspaceName ?? '',
+        };
+        // }
 
         final cardData = deviceIfCards[deviceId]!;
         final uniqueCustomId = cardData['uniqueCustomId'].toString();
@@ -1158,35 +1244,38 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           ),
         );
 
-        final deviceId =
-            action.actionExecutor == 'delay' ? '${action.entityId}_delay' : action.entityId;
+        final deviceId = const Uuid().v4();
 
-        if (!deviceThenCards.containsKey(deviceId)) {
-          deviceThenCards[deviceId] = {
-            'entityId': action.entityId,
-            'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
-            'uniqueCustomId': const Uuid().v4(),
-            'title': action.actionExecutor == 'delay'
-                ? 'Delay'
-                : (action.type == 'scene' || action.type == 'automation')
-                    ? action.name
-                    : (matchingDevice.name ?? 'Device'),
-            'productType': action.productType,
-            'functions': matchingDevice.functions,
-            'imagePath': action.actionExecutor == 'delay'
-                ? Assets.delay
-                : action.type == 'automation'
-                    ? Assets.automation
-                    : matchingDevice.getDefaultIcon(action.productType),
-            'device': matchingDevice,
-            'type': action.type == 'scene'
-                ? 'scene'
-                : action.type == 'automation'
-                    ? 'automation'
-                    : 'action',
-            'icon': action.icon ?? ''
-          };
-        }
+        // if (!deviceThenCards.containsKey(deviceId)) {
+        deviceThenCards[deviceId] = {
+          'entityId': action.entityId,
+          'deviceId': action.actionExecutor == 'delay' ? 'delay' : action.entityId,
+          'uniqueCustomId': const Uuid().v4(),
+          'title': action.actionExecutor == 'delay'
+              ? 'Delay'
+              : (action.type == 'scene' || action.type == 'automation')
+                  ? action.name
+                  : (matchingDevice.name ?? 'Device'),
+          'productType': action.productType,
+          'functions': matchingDevice.functions,
+          'imagePath': action.actionExecutor == 'delay'
+              ? Assets.delay
+              : action.type == 'automation'
+                  ? Assets.automation
+                  : matchingDevice.getDefaultIcon(action.productType),
+          'device': matchingDevice,
+          'type': action.type == 'scene'
+              ? 'scene'
+              : action.type == 'automation'
+                  ? 'automation'
+                  : 'action',
+          'icon': action.icon ?? '',
+          'tag': matchingDevice.deviceTags?.isNotEmpty ?? false
+              ? matchingDevice.deviceTags![0].name
+              : '',
+          'subSpace': matchingDevice.deviceSubSpace?.subspaceName ?? '',
+        };
+        // }
 
         final cardData = deviceThenCards[deviceId]!;
         final uniqueCustomId = cardData['uniqueCustomId'].toString();
@@ -1237,10 +1326,13 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         }
       }
 
-      final ifItems = deviceIfCards.values.where((card) => card['type'] == 'condition').toList();
+      final ifItems =
+          deviceIfCards.values.where((card) => card['type'] == 'condition').toList();
       final thenItems = deviceThenCards.values
           .where((card) =>
-              card['type'] == 'action' || card['type'] == 'automation' || card['type'] == 'scene')
+              card['type'] == 'action' ||
+              card['type'] == 'automation' ||
+              card['type'] == 'scene')
           .toList();
 
       emit(state.copyWith(
@@ -1261,4 +1353,75 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       ));
     }
   }
+
+  Future<void> _onSceneTrigger(
+      SceneTrigger event, Emitter<RoutineState> emit) async {
+    emit(state.copyWith(loadingSceneId: event.sceneId));
+
+    try {
+      final success = await SceneApi.triggerScene(event.sceneId!);
+
+      if (success) {
+        emit(state.copyWith(
+          loadingSceneId: null,
+          // Add success state if needed
+        ));
+        // Optional: Add delay to show success feedback
+        await Future.delayed(const Duration(milliseconds: 500));
+      } else {
+        emit(state.copyWith(
+          loadingSceneId: null,
+          errorMessage: 'Trigger failed',
+        ));
+      }
+    } catch (e) {
+      emit(state.copyWith(
+        loadingSceneId: null,
+        errorMessage: 'Trigger error: ${e.toString()}',
+      ));
+    }
+  }
+
+  Future<void> _onUpdateAutomationStatus(
+      UpdateAutomationStatus event, Emitter<RoutineState> emit) async {
+    // Create a new set safely
+    final currentLoadingIds = state.loadingAutomationIds;
+    final newLoadingIds = {...currentLoadingIds!}..add(event.automationId);
+
+    emit(state.copyWith(loadingAutomationIds: newLoadingIds));
+
+    try {
+      final projectId = await ProjectManager.getProjectUUID() ?? '';
+      final success = await SceneApi.updateAutomationStatus(
+          event.automationId, event.automationStatusUpdate, projectId);
+
+      if (success) {
+        final updatedAutomations = await SceneApi.getAutomationByUnitId(
+            event.automationStatusUpdate.spaceUuid, event.communityId, projectId);
+
+        // Remove from loading set safely
+        final updatedLoadingIds = {...state.loadingAutomationIds!}
+          ..remove(event.automationId);
+
+        emit(state.copyWith(
+          automations: updatedAutomations,
+          loadingAutomationIds: updatedLoadingIds,
+        ));
+      } else {
+        final updatedLoadingIds = {...state.loadingAutomationIds!}
+          ..remove(event.automationId);
+        emit(state.copyWith(
+          loadingAutomationIds: updatedLoadingIds,
+          errorMessage: 'Update failed',
+        ));
+      }
+    } catch (e) {
+      final updatedLoadingIds = {...state.loadingAutomationIds!}
+        ..remove(event.automationId);
+      emit(state.copyWith(
+        loadingAutomationIds: updatedLoadingIds,
+        errorMessage: 'Update error: ${e.toString()}',
+      ));
+    }
+  }
 }

lib/pages/routines/bloc/routine_bloc/routine_event.dart

@@ -210,3 +210,28 @@ class ResetRoutineState extends RoutineEvent {}
 class ClearFunctions extends RoutineEvent {}
 
 class ResetErrorMessage extends RoutineEvent {}
+
+
+
+
+class SceneTrigger extends RoutineEvent {
+  final String? sceneId;
+  final String? name;
+
+  const SceneTrigger({this.sceneId, this.name});
+
+  @override
+  List<Object> get props => [sceneId!,name!];
+}
+
+//updateAutomationStatus
+class UpdateAutomationStatus extends RoutineEvent {
+  final String automationId;
+  final AutomationStatusUpdate automationStatusUpdate;
+  final String communityId;
+
+  const UpdateAutomationStatus({required this.automationStatusUpdate, required this.automationId, required this.communityId});
+
+  @override
+  List<Object> get props => [automationStatusUpdate];
+}

lib/pages/routines/bloc/routine_bloc/routine_state.dart

@@ -1,6 +1,7 @@
 part of 'routine_bloc.dart';
 
 class RoutineState extends Equatable {
+  final String? loadingSceneId;
   final List<Map<String, dynamic>> ifItems;
   final List<Map<String, dynamic>> thenItems;
   final List<Map<String, String>> availableCards;
@@ -25,6 +26,7 @@ class RoutineState extends Equatable {
   // final String? automationActionExecutor;
   final bool routineTab;
   final bool createRoutineView;
+  final Set<String>? loadingAutomationIds; // Track loading automations
 
   const RoutineState(
       {this.ifItems = const [],
@@ -47,12 +49,16 @@ class RoutineState extends Equatable {
       this.sceneId,
       this.automationId,
       this.isUpdate,
+      this.loadingAutomationIds = const <String>{}, // Initialize with empty set
+      this.loadingSceneId,
       this.devices = const [],
       //  this.automationActionExecutor,
       this.routineTab = false,
       this.createRoutineView = false});
 
   RoutineState copyWith({
+    String? loadingSceneId,
+    Set<String>? loadingAutomationIds,
     List<Map<String, dynamic>>? ifItems,
     List<Map<String, dynamic>>? thenItems,
     List<ScenesModel>? scenes,
@@ -79,6 +85,8 @@ class RoutineState extends Equatable {
     bool? createRoutineView,
   }) {
     return RoutineState(
+        loadingSceneId: loadingSceneId,
+        loadingAutomationIds: loadingAutomationIds ?? this.loadingAutomationIds,
         ifItems: ifItems ?? this.ifItems,
         thenItems: thenItems ?? this.thenItems,
         scenes: scenes ?? this.scenes,
@@ -109,6 +117,7 @@ class RoutineState extends Equatable {
 
   @override
   List<Object?> get props => [
+        loadingAutomationIds,
         ifItems,
         thenItems,
         scenes,
@@ -134,3 +143,38 @@ class RoutineState extends Equatable {
         createRoutineView
       ];
 }
+
+class SceneInitial extends RoutineState {}
+
+class SceneLoading extends RoutineState {}
+
+class SceneLoaded extends RoutineState {
+  final List<ScenesModel>? scenesOrAutomation;
+  const SceneLoaded({this.scenesOrAutomation});
+  @override
+  List<Object?> get props => [
+        scenesOrAutomation,
+      ];
+}
+
+class SceneError extends RoutineState {
+  final String message;
+
+  const SceneError({required this.message});
+
+  @override
+  List<Object> get props => [message];
+}
+
+class SceneTriggerSuccess extends RoutineState {
+  final String sceneName;
+
+  const SceneTriggerSuccess(this.sceneName);
+
+  @override
+  List<Object> get props => [sceneName];
+}
+
+class UpdateAutomationStatusLoading extends RoutineState {
+  const UpdateAutomationStatusLoading();
+}

lib/pages/routines/create_new_routines/commu_dropdown.dart

@@ -0,0 +1,156 @@
+import 'package:dropdown_button2/dropdown_button2.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CommunityDropdown extends StatelessWidget {
+  final String? selectedValue;
+  final List<CommunityModel> communities;
+  final Function(String?) onChanged;
+  final TextEditingController _searchController = TextEditingController();
+
+  CommunityDropdown({
+    Key? key,
+    required this.selectedValue,
+    required this.onChanged,
+    required this.communities,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(10.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            "Community",
+            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                  fontWeight: FontWeight.w400,
+                  fontSize: 13,
+                  color: ColorsManager.blackColor,
+                ),
+          ),
+          const SizedBox(height: 8),
+          SizedBox(
+              child: Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: DropdownButton2<String>(
+              underline: const SizedBox(),
+              value: selectedValue,
+              items: communities.map((community) {
+                return DropdownMenuItem<String>(
+                  value: community.uuid,
+                  child: Text(
+                    '  ${community.name}',
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 1,
+                  ),
+                );
+              }).toList(),
+              onChanged: onChanged,
+              style: const TextStyle(color: Colors.black),
+              hint: Padding(
+                padding: const EdgeInsets.only(left: 10),
+                child: Text(
+                  "  Please Select",
+                  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: 5,
+                      child: Text(
+                        selectedValue != null
+                            ? "  ${communities.firstWhere((element) => element.uuid == selectedValue).name}"
+                            : '  Please Select',
+                        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[100],
+                          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(
+                  borderRadius: BorderRadius.circular(10),
+                ),
+              ),
+              dropdownSearchData: DropdownSearchData(
+                searchController: _searchController,
+                searchInnerWidgetHeight: 50,
+                searchInnerWidget: Container(
+                  height: 50,
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                  child: TextFormField(
+                    style: const TextStyle(color: Colors.black),
+                    controller: _searchController,
+                    decoration: InputDecoration(
+                      isDense: true,
+                      contentPadding: const EdgeInsets.symmetric(
+                        horizontal: 10,
+                        vertical: 12,
+                      ),
+                      hintText: 'Search for community...',
+                      border: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                    ),
+                  ),
+                ),
+                searchMatchFn: (item, searchValue) {
+                  final communityName =
+                      (item.child as Text).data?.toLowerCase() ?? '';
+                  return communityName
+                      .contains(searchValue.toLowerCase().trim());
+                },
+              ),
+              onMenuStateChange: (isOpen) {
+                if (!isOpen) {
+                  _searchController.clear();
+                }
+              },
+              menuItemStyleData: const MenuItemStyleData(
+                height: 40,
+              ),
+            ),
+          ))
+        ],
+      ),
+    );
+  }
+}

lib/pages/routines/create_new_routines/create_new_routines.dart

@@ -0,0 +1,181 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_state.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/create_new_routines/commu_dropdown.dart';
+import 'package:syncrow_web/pages/routines/create_new_routines/space_dropdown.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateNewRoutinesDialog extends StatefulWidget {
+  const CreateNewRoutinesDialog({super.key});
+
+  @override
+  State<CreateNewRoutinesDialog> createState() =>
+      _CreateNewRoutinesDialogState();
+}
+
+class _CreateNewRoutinesDialogState extends State<CreateNewRoutinesDialog> {
+  String? _selectedCommunity;
+  String? _selectedSpace;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+        create: (BuildContext context) =>
+            CreateRoutineBloc()..add(const FetchCommunityEvent()),
+        child: BlocBuilder<CreateRoutineBloc, CreateRoutineState>(
+          builder: (context, state) {
+            final _bloc = BlocProvider.of<CreateRoutineBloc>(context);
+            final spaces = _bloc.spacesOnlyWithDevices;
+            final isLoadingCommunities = state is CommunitiesLoadingState;
+            final isLoadingSpaces = state is SpaceWithDeviceLoadingState;
+            String spaceHint = 'Select a community first';
+            if (_selectedCommunity != null) {
+              if (isLoadingSpaces) {
+                spaceHint = 'Loading spaces...';
+              } else if (spaces.isEmpty) {
+                spaceHint = 'No spaces available';
+              } else {
+                spaceHint = 'Select Space';
+              }
+            }
+
+            return AlertDialog(
+              backgroundColor: Colors.white,
+              insetPadding: EdgeInsets.zero,
+              contentPadding: EdgeInsets.zero,
+              shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(12)),
+              title: Text(
+                'Create New Routines',
+                textAlign: TextAlign.center,
+                style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                      color: ColorsManager.primaryColor,
+                    ),
+              ),
+              content: Stack(
+                children: [
+                  Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      const Divider(),
+                      Padding(
+                        padding: const EdgeInsets.only(left: 15, right: 15),
+                        child: CommunityDropdown(
+                          communities: _bloc.communities..sort(
+                              (a, b) => a.name.toLowerCase().compareTo(
+                                    b.name.toLowerCase(),
+                                  ),
+                            ),
+                          selectedValue: _selectedCommunity,
+                          onChanged: (String? newValue) {
+                            setState(() {
+                              _selectedCommunity = newValue;
+                              _selectedSpace = null;
+                            });
+                            if (newValue != null) {
+                              _bloc.add(SpaceOnlyWithDevicesEvent(newValue));
+                            }
+                          },
+                        ),
+                      ),
+                      const SizedBox(height: 5),
+                      Padding(
+                        padding: const EdgeInsets.only(left: 15, right: 15),
+                        child: SpaceDropdown(
+                          hintMessage: spaceHint,
+                          spaces: spaces,
+                          selectedValue: _selectedSpace,
+                          onChanged: (String? newValue) {
+                            setState(() {
+                              _selectedSpace = newValue;
+                            });
+                          },
+                        ),
+                      ),
+                      const Divider(),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceAround,
+                        children: [
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              left: 20,
+                              right: 20,
+                            ),
+                            child: TextButton(
+                              onPressed: () {
+                                Navigator.of(context).pop();
+                              },
+                              child: Text(
+                                'Cancel',
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .bodyMedium!
+                                    .copyWith(
+                                      fontWeight: FontWeight.w400,
+                                      fontSize: 14,
+                                      color: ColorsManager.blackColor,
+                                    ),
+                              ),
+                            ),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.only(
+                              left: 20,
+                              right: 20,
+                            ),
+                            child: TextButton(
+                              onPressed: _selectedCommunity != null &&
+                                      _selectedSpace != null
+                                  ? () {
+                                      Navigator.of(context).pop({
+                                        'community': _selectedCommunity,
+                                        'space': _selectedSpace,
+                                      });
+                                    }
+                                  : null,
+                              child: Text(
+                                'Next',
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .bodyMedium!
+                                    .copyWith(
+                                      fontWeight: FontWeight.w400,
+                                      fontSize: 14,
+                                      color: _selectedCommunity != null &&
+                                              _selectedSpace != null
+                                          ? ColorsManager.blueColor
+                                          : Colors.blue.shade100,
+                                    ),
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 10),
+                    ],
+                  ),
+                  if (isLoadingCommunities)
+                    const SizedBox(
+                      height: 200,
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          Center(
+                            child: CircularProgressIndicator(
+                              color: ColorsManager.primaryColor,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                ],
+              ),
+            );
+          },
+        ));
+  }
+}

lib/pages/routines/create_new_routines/space_dropdown.dart

@@ -0,0 +1,147 @@
+import 'package:dropdown_button2/dropdown_button2.dart';
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+
+class SpaceDropdown extends StatelessWidget {
+  final List<SpaceModel> spaces;
+  final String? selectedValue;
+  final Function(String?)? onChanged;
+  final String hintMessage;
+
+  const SpaceDropdown({
+    Key? key,
+    required this.spaces,
+    required this.selectedValue,
+    required this.onChanged,
+    required this.hintMessage,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(10.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            "Space",
+            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+                  fontWeight: FontWeight.w400,
+                  fontSize: 13,
+                  color: ColorsManager.blackColor,
+                ),
+          ),
+          const SizedBox(height: 8),
+          SizedBox(
+            child: Container(
+              decoration: BoxDecoration(
+                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.start,
+                      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: 5,
+                        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(
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                ),
+                menuItemStyleData: const MenuItemStyleData(
+                  height: 60,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/routines/helper/dialog_helper/device_dialog_helper.dart

@@ -1,26 +1,32 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ac_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/ceiling_sensor_helper.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_presence_sensor.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/gateway/gateway_helper.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/one_gang_switch_dialog.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/three_gang_switch_dialog.dart';
 import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/two_gang_switch_dialog.dart';
-import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/wall_sensor/wall_presence_sensor.dart';
 
 class DeviceDialogHelper {
-  static Future<Map<String, dynamic>?> showDeviceDialog(
-    BuildContext context,
-    Map<String, dynamic> data, {
+  static Future<Map<String, dynamic>?> showDeviceDialog({
+    required BuildContext context,
+    required String dialogType,
+    required Map<String, dynamic> data,
     required bool removeComparetors,
   }) async {
     final functions = data['functions'] as List<DeviceFunction>;
 
     try {
       final result = await _getDialogForDeviceType(
-        context,
-        data['productType'],
-        data,
-        functions,
+        dialogType: dialogType,
+        context: context,
+        productType: data['productType'],
+        data: data,
+        functions: functions,
         removeComparetors: removeComparetors,
       );
 
@@ -34,32 +40,93 @@ class DeviceDialogHelper {
     return null;
   }
 
-  static Future<Map<String, dynamic>?> _getDialogForDeviceType(BuildContext context,
-      String productType, Map<String, dynamic> data, List<DeviceFunction> functions,
-      {required bool removeComparetors}) async {
+  static Future<Map<String, dynamic>?> _getDialogForDeviceType({
+    required String dialogType,
+    required BuildContext context,
+    required String productType,
+    required Map<String, dynamic> data,
+    required List<DeviceFunction> functions,
+    required bool removeComparetors,
+  }) async {
     final routineBloc = context.read<RoutineBloc>();
     final deviceSelectedFunctions =
         routineBloc.state.selectedFunctions[data['uniqueCustomId']] ?? [];
 
-    if (removeComparetors) {
-      //remove the current temp function in the 'if container'
-      functions.removeAt(3);
-    }
-
     switch (productType) {
       case 'AC':
-        return ACHelper.showACFunctionsDialog(context, functions, data['device'],
-            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+        return ACHelper.showACFunctionsDialog(
+          context: context,
+          functions: functions,
+          device: data['device'],
+          deviceSelectedFunctions: deviceSelectedFunctions,
+          uniqueCustomId: data['uniqueCustomId'],
+          removeComparetors: removeComparetors,
+          dialogType: dialogType,
+        );
 
       case '1G':
-        return OneGangSwitchHelper.showSwitchFunctionsDialog(context, functions, data['device'],
-            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+        return OneGangSwitchHelper.showSwitchFunctionsDialog(
+            dialogType: dialogType,
+            context: context,
+            functions: functions,
+            device: data['device'],
+            deviceSelectedFunctions: deviceSelectedFunctions,
+            uniqueCustomId: data['uniqueCustomId'],
+            removeComparetors: removeComparetors);
       case '2G':
-        return TwoGangSwitchHelper.showSwitchFunctionsDialog(context, functions, data['device'],
-            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+        return TwoGangSwitchHelper.showSwitchFunctionsDialog(
+            dialogType: dialogType,
+            context: context,
+            functions: functions,
+            device: data['device'],
+            deviceSelectedFunctions: deviceSelectedFunctions,
+            uniqueCustomId: data['uniqueCustomId'],
+            removeComparetors: removeComparetors);
       case '3G':
-        return ThreeGangSwitchHelper.showSwitchFunctionsDialog(context, functions, data['device'],
-            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+        return ThreeGangSwitchHelper.showSwitchFunctionsDialog(
+            dialogType: dialogType,
+            context: context,
+            functions: functions,
+            device: data['device'],
+            deviceSelectedFunctions: deviceSelectedFunctions,
+            uniqueCustomId: data['uniqueCustomId'],
+            removeComparetors: removeComparetors);
+      case 'WPS':
+        return WallPresenceSensor.showWPSFunctionsDialog(
+            dialogType: dialogType,
+            context: context,
+            functions: functions,
+            device: data['device'],
+            deviceSelectedFunctions: deviceSelectedFunctions,
+            uniqueCustomId: data['uniqueCustomId'],
+            removeComparetors: removeComparetors);
+      case 'CPS':
+        return CeilingSensorHelper.showCeilingSensorDialog(
+          context: context,
+          functions: functions,
+          device: data['device'],
+          deviceSelectedFunctions: deviceSelectedFunctions,
+          uniqueCustomId: data['uniqueCustomId'],
+          dialogType: dialogType,
+        );
+      case 'GW':
+        return GatewayHelper.showGatewayFunctionsDialog(
+          context: context,
+          functions: functions,
+          uniqueCustomId: data['uniqueCustomId'],
+          deviceSelectedFunctions: deviceSelectedFunctions,
+          device: data['device'],
+        );
+      case 'NCPS':
+        return FlushPresenceSensor.showFlushFunctionsDialog(
+          context: context,
+          functions: functions,
+          uniqueCustomId: data['uniqueCustomId'],
+          deviceSelectedFunctions: deviceSelectedFunctions,
+          dialogType: dialogType,
+          device: data['device'],
+        );
+
       default:
         return null;
     }

lib/pages/routines/helper/save_routine_helper.dart

@@ -4,7 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
@@ -14,13 +14,18 @@ class SaveRoutineHelper {
   static Future<void> showSaveRoutineDialog(BuildContext context) async {
     return showDialog<void>(
       context: context,
-      builder: (BuildContext context) {
+      builder: (context) {
         return BlocBuilder<RoutineBloc, RoutineState>(
           builder: (context, state) {
+            final selectedConditionLabel = state.selectedAutomationOperator == 'and'
+                ? 'All Conditions are met'
+                : 'Any Condition is met';
+
             return AlertDialog(
               contentPadding: EdgeInsets.zero,
               content: Container(
-                width: 600,
+                width: context.screenWidth * 0.5,
+                height: 500,
                 decoration: BoxDecoration(
                   color: Colors.white,
                   borderRadius: BorderRadius.circular(20),
@@ -28,146 +33,42 @@ class SaveRoutineHelper {
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
                   children: [
-                    DialogHeader('Create a scene: ${state.routineName ?? ""}'),
-                    Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                      child: Row(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          // Left side - IF
-                          Expanded(
-                            child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                const Text(
-                                  'IF:',
-                                  style: TextStyle(
-                                    fontSize: 16,
-                                  ),
-                                ),
-                                const SizedBox(height: 8),
-                                if (state.isTabToRun)
-                                  ListTile(
-                                    leading: SvgPicture.asset(
-                                      Assets.tabToRun,
-                                      width: 24,
-                                      height: 24,
-                                    ),
-                                    title: const Text('Tab to run'),
-                                  ),
-                                if (state.isAutomation)
-                                  ...state.ifItems.map((item) {
-                                    final functions =
-                                        state.selectedFunctions[item['uniqueCustomId']] ?? [];
-                                    return ListTile(
-                                      leading: SvgPicture.asset(
-                                        item['imagePath'],
-                                        width: 22,
-                                        height: 22,
-                                      ),
-                                      title:
-                                          Text(item['title'], style: const TextStyle(fontSize: 14)),
-                                      subtitle: Wrap(
-                                        children: functions
-                                            .map((f) => Text(
-                                                  '${f.operationName}: ${f.value}, ',
-                                                  style: const TextStyle(
-                                                      color: ColorsManager.grayColor, fontSize: 8),
-                                                  overflow: TextOverflow.ellipsis,
-                                                  maxLines: 3,
-                                                ))
-                                            .toList(),
-                                      ),
-                                    );
-                                  }),
-                              ],
-                            ),
+                    const SizedBox(height: 18),
+                    Text(
+                      'Create a scene: ${state.routineName ?? ""}',
+                      textAlign: TextAlign.center,
+                      style: Theme.of(context).textTheme.headlineMedium!.copyWith(
+                            color: ColorsManager.primaryColorWithOpacity,
+                            fontWeight: FontWeight.bold,
                           ),
-                          const SizedBox(width: 16),
-                          // Right side - THEN items
-
-                          Expanded(
-                            child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.start,
-                              children: [
-                                const Text(
-                                  'THEN:',
-                                  style: TextStyle(
-                                    fontSize: 16,
-                                  ),
-                                ),
-                                const SizedBox(height: 8),
-                                ...state.thenItems.map((item) {
-                                  final functions =
-                                      state.selectedFunctions[item['uniqueCustomId']] ?? [];
-                                  return ListTile(
-                                    leading: item['type'] == 'tap_to_run' || item['type'] == 'scene'
-                                        ? Image.memory(
-                                            base64Decode(item['icon']),
-                                            width: 22,
-                                            height: 22,
-                                          )
-                                        : SvgPicture.asset(
-                                            item['imagePath'],
-                                            width: 22,
-                                            height: 22,
-                                          ),
-                                    title: Text(
-                                      item['title'],
-                                      style: context.textTheme.bodySmall?.copyWith(
-                                        fontSize: 14,
-                                        color: ColorsManager.grayColor,
-                                      ),
-                                    ),
-                                    subtitle: Wrap(
-                                      children: functions
-                                          .map((f) => Text(
-                                                '${f.operationName}: ${f.value}, ',
-                                                style: context.textTheme.bodySmall?.copyWith(
-                                                    color: ColorsManager.grayColor, fontSize: 8),
-                                                overflow: TextOverflow.ellipsis,
-                                                maxLines: 3,
-                                              ))
-                                          .toList(),
-                                    ),
-                                  );
-                                }),
-                              ],
+                    ),
+                    const SizedBox(height: 18),
+                    _buildDivider(),
+                    _buildListsLabelRow(selectedConditionLabel),
+                    Expanded(
+                      child: Padding(
+                        padding: const EdgeInsetsDirectional.symmetric(
+                          horizontal: 16,
+                        ),
+                        child: Row(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          mainAxisSize: MainAxisSize.min,
+                          spacing: 24,
+                          children: [
+                            _buildIfConditions(state, context),
+                            Container(
+                              width: 1,
+                              color: ColorsManager.greyColor.withValues(alpha: 0.8),
                             ),
-                          ),
-                        ],
+                            _buildThenActions(state, context),
+                          ],
+                        ),
                       ),
                     ),
-                    // if (state.errorMessage != null || state.errorMessage!.isNotEmpty)
-                    //   Padding(
-                    //     padding: const EdgeInsets.all(8.0),
-                    //     child: Text(
-                    //       state.errorMessage!,
-                    //       style: const TextStyle(color: Colors.red),
-                    //     ),
-                    //   ),
-                    DialogFooter(
-                      onCancel: () => Navigator.pop(context),
-                      onConfirm: () async {
-                        if (state.isAutomation) {
-                          if (state.isUpdate ?? false) {
-                            context.read<RoutineBloc>().add(const UpdateAutomation());
-                          } else {
-                            context.read<RoutineBloc>().add(const CreateAutomationEvent());
-                          }
-                        } else {
-                          if (state.isUpdate ?? false) {
-                            context.read<RoutineBloc>().add(const UpdateScene());
-                          } else {
-                            context.read<RoutineBloc>().add(const CreateSceneEvent());
-                          }
-                        }
-                        // if (state.errorMessage == null || state.errorMessage!.isEmpty) {
-                        Navigator.pop(context);
-                        // }
-                      },
-                      isConfirmEnabled: true,
-                    ),
+                    _buildDivider(),
+                    const SizedBox(height: 8),
+                    _buildDialogFooter(context, state),
+                    const SizedBox(height: 8),
                   ],
                 ),
               ),
@@ -177,4 +78,245 @@ class SaveRoutineHelper {
       },
     );
   }
+
+  static Container _buildDivider() {
+    return Container(
+      height: 1,
+      width: double.infinity,
+      color: ColorsManager.greyColor,
+    );
+  }
+
+  static Widget _buildListsLabelRow(String selectedConditionLabel) {
+    const textStyle = TextStyle(
+      fontSize: 16,
+    );
+    return Container(
+      color: ColorsManager.backgroundColor.withValues(alpha: 0.5),
+      padding: const EdgeInsetsDirectional.all(20),
+      child: Row(
+        spacing: 16,
+        children: [
+          Expanded(child: Text('IF: $selectedConditionLabel', style: textStyle)),
+          const Expanded(child: Text('THEN:', style: textStyle)),
+        ],
+      ),
+    );
+  }
+
+  static Widget _buildDialogFooter(BuildContext context, RoutineState state) {
+    return Row(
+      spacing: 16,
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      children: [
+        DialogFooterButton(
+          text: 'Cancel',
+          onTap: () => Navigator.pop(context),
+        ),
+        DialogFooterButton(
+          text: 'Confirm',
+          onTap: () {
+            if (state.isAutomation) {
+              if (state.isUpdate ?? false) {
+                context.read<RoutineBloc>().add(const UpdateAutomation());
+              } else {
+                context.read<RoutineBloc>().add(const CreateAutomationEvent());
+              }
+            } else {
+              if (state.isUpdate ?? false) {
+                context.read<RoutineBloc>().add(const UpdateScene());
+              } else {
+                context.read<RoutineBloc>().add(const CreateSceneEvent());
+              }
+            }
+
+            Navigator.pop(context);
+          },
+          textColor: ColorsManager.primaryColorWithOpacity,
+        ),
+      ],
+    );
+  }
+
+  static Widget _buildThenActions(RoutineState state, BuildContext context) {
+    return Expanded(
+      child: ListView(
+        // shrinkWrap: true,
+        children: state.thenItems.map((item) {
+          final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
+          return functionRow(item, context, functions);
+        }).toList(),
+      ),
+    );
+  }
+
+  static Widget _buildIfConditions(RoutineState state, BuildContext context) {
+    return Expanded(
+      child: ListView(
+        // shrinkWrap: true,
+        children: [
+          if (state.isTabToRun)
+            ListTile(
+              leading: SvgPicture.asset(
+                Assets.tabToRun,
+                width: 24,
+                height: 24,
+              ),
+              title: const Text('Tab to run'),
+            ),
+          if (state.isAutomation)
+            ...state.ifItems.map((item) {
+              final functions =
+                  state.selectedFunctions[item['uniqueCustomId']] ?? [];
+              return functionRow(item, context, functions);
+            }),
+        ],
+      ),
+    );
+  }
+
+  static Widget functionRow(
+    dynamic item,
+    BuildContext context,
+    List<DeviceFunctionData> functions,
+  ) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 6),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.start,
+              spacing: 17,
+              children: [
+                Container(
+                  width: 22,
+                  height: 22,
+                  padding: const EdgeInsetsDirectional.all(4),
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: ColorsManager.textFieldGreyColor,
+                    border: Border.all(
+                      color: ColorsManager.neutralGray,
+                      width: 1.5,
+                    ),
+                  ),
+                  child: Center(
+                    child: item['type'] == 'tap_to_run' || item['type'] == 'scene'
+                        ? Image.memory(
+                            base64Decode(item['icon']),
+                            width: 12,
+                            height: 22,
+                            fit: BoxFit.scaleDown,
+                          )
+                        : SvgPicture.asset(
+                            item['imagePath'],
+                            width: 12,
+                            height: 12,
+                            fit: BoxFit.scaleDown,
+                          ),
+                  ),
+                ),
+                Flexible(
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    spacing: 2,
+                    children: [
+                      Text(
+                        item['title'],
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                        style: context.textTheme.bodySmall?.copyWith(
+                          fontSize: 15,
+                          color: ColorsManager.textPrimaryColor,
+                        ),
+                      ),
+                      Wrap(
+                        runSpacing: 16,
+                        spacing: 4,
+                        children: functions
+                            .map(
+                              (function) => Text(
+                                '${function.operationName}: ${function.value}',
+                                style: context.textTheme.bodySmall?.copyWith(
+                                  color: ColorsManager.grayColor,
+                                  fontSize: 8,
+                                ),
+                                overflow: TextOverflow.ellipsis,
+                                maxLines: 3,
+                              ),
+                            )
+                            .toList(),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            spacing: 2,
+            children: [
+              Visibility(
+                visible: item['tag'] != null && item['tag'] != '',
+                child: Row(
+                  spacing: 2,
+                  children: [
+                    SizedBox(
+                      width: 8,
+                      height: 8,
+                      child: SvgPicture.asset(
+                        Assets.deviceTagIcon,
+                      ),
+                    ),
+                    Text(
+                      item['tag'] ?? '',
+                      textAlign: TextAlign.center,
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: ColorsManager.lightGreyColor,
+                        fontSize: 9,
+                        fontWeight: FontWeight.w400,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Visibility(
+                visible: item['subSpace'] != null && item['subSpace'] != '',
+                child: Row(
+                  spacing: 2,
+                  children: [
+                    SizedBox(
+                      width: 8,
+                      height: 8,
+                      child: SvgPicture.asset(
+                        Assets.spaceLocationIcon,
+                      ),
+                    ),
+                    Text(
+                      item['subSpace'] ?? '',
+                      textAlign: TextAlign.center,
+                      overflow: TextOverflow.ellipsis,
+                      maxLines: 1,
+                      style: context.textTheme.bodySmall?.copyWith(
+                        color: ColorsManager.lightGreyColor,
+                        fontSize: 9,
+                        fontWeight: FontWeight.w400,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
 }

lib/pages/routines/models/ac/ac_function.dart

@@ -5,23 +5,28 @@ import 'package:syncrow_web/utils/constants/app_enum.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 abstract class ACFunction extends DeviceFunction<AcStatusModel> {
+  final String type;
+
   ACFunction({
     required super.deviceId,
     required super.deviceName,
     required super.code,
     required super.operationName,
     required super.icon,
+    required this.type,
   });
 
   List<ACOperationalValue> getOperationalValues();
 }
 
 class SwitchFunction extends ACFunction {
-  SwitchFunction({required super.deviceId, required super.deviceName})
+  SwitchFunction(
+      {required super.deviceId, required super.deviceName, required type})
       : super(
           code: 'switch',
           operationName: 'Power',
           icon: Assets.assetsAcPower,
+          type: type,
         );
 
   @override
@@ -40,11 +45,13 @@ class SwitchFunction extends ACFunction {
 }
 
 class ModeFunction extends ACFunction {
-  ModeFunction({required super.deviceId, required super.deviceName})
+  ModeFunction(
+      {required super.deviceId, required super.deviceName, required type})
       : super(
           code: 'mode',
           operationName: 'Mode',
           icon: Assets.assetsFreezing,
+          type: type,
         );
 
   @override
@@ -72,7 +79,8 @@ class TempSetFunction extends ACFunction {
   final int max;
   final int step;
 
-  TempSetFunction({required super.deviceId, required super.deviceName})
+  TempSetFunction(
+      {required super.deviceId, required super.deviceName, required type})
       : min = 160,
         max = 300,
         step = 1,
@@ -80,6 +88,7 @@ class TempSetFunction extends ACFunction {
           code: 'temp_set',
           operationName: 'Set Temperature',
           icon: Assets.assetsTempreture,
+          type: type,
         );
 
   @override
@@ -97,8 +106,10 @@ class TempSetFunction extends ACFunction {
 }
 
 class LevelFunction extends ACFunction {
-  LevelFunction({required super.deviceId, required super.deviceName})
+  LevelFunction(
+      {required super.deviceId, required super.deviceName, required type})
       : super(
+          type: type,
           code: 'level',
           operationName: 'Fan Speed',
           icon: Assets.assetsFanSpeed,
@@ -130,8 +141,10 @@ class LevelFunction extends ACFunction {
 }
 
 class ChildLockFunction extends ACFunction {
-  ChildLockFunction({required super.deviceId, required super.deviceName})
+  ChildLockFunction(
+      {required super.deviceId, required super.deviceName, required type})
       : super(
+          type: type,
           code: 'child_lock',
           operationName: 'Child Lock',
           icon: Assets.assetsChildLock,
@@ -157,11 +170,13 @@ class CurrentTempFunction extends ACFunction {
   final int max;
   final int step;
 
-  CurrentTempFunction({required super.deviceId, required super.deviceName})
+  CurrentTempFunction(
+      {required super.deviceId, required super.deviceName, required type})
       : min = -100,
         max = 990,
         step = 1,
         super(
+          type: type,
           code: 'temp_current',
           operationName: 'Current Temperature',
           icon: Assets.currentTemp,

lib/pages/routines/models/ceiling_presence_sensor_functions.dart

@@ -0,0 +1,889 @@
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class CpsOperationalValue {
+  final String icon;
+  final String description;
+  final dynamic value;
+
+  CpsOperationalValue({
+    required this.icon,
+    required this.description,
+    required this.value,
+  });
+}
+
+abstract class CpsFunctions extends DeviceFunction<CpsOperationalValue> {
+  CpsFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.code,
+    required super.operationName,
+    required super.icon,
+    required this.type,
+  });
+
+  final String type;
+
+  List<CpsOperationalValue> getOperationalValues();
+}
+
+final class CpsRadarSwitchFunction extends CpsFunctions {
+  CpsRadarSwitchFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'radar_switch',
+          operationName: 'Radar Switch',
+          icon: Assets.acPower,
+        );
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() => [
+        CpsOperationalValue(
+          icon: Assets.assetsAcPower,
+          description: "ON",
+          value: true,
+        ),
+        CpsOperationalValue(
+          icon: Assets.assetsAcPowerOFF,
+          description: "OFF",
+          value: false,
+        ),
+      ];
+}
+
+final class CpsSpatialParameterSwitchFunction extends CpsFunctions {
+  CpsSpatialParameterSwitchFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'space_para_switch',
+          operationName: 'Spatial Parameter Switch',
+          icon: Assets.acPower,
+        );
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() => [
+        CpsOperationalValue(
+          icon: Assets.assetsAcPower,
+          description: "ON",
+          value: true,
+        ),
+        CpsOperationalValue(
+          icon: Assets.assetsAcPowerOFF,
+          description: "OFF",
+          value: false,
+        ),
+      ];
+}
+
+final class CpsSensitivityFunction extends CpsFunctions {
+  CpsSensitivityFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 1,
+        max = 10,
+        step = 1,
+        super(
+          code: 'sensitivity',
+          operationName: 'Sensitivity',
+          icon: Assets.sensitivity,
+        );
+
+  final int min;
+  final int max;
+  final int step;
+
+  static const _images = <String>[
+    Assets.sensitivityFeature1,
+    Assets.sensitivityFeature1,
+    Assets.sensitivityFeature2,
+    Assets.sensitivityFeature3,
+    Assets.sensitivityFeature4,
+    Assets.sensitivityFeature5,
+    Assets.sensitivityFeature6,
+    Assets.sensitivityFeature7,
+    Assets.sensitivityFeature8,
+    Assets.sensitivityFeature9,
+    Assets.sensitivityFeature9,
+  ];
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final values = <CpsOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(
+        CpsOperationalValue(
+          icon: _images[value],
+          description: '$value',
+          value: value,
+        ),
+      );
+    }
+    return values;
+  }
+}
+
+final class CpsMovingSpeedFunction extends CpsFunctions {
+  CpsMovingSpeedFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 32,
+        step = 1,
+        super(
+          code: 'moving_speed',
+          operationName: 'Moving Speed',
+          icon: Assets.speedoMeter,
+        );
+
+  final int min;
+  final int max;
+  final int step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => CpsOperationalValue(
+        icon: Assets.speedoMeter,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+final class CpsSpatialStaticValueFunction extends CpsFunctions {
+  CpsSpatialStaticValueFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 255,
+        step = 1,
+        super(
+          code: 'space_static_val',
+          operationName: 'Spacial Static Value',
+          icon: Assets.spatialStaticValue,
+        );
+
+  final int min;
+  final int max;
+  final int step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => CpsOperationalValue(
+        icon: Assets.spatialStaticValue,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+final class CpsSpatialMotionValueFunction extends CpsFunctions {
+  CpsSpatialMotionValueFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 255,
+        step = 1,
+        super(
+          code: 'space_move_val',
+          operationName: 'Spatial Motion Value',
+          icon: Assets.spatialMotionValue,
+        );
+
+  final int min;
+  final int max;
+  final int step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => CpsOperationalValue(
+        icon: Assets.spatialMotionValue,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+final class CpsMaxDistanceOfDetectionFunction extends CpsFunctions {
+  CpsMaxDistanceOfDetectionFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 10.0,
+        step = 0.5,
+        super(
+          code: 'moving_max_dis',
+          operationName: 'Maximum Distance Of Detection',
+          icon: Assets.currentDistanceIcon,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.currentDistanceIcon,
+          description: '${value.toStringAsFixed(1)} M',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsMaxDistanceOfStaticDetectionFunction extends CpsFunctions {
+  CpsMaxDistanceOfStaticDetectionFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 10.0,
+        step = 0.5,
+        super(
+          code: 'static_max_dis',
+          operationName: 'Maximum Distance Of Static Detection',
+          icon: Assets.currentDistanceIcon,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.currentDistanceIcon,
+          description: '${value.toStringAsFixed(1)} M',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsDetectionRangeFunction extends CpsFunctions {
+  CpsDetectionRangeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 25.5,
+        step = 0.1,
+        super(
+          code: 'moving_range',
+          operationName: 'Detection Range',
+          icon: Assets.farDetection,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.farDetection,
+          description: '${value.toStringAsFixed(1)} M',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsDistanceOfMovingObjectsFunction extends CpsFunctions {
+  CpsDistanceOfMovingObjectsFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 25.5,
+        step = 0.1,
+        super(
+          code: 'presence_range',
+          operationName: 'Distance Of Moving Objects',
+          icon: Assets.currentDistanceIcon,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.currentDistanceIcon,
+          description: '${value.toStringAsFixed(1)} M',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsPresenceJudgementThrsholdFunction extends CpsFunctions {
+  CpsPresenceJudgementThrsholdFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 255,
+        step = 5,
+        super(
+          code: 'presence_reference',
+          operationName: 'Presence Judgement Threshold',
+          icon: Assets.presenceJudgementThrshold,
+        );
+
+  final int min;
+  final int max;
+  final int step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => CpsOperationalValue(
+        icon: Assets.presenceJudgementThrshold,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+final class CpsMotionAmplitudeTriggerThresholdFunction extends CpsFunctions {
+  CpsMotionAmplitudeTriggerThresholdFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 255,
+        step = 5,
+        super(
+          code: 'moving_reference',
+          operationName: 'Motion Amplitude Trigger Threshold',
+          icon: Assets.presenceJudgementThrshold,
+        );
+
+  final int min;
+  final int max;
+  final int step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => CpsOperationalValue(
+        icon: Assets.presenceJudgementThrshold,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+final class CpsPerpetualBoundaryFunction extends CpsFunctions {
+  CpsPerpetualBoundaryFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.00,
+        max = 5.00,
+        step = 0.50,
+        super(
+          code: 'perceptual_boundary',
+          operationName: 'Perpetual Boundary',
+          icon: Assets.boundary,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.boundary,
+          description: '${value.toStringAsFixed(1)}M',
+          value: value + 1200,
+        );
+      },
+    );
+  }
+}
+
+final class CpsMotionTriggerBoundaryFunction extends CpsFunctions {
+  CpsMotionTriggerBoundaryFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 5.0,
+        step = 0.5,
+        super(
+          code: 'moving_boundary',
+          operationName: 'Motion Trigger Boundary',
+          icon: Assets.motionMeter,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.motionMeter,
+          description: '${value.toStringAsFixed(1)} M',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsMotionTriggerTimeFunction extends CpsFunctions {
+  CpsMotionTriggerTimeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 2.0,
+        step = 0.1,
+        super(
+          code: 'moving_rigger_time',
+          operationName: 'Motion Trigger Time',
+          icon: Assets.motionMeter,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.motionMeter,
+          description: '${value.toStringAsFixed(3)} sec',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsMotionToStaticTimeFunction extends CpsFunctions {
+  CpsMotionToStaticTimeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 50.0,
+        step = 1.0,
+        super(
+          code: 'moving_static_time',
+          operationName: 'Motion To Static Time',
+          icon: Assets.motionMeter,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.motionMeter,
+          description: '${value.toStringAsFixed(0)} sec',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsEnteringNoBodyStateTimeFunction extends CpsFunctions {
+  CpsEnteringNoBodyStateTimeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0.0,
+        max = 300.0,
+        step = 5.0,
+        super(
+          code: 'none_body_time',
+          operationName: 'Entering Nobody State Time',
+          icon: Assets.motionMeter,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.motionMeter,
+          description: '${value.toStringAsFixed(0)} sec',
+          value: value,
+        );
+      },
+    );
+  }
+}
+
+final class CpsSelfTestResultFunctions extends CpsFunctions {
+  CpsSelfTestResultFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'checking_result',
+          operationName: 'Self-Test Result',
+          icon: Assets.selfTestResult,
+        );
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return [
+      CpsOperationalValue(
+        description: 'Self Testing',
+        icon: Assets.selfTestResult,
+        value: 'check',
+      ),
+      CpsOperationalValue(
+        description: 'Self Testing Success',
+        icon: Assets.selfTestingSuccess,
+        value: 'check_success',
+      ),
+      CpsOperationalValue(
+        description: 'Self Testing Failure',
+        icon: Assets.selfTestingFailure,
+        value: 'check_failure',
+      ),
+      CpsOperationalValue(
+        description: 'Self Testing Timeout',
+        icon: Assets.selfTestingTimeout,
+        value: 'check_timeout',
+      ),
+      CpsOperationalValue(
+        description: 'Communication Fault',
+        icon: Assets.communicationFault,
+        value: 'communication_fault',
+      ),
+      CpsOperationalValue(
+        description: 'Radar Fault',
+        icon: Assets.radarFault,
+        value: 'radar_fault',
+      ),
+    ];
+  }
+}
+
+final class CpsNobodyTimeFunction extends CpsFunctions {
+  CpsNobodyTimeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'nobody_time',
+          operationName: 'Entering Nobody Time',
+          icon: Assets.assetsNobodyTime,
+        );
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return [
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: 'None',
+        value: 'none',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '10sec',
+        value: '10s',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '30sec',
+        value: '30s',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '1min',
+        value: '1min',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '2min',
+        value: '2min',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '5min',
+        value: '5min',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '10min',
+        value: '10min',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '30min',
+        value: '30min',
+      ),
+      CpsOperationalValue(
+        icon: Assets.assetsNobodyTime,
+        description: '1hour',
+        value: '1hr',
+      ),
+    ];
+  }
+}
+
+final class CpsMovementFunctions extends CpsFunctions {
+  CpsMovementFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'body_movement',
+          operationName: 'Movement',
+          icon: Assets.motion,
+        );
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return [
+      CpsOperationalValue(
+        description: 'None',
+        icon: Assets.nobodyTime,
+        value: 'none',
+      ),
+      CpsOperationalValue(
+        description: 'Close To',
+        icon: Assets.closeToMotion,
+        value: 'close_to',
+      ),
+      CpsOperationalValue(
+        description: 'Far Away',
+        icon: Assets.farAwayMotion,
+        value: 'far_away',
+      ),
+    ];
+  }
+}
+
+final class CpsCustomModeFunction extends CpsFunctions {
+  CpsCustomModeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'custom_mode',
+          operationName: 'Custom Mode',
+          icon: Assets.cpsCustomMode,
+        );
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return [
+      CpsOperationalValue(
+        icon: Assets.cpsMode1,
+        description: 'Mode 1',
+        value: 'mode1',
+      ),
+      CpsOperationalValue(
+        icon: Assets.cpsMode2,
+        description: 'Mode 2',
+        value: 'mode2',
+      ),
+      CpsOperationalValue(
+        icon: Assets.cpsMode3,
+        description: 'Mode 3',
+        value: 'mode3',
+      ),
+      CpsOperationalValue(
+        icon: Assets.cpsMode4,
+        description: 'Mode 4',
+        value: 'mode4',
+      ),
+    ];
+  }
+}
+
+final class CpsSpaceTypeFunctions extends CpsFunctions {
+  CpsSpaceTypeFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'scene',
+          operationName: 'Space Type',
+          icon: Assets.spaceType,
+        );
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return [
+      CpsOperationalValue(
+        description: 'Office',
+        icon: Assets.office,
+        value: 'office',
+      ),
+      CpsOperationalValue(
+        description: 'Parlour',
+        icon: Assets.parlour,
+        value: 'parlour',
+      ),
+      CpsOperationalValue(
+        description: 'Bathroom',
+        icon: Assets.bathroom,
+        value: 'bathroom',
+      ),
+      CpsOperationalValue(
+        description: 'Bedroom',
+        icon: Assets.bedroom,
+        value: 'bedroom',
+      ),
+      CpsOperationalValue(
+        description: 'DIY',
+        icon: Assets.dyi,
+        value: 'dyi',
+      ),
+    ];
+  }
+}
+
+class CpsPresenceStatusFunctions extends CpsFunctions {
+  CpsPresenceStatusFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'presence_state',
+          operationName: 'Presence Status',
+          icon: Assets.presenceSensor,
+        );
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    return [
+      CpsOperationalValue(
+        icon: Assets.nobodyTime,
+        description: 'None',
+        value: 'none',
+      ),
+      CpsOperationalValue(
+        icon: Assets.presenceState,
+        description: 'Presence',
+        value: 'presence',
+      ),
+      CpsOperationalValue(
+        icon: Assets.motion,
+        description: 'Motion',
+        value: 'motion',
+      ),
+    ];
+  }
+}
+
+final class CpsSportsParaFunction extends CpsFunctions {
+  CpsSportsParaFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 1,
+        max = 100,
+        step = 1,
+        super(
+          code: 'sports_para',
+          operationName: 'Sports Para',
+          icon: Assets.sportsPara,
+        );
+
+  final double min;
+  final double max;
+  final double step;
+
+  @override
+  List<CpsOperationalValue> getOperationalValues() {
+    final count = ((max - min) / step).round() + 1;
+    return List.generate(
+      count,
+      (index) {
+        final value = (min + (index * step));
+        return CpsOperationalValue(
+          icon: Assets.motionMeter,
+          description: value.toStringAsFixed(0),
+          value: value,
+        );
+      },
+    );
+  }
+}

lib/pages/routines/models/flush/flush_functions.dart

@@ -0,0 +1,407 @@
+import 'package:syncrow_web/pages/device_managment/flush_mounted_presence_sensor/models/flush_mounted_presence_sensor_model.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/flush/flush_operational_value.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+abstract class FlushFunctions
+    extends DeviceFunction<FlushMountedPresenceSensorModel> {
+  final String type;
+
+  FlushFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.code,
+    required super.operationName,
+    required super.icon,
+    required this.type,
+  });
+
+  List<FlushOperationalValue> getOperationalValues();
+}
+
+class FlushPresenceDelayFunction extends FlushFunctions {
+  final int min;
+  FlushPresenceDelayFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        super(
+          code: FlushMountedPresenceSensorModel.codePresenceState,
+          operationName: 'Presence State',
+          icon: Assets.presenceStateIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    return [
+      FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: 'None',
+        value: "none",
+      ),
+      FlushOperationalValue(
+        icon: Assets.presenceStateIcon,
+        description: 'Presence',
+        value: 'presence',
+      ),
+    ];
+  }
+}
+
+class FlushSensiReduceFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  FlushSensiReduceFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 1,
+        max = 5,
+        step = 1,
+        super(
+          code: FlushMountedPresenceSensorModel.codeSensiReduce,
+          operationName: 'Sensitivity Reduction',
+          icon: Assets.motionlessDetectionSensitivityIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    return List.generate(
+        (max - min) ~/ step + 1,
+        (index) => FlushOperationalValue(
+              icon: Assets.currentDistanceIcon,
+              description: '${min + (index * step)}',
+              value: min + (index * step),
+            ));
+  }
+}
+
+class FlushNoneDelayFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final String unit;
+
+  FlushNoneDelayFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 10,
+        max = 10000,
+        unit = '秒',
+        super(
+          code: FlushMountedPresenceSensorModel.codeNoneDelay,
+          operationName: 'None Delay',
+          icon: Assets.nobodyTime,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    return [
+      FlushOperationalValue(
+        icon: icon,
+        description: 'Custom $unit',
+        value: null,
+      )
+    ];
+  }
+}
+
+class FlushIlluminanceFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  FlushIlluminanceFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 2000,
+        step = 0,
+        super(
+          code: FlushMountedPresenceSensorModel.codeIlluminance,
+          operationName: 'Illuminance',
+          icon: Assets.IlluminanceIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    List<FlushOperationalValue> values = [];
+    for (int lux = min; lux <= max; lux += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.IlluminanceIcon,
+        description: "$lux Lux",
+        value: lux,
+      ));
+    }
+    return values;
+  }
+}
+
+class FlushOccurDistReduceFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  FlushOccurDistReduceFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 100,
+        step = 1,
+        super(
+          code: FlushMountedPresenceSensorModel.codeOccurDistReduce,
+          operationName: 'Occurrence Distance Reduction',
+          icon: Assets.assetsTempreture,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    return List.generate(
+        (max - min) ~/ step + 1,
+        (index) => FlushOperationalValue(
+              icon: Assets.assetsTempreture,
+              description: '${min + (index * step)}',
+              value: min + (index * step),
+            ));
+  }
+}
+
+// ==== then functions ====
+class FlushSensitivityFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  FlushSensitivityFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 1,
+        max = 9,
+        step = 1,
+        super(
+          code: FlushMountedPresenceSensorModel.codeSensitivity,
+          operationName: 'Sensitivity',
+          icon: Assets.sensitivity,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    return List.generate(
+        (max - min) ~/ step + 1,
+        (index) => FlushOperationalValue(
+              icon: Assets.motionDetectionSensitivityValueIcon,
+              description: '${min + (index * step)}',
+              value: min + (index * step),
+            ));
+  }
+}
+
+class FlushNearDetectionFunction extends FlushFunctions {
+  final int min;
+  final double max;
+  final int step;
+  final String unit;
+
+  FlushNearDetectionFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 9.5,
+        step = 1,
+        unit = 'm',
+        super(
+          code: FlushMountedPresenceSensorModel.codeNearDetection,
+          operationName: 'Nearest Detect Dist',
+          icon: Assets.currentDistanceIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    final values = <FlushOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: '$value $unit',
+        value: value * 10,
+      ));
+    }
+    return values;
+  }
+}
+
+class FlushMaxDetectDistFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  FlushMaxDetectDistFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 75,
+        max = 600,
+        step = 75,
+        unit = 'cm',
+        super(
+          code: FlushMountedPresenceSensorModel.codeFarDetection,
+          operationName: 'Max Detect Dist',
+          icon: Assets.currentDistanceIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    final values = <FlushOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: '$value $unit',
+        value: value,
+      ));
+    }
+    return values;
+  }
+}
+
+class FlushTargetConfirmTimeFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  FlushTargetConfirmTimeFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 75,
+        max = 600,
+        step = 75,
+        unit = 'cm',
+        super(
+          code: FlushMountedPresenceSensorModel.codePresenceDelay,
+          operationName: 'Target Confirm Time',
+          icon: Assets.targetConfirmTimeIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    final values = <FlushOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: '$value $unit',
+        value: value,
+      ));
+    }
+    return values;
+  }
+}
+
+class FlushDisappeDelayFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  FlushDisappeDelayFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 75,
+        max = 600,
+        step = 75,
+        unit = 'cm',
+        super(
+          code: FlushMountedPresenceSensorModel.codeNoneDelay,
+          operationName: 'Disappe Delay',
+          icon: Assets.DisappeDelayIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    final values = <FlushOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: '$value $unit',
+        value: value,
+      ));
+    }
+    return values;
+  }
+}
+
+class FlushIndentLevelFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  FlushIndentLevelFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 75,
+        max = 600,
+        step = 75,
+        unit = 'cm',
+        super(
+          code: FlushMountedPresenceSensorModel.codeOccurDistReduce,
+          operationName: 'Indent Level',
+          icon: Assets.indentLevelIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    final values = <FlushOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: '$value $unit',
+        value: value,
+      ));
+    }
+    return values;
+  }
+}
+
+class FlushTriggerLevelFunction extends FlushFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  FlushTriggerLevelFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 75,
+        max = 600,
+        step = 75,
+        unit = 'cm',
+        super(
+          code: FlushMountedPresenceSensorModel.codeSensiReduce,
+          operationName: 'Trigger Level',
+          icon: Assets.triggerLevelIcon,
+        );
+
+  @override
+  List<FlushOperationalValue> getOperationalValues() {
+    final values = <FlushOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(FlushOperationalValue(
+        icon: Assets.nobodyTime,
+        description: '$value $unit',
+        value: value,
+      ));
+    }
+    return values;
+  }
+}

lib/pages/routines/models/flush/flush_operational_value.dart

@@ -0,0 +1,11 @@
+class FlushOperationalValue {
+  final String icon;
+  final String description;
+  final dynamic value;
+
+  FlushOperationalValue({
+    required this.icon,
+    required this.description,
+    required this.value,
+  });
+}

lib/pages/routines/models/gang_switches/three_gang_switch/three_gang_switch.dart

@@ -3,7 +3,7 @@ import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operation
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class ThreeGangSwitch1Function extends BaseSwitchFunction {
-  ThreeGangSwitch1Function({required super.deviceId, required super.deviceName})
+  ThreeGangSwitch1Function({required super.deviceId, required super.deviceName ,required type})
       : super(
           code: 'switch_1',
           operationName: 'Light 1 Switch',
@@ -26,7 +26,7 @@ class ThreeGangSwitch1Function extends BaseSwitchFunction {
 }
 
 class ThreeGangCountdown1Function extends BaseSwitchFunction {
-  ThreeGangCountdown1Function({required super.deviceId, required super.deviceName})
+  ThreeGangCountdown1Function({required super.deviceId, required super.deviceName ,required type})
       : super(
           code: 'countdown_1',
           operationName: 'Light 1 Countdown',
@@ -47,7 +47,7 @@ class ThreeGangCountdown1Function extends BaseSwitchFunction {
 }
 
 class ThreeGangSwitch2Function extends BaseSwitchFunction {
-  ThreeGangSwitch2Function({required super.deviceId, required super.deviceName})
+  ThreeGangSwitch2Function({required super.deviceId, required super.deviceName, required type})
       : super(
           code: 'switch_2',
           operationName: 'Light 2 Switch',
@@ -70,7 +70,7 @@ class ThreeGangSwitch2Function extends BaseSwitchFunction {
 }
 
 class ThreeGangCountdown2Function extends BaseSwitchFunction {
-  ThreeGangCountdown2Function({required super.deviceId, required super.deviceName})
+  ThreeGangCountdown2Function({required super.deviceId, required super.deviceName ,required type})
       : super(
           code: 'countdown_2',
           operationName: 'Light 2 Countdown',
@@ -91,7 +91,7 @@ class ThreeGangCountdown2Function extends BaseSwitchFunction {
 }
 
 class ThreeGangSwitch3Function extends BaseSwitchFunction {
-  ThreeGangSwitch3Function({required super.deviceId, required super.deviceName})
+  ThreeGangSwitch3Function({required super.deviceId, required super.deviceName ,required type})
       : super(
           code: 'switch_3',
           operationName: 'Light 3 Switch',
@@ -114,7 +114,7 @@ class ThreeGangSwitch3Function extends BaseSwitchFunction {
 }
 
 class ThreeGangCountdown3Function extends BaseSwitchFunction {
-  ThreeGangCountdown3Function({required super.deviceId, required super.deviceName})
+  ThreeGangCountdown3Function({required super.deviceId, required super.deviceName ,required type})
       : super(
           code: 'countdown_3',
           operationName: 'Light 3 Countdown',

lib/pages/routines/models/gateway.dart

@@ -0,0 +1,111 @@
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class GatewayOperationalValue {
+  final String icon;
+  final String description;
+  final dynamic value;
+
+  GatewayOperationalValue({
+    required this.icon,
+    required this.description,
+    required this.value,
+  });
+}
+
+abstract class GatewayFunctions extends DeviceFunction<GatewayOperationalValue> {
+  final String type;
+
+  GatewayFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.code,
+    required super.operationName,
+    required super.icon,
+    required this.type,
+  });
+
+  List<GatewayOperationalValue> getOperationalValues();
+}
+
+final class GatewaySwitchAlarmSound extends GatewayFunctions {
+  GatewaySwitchAlarmSound({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'switch_alarm_sound',
+          operationName: 'Switch Alarm Sound',
+          icon: Assets.activeBell,
+        );
+
+  @override
+  List<GatewayOperationalValue> getOperationalValues() => [
+        GatewayOperationalValue(
+          icon: Assets.assetsAcPower,
+          description: "ON",
+          value: true,
+        ),
+        GatewayOperationalValue(
+          icon: Assets.assetsAcPowerOFF,
+          description: "OFF",
+          value: false,
+        ),
+      ];
+}
+
+final class GatewayMasterState extends GatewayFunctions {
+  GatewayMasterState({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'master_state',
+          operationName: 'Master State',
+          icon: Assets.gear,
+        );
+
+  @override
+  List<GatewayOperationalValue> getOperationalValues() {
+    return [
+      GatewayOperationalValue(
+        icon: Assets.assetsAcPower,
+        description: "Normal",
+        value: 'normal',
+      ),
+      GatewayOperationalValue(
+        icon: Assets.assetsAcPowerOFF,
+        description: "Alarm",
+        value: 'alarm',
+      ),
+    ];
+  }
+}
+
+final class GatewayFactoryReset extends GatewayFunctions {
+  GatewayFactoryReset({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  }) : super(
+          code: 'factory_reset',
+          operationName: 'Factory Reset',
+          icon: Assets.factoryReset,
+        );
+
+  @override
+  List<GatewayOperationalValue> getOperationalValues() {
+    return [
+      GatewayOperationalValue(
+        icon: Assets.assetsAcPower,
+        description: "ON",
+        value: true,
+      ),
+      GatewayOperationalValue(
+        icon: Assets.assetsAcPowerOFF,
+        description: "OFF",
+        value: false,
+      ),
+    ];
+  }
+}

lib/pages/routines/models/routine_model.dart

@@ -9,6 +9,9 @@ class ScenesModel {
   final String status;
   final String type;
   final String? icon;
+  final String spaceName;
+  final String spaceId;
+  final String communityId;
 
   ScenesModel({
     required this.id,
@@ -16,6 +19,9 @@ class ScenesModel {
     required this.name,
     required this.status,
     required this.type,
+    required this.spaceName,
+    required this.spaceId,
+    required this.communityId,
     this.icon,
   });
 
@@ -41,6 +47,9 @@ class ScenesModel {
       name: json["name"] ?? '',
       status: json["status"] ?? '',
       type: json["type"] ?? '',
+      spaceName: json["spaceName"] ?? '',
+      spaceId: json["spaceId"] ?? '',
+      communityId: json["communityId"] ?? '',
       icon:
           isAutomation == true ? Assets.automation : (json["icon"] as String?),
     );
@@ -52,5 +61,8 @@ class ScenesModel {
         "name": name,
         "status": status,
         "type": type,
+        "spaceName": spaceName,
+        "spaceId": spaceId,
+        "communityId": communityId,
       };
 }

lib/pages/routines/models/wps/wps_functions.dart

@@ -0,0 +1,289 @@
+import 'package:syncrow_web/pages/device_managment/wall_sensor/model/wall_sensor_model.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/wps/wps_operational_value.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+abstract class WpsFunctions extends DeviceFunction<WallSensorModel> {
+  final String type; 
+
+  WpsFunctions({
+    required super.deviceId,
+    required super.deviceName,
+    required super.code,
+    required super.operationName,
+    required super.icon,
+    required this.type,
+  });
+
+  List<WpsOperationalValue> getOperationalValues();
+}
+
+// For far_detection (75-600cm in 75cm steps)
+class FarDetectionFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  FarDetectionFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : min = 75,
+        max = 600,
+        step = 75,
+        unit = 'cm',
+        super(
+          type: type,
+          code: 'far_detection',
+          operationName: 'Far Detection',
+          icon: Assets.farDetectionIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    final values = <WpsOperationalValue>[];
+    for (var value = min; value <= max; value += step) {
+      values.add(WpsOperationalValue(
+        icon: Assets.currentDistanceIcon,
+        description: '$value $unit',
+        value: value,
+      ));
+    }
+    return values;
+  }
+}
+
+// For presence_time (0-65535 minutes)
+class PresenceTimeFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final int step;
+  final String unit;
+
+  PresenceTimeFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : min = 0,
+        max = 65535,
+        step = 1,
+        unit = 'Min',
+        super(
+          type: type,
+          code: 'presence_time',
+          operationName: 'Presence Time',
+          icon: Assets.presenceTimeIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    return [
+      WpsOperationalValue(
+        icon: icon,
+        description: 'Custom $unit',
+        value: null,
+      )
+    ];
+  }
+}
+
+// For motion_sensitivity_value (1-5 levels)
+class MotionSensitivityFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  MotionSensitivityFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : min = 1,
+        max = 5,
+        step = 1,
+        super(
+          type: type,
+          code: 'motion_sensitivity_value',
+          operationName: 'Motion Detection Sensitivity',
+          icon: Assets.motionDetectionSensitivityIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => WpsOperationalValue(
+        icon: Assets.motionDetectionSensitivityValueIcon,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+class MotionLessSensitivityFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  MotionLessSensitivityFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : min = 1,
+        max = 5,
+        step = 1,
+        super(
+          type: type,
+          code: 'motionless_sensitivity',
+          operationName: 'Motionless Detection Sensitivity',
+          icon: Assets.motionlessDetectionSensitivityIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    return List.generate(
+      (max - min) ~/ step + 1,
+      (index) => WpsOperationalValue(
+        icon: Assets.currentDistanceIcon,
+        description: '${min + (index * step)}',
+        value: min + (index * step),
+      ),
+    );
+  }
+}
+
+class IndicatorFunction extends WpsFunctions {
+  IndicatorFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : super(
+          type: type,
+          code: 'indicator',
+          operationName: 'Indicator',
+          icon: Assets.IndicatorIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() => [
+        WpsOperationalValue(
+          icon: Assets.assetsAcPower,
+          description: "ON",
+          value: true,
+        ),
+        WpsOperationalValue(
+          icon: Assets.assetsAcPowerOFF,
+          description: "OFF",
+          value: false,
+        ),
+      ];
+}
+
+class NoOneTimeFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final String unit;
+
+  NoOneTimeFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : min = 10,
+        max = 10000,
+        unit = '秒',
+        super(
+          type: type,
+          code: 'no_one_time',
+          operationName: 'Nobody Time',
+          icon: Assets.nobodyTime,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    return [
+      WpsOperationalValue(
+        icon: icon,
+        description: 'Custom $unit',
+        value: null,
+      )
+    ];
+  }
+}
+
+class PresenceStateFunction extends WpsFunctions {
+  PresenceStateFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : super(
+          type: type,
+          code: 'presence_state',
+          operationName: 'Presence State',
+          icon: Assets.presenceStateIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() => [
+        WpsOperationalValue(
+          icon: Assets.assetsAcPower,
+          description: "None",
+          value: 'none',
+        ),
+        WpsOperationalValue(
+          icon: Assets.presenceStateIcon,
+          description: "Presence",
+          value: 'presence',
+        ),
+      ];
+}
+
+class CurrentDistanceFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  CurrentDistanceFunction(
+      {required super.deviceId, required super.deviceName, required type})
+      : min = 1,
+        max = 600,
+        step = 1,
+        super(
+          type: type,
+          code: 'dis_current',
+          operationName: 'Current Distance',
+          icon: Assets.currentDistanceIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    List<WpsOperationalValue> values = [];
+    for (int cm = min; cm <= max; cm += step) {
+      values.add(WpsOperationalValue(
+        icon: Assets.assetsTempreture,
+        description: "${cm}CM",
+
+        value: cm,
+      ));
+    }
+    return values;
+  }
+}
+
+class IlluminanceValueFunction extends WpsFunctions {
+  final int min;
+  final int max;
+  final int step;
+
+  IlluminanceValueFunction({
+    required super.deviceId,
+    required super.deviceName,
+    required super.type,
+  })  : min = 0,
+        max = 10000,
+        step = 10,
+        super(
+          code: 'illuminance_value',
+          operationName: 'Illuminance Value',
+          icon: Assets.IlluminanceIcon,
+        );
+
+  @override
+  List<WpsOperationalValue> getOperationalValues() {
+    List<WpsOperationalValue> values = [];
+    for (int lux = min; lux <= max; lux += step) {
+      values.add(WpsOperationalValue(
+        icon: Assets.IlluminanceIcon,
+        description: "$lux Lux",
+        value: lux,
+      ));
+    }
+    return values;
+  }
+}

lib/pages/routines/models/wps/wps_operational_value.dart

@@ -0,0 +1,11 @@
+class WpsOperationalValue {
+  final String icon;
+  final String description;
+  final dynamic value;
+
+  WpsOperationalValue({
+    required this.icon,
+    required this.description,
+    required this.value,
+  });
+}

lib/pages/routines/view/routines_view.dart

@@ -1,12 +1,15 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/create_routine_bloc/create_routine_event.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/create_new_routines/create_new_routines.dart';
 import 'package:syncrow_web/pages/routines/view/create_new_routine_view.dart';
 import 'package:syncrow_web/pages/routines/widgets/main_routine_view/fetch_routine_scenes_automation.dart';
 import 'package:syncrow_web/pages/routines/widgets/main_routine_view/routine_view_card.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class RoutinesView extends StatefulWidget {
   const RoutinesView({super.key});
@@ -16,10 +19,21 @@ class RoutinesView extends StatefulWidget {
 }
 
 class _RoutinesViewState extends State<RoutinesView> {
-  @override
-  void initState() {
-    super.initState();
-    // context.read<RoutineBloc>().add(FetchDevicesInRoutine());
+  void _handleRoutineCreation(BuildContext context) async {
+    final result = await showDialog<Map<String, dynamic>>(
+      context: context,
+      builder: (context) => const CreateNewRoutinesDialog(),
+    );
+
+    if (result == null) return;
+    final communityId = result['community'];
+    final spaceId = result['space'];
+    final bloc = BlocProvider.of<CreateRoutineBloc>(context);
+    final routineBloc = context.read<RoutineBloc>();
+    bloc.add(SaveCommunityIdAndSpaceIdEvent(
+        communityID: communityId, spaceID: spaceId));
+    await Future.delayed(const Duration(seconds: 1));
+    routineBloc.add(const CreateNewRoutineViewEvent(createRoutineView: true));
   }
 
   @override
@@ -29,73 +43,60 @@ class _RoutinesViewState extends State<RoutinesView> {
         if (state.createRoutineView) {
           return const CreateNewRoutineView();
         }
+
         return Row(
           children: [
-            Expanded(child: SpaceTreeView(
-              onSelect: () {
-                context.read<RoutineBloc>()
+            Expanded(
+              child: SpaceTreeView(
+                onSelect: () => context.read<RoutineBloc>()
                   ..add(const LoadScenes())
-                  ..add(const LoadAutomation());
-              },
-            )),
+                  ..add(const LoadAutomation())
+                  ..add(FetchDevicesInRoutine()),
+              ),
+            ),
             Expanded(
               flex: 4,
-              child: ListView(children: [
-                Container(
-                  padding: const EdgeInsets.all(16),
-                  height: MediaQuery.sizeOf(context).height,
-                  child: Column(
-                    mainAxisSize: MainAxisSize.min,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisAlignment: MainAxisAlignment.start,
-                    children: [
-                      Text(
-                        "Create New Routines",
-                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                              color: ColorsManager.grayColor,
-                              fontWeight: FontWeight.bold,
-                            ),
-                      ),
-                      const SizedBox(
-                        height: 10,
-                      ),
-                      RoutineViewCard(
-                        onTap: () {
-                          if (context.read<SpaceTreeBloc>().state.selectedCommunities.length == 1 &&
-                              context.read<SpaceTreeBloc>().state.selectedSpaces.length == 1) {
-                            context.read<RoutineBloc>().add(
-                                  (ResetRoutineState()),
-                                );
-                            BlocProvider.of<RoutineBloc>(context).add(
-                              const CreateNewRoutineViewEvent(createRoutineView: true),
-                            );
-                          } else {
-                            ScaffoldMessenger.of(context).showSnackBar(
-                              SnackBar(
-                                content: Text(
-                                    context.read<SpaceTreeBloc>().state.selectedSpaces.isEmpty
-                                        ? 'Please select a space'
-                                        : 'Please select only one space to proceed'),
-                              ),
-                            );
-                            // CustomSnackBar.redSnackBar(
-                            //     context.read<SpaceTreeBloc>().state.selectedSpaces.isEmpty
-                            //         ? 'Please select a space'
-                            //         : 'Please select only one space to proceed');
-                          }
-                        },
-                        icon: Icons.add,
-                        textString: '',
-                      ),
-                      const SizedBox(
-                        height: 15,
-                      ),
-                      const Expanded(child: FetchRoutineScenesAutomation()),
-                    ],
+              child: SizedBox(
+                height: context.screenHeight,
+                width: context.screenWidth,
+                child: SingleChildScrollView(
+                  padding: const EdgeInsetsDirectional.all(16),
+                  child: Padding(
+                    padding: const EdgeInsets.only(left: 20),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      spacing: 16,
+                      children: [
+                        Text(
+                          "Create New Routines",
+                          style:
+                              Theme.of(context).textTheme.titleLarge?.copyWith(
+                                    color: ColorsManager.grayColor,
+                                    fontWeight: FontWeight.bold,
+                                  ),
+                        ),
+                        RoutineViewCard(
+                          isLoading: false,
+                          onChanged: (v) {},
+                          status: '',
+                          spaceId: '',
+                          automationId: '',
+                          communityId: '',
+                          sceneId: '',
+                          cardType: '',
+                          spaceName: '',
+                          onTap: () => _handleRoutineCreation(context),
+                          icon: Icons.add,
+                          textString: '',
+                        ),
+                        const FetchRoutineScenesAutomation(),
+                      ],
+                    ),
                   ),
                 ),
-              ]),
-            ),
+              ),
+            )
           ],
         );
       },

lib/pages/routines/widgets/condition_toggle.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ConditionToggle extends StatelessWidget {
+  final String? currentCondition;
+  final void Function(String condition) onChanged;
+
+  const ConditionToggle({
+    required this.onChanged,
+    this.currentCondition,
+    super.key,
+  });
+
+  static const _conditions = ["<", "==", ">"];
+
+  @override
+  Widget build(BuildContext context) {
+    return ToggleButtons(
+      onPressed: (index) => onChanged(_conditions[index]),
+      borderRadius: const BorderRadius.all(Radius.circular(8)),
+      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
+      selectedColor: Colors.white,
+      fillColor: ColorsManager.primaryColorWithOpacity,
+      color: ColorsManager.primaryColorWithOpacity,
+      constraints: const BoxConstraints(
+        minHeight: 40.0,
+        minWidth: 40.0,
+      ),
+      isSelected: _conditions.map((c) => c == (currentCondition ?? "==")).toList(),
+      children: _conditions.map((c) => Text(c)).toList(),
+    );
+  }
+}

lib/pages/routines/widgets/dialog_footer.dart

@@ -8,12 +8,12 @@ class DialogFooter extends StatelessWidget {
   final int? dialogWidth;
 
   const DialogFooter({
-    Key? key,
+    super.key,
     required this.onCancel,
     required this.onConfirm,
     required this.isConfirmEnabled,
     this.dialogWidth,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -28,46 +28,52 @@ class DialogFooter extends StatelessWidget {
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: [
-          Expanded(
-            child: _buildFooterButton(
-              context,
-              'Cancel',
-              onCancel,
-            ),
+          DialogFooterButton(
+            text: 'Cancel',
+            onTap: onCancel,
           ),
           if (isConfirmEnabled) ...[
             Container(width: 1, height: 50, color: ColorsManager.greyColor),
-            Expanded(
-              child: _buildFooterButton(
-                context,
-                'Confirm',
-                onConfirm,
-              ),
+            DialogFooterButton(
+              text: 'Confirm',
+              onTap: onConfirm,
+              textColor: isConfirmEnabled
+                  ? ColorsManager.primaryColorWithOpacity
+                  : Colors.red,
             ),
           ],
         ],
       ),
     );
   }
+}
 
-  Widget _buildFooterButton(
-    BuildContext context,
-    String text,
-    VoidCallback? onTap,
-  ) {
-    return GestureDetector(
-      onTap: onTap,
-      child: SizedBox(
-        height: 50,
-        child: Center(
-          child: Text(
-            text,
-            style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                  color: text == 'Confirm'
-                      ? ColorsManager.primaryColorWithOpacity
-                      : ColorsManager.textGray,
-                ),
-          ),
+class DialogFooterButton extends StatelessWidget {
+  const DialogFooterButton({
+    required this.text,
+    required this.onTap,
+    this.textColor,
+    super.key,
+  });
+
+  final String text;
+  final VoidCallback? onTap;
+  final Color? textColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: TextButton(
+        style: TextButton.styleFrom(
+          foregroundColor: ColorsManager.primaryColorWithOpacity,
+          disabledForegroundColor: ColorsManager.primaryColor,
+        ),
+        onPressed: onTap,
+        child: Text(
+          text,
+          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                color: textColor ?? ColorsManager.textGray,
+              ),
         ),
       ),
     );

lib/pages/routines/widgets/dialog_header.dart

@@ -16,6 +16,7 @@ class DialogHeader extends StatelessWidget {
         ),
         Text(
           title,
+          textAlign: TextAlign.center,
           style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                 color: ColorsManager.primaryColorWithOpacity,
                 fontWeight: FontWeight.bold,

lib/pages/routines/widgets/dragable_card.dart

@@ -6,6 +6,7 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class DraggableCard extends StatelessWidget {
@@ -68,9 +69,9 @@ class DraggableCard extends StatelessWidget {
         Card(
           color: ColorsManager.whiteColors,
           child: Container(
-            padding: padding ?? const EdgeInsets.all(16),
+            padding: const EdgeInsets.all(16),
             width: 110,
-            height: deviceFunctions.isEmpty ? 123 : null,
+            height: deviceFunctions.isEmpty ? 160 : 180,
             child: Column(
               mainAxisSize: MainAxisSize.min,
               mainAxisAlignment: MainAxisAlignment.center,
@@ -78,6 +79,7 @@ class DraggableCard extends StatelessWidget {
               children: [
                 Column(
                   mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                     Container(
                       height: 50,
@@ -112,8 +114,69 @@ class DraggableCard extends StatelessWidget {
                         ),
                       ),
                     ),
+                    const SizedBox(
+                      height: 4,
+                    ),
+                    Visibility(
+                      visible: deviceData['tag'] != null && deviceData['tag'] != '',
+                      child: Row(
+                        spacing: 2,
+                        children: [
+                          SizedBox(
+                              width: 8, height: 8, child: SvgPicture.asset(Assets.deviceTagIcon)),
+                          Flexible(
+                            child: Text(
+                              deviceData['tag'] ?? '',
+                              textAlign: TextAlign.center,
+                              overflow: TextOverflow.ellipsis,
+                              maxLines: 1,
+                              style: context.textTheme.bodySmall?.copyWith(
+                                color: ColorsManager.lightGreyColor,
+                                fontSize: 9,
+                                fontWeight: FontWeight.w400,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Visibility(
+                      visible: deviceData['subSpace'] != null && deviceData['subSpace'] != '',
+                      child: const SizedBox(
+                        height: 4,
+                      ),
+                    ),
+                    Visibility(
+                      visible: deviceData['subSpace'] != null && deviceData['subSpace'] != '',
+                      child: Row(
+                        spacing: 2,
+                        children: [
+                          SizedBox(
+                              width: 8,
+                              height: 8,
+                              child: SvgPicture.asset(Assets.spaceLocationIcon)),
+                          Flexible(
+                            child: Text(
+                              deviceData['subSpace'] ?? '',
+                              textAlign: TextAlign.center,
+                              overflow: TextOverflow.ellipsis,
+                              maxLines: 1,
+                              style: context.textTheme.bodySmall?.copyWith(
+                                color: ColorsManager.lightGreyColor,
+                                fontSize: 9,
+                                fontWeight: FontWeight.w400,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
                   ],
                 ),
+                if (deviceFunctions.isNotEmpty)
+                  const SizedBox(
+                    height: 4,
+                  ),
                 if (deviceFunctions.isNotEmpty)
                   ...deviceFunctions.map((function) => Row(
                         mainAxisSize: MainAxisSize.min,
@@ -123,7 +186,7 @@ class DraggableCard extends StatelessWidget {
                               '${function.operationName}: ${_formatFunctionValue(function)}',
                               style: context.textTheme.bodySmall?.copyWith(
                                 fontSize: 9,
-                                color: ColorsManager.textGray,
+                                color: ColorsManager.lightGreyColor,
                                 height: 1.2,
                               ),
                               maxLines: 2,
@@ -162,7 +225,7 @@ class DraggableCard extends StatelessWidget {
     if (function.functionCode == 'temp_set' || function.functionCode == 'temp_current') {
       return '${(function.value / 10).toStringAsFixed(0)}°C';
     } else if (function.functionCode.contains('countdown')) {
-      final seconds = function.value.toInt();
+      final seconds = function.value?.toInt() ?? 0;
       if (seconds >= 3600) {
         final hours = (seconds / 3600).floor();
         final remainingMinutes = ((seconds % 3600) / 60).floor();

lib/pages/routines/widgets/function_slider.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+class FunctionSlider extends StatelessWidget {
+  final dynamic initialValue;
+  final (double min, double max) range;
+  final void Function(double value) onChanged;
+  final double dividendOfRange;
+
+  const FunctionSlider({
+    required this.onChanged,
+    required this.initialValue,
+    required this.range,
+    required this.dividendOfRange,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final (min, max) = range;
+    final bool isValidRange = max > min;
+    final double value = initialValue is int
+        ? (initialValue as int).toDouble()
+        : (initialValue as double);
+
+    final int? divisions = isValidRange ? ((max - min) / dividendOfRange).round() : null;
+
+    return Slider(
+      value: value.clamp(min, max),
+      min: min,
+      max: max,
+      divisions: divisions,
+      onChanged: isValidRange ? onChanged : null,
+    );
+  }
+}

lib/pages/routines/widgets/if_container.dart

@@ -17,81 +17,102 @@ class IfContainer extends StatelessWidget {
       builder: (context, state) {
         return DragTarget<Map<String, dynamic>>(
           builder: (context, candidateData, rejectedData) {
-            return Container(
-              width: double.infinity,
-              padding: const EdgeInsets.all(16),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      const Text('IF', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
-                      if (state.isAutomation && state.ifItems.isNotEmpty)
-                        AutomationOperatorSelector(
-                            selectedOperator: state.selectedAutomationOperator),
-                    ],
-                  ),
-                  const SizedBox(height: 16),
-                  if (state.isTabToRun)
-                    const Row(
-                      mainAxisAlignment: MainAxisAlignment.center,
+            return SingleChildScrollView(
+              child: Container(
+                width: double.infinity,
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
-                        DraggableCard(
-                          imagePath: Assets.tabToRun,
-                          title: 'Tab to run',
-                          deviceData: {},
-                        ),
+                        const Text('IF',
+                            style: TextStyle(
+                                fontSize: 18, fontWeight: FontWeight.bold)),
+                        if (state.isAutomation && state.ifItems.isNotEmpty)
+                          AutomationOperatorSelector(
+                              selectedOperator:
+                                  state.selectedAutomationOperator),
                       ],
                     ),
-                  if (!state.isTabToRun)
-                    Wrap(
-                      spacing: 8,
-                      runSpacing: 8,
-                      children: List.generate(
-                          state.ifItems.length,
-                          (index) => GestureDetector(
-                                onTap: () async {
-                                  if (!state.isTabToRun) {
-                                    final result = await DeviceDialogHelper.showDeviceDialog(
-                                        context, state.ifItems[index],
-                                        removeComparetors: false);
+                    const SizedBox(height: 16),
+                    if (state.isTabToRun)
+                      const Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          DraggableCard(
+                            imagePath: Assets.tabToRun,
+                            title: 'Tab to run',
+                            deviceData: {},
+                          ),
+                        ],
+                      ),
+                    if (!state.isTabToRun)
+                      Wrap(
+                        spacing: 8,
+                        runSpacing: 8,
+                        children: List.generate(
+                            state.ifItems.length,
+                            (index) => GestureDetector(
+                                  onTap: () async {
+                                    if (!state.isTabToRun) {
+                                      final result = await DeviceDialogHelper
+                                          .showDeviceDialog(
+                                              context: context,
+                                              data: state.ifItems[index],
+                                              removeComparetors: false,
+                                              dialogType: "IF");
 
-                                    if (result != null) {
-                                      context
-                                          .read<RoutineBloc>()
-                                          .add(AddToIfContainer(state.ifItems[index], false));
-                                    } else if (!['AC', '1G', '2G', '3G']
-                                        .contains(state.ifItems[index]['productType'])) {
-                                      context
-                                          .read<RoutineBloc>()
-                                          .add(AddToIfContainer(state.ifItems[index], false));
+                                      if (result != null) {
+                                        context.read<RoutineBloc>().add(
+                                            AddToIfContainer(
+                                                state.ifItems[index], false));
+                                      } else if (![
+                                        'AC',
+                                        '1G',
+                                        '2G',
+                                        '3G',
+                                        'WPS',
+                                        'GW',
+                                        'CPS',
+                                        'NCPS'
+                                      ].contains(state.ifItems[index]
+                                          ['productType'])) {
+                                      
+                                        context.read<RoutineBloc>().add(
+                                            AddToIfContainer(
+                                                state.ifItems[index], false));
+                                      }
                                     }
-                                  }
-                                },
-                                child: DraggableCard(
-                                  imagePath: state.ifItems[index]['imagePath'] ?? '',
-                                  title: state.ifItems[index]['title'] ?? '',
-                                  deviceData: state.ifItems[index],
-                                  padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
-                                  isFromThen: false,
-                                  isFromIf: true,
-                                  onRemove: () {
-                                    context.read<RoutineBloc>().add(RemoveDragCard(
-                                        index: index,
-                                        isFromThen: false,
-                                        key: state.ifItems[index]['uniqueCustomId']));
                                   },
-                                ),
-                              )),
-                    ),
-                ],
+                                  child: DraggableCard(
+                                    imagePath:
+                                        state.ifItems[index]['imagePath'] ?? '',
+                                    title: state.ifItems[index]['title'] ?? '',
+                                    deviceData: state.ifItems[index],
+                                    padding: const EdgeInsets.symmetric(
+                                        horizontal: 4, vertical: 8),
+                                    isFromThen: false,
+                                    isFromIf: true,
+                                    onRemove: () {
+                                      context.read<RoutineBloc>().add(
+                                          RemoveDragCard(
+                                              index: index,
+                                              isFromThen: false,
+                                              key: state.ifItems[index]
+                                                  ['uniqueCustomId']));
+                                    },
+                                  ),
+                                )),
+                      ),
+                  ],
+                ),
               ),
             );
           },
           onAcceptWithDetails: (data) async {
             final uniqueCustomId = const Uuid().v4();
-
             final mutableData = Map<String, dynamic>.from(data.data);
             mutableData['uniqueCustomId'] = uniqueCustomId;
 
@@ -101,15 +122,25 @@ class IfContainer extends StatelessWidget {
 
             if (!state.isTabToRun) {
               if (mutableData['deviceId'] == 'tab_to_run') {
-                context.read<RoutineBloc>().add(AddToIfContainer(mutableData, true));
+                context
+                    .read<RoutineBloc>()
+                    .add(AddToIfContainer(mutableData, true));
               } else {
-                final result = await DeviceDialogHelper.showDeviceDialog(context, mutableData,
+                final result = await DeviceDialogHelper.showDeviceDialog(
+                    dialogType: 'IF',
+                    context: context,
+                    data: mutableData,
                     removeComparetors: false);
 
                 if (result != null) {
-                  context.read<RoutineBloc>().add(AddToIfContainer(mutableData, false));
-                } else if (!['AC', '1G', '2G', '3G'].contains(mutableData['productType'])) {
-                  context.read<RoutineBloc>().add(AddToIfContainer(mutableData, false));
+                  context
+                      .read<RoutineBloc>()
+                      .add(AddToIfContainer(mutableData, false));
+                } else if (!['AC', '1G', '2G', '3G', 'WPS', 'GW', 'CPS', 'NCPS']
+                    .contains(mutableData['productType'])) {
+                  context
+                      .read<RoutineBloc>()
+                      .add(AddToIfContainer(mutableData, false));
                 }
               }
             }
@@ -155,7 +186,9 @@ class AutomationOperatorSelector extends StatelessWidget {
               ),
             ),
             onPressed: () {
-              context.read<RoutineBloc>().add(const ChangeAutomationOperator(operator: 'or'));
+              context
+                  .read<RoutineBloc>()
+                  .add(const ChangeAutomationOperator(operator: 'or'));
             },
           ),
           Container(
@@ -181,7 +214,9 @@ class AutomationOperatorSelector extends StatelessWidget {
               ),
             ),
             onPressed: () {
-              context.read<RoutineBloc>().add(const ChangeAutomationOperator(operator: 'and'));
+              context
+                  .read<RoutineBloc>()
+                  .add(const ChangeAutomationOperator(operator: 'and'));
             },
           ),
         ],

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

@@ -1,139 +1,195 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/automation_scene_trigger_bloc/automation_status_update.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/widgets/main_routine_view/routine_view_card.dart';
-import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class FetchRoutineScenesAutomation extends StatefulWidget {
-  const FetchRoutineScenesAutomation({super.key});
-
-  @override
-  State<FetchRoutineScenesAutomation> createState() => _FetchRoutineScenesState();
-}
-
-class _FetchRoutineScenesState extends State<FetchRoutineScenesAutomation>
+class FetchRoutineScenesAutomation extends StatelessWidget
     with HelperResponsiveLayout {
-  @override
-  void initState() {
-    super.initState();
-  }
+  const FetchRoutineScenesAutomation({super.key});
 
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<RoutineBloc, RoutineState>(
       builder: (context, state) {
-        return state.isLoading
-            ? const Center(
-                child: CircularProgressIndicator(),
-              )
-            : Padding(
-                padding: const EdgeInsets.symmetric(vertical: 16.0),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Text(
-                      "Scenes (Tab to Run)",
-                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                            color: ColorsManager.grayColor,
-                            fontWeight: FontWeight.bold,
-                          ),
-                    ),
-                    const SizedBox(height: 10),
-                    if (state.scenes.isEmpty)
-                      Text(
-                        "No scenes found",
-                        style: context.textTheme.bodyMedium?.copyWith(
-                          color: ColorsManager.grayColor,
-                        ),
-                      ),
-                    if (state.scenes.isNotEmpty)
-                      ConstrainedBox(
-                        constraints: BoxConstraints(
-                            maxHeight: isSmallScreenSize(context) ? 160 : 170,
-                            maxWidth: MediaQuery.sizeOf(context).width * 0.7),
-                        child: ListView.builder(
-                          scrollDirection: Axis.horizontal,
-                          itemCount: state.scenes.length,
-                          itemBuilder: (context, index) => Padding(
-                            padding: EdgeInsets.only(
-                              right: isSmallScreenSize(context) ? 4.0 : 8.0,
-                            ),
-                            child: RoutineViewCard(
-                              onTap: () {
-                                BlocProvider.of<RoutineBloc>(context).add(
-                                  const CreateNewRoutineViewEvent(createRoutineView: true),
-                                );
-                                context.read<RoutineBloc>().add(
-                                      GetSceneDetails(
-                                        sceneId: state.scenes[index].id,
-                                        isTabToRun: true,
-                                        isUpdate: true,
-                                      ),
-                                    );
-                              },
-                              textString: state.scenes[index].name,
-                              icon: state.scenes[index].icon ?? Assets.logoHorizontal,
-                              isFromScenes: true,
-                              iconInBytes: state.scenes[index].iconInBytes,
-                            ),
-                          ),
-                        ),
-                      ),
-                    const SizedBox(height: 15),
-                    Text(
-                      "Automations",
-                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                            color: ColorsManager.grayColor,
-                            fontWeight: FontWeight.bold,
-                          ),
-                    ),
-                    const SizedBox(height: 10),
-                    if (state.automations.isEmpty)
-                      Text(
-                        "No automations found",
-                        style: context.textTheme.bodyMedium?.copyWith(
-                          color: ColorsManager.grayColor,
-                        ),
-                      ),
-                    if (state.automations.isNotEmpty)
-                      ConstrainedBox(
-                        constraints: BoxConstraints(
-                            maxHeight: isSmallScreenSize(context) ? 160 : 170,
-                            maxWidth: MediaQuery.sizeOf(context).width * 0.7),
-                        child: ListView.builder(
-                          scrollDirection: Axis.horizontal,
-                          itemCount: state.automations.length,
-                          itemBuilder: (context, index) => Padding(
-                            padding: EdgeInsets.only(
-                              right: isSmallScreenSize(context) ? 4.0 : 8.0,
-                            ),
-                            child: RoutineViewCard(
-                              onTap: () {
-                                BlocProvider.of<RoutineBloc>(context).add(
-                                  const CreateNewRoutineViewEvent(createRoutineView: true),
-                                );
-                                context.read<RoutineBloc>().add(
-                                      GetAutomationDetails(
-                                          automationId: state.automations[index].id,
-                                          isAutomation: true,
-                                          isUpdate: true),
-                                    );
-                              },
-                              textString: state.automations[index].name,
-                              icon: state.automations[index].icon ?? Assets.automation,
-                            ),
-                          ),
-                        ),
-                      ),
-                  ],
+        if (state.isLoading)
+          return const Center(child: CircularProgressIndicator());
+
+        return SingleChildScrollView(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                _buildListTitle(context, "Scenes (Tab to Run)"),
+                const SizedBox(height: 10),
+                Visibility(
+                  visible: state.scenes.isNotEmpty,
+                  replacement: _buildEmptyState(context, "No scenes found"),
+                  child: SizedBox(
+                    height: 200,
+                    child: _buildScenes(state),
+                  ),
                 ),
-              );
+                const SizedBox(height: 10),
+                _buildListTitle(context, "Automations"),
+                const SizedBox(height: 3),
+                Visibility(
+                  visible: state.automations.isNotEmpty,
+                  replacement:
+                      _buildEmptyState(context, "No automations found"),
+                  child: SizedBox(
+                    height: 200,
+                    child: _buildAutomations(state),
+                  ),
+                )
+              ],
+            ),
+          ),
+        );
       },
     );
   }
+
+  Widget _buildAutomations(RoutineState state) {
+    return ListView.builder(
+      scrollDirection: Axis.horizontal,
+      itemCount: state.automations.length,
+      itemBuilder: (context, index) {
+        final isLoading =
+            state.automations.contains(state.automations[index].id);
+
+        return Column(
+          children: [
+            Padding(
+              padding: EdgeInsets.only(
+                right: isSmallScreenSize(context) ? 4.0 : 8.0,
+              ),
+              child: RoutineViewCard(
+                isLoading: isLoading,
+                onChanged: (v) {
+                  context.read<RoutineBloc>().add(
+                        UpdateAutomationStatus(
+                          automationId: state.automations[index].id,
+                          automationStatusUpdate: AutomationStatusUpdate(
+                            spaceUuid: state.automations[index].spaceId,
+                            isEnable: v,
+                          ),
+                          communityId: state.automations[index].communityId,
+                        ),
+                      );
+                },
+                status: state.automations[index].status,
+                communityId: '',
+                spaceId: state.automations[index].spaceId,
+                sceneId: '',
+                automationId: state.automations[index].id,
+                cardType: 'automations',
+                spaceName: state.automations[index].spaceName,
+                onTap: () {
+                  BlocProvider.of<RoutineBloc>(context).add(
+                    const CreateNewRoutineViewEvent(
+                      createRoutineView: true,
+                    ),
+                  );
+                  context.read<RoutineBloc>().add(
+                        GetAutomationDetails(
+                          automationId: state.automations[index].id,
+                          isAutomation: true,
+                          isUpdate: true,
+                        ),
+                      );
+                },
+                textString: state.automations[index].name,
+                icon: state.automations[index].icon ?? Assets.automation,
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildScenes(RoutineState state) {
+    return ListView.builder(
+        scrollDirection: Axis.horizontal,
+        itemCount: state.scenes.length,
+        itemBuilder: (context, index) {
+          final scene = state.scenes[index];
+          final isLoading = state.loadingSceneId == scene.id;
+
+          return Padding(
+            padding: EdgeInsets.only(
+              right: isSmallScreenSize(context) ? 4.0 : 8.0,
+            ),
+            child: Column(
+              children: [
+                RoutineViewCard(
+                  isLoading: isLoading,
+                  sceneOnTap: () {
+                    context.read<RoutineBloc>().add(
+                          SceneTrigger(
+                            sceneId: scene.id,
+                            name: scene.name,
+                          ),
+                        );
+                  },
+                  status: state.scenes[index].status,
+                  communityId: state.scenes[index].communityId,
+                  spaceId: state.scenes[index].spaceId,
+                  sceneId: state.scenes[index].sceneTuyaId!,
+                  automationId: state.scenes[index].id,
+                  cardType: 'scenes',
+                  spaceName: state.scenes[index].spaceName,
+                  onTap: () {
+                    BlocProvider.of<RoutineBloc>(context).add(
+                      const CreateNewRoutineViewEvent(
+                        createRoutineView: true,
+                      ),
+                    );
+                    context.read<RoutineBloc>().add(
+                          GetSceneDetails(
+                            sceneId: state.scenes[index].id,
+                            isTabToRun: true,
+                            isUpdate: true,
+                          ),
+                        );
+                  },
+                  textString: state.scenes[index].name,
+                  icon: state.scenes[index].icon ?? Assets.logoHorizontal,
+                  isFromScenes: true,
+                  iconInBytes: state.scenes[index].iconInBytes,
+                ),
+              ],
+            ),
+          );
+        });
+  }
+
+  Widget _buildListTitle(BuildContext context, String title) {
+    return Text(
+      title,
+      style: Theme.of(context).textTheme.titleLarge?.copyWith(
+            color: ColorsManager.grayColor,
+            fontWeight: FontWeight.bold,
+          ),
+    );
+  }
+
+  Widget _buildEmptyState(BuildContext context, String title) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 100),
+      child: Text(
+        title,
+        style: context.textTheme.bodyMedium?.copyWith(
+          color: ColorsManager.grayColor,
+        ),
+      ),
+    );
+  }
 }

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

@@ -1,3 +1,6 @@
+import 'dart:async';
+
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -6,37 +9,77 @@ 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 RoutineViewCard extends StatelessWidget with HelperResponsiveLayout {
+class RoutineViewCard extends StatefulWidget with HelperResponsiveLayout {
   const RoutineViewCard({
     super.key,
     required this.onTap,
+    this.sceneOnTap,
     required this.icon,
     required this.textString,
+    required this.spaceName,
+    required this.cardType,
     this.isFromScenes,
     this.iconInBytes,
+    required this.sceneId,
+    required this.communityId,
+    required this.spaceId,
+    required this.automationId,
+    required this.status,
+    this.onChanged,
+    required this.isLoading,
   });
 
   final Function() onTap;
+  final Function()? sceneOnTap;
+
   final dynamic icon;
   final String textString;
+  final String spaceName;
+  final String cardType;
+  final String sceneId;
+  final String spaceId;
+  final String status;
+  final bool isLoading;
+
+  final void Function(bool)? onChanged;
+  final String automationId;
+  final String communityId;
+
   final bool? isFromScenes;
   final Uint8List? iconInBytes;
 
+  @override
+  State<RoutineViewCard> createState() => _RoutineViewCardState();
+}
+
+class _RoutineViewCardState extends State<RoutineViewCard> {
+  bool _showTemporaryCheck = false;
+
+  void _handleSceneTap() {
+    if (!_showTemporaryCheck) {
+      setState(() => _showTemporaryCheck = true);
+      widget.sceneOnTap?.call();
+      Timer(const Duration(seconds: 3), () {
+        if (mounted) setState(() => _showTemporaryCheck = false);
+      });
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    final double cardWidth = isSmallScreenSize(context)
+    final double cardWidth = widget.isSmallScreenSize(context)
         ? 120
-        : isMediumScreenSize(context)
+        : widget.isMediumScreenSize(context)
             ? 135
             : 150;
 
-    final double cardHeight = isSmallScreenSize(context) ? 160 : 170;
+    final double cardHeight = widget.isSmallScreenSize(context) ? 190 : 200;
 
-    final double iconSize = isSmallScreenSize(context)
-        ? 50
-        : isMediumScreenSize(context)
-            ? 60
-            : 70;
+    final double iconSize = widget.isSmallScreenSize(context)
+        ? 70
+        : widget.isMediumScreenSize(context)
+            ? 80
+            : 90;
 
     return ConstrainedBox(
       constraints: BoxConstraints(
@@ -50,70 +93,145 @@ class RoutineViewCard extends StatelessWidget with HelperResponsiveLayout {
         ),
         color: ColorsManager.whiteColors,
         child: InkWell(
-          onTap: onTap,
           borderRadius: BorderRadius.circular(10),
           child: Padding(
             padding: const EdgeInsets.all(8.0),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
               children: [
-                Center(
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: ColorsManager.graysColor,
-                      borderRadius: BorderRadius.circular(120),
-                      border: Border.all(
-                        color: ColorsManager.greyColor,
-                        width: 2.0,
+                widget.cardType != ''
+                    ? Row(
+                        mainAxisAlignment: MainAxisAlignment.end,
+                        children: [
+                          if (widget.isFromScenes ?? false)
+                            InkWell(
+                              onTap: _handleSceneTap,
+                              child: Image.asset(
+                                _showTemporaryCheck
+                                    ? Assets.scenesPlayIcon
+                                    : Assets.scenesPlayIconCheck,
+                                fit: BoxFit.contain,
+                              ),
+                            )
+                          else if (widget.isLoading)
+                            const SizedBox(
+                              width: 49,
+                              height: 20,
+                              child: Center(
+                                child: SizedBox(
+                                  width: 16,
+                                  height: 16,
+                                  child: CircularProgressIndicator(strokeWidth: 2),
+                                ),
+                              ),
+                            )
+                          else
+                            CupertinoSwitch(
+                              activeTrackColor: ColorsManager.primaryColor,
+                              value: widget.status == 'enable',
+                              onChanged: widget.onChanged,
+                            )
+                        ],
+                      )
+                    : const SizedBox(),
+                Column(
+                  children: [
+                    Center(
+                      child: InkWell(
+                        customBorder: const CircleBorder(),
+                        onTap: widget.onTap,
+                        child: Container(
+                          decoration: BoxDecoration(
+                            color: ColorsManager.graysColor,
+                            shape: BoxShape.circle,
+                            border: Border.all(
+                              color: ColorsManager.greyColor,
+                              width: 2.0,
+                            ),
+                          ),
+                          height: iconSize,
+                          width: iconSize,
+                          child: (widget.isFromScenes ?? false)
+                              ? (widget.iconInBytes != null &&
+                                      widget.iconInBytes?.isNotEmpty == true)
+                                  ? Image.memory(
+                                      widget.iconInBytes!,
+                                      height: iconSize,
+                                      width: iconSize,
+                                      fit: BoxFit.contain,
+                                      errorBuilder: (context, error, stackTrace) =>
+                                          Image.asset(
+                                        Assets.logo,
+                                        height: iconSize,
+                                        width: iconSize,
+                                        fit: BoxFit.contain,
+                                      ),
+                                    )
+                                  : Image.asset(
+                                      Assets.logo,
+                                      height: iconSize,
+                                      width: iconSize,
+                                      fit: BoxFit.contain,
+                                    )
+                              : (widget.icon is String &&
+                                      widget.icon.endsWith('.svg'))
+                                  ? SvgPicture.asset(
+                                      height: iconSize,
+                                      width: iconSize,
+                                      widget.icon,
+                                      fit: BoxFit.contain,
+                                    )
+                                  : Icon(
+                                      widget.icon,
+                                      color: ColorsManager.dialogBlueTitle,
+                                      size: widget.isSmallScreenSize(context)
+                                          ? 30
+                                          : 40,
+                                    ),
+                        ),
                       ),
                     ),
-                    height: iconSize,
-                    width: iconSize,
-                    child: (isFromScenes ?? false)
-                        ? (iconInBytes != null && iconInBytes?.isNotEmpty == true)
-                            ? Image.memory(
-                                iconInBytes!,
-                                height: iconSize,
-                                width: iconSize,
-                                fit: BoxFit.contain,
-                                errorBuilder: (context, error, stackTrace) => Image.asset(
-                                  Assets.logo,
-                                  height: iconSize,
-                                  width: iconSize,
+                    const SizedBox(height: 8),
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 3),
+                      child: Column(
+                        children: [
+                          Text(
+                            widget.textString,
+                            textAlign: TextAlign.center,
+                            overflow: TextOverflow.ellipsis,
+                            maxLines: 1,
+                            style: context.textTheme.bodySmall?.copyWith(
+                              color: ColorsManager.blackColor,
+                              fontSize: widget.isSmallScreenSize(context) ? 10 : 12,
+                            ),
+                          ),
+                          if (widget.spaceName != '')
+                            Row(
+                              crossAxisAlignment: CrossAxisAlignment.center,
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                SvgPicture.asset(
+                                  Assets.spaceLocationIcon,
                                   fit: BoxFit.contain,
                                 ),
-                              )
-                            : Image.asset(
-                                Assets.logo,
-                                height: iconSize,
-                                width: iconSize,
-                                fit: BoxFit.contain,
-                              )
-                        : (icon is String && icon.endsWith('.svg'))
-                            ? SvgPicture.asset(
-                                icon,
-                                fit: BoxFit.contain,
-                              )
-                            : Icon(
-                                icon,
-                                color: ColorsManager.dialogBlueTitle,
-                                size: isSmallScreenSize(context) ? 30 : 40,
-                              ),
-                  ),
-                ),
-                const SizedBox(height: 8),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 3),
-                  child: Text(
-                    textString,
-                    textAlign: TextAlign.center,
-                    overflow: TextOverflow.ellipsis,
-                    maxLines: 2,
-                    style: context.textTheme.bodySmall?.copyWith(
-                      color: ColorsManager.blackColor,
-                      fontSize: isSmallScreenSize(context) ? 10 : 12,
+                                Text(
+                                  widget.spaceName,
+                                  textAlign: TextAlign.center,
+                                  overflow: TextOverflow.ellipsis,
+                                  maxLines: 1,
+                                  style: context.textTheme.bodySmall?.copyWith(
+                                    color: ColorsManager.blackColor,
+                                    fontSize:
+                                        widget.isSmallScreenSize(context) ? 10 : 12,
+                                  ),
+                                ),
+                              ],
+                            ),
+                        ],
+                      ),
                     ),
-                  ),
+                  ],
                 ),
               ],
             ),

lib/pages/routines/widgets/routine_devices.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/widgets/dragable_card.dart';
 
@@ -18,6 +17,17 @@ class _RoutineDevicesState extends State<RoutineDevices> {
     context.read<RoutineBloc>().add(FetchDevicesInRoutine());
   }
 
+  static const _allowedProductTypes = {
+    'AC',
+    '1G',
+    '2G',
+    '3G',
+    'WPS',
+    'GW',
+    'CPS',
+    'NCPS'
+  };
+
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<RoutineBloc, RoutineState>(
@@ -32,12 +42,9 @@ class _RoutineDevicesState extends State<RoutineDevices> {
           }
         });
 
-        List<AllDevicesModel> deviceList = state.devices
-            .where((device) =>
-                device.productType == 'AC' ||
-                device.productType == '1G' ||
-                device.productType == '2G' ||
-                device.productType == '3G')
+        final deviceList = state.devices
+            .where(
+                (device) => _allowedProductTypes.contains(device.productType))
             .toList();
 
         return Wrap(
@@ -45,35 +52,36 @@ class _RoutineDevicesState extends State<RoutineDevices> {
           runSpacing: 10,
           children: deviceList.asMap().entries.map((entry) {
             final device = entry.value;
+
+            final deviceData = {
+              'device': device,
+              'imagePath': device.getDefaultIcon(device.productType),
+              'title': device.name ?? '',
+              'deviceId': device.uuid,
+              'productType': device.productType,
+              'functions': device.functions,
+              'uniqueCustomId': '',
+              'tag': device.deviceTags!.isNotEmpty
+                  ? device.deviceTags![0].name
+                  : '',
+              'subSpace': device.deviceSubSpace?.subspaceName ?? '',
+            };
+
             if (state.searchText != null && state.searchText!.isNotEmpty) {
-              return device.name!.toLowerCase().contains(state.searchText!.toLowerCase())
+              return device.name!
+                      .toLowerCase()
+                      .contains(state.searchText!.toLowerCase())
                   ? DraggableCard(
-                      imagePath: device.getDefaultIcon(device.productType),
-                      title: device.name ?? '',
-                      deviceData: {
-                        'device': device,
-                        'imagePath': device.getDefaultIcon(device.productType),
-                        'title': device.name ?? '',
-                        'deviceId': device.uuid,
-                        'productType': device.productType,
-                        'functions': device.functions,
-                        'uniqueCustomId': '',
-                      },
+                      imagePath: deviceData['imagePath'] as String,
+                      title: deviceData['title'] as String,
+                      deviceData: deviceData,
                     )
-                  : Container();
+                  : const SizedBox.shrink();
             } else {
               return DraggableCard(
-                imagePath: device.getDefaultIcon(device.productType),
-                title: device.name ?? '',
-                deviceData: {
-                  'device': device,
-                  'imagePath': device.getDefaultIcon(device.productType),
-                  'title': device.name ?? '',
-                  'deviceId': device.uuid,
-                  'productType': device.productType,
-                  'functions': device.functions,
-                  'uniqueCustomId': '',
-                },
+                imagePath: deviceData['imagePath'] as String,
+                title: deviceData['title'] as String,
+                deviceData: deviceData,
               );
             }
           }).toList(),

lib/pages/routines/widgets/routine_dialog_function_list_tile.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class RoutineDialogFunctionListTile extends StatelessWidget {
+  const RoutineDialogFunctionListTile({
+    super.key,
+    required this.iconPath,
+    required this.operationName,
+    required this.onTap,
+  });
+
+  final String iconPath;
+  final String operationName;
+  final void Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: SvgPicture.asset(
+        iconPath,
+        width: 24,
+        height: 24,
+        placeholderBuilder: (context) => const SizedBox(
+          width: 24,
+          height: 24,
+        ),
+      ),
+      title: Text(
+        operationName,
+        style: context.textTheme.bodyMedium,
+      ),
+      trailing: const Icon(
+        Icons.arrow_forward_ios,
+        size: 16,
+        color: ColorsManager.textGray,
+      ),
+      onTap: onTap,
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialog_selection_list_tile.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class RoutineDialogSelectionListTile extends StatelessWidget {
+  const RoutineDialogSelectionListTile({
+    required this.iconPath,
+    required this.description,
+    required this.isSelected,
+    required this.onTap,
+    super.key,
+  });
+
+  final bool isSelected;
+  final String iconPath;
+  final String description;
+  final void Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: SvgPicture.asset(
+        iconPath,
+        width: 24,
+        height: 24,
+        placeholderBuilder: (context) => Container(
+          width: 24,
+          height: 24,
+          color: Colors.transparent,
+        ),
+      ),
+      title: Text(
+        description,
+        style: context.textTheme.bodyMedium,
+      ),
+      trailing: Icon(
+        isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
+        size: 24,
+        color: isSelected
+            ? ColorsManager.primaryColorWithOpacity
+            : ColorsManager.textGray,
+      ),
+      onTap: onTap,
+    );
+  }
+}

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

@@ -1,41 +1,51 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/models/ac/ac_function.dart';
 import 'package:syncrow_web/pages/routines/models/ac/ac_operational_value.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 
 class ACHelper {
-  static Future<Map<String, dynamic>?> showACFunctionsDialog(
-    BuildContext context,
-    List<DeviceFunction> functions,
-    AllDevicesModel? device,
-    List<DeviceFunctionData>? deviceSelectedFunctions,
-    String uniqueCustomId,
-    bool? removeComparetors,
-  ) async {
-    List<ACFunction> acFunctions = functions.whereType<ACFunction>().toList();
+  static Future<Map<String, dynamic>?> showACFunctionsDialog({
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    required AllDevicesModel? device,
+    required List<DeviceFunctionData>? deviceSelectedFunctions,
+    required String uniqueCustomId,
+    required bool? removeComparetors,
+    required String dialogType,
+  }) async {
+    List<ACFunction> acFunctions =
+        functions.whereType<ACFunction>().where((function) {
+      if (dialogType == 'THEN') {
+        return function.type == 'THEN' || function.type == 'BOTH';
+      }
+      return function.type == 'IF' || function.type == 'BOTH';
+    }).toList();
+    // List<ACFunction> acFunctions = functions.whereType<ACFunction>().toList();
 
     return showDialog<Map<String, dynamic>?>(
       context: context,
       builder: (BuildContext context) {
         return BlocProvider(
-          create: (_) => FunctionBloc()..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
+          create: (_) => FunctionBloc()
+            ..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
           child: AlertDialog(
             contentPadding: EdgeInsets.zero,
             content: BlocBuilder<FunctionBloc, FunctionBlocState>(
               builder: (context, state) {
                 final selectedFunction = state.selectedFunction;
                 final selectedOperationName = state.selectedOperationName;
-                final selectedFunctionData =
-                    state.addedFunctions.firstWhere((f) => f.functionCode == selectedFunction,
+                final selectedFunctionData = state.addedFunctions
+                    .firstWhere((f) => f.functionCode == selectedFunction,
                         orElse: () => DeviceFunctionData(
                               entityId: '',
                               functionCode: selectedFunction ?? '',
@@ -65,11 +75,26 @@ class ACHelper {
                               child: _buildFunctionsList(
                                 context: context,
                                 acFunctions: acFunctions,
-                                onFunctionSelected: (functionCode, operationName) =>
-                                    context.read<FunctionBloc>().add(SelectFunction(
-                                          functionCode: functionCode,
-                                          operationName: operationName,
-                                        )),
+                                device: device,
+                                onFunctionSelected: (functionCode, operationName) {
+                                  RoutineTapFunctionHelper.onTapFunction(
+                                    context,
+                                    functionCode: functionCode,
+                                    functionOperationName: operationName,
+                                    functionValueDescription:
+                                        selectedFunctionData.valueDescription,
+                                    deviceUuid: device?.uuid,
+                                    codesToAddIntoFunctionsWithDefaultValue: [
+                                      'temp_set',
+                                      'temp_current',
+                                    ],
+                                    defaultValue: functionCode == 'temp_set'
+                                        ? 200
+                                        : functionCode == 'temp_current'
+                                            ? -100
+                                            : 0,
+                                  );
+                                },
                               ),
                             ),
                             // Value selector
@@ -128,6 +153,7 @@ class ACHelper {
     required BuildContext context,
     required List<ACFunction> acFunctions,
     required Function(String, String) onFunctionSelected,
+    required AllDevicesModel? device,
   }) {
     return ListView.separated(
       shrinkWrap: false,
@@ -180,8 +206,9 @@ class ACHelper {
     required String operationName,
     bool? removeComparators,
   }) {
+    final initialVal = selectedFunction == 'temp_set' ? 200 : -100;
     if (selectedFunction == 'temp_set' || selectedFunction == 'temp_current') {
-      final initialValue = selectedFunctionData?.value ?? 250;
+      final initialValue = selectedFunctionData?.value ?? initialVal;
       return _buildTemperatureSelector(
         context: context,
         initialValue: initialValue,
@@ -275,7 +302,9 @@ class ACHelper {
                   functionCode: selectCode,
                   operationName: operationName,
                   condition: conditions[index],
-                  value: selectedFunctionData?.value,
+                  value: selectedFunctionData?.value ?? selectCode == 'temp_set'
+                      ? 200
+                      : -100,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
@@ -304,6 +333,7 @@ class ACHelper {
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
   ) {
+    final initialVal = selectCode == 'temp_set' ? 200 : -100;
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
       decoration: BoxDecoration(
@@ -311,7 +341,7 @@ class ACHelper {
         borderRadius: BorderRadius.circular(10),
       ),
       child: Text(
-        '${(initialValue ?? 200) / 10}°C',
+        '${(initialValue ?? initialVal) / 10}°C',
         style: context.textTheme.headlineMedium!.copyWith(
           color: ColorsManager.primaryColorWithOpacity,
         ),
@@ -386,7 +416,9 @@ class ACHelper {
           trailing: Icon(
             isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected ? ColorsManager.primaryColorWithOpacity : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/ceiling_sensor_dialog.dart

@@ -0,0 +1,224 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/ceiling_presence_sensor_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/ceiling_sensor_helper.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_dialog_slider_selector.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_dialog_value_selector.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_functions_list.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_slider_helpers.dart';
+
+class CeilingSensorDialog extends StatefulWidget {
+  const CeilingSensorDialog({
+    required this.uniqueCustomId,
+    required this.functions,
+    required this.deviceSelectedFunctions,
+    required this.device,
+    required this.dialogType,
+    super.key,
+  });
+
+  final String? uniqueCustomId;
+  final List<DeviceFunction> functions;
+  final List<DeviceFunctionData> deviceSelectedFunctions;
+  final AllDevicesModel? device;
+  final String dialogType;
+
+  @override
+  State<CeilingSensorDialog> createState() => _CeilingSensorDialogState();
+}
+
+class _CeilingSensorDialogState extends State<CeilingSensorDialog> {
+  late final List<CpsFunctions> _cpsFunctions;
+  late final String _dialogHeaderText;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _cpsFunctions = widget.functions.whereType<CpsFunctions>().where((function) {
+      if (widget.dialogType == 'THEN') {
+        return function.type == 'THEN' || function.type == 'BOTH';
+      }
+      return function.type == 'IF' || function.type == 'BOTH';
+    }).toList();
+
+    final isIfDialog = widget.dialogType == 'IF';
+    _dialogHeaderText = isIfDialog ? 'Conditions' : 'Functions';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      contentPadding: EdgeInsets.zero,
+      content: BlocBuilder<FunctionBloc, FunctionBlocState>(
+        builder: (context, state) {
+          final selectedFunction = state.selectedFunction;
+
+          return Container(
+            width: selectedFunction != null ? 600 : 360,
+            height: 450,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            padding: const EdgeInsets.only(top: 20),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                DialogHeader('Presence Sensor $_dialogHeaderText'),
+                Expanded(child: _buildMainContent(context, state)),
+                DialogFooter(
+                  onCancel: () => Navigator.pop(context),
+                  onConfirm: state.addedFunctions.isNotEmpty
+                      ? () {
+                          final functions = _updateValuesForAddedFunctions(
+                            state.addedFunctions,
+                          );
+                          context.read<RoutineBloc>().add(
+                                AddFunctionToRoutine(
+                                  functions,
+                                  '${widget.uniqueCustomId}',
+                                ),
+                              );
+
+                          Navigator.pop(context, {
+                            'deviceId': widget.functions.first.deviceId,
+                          });
+                        }
+                      : null,
+                  isConfirmEnabled: selectedFunction != null,
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildMainContent(BuildContext context, FunctionBlocState state) {
+    final selectedFunction = state.selectedFunction;
+    final selectedOperationName = state.selectedOperationName;
+    final selectedFunctionData = state.addedFunctions.firstWhere(
+      (f) => f.functionCode == selectedFunction,
+      orElse: () => DeviceFunctionData(
+        entityId: '',
+        functionCode: selectedFunction ?? '',
+        operationName: '',
+        value: null,
+      ),
+    );
+    final selectedCpsFunctions = _cpsFunctions.firstWhere(
+      (f) => f.code == selectedFunction,
+      orElse: () => CpsMovementFunctions(
+        deviceId: '',
+        deviceName: '',
+        type: '',
+      ),
+    );
+    final operations = selectedCpsFunctions.getOperationalValues();
+    final isSensitivityFunction = selectedFunction == 'sensitivity';
+    final isToggleFunction = isSensitivityFunction
+        ? widget.dialogType == 'THEN'
+        : CeilingSensorHelper.toggleCodes.contains(selectedFunction);
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        CpsFunctionsList(
+          cpsFunctions: _cpsFunctions,
+          device: widget.device,
+          selectedFunctionData: selectedFunctionData,
+          dialogType: widget.dialogType,
+        ),
+        if (state.selectedFunction != null)
+          Expanded(
+            child: isToggleFunction
+                ? CpsDialogValueSelector(
+                    operations: operations,
+                    selectedFunction: selectedFunction ?? '',
+                    selectedFunctionData: selectedFunctionData,
+                    cpsFunctions: _cpsFunctions,
+                    operationName: selectedOperationName ?? '',
+                    device: widget.device,
+                  )
+                : CpsDialogSliderSelector(
+                    operations: operations,
+                    selectedFunction: selectedFunction ?? '',
+                    selectedFunctionData: selectedFunctionData,
+                    cpsFunctions: _cpsFunctions,
+                    operationName: selectedOperationName ?? '',
+                    device: widget.device,
+                    dialogType: widget.dialogType,
+                  ),
+          ),
+      ],
+    );
+  }
+
+  static const _mappableSteppedFunctions = <String>{
+    'static_max_dis',
+    'presence_reference',
+    'moving_reference',
+    'perceptual_boundary',
+    'moving_boundary',
+    'moving_rigger_time',
+    'moving_static_time',
+    'none_body_time',
+    'moving_max_dis',
+    'moving_range',
+    'presence_range',
+  };
+
+  List<DeviceFunctionData> _updateValuesForAddedFunctions(
+    List<DeviceFunctionData> addedFunctions,
+  ) {
+    return addedFunctions.map((function) {
+      final shouldMapValue = _mappableSteppedFunctions.contains(
+        function.functionCode,
+      );
+      if (shouldMapValue) {
+        final mappedValue = _mapSteppedValue(
+          value: function.value,
+          inputStep: CpsSliderHelpers.dividendOfRange(function.functionCode),
+          inputRange: CpsSliderHelpers.sliderRange(function.functionCode),
+          outputRange: CpsSliderHelpers.mappedRange(function.functionCode),
+        );
+        return DeviceFunctionData(
+          value: mappedValue,
+          entityId: function.entityId,
+          functionCode: function.functionCode,
+          operationName: function.operationName,
+          condition: function.condition,
+          actionExecutor: function.actionExecutor,
+          valueDescription: function.valueDescription,
+        );
+      }
+      return function;
+    }).toList();
+  }
+
+  int _mapSteppedValue({
+    required (double min, double max) inputRange,
+    required double inputStep,
+    required (double min, double max, double dividend) outputRange,
+    required double value,
+  }) {
+    final (inputMin, inputMax) = inputRange;
+    final (outputMin, outputMax, outputStep) = outputRange;
+
+    final clampedValue = value.clamp(inputMin, inputMax);
+
+    final stepsFromMin = ((clampedValue - inputMin) / inputStep).round();
+
+    final mappedValue = outputMin + (stepsFromMin * outputStep);
+
+    return mappedValue.clamp(outputMin, outputMax).round();
+  }
+}

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/ceiling_sensor_helper.dart

@@ -0,0 +1,176 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/ceiling_presence_sensor_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/ceiling_sensor_dialog.dart';
+
+abstract final class CeilingSensorHelper {
+  const CeilingSensorHelper._();
+
+  static Future<Map<String, dynamic>?> showCeilingSensorDialog({
+    required BuildContext context,
+    required String? uniqueCustomId,
+    required List<DeviceFunction> functions,
+    required List<DeviceFunctionData> deviceSelectedFunctions,
+    required AllDevicesModel? device,
+    required String dialogType,
+  }) {
+    return showDialog(
+      context: context,
+      builder: (context) => BlocProvider(
+        create: (context) => FunctionBloc()
+          ..add(
+            InitializeFunctions(deviceSelectedFunctions),
+          ),
+        child: CeilingSensorDialog(
+          uniqueCustomId: uniqueCustomId,
+          functions: functions,
+          deviceSelectedFunctions: deviceSelectedFunctions,
+          device: device,
+          dialogType: dialogType,
+        ),
+      ),
+    );
+  }
+
+  static List<DeviceFunction<CpsOperationalValue>> getCeilingSensorFunctions({
+    required String uuid,
+    required String name,
+  }) {
+    return [
+      CpsRadarSwitchFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsSpatialParameterSwitchFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsSensitivityFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMovingSpeedFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsSpatialStaticValueFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsSpatialMotionValueFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsMaxDistanceOfDetectionFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMaxDistanceOfStaticDetectionFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsDetectionRangeFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsDistanceOfMovingObjectsFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsPresenceJudgementThrsholdFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMotionAmplitudeTriggerThresholdFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsPerpetualBoundaryFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMotionTriggerBoundaryFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMotionTriggerTimeFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMotionToStaticTimeFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsEnteringNoBodyStateTimeFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsSelfTestResultFunctions(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsNobodyTimeFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsMovementFunctions(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsCustomModeFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsSpaceTypeFunctions(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'BOTH',
+      ),
+      CpsPresenceStatusFunctions(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+      CpsSportsParaFunction(
+        deviceName: name,
+        deviceId: uuid,
+        type: 'IF',
+      ),
+    ];
+  }
+
+  static const toggleCodes = <String>{
+    'radar_switch',
+    'space_para_switch',
+    'checking_result',
+    'nobody_time',
+    'body_movement',
+    'custom_mode',
+    'scene',
+    'presence_state',
+  };
+}

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_dialog_slider_selector.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/ceiling_presence_sensor_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_slider_helpers.dart';
+import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
+
+class CpsDialogSliderSelector extends StatelessWidget {
+  const CpsDialogSliderSelector({
+    required this.operations,
+    required this.selectedFunction,
+    required this.selectedFunctionData,
+    required this.cpsFunctions,
+    required this.device,
+    required this.operationName,
+    required this.dialogType,
+    super.key,
+  });
+
+  final List<CpsOperationalValue> operations;
+  final String selectedFunction;
+  final DeviceFunctionData selectedFunctionData;
+  final List<CpsFunctions> cpsFunctions;
+  final AllDevicesModel? device;
+  final String operationName;
+  final String dialogType;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliderValueSelector(
+      currentCondition: selectedFunctionData.condition,
+      dialogType: dialogType,
+      sliderRange: CpsSliderHelpers.sliderRange(selectedFunctionData.functionCode),
+      displayedValue: CpsSliderHelpers.displayText(
+        value: selectedFunctionData.value,
+        functionCode: selectedFunctionData.functionCode,
+      ),
+      initialValue: selectedFunctionData.value ?? 0,
+      unit: CpsSliderHelpers.unit(selectedFunctionData.functionCode),
+      onConditionChanged: (condition) => context.read<FunctionBloc>().add(
+            AddFunction(
+              functionData: DeviceFunctionData(
+                entityId: device?.uuid ?? '',
+                functionCode: selectedFunction,
+                operationName: operationName,
+                condition: condition,
+                value: selectedFunctionData.value ?? 0,
+              ),
+            ),
+          ),
+      onSliderChanged: (value) => context.read<FunctionBloc>().add(
+            AddFunction(
+              functionData: DeviceFunctionData(
+                entityId: device?.uuid ?? '',
+                functionCode: selectedFunction,
+                operationName: operationName,
+                value: double.parse(value.toStringAsFixed(2)),
+                condition: selectedFunctionData.condition,
+              ),
+            ),
+          ),
+      dividendOfRange: CpsSliderHelpers.dividendOfRange(
+        selectedFunctionData.functionCode,
+      ),
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_dialog_value_selector.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/ceiling_presence_sensor_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialog_selection_list_tile.dart';
+
+class CpsDialogValueSelector extends StatelessWidget {
+  const CpsDialogValueSelector({
+    required this.operations,
+    required this.selectedFunction,
+    required this.selectedFunctionData,
+    required this.cpsFunctions,
+    required this.device,
+    required this.operationName,
+    super.key,
+  });
+
+  final List<CpsOperationalValue> operations;
+  final String selectedFunction;
+  final DeviceFunctionData? selectedFunctionData;
+  final List<CpsFunctions> cpsFunctions;
+  final AllDevicesModel? device;
+  final String operationName;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      itemCount: operations.length,
+      itemBuilder: (context, index) {
+        final operation = operations[index];
+        final isSelected = selectedFunctionData?.value == operation.value;
+        return RoutineDialogSelectionListTile(
+          iconPath: operation.icon,
+          description: operation.description,
+          isSelected: isSelected,
+          onTap: () {
+            if (!isSelected) {
+              context.read<FunctionBloc>().add(
+                    AddFunction(
+                      functionData: DeviceFunctionData(
+                        entityId: device?.uuid ?? '',
+                        functionCode: selectedFunction,
+                        operationName: operationName,
+                        value: operation.value,
+                        condition: selectedFunctionData?.condition,
+                        valueDescription: selectedFunctionData?.valueDescription,
+                      ),
+                    ),
+                  );
+            }
+          },
+        );
+      },
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_functions_list.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/models/ceiling_presence_sensor_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialog_function_list_tile.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CpsFunctionsList extends StatelessWidget {
+  const CpsFunctionsList({
+    required this.cpsFunctions,
+    required this.device,
+    required this.selectedFunctionData,
+    required this.dialogType,
+    super.key,
+  });
+
+  final List<CpsFunctions> cpsFunctions;
+  final AllDevicesModel? device;
+  final DeviceFunctionData? selectedFunctionData;
+  final String dialogType;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 360,
+      child: ListView.separated(
+        shrinkWrap: false,
+        itemCount: cpsFunctions.length,
+        separatorBuilder: (context, index) => const Padding(
+          padding: EdgeInsets.symmetric(horizontal: 40.0),
+          child: Divider(color: ColorsManager.dividerColor),
+        ),
+        itemBuilder: (context, index) {
+          final function = cpsFunctions[index];
+          return RoutineDialogFunctionListTile(
+            iconPath: function.icon,
+            operationName: function.operationName,
+            onTap: () => RoutineTapFunctionHelper.onTapFunction(
+              context,
+              functionCode: function.code,
+              functionOperationName: function.operationName,
+              functionValueDescription: selectedFunctionData?.valueDescription,
+              deviceUuid: device?.uuid,
+              codesToAddIntoFunctionsWithDefaultValue: [
+                'static_max_dis',
+                'presence_reference',
+                'moving_reference',
+                'perceptual_boundary',
+                'moving_boundary',
+                'moving_rigger_time',
+                'moving_static_time',
+                'none_body_time',
+                'moving_max_dis',
+                'moving_range',
+                'presence_range',
+                if (dialogType == "IF") 'sensitivity',
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/ceiling_sensor/cps_slider_helpers.dart

@@ -0,0 +1,90 @@
+abstract final class CpsSliderHelpers {
+  static (double min, double max, double step) mappedRange(String functionCode) {
+    final (defaultMin, defaultMax) = sliderRange(functionCode);
+    final defaultDivdidend = dividendOfRange(functionCode);
+    return switch (functionCode) {
+      'static_max_dis' => (0, 500, 50),
+      'presence_reference' => (0, 255, 5),
+      'moving_reference' => (0, 255, 5),
+      'perceptual_boundary' => (0, 500, 50),
+      'moving_boundary' => (0, 500, 50),
+      'moving_rigger_time' => (0, 2000, 100),
+      'moving_static_time' => (0, 60000, 1000),
+      'none_body_time' => (0, 300000, 5000),
+      'moving_max_dis' => (0, 500, 50),
+      'moving_range' => (0, 255, 5),
+      'presence_range' => (0, 255, 5),
+      _ => (defaultMin, defaultMax, defaultDivdidend),
+    };
+  }
+
+  static (double min, double max) sliderRange(String functionCode) =>
+      switch (functionCode) {
+        'moving_speed' => (0, 32),
+        'sensitivity' => (0, 10),
+        'space_static_val' => (0, 255),
+        'space_move_val' => (0, 255),
+        'moving_max_dis' => (0, 10),
+        'static_max_dis' => (0, 10),
+        'moving_range' => (0, 25.5),
+        'presence_range' => (0, 25.5),
+        'presence_judgement_threshold' => (0, 255),
+        'motion_amplitude_trigger_threshold' => (0, 255),
+        'perceptual_boundary' => (0, 5),
+        'moving_boundary' => (0, 5),
+        'moving_rigger_time' => (0, 2),
+        'moving_static_time' => (0, 50),
+        'none_body_time' => (0, 300),
+        'sports_para' => (0, 100),
+        _ => (0, 300),
+      };
+
+  static double dividendOfRange(String functionCode) => switch (functionCode) {
+        'presence_reference' => 5,
+        'moving_reference' => 5,
+        'moving_max_dis' => 0.5,
+        'static_max_dis' => 0.5,
+        'moving_range' => 0.1,
+        'presence_range' => 0.1,
+        'perceptual_boundary' => 0.5,
+        'moving_boundary' => 0.5,
+        'moving_rigger_time' => 0.1,
+        'moving_static_time' => 1.0,
+        'none_body_time' => 5.0,
+        _ => 1,
+      };
+
+  static String unit(String functionCode) => switch (functionCode) {
+        'moving_max_dis' ||
+        'static_max_dis' ||
+        'moving_range' ||
+        'presence_range' ||
+        'perceptual_boundary' ||
+        'moving_boundary' =>
+          'M',
+        'moving_rigger_time' || 'moving_static_time' || 'none_body_time' => 'sec',
+        _ => '',
+      };
+
+  static String displayText({
+    required dynamic value,
+    required String functionCode,
+  }) {
+    final parsedValue = double.tryParse('$value');
+
+    return switch (functionCode) {
+      'moving_max_dis' ||
+      'static_max_dis' ||
+      'moving_range' ||
+      'presence_range' ||
+      'perceptual_boundary' ||
+      'moving_boundary' =>
+        parsedValue?.toStringAsFixed(1) ?? '0',
+      'moving_rigger_time' => parsedValue?.toStringAsFixed(2) ?? '0',
+      'moving_static_time' ||
+      'none_body_time' =>
+        parsedValue?.toStringAsFixed(2) ?? '0',
+      _ => '${parsedValue?.toStringAsFixed(0) ?? 0}',
+    };
+  }
+}

lib/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_operational_values_list.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/flush/flush_operational_value.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/wall_sensor/time_wheel.dart';
+
+class FlushOperationalValuesList extends StatelessWidget {
+  final List<FlushOperationalValue> values;
+  final dynamic selectedValue;
+  final AllDevicesModel? device;
+  final String operationName;
+  final String selectCode;
+  final ValueChanged<FlushOperationalValue> onSelect;
+  const FlushOperationalValuesList({
+    required this.values,
+    required this.selectedValue,
+    required this.device,
+    required this.operationName,
+    required this.selectCode,
+    required this.onSelect,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return  ListView.builder(
+            padding: const EdgeInsets.all(20),
+            itemCount: values.length,
+            itemBuilder: (context, index) =>
+                _buildValueItem(context, values[index]),
+          );
+  }
+
+
+
+  Widget _buildValueItem(BuildContext context, FlushOperationalValue value) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(child: _buildValueDescription(value)),
+          _buildValueRadio(context, value),
+        ],
+      ),
+    );
+  }
+
+
+
+
+  Widget _buildValueDescription(FlushOperationalValue value) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8.0),
+      child: Text(value.description),
+    );
+  }
+
+  Widget _buildValueRadio(context, FlushOperationalValue value) {
+    return Radio<dynamic>(
+        value: value.value,
+        groupValue: selectedValue,
+        onChanged: (_) => onSelect(value));
+  }
+
+
+}

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

@@ -0,0 +1,208 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/flush/flush_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_value_selector_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class FlushPresenceSensor extends StatefulWidget {
+  final List<DeviceFunction> functions;
+  final AllDevicesModel? device;
+  final List<DeviceFunctionData>? deviceSelectedFunctions;
+  final String? uniqueCustomId;
+  final String dialogType;
+  final bool removeComparetors;
+
+  const FlushPresenceSensor({
+    super.key,
+    required this.functions,
+    this.device,
+    this.deviceSelectedFunctions,
+    this.uniqueCustomId,
+    required this.dialogType,
+    this.removeComparetors = false,
+  });
+
+  static Future<Map<String, dynamic>?> showFlushFunctionsDialog({
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    AllDevicesModel? device,
+    List<DeviceFunctionData>? deviceSelectedFunctions,
+    String? uniqueCustomId,
+    required String dialogType,
+    bool removeComparetors = false,
+  }) async {
+    return showDialog<Map<String, dynamic>?>(
+      context: context,
+      builder: (context) => FlushPresenceSensor(
+        functions: functions,
+        device: device,
+        deviceSelectedFunctions: deviceSelectedFunctions,
+        uniqueCustomId: uniqueCustomId,
+        removeComparetors: removeComparetors,
+        dialogType: dialogType,
+      ),
+    );
+  }
+
+  @override
+  State<FlushPresenceSensor> createState() => _WallPresenceSensorState();
+}
+
+class _WallPresenceSensorState extends State<FlushPresenceSensor> {
+  late final List<FlushFunctions> _flushFunctions;
+  @override
+  void initState() {
+    super.initState();
+    _flushFunctions =
+        widget.functions.whereType<FlushFunctions>().where((function) {
+      if (widget.dialogType == 'THEN') {
+        return function.type == 'THEN' || function.type == 'BOTH';
+      }
+      return function.type == 'IF' || function.type == 'BOTH';
+    }).toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => FunctionBloc()
+        ..add(InitializeFunctions(widget.deviceSelectedFunctions ?? [])),
+      child: _buildDialogContent(),
+    );
+  }
+
+  Widget _buildDialogContent() {
+    return AlertDialog(
+      contentPadding: EdgeInsets.zero,
+      content: BlocBuilder<FunctionBloc, FunctionBlocState>(
+        builder: (context, state) {
+          final selectedFunction = state.selectedFunction;
+          return Container(
+            width: selectedFunction != null ? 600 : 360,
+            height: 450,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            padding: const EdgeInsets.only(top: 20),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const DialogHeader('Presence Sensor Condition'),
+                Expanded(child: _buildMainContent(context, state)),
+                _buildDialogFooter(context, state),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildMainContent(BuildContext context, FunctionBlocState state) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        _buildFunctionList(context),
+        if (state.selectedFunction != null) _buildValueSelector(context, state),
+      ],
+    );
+  }
+
+  Widget _buildFunctionList(BuildContext context) {
+    return SizedBox(
+      width: 360,
+      child: ListView.separated(
+        shrinkWrap: false,
+        physics: const AlwaysScrollableScrollPhysics(),
+        itemCount: _flushFunctions.length,
+        separatorBuilder: (context, index) => const Padding(
+          padding: EdgeInsets.symmetric(horizontal: 40.0),
+          child: Divider(color: ColorsManager.dividerColor),
+        ),
+        itemBuilder: (context, index) {
+          final function = _flushFunctions[index];
+          return ListTile(
+            leading: SvgPicture.asset(
+              function.icon,
+              width: 24,
+              height: 24,
+              placeholderBuilder: (context) => const SizedBox(
+                width: 24,
+                height: 24,
+              ),
+            ),
+            title: Text(
+              function.operationName,
+              style: context.textTheme.bodyMedium,
+            ),
+            trailing: const Icon(
+              Icons.arrow_forward_ios,
+              size: 16,
+              color: ColorsManager.textGray,
+            ),
+            onTap: () => context.read<FunctionBloc>().add(
+                  SelectFunction(
+                    functionCode: function.code,
+                    operationName: function.operationName,
+                  ),
+                ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildValueSelector(BuildContext context, FunctionBlocState state) {
+    final selectedFunction = state.selectedFunction ?? '';
+    final functionData = state.addedFunctions.firstWhere(
+      (f) => f.functionCode == selectedFunction,
+      orElse: () => DeviceFunctionData(
+        entityId: '',
+        functionCode: selectedFunction,
+        operationName: state.selectedOperationName ?? '',
+        value: null,
+      ),
+    );
+
+    return Expanded(
+      child: FlushValueSelectorWidget(
+        selectedFunction: selectedFunction,
+        functionData: functionData,
+        flushFunctions: _flushFunctions,
+        device: widget.device,
+        dialogType: widget.dialogType,
+        removeComparators: widget.removeComparetors,
+      ),
+    );
+  }
+
+  Widget _buildDialogFooter(BuildContext context, FunctionBlocState state) {
+    return DialogFooter(
+      onCancel: () => Navigator.pop(context),
+      onConfirm: state.addedFunctions.isNotEmpty
+          ? () {
+              context.read<RoutineBloc>().add(
+                    AddFunctionToRoutine(
+                      state.addedFunctions,
+                      widget.uniqueCustomId!,
+                    ),
+                  );
+              Navigator.pop(
+                context,
+                {'deviceId': widget.functions.first.deviceId},
+              );
+            }
+          : null,
+      isConfirmEnabled: state.selectedFunction != null,
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_value_selector_widget.dart

@@ -0,0 +1,178 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/device_managment/flush_mounted_presence_sensor/models/flush_mounted_presence_sensor_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/flush/flush_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/flush_presence_sensor/flush_operational_values_list.dart';
+import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
+
+class FlushValueSelectorWidget extends StatelessWidget {
+  final String selectedFunction;
+  final DeviceFunctionData functionData;
+  final List<FlushFunctions> flushFunctions;
+  final AllDevicesModel? device;
+  final String dialogType;
+  final bool removeComparators;
+
+  const FlushValueSelectorWidget({
+    required this.selectedFunction,
+    required this.functionData,
+    required this.flushFunctions,
+    required this.device,
+    required this.dialogType,
+    required this.removeComparators,
+    super.key,
+  });
+
+  (double, double) get sliderRange => switch (functionData.functionCode) {
+        FlushMountedPresenceSensorModel.codeOccurDistReduce => (0, 3),
+        FlushMountedPresenceSensorModel.codeNoneDelay => (200, 3000),
+        FlushMountedPresenceSensorModel.codeSensiReduce => (0, 3),
+        FlushMountedPresenceSensorModel.codePresenceDelay => (0, 5),
+        FlushMountedPresenceSensorModel.codeIlluminance => (0.0, 2000.0),
+        FlushMountedPresenceSensorModel.codeFarDetection => (0.0, 9.5),
+        FlushMountedPresenceSensorModel.codeNearDetection => (0.0, 9.5),
+        _ => (0.0, 100.0),
+      };
+
+  double get stepSize => switch (functionData.functionCode) {
+        FlushMountedPresenceSensorModel.codeNoneDelay => 10.0,
+        FlushMountedPresenceSensorModel.codeFarDetection => 0.5,
+        FlushMountedPresenceSensorModel.codeNearDetection => 0.5,
+        FlushMountedPresenceSensorModel.codePresenceDelay => 1.0,
+        FlushMountedPresenceSensorModel.codeOccurDistReduce => 1.0,
+        FlushMountedPresenceSensorModel.codeSensiReduce => 1.0,
+        _ => 1.0,
+      };
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedFn = flushFunctions.firstWhere(
+      (f) => f.code == selectedFunction,
+      orElse: () => throw Exception('Function $selectedFunction not found'),
+    );
+
+    if (_isSliderFunction(selectedFunction)) {
+      final isNearDetection =
+          selectedFunction == FlushMountedPresenceSensorModel.codeNearDetection;
+      final isFarDetection =
+          selectedFunction == FlushMountedPresenceSensorModel.codeFarDetection;
+
+      final isDistanceDetection = isNearDetection || isFarDetection;
+      double initialValue = (functionData.value as num?)?.toDouble() ?? 0.0;
+
+      if (isDistanceDetection) {
+        initialValue = initialValue / 100;
+      }
+      return SliderValueSelector(
+        currentCondition: functionData.condition,
+        dialogType: dialogType,
+        sliderRange: sliderRange,
+        displayedValue: getDisplayText,
+        initialValue: initialValue,
+        onConditionChanged: (condition) => context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectedFunction,
+                  operationName: functionData.operationName,
+                  condition: condition,
+                  value: functionData.value ?? 0,
+                ),
+              ),
+            ),
+        onSliderChanged: (value) {
+          final roundedValue = _roundToStep(value, stepSize);
+          final finalValue =
+              isDistanceDetection ? (roundedValue * 100).toInt() : roundedValue;
+
+          context.read<FunctionBloc>().add(
+                AddFunction(
+                  functionData: DeviceFunctionData(
+                    entityId: device?.uuid ?? '',
+                    functionCode: selectedFunction,
+                    operationName: functionData.operationName,
+                    value: finalValue,
+                    condition: functionData.condition,
+                  ),
+                ),
+              );
+        },
+        unit: _unit,
+        dividendOfRange: stepSize,
+      );
+    }
+
+    return FlushOperationalValuesList(
+      values: selectedFn.getOperationalValues(),
+      selectedValue: functionData.value,
+      device: device,
+      operationName: selectedFn.operationName,
+      selectCode: selectedFunction,
+      onSelect: (selectedValue) async {
+        context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectedFunction,
+                  operationName: functionData.operationName,
+                  value: selectedValue.value,
+                  condition: functionData.condition,
+                ),
+              ),
+            );
+      },
+    );
+  }
+
+  double _roundToStep(double value, double step) {
+    return (value / step).roundToDouble() * step;
+  }
+
+  bool _isSliderFunction(String function) => [
+        FlushMountedPresenceSensorModel.codeOccurDistReduce,
+        FlushMountedPresenceSensorModel.codeSensiReduce,
+        FlushMountedPresenceSensorModel.codeNoneDelay,
+        FlushMountedPresenceSensorModel.codeIlluminance,
+        FlushMountedPresenceSensorModel.codePresenceDelay,
+        FlushMountedPresenceSensorModel.codeFarDetection,
+        FlushMountedPresenceSensorModel.codeNearDetection,
+      ].contains(function);
+
+  String get _unit => switch (functionData.functionCode) {
+        FlushMountedPresenceSensorModel.codeOccurDistReduce => 'Min',
+        FlushMountedPresenceSensorModel.codeSensiReduce => 'Sec',
+        FlushMountedPresenceSensorModel.codeNoneDelay => 'Sec',
+        FlushMountedPresenceSensorModel.codePresenceDelay => 'Sec',
+        FlushMountedPresenceSensorModel.codeIlluminance => 'Lux',
+        FlushMountedPresenceSensorModel.codeFarDetection => 'm',
+        FlushMountedPresenceSensorModel.codeNearDetection => 'm',
+        _ => '',
+      };
+
+  String get getDisplayText {
+    final num? value = functionData.value;
+    double displayValue = value?.toDouble() ?? 0.0;
+
+    if (functionData.functionCode ==
+            FlushMountedPresenceSensorModel.codeNearDetection ||
+        functionData.functionCode ==
+            FlushMountedPresenceSensorModel.codeFarDetection) {
+      displayValue = displayValue / 100;
+    }
+
+    switch (functionData.functionCode) {
+      case FlushMountedPresenceSensorModel.codeFarDetection:
+      case FlushMountedPresenceSensorModel.codeNearDetection:
+        return displayValue.toStringAsFixed(1);
+      case FlushMountedPresenceSensorModel.codeOccurDistReduce:
+      case FlushMountedPresenceSensorModel.codeSensiReduce:
+      case FlushMountedPresenceSensorModel.codePresenceDelay:
+        return displayValue.toStringAsFixed(0);
+      default:
+        return displayValue.toStringAsFixed(0);
+    }
+  }
+}

lib/pages/routines/widgets/routine_dialogs/flush_presence_sensor/time_wheel.dart

@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class TimeWheelPicker extends StatefulWidget {
+  final int initialHours;
+  final int initialMinutes;
+  final int initialSeconds;
+  final Function(int, int, int) onTimeChanged;
+
+  const TimeWheelPicker({
+    super.key,
+    required this.initialHours,
+    required this.initialMinutes,
+    required this.initialSeconds,
+    required this.onTimeChanged,
+  });
+
+  @override
+  State<TimeWheelPicker> createState() => _TimeWheelPickerState();
+}
+
+class _TimeWheelPickerState extends State<TimeWheelPicker> {
+  late FixedExtentScrollController _hoursController;
+  late FixedExtentScrollController _minutesController;
+  late FixedExtentScrollController _secondsController;
+
+  @override
+  void initState() {
+    super.initState();
+    _hoursController =
+        FixedExtentScrollController(initialItem: widget.initialHours);
+    _minutesController =
+        FixedExtentScrollController(initialItem: widget.initialMinutes);
+    _secondsController =
+        FixedExtentScrollController(initialItem: widget.initialSeconds);
+  }
+
+  @override
+  void didUpdateWidget(TimeWheelPicker oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialHours != widget.initialHours) {
+      _hoursController.jumpToItem(widget.initialHours);
+    }
+    if (oldWidget.initialMinutes != widget.initialMinutes) {
+      _minutesController.jumpToItem(widget.initialMinutes);
+    }
+    if (oldWidget.initialSeconds != widget.initialSeconds) {
+      _secondsController.jumpToItem(widget.initialSeconds);
+    }
+  }
+
+
+
+  @override
+  void dispose() {
+    _hoursController.dispose();
+    _minutesController.dispose();
+    _secondsController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        _buildPickerColumn(
+            label: 'h',
+            controller: _hoursController,
+            itemCount: 3,
+            onChanged: (value) {
+              _handleTimeChange(
+                value,
+                _minutesController.selectedItem,
+                _secondsController.selectedItem,
+              );
+            }),
+        const SizedBox(width: 5),
+        _buildPickerColumn(
+            label: 'm',
+            controller: _minutesController,
+            itemCount: 60,
+            onChanged: (value) {
+              _handleTimeChange(
+                _hoursController.selectedItem,
+                value,
+                _secondsController.selectedItem,
+              );
+            }),
+        const SizedBox(width: 5),
+        _buildPickerColumn(
+          label: 's',
+          controller: _secondsController,
+          itemCount: 60,
+          onChanged: (value) => _handleTimeChange(
+            _hoursController.selectedItem,
+            _minutesController.selectedItem,
+            value,
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _handleTimeChange(int hours, int minutes, int seconds) {
+    int total = hours * 3600 + minutes * 60 + seconds;
+    if (total > 10000) {
+      hours = 2;
+      minutes = 46;
+      seconds = 40;
+      total = 10000;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _hoursController.jumpToItem(hours);
+        _minutesController.jumpToItem(minutes);
+        _secondsController.jumpToItem(seconds);
+      });
+    }
+
+    widget.onTimeChanged(hours, minutes, seconds);
+  }
+
+  Widget _buildPickerColumn({
+    required String label,
+    required FixedExtentScrollController controller,
+    required int itemCount,
+    required Function(int) onChanged,
+  }) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          height: 40,
+          width: 40,
+          padding: const EdgeInsets.symmetric(horizontal: 5),
+          decoration: BoxDecoration(
+            color: ColorsManager.boxColor,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: ListWheelScrollView.useDelegate(
+            controller: controller,
+            itemExtent: 40.0,
+            physics: const FixedExtentScrollPhysics(),
+            onSelectedItemChanged: onChanged,
+            childDelegate: ListWheelChildBuilderDelegate(
+              builder: (context, index) => Center(
+                child: Text(
+                  index.toString().padLeft(2),
+                  style: const TextStyle(
+                    fontSize: 18,
+                    color: ColorsManager.blue1,
+                  ),
+                ),
+              ),
+              childCount: itemCount,
+            ),
+          ),
+        ),
+        const SizedBox(width: 5),
+        Text(
+          label,
+          style: const TextStyle(
+            color: ColorsManager.blackColor,
+            fontSize: 18,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/gateway/gateway_dialog.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/gateway.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/gateway/gateway_dialog_value_selector.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/gateway/gateway_functions_list.dart';
+
+class GatewayDialog extends StatefulWidget {
+  const GatewayDialog({
+    required this.uniqueCustomId,
+    required this.functions,
+    required this.deviceSelectedFunctions,
+    required this.device,
+    super.key,
+  });
+
+  final String? uniqueCustomId;
+  final List<DeviceFunction> functions;
+  final List<DeviceFunctionData> deviceSelectedFunctions;
+  final AllDevicesModel? device;
+
+  @override
+  State<GatewayDialog> createState() => _GatewayDialogState();
+}
+
+class _GatewayDialogState extends State<GatewayDialog> {
+  late final List<GatewayFunctions> _gatewayFunctions;
+
+  @override
+  void initState() {
+    super.initState();
+    _gatewayFunctions = widget.functions.whereType<GatewayFunctions>().toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      contentPadding: EdgeInsets.zero,
+      content: BlocBuilder<FunctionBloc, FunctionBlocState>(
+        builder: (context, state) {
+          final selectedFunction = state.selectedFunction;
+          return Container(
+            width: selectedFunction != null ? 600 : 360,
+            height: 450,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            padding: const EdgeInsets.only(top: 20),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const DialogHeader('Gateway Conditions'),
+                Expanded(child: _buildMainContent(context, state)),
+                _buildDialogFooter(context, state),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildMainContent(BuildContext context, FunctionBlocState state) {
+    final selectedFunction = state.selectedFunction;
+    final selectedOperationName = state.selectedOperationName;
+    final selectedFunctionData = state.addedFunctions.firstWhere(
+      (f) => f.functionCode == selectedFunction,
+      orElse: () => DeviceFunctionData(
+        entityId: '',
+        functionCode: selectedFunction ?? '',
+        operationName: '',
+        value: null,
+      ),
+    );
+    final selectedGatewayFunctions = _gatewayFunctions.firstWhere(
+      (f) => f.code == selectedFunction,
+      orElse: () => GatewaySwitchAlarmSound(
+        deviceId: '',
+        deviceName: '',
+        type: '',
+      ),
+    );
+    final operations = selectedGatewayFunctions.getOperationalValues();
+
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        GatewayFunctionsList(gatewayFunctions: _gatewayFunctions),
+        if (state.selectedFunction != null)
+          Expanded(
+            child: GatewayDialogValueSelector(
+              operations: operations,
+              selectedFunction: selectedFunction ?? '',
+              selectedFunctionData: selectedFunctionData,
+              gatewayFunctions: _gatewayFunctions,
+              operationName: selectedOperationName ?? '',
+              device: widget.device,
+            ),
+          ),
+      ],
+    );
+  }
+
+  Widget _buildDialogFooter(BuildContext context, FunctionBlocState state) {
+    return DialogFooter(
+      onCancel: () => Navigator.pop(context),
+      onConfirm: state.addedFunctions.isNotEmpty
+          ? () {
+              context.read<RoutineBloc>().add(
+                    AddFunctionToRoutine(
+                      state.addedFunctions,
+                      widget.uniqueCustomId ?? '-1',
+                    ),
+                  );
+              Navigator.pop(
+                context,
+                {'deviceId': widget.functions.firstOrNull?.deviceId},
+              );
+            }
+          : null,
+      isConfirmEnabled: state.selectedFunction != null,
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/gateway/gateway_dialog_value_selector.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/gateway.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialog_selection_list_tile.dart';
+
+class GatewayDialogValueSelector extends StatelessWidget {
+  const GatewayDialogValueSelector({
+    required this.operations,
+    required this.selectedFunction,
+    required this.selectedFunctionData,
+    required this.gatewayFunctions,
+    required this.device,
+    required this.operationName,
+    super.key,
+  });
+
+  final List<GatewayOperationalValue> operations;
+  final String selectedFunction;
+  final DeviceFunctionData? selectedFunctionData;
+  final List<GatewayFunctions> gatewayFunctions;
+  final AllDevicesModel? device;
+  final String operationName;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      itemCount: operations.length,
+      itemBuilder: (context, index) {
+        final operation = operations[index];
+        final isSelected = selectedFunctionData?.value == operation.value;
+        return RoutineDialogSelectionListTile(
+          iconPath: operation.icon,
+          description: operation.description,
+          isSelected: isSelected,
+          onTap: () {
+            if (!isSelected) {
+              context.read<FunctionBloc>().add(
+                    AddFunction(
+                      functionData: DeviceFunctionData(
+                        entityId: device?.uuid ?? '',
+                        functionCode: selectedFunction,
+                        operationName: operationName,
+                        value: operation.value,
+                        condition: selectedFunctionData?.condition,
+                        valueDescription: selectedFunctionData?.valueDescription,
+                      ),
+                    ),
+                  );
+            }
+          },
+        );
+      },
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/gateway/gateway_functions_list.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/gateway.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialog_function_list_tile.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class GatewayFunctionsList extends StatelessWidget {
+  const GatewayFunctionsList({
+    required this.gatewayFunctions,
+    super.key,
+  });
+
+  final List<GatewayFunctions> gatewayFunctions;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 360,
+      child: ListView.separated(
+        shrinkWrap: false,
+        itemCount: gatewayFunctions.length,
+        separatorBuilder: (context, index) => const Padding(
+          padding: EdgeInsets.symmetric(horizontal: 40.0),
+          child: Divider(color: ColorsManager.dividerColor),
+        ),
+        itemBuilder: (context, index) {
+          final function = gatewayFunctions[index];
+          return RoutineDialogFunctionListTile(
+            iconPath: function.icon,
+            operationName: function.operationName,
+            onTap: () => context.read<FunctionBloc>().add(
+                  SelectFunction(
+                    functionCode: function.code,
+                    operationName: function.operationName,
+                  ),
+                ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/gateway/gateway_helper.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/gateway/gateway_dialog.dart';
+
+abstract final class GatewayHelper {
+  const GatewayHelper._();
+
+  static Future<Map<String, dynamic>?> showGatewayFunctionsDialog({
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    required String? uniqueCustomId,
+    required List<DeviceFunctionData> deviceSelectedFunctions,
+    required AllDevicesModel? device,
+  }) async {
+    return showDialog(
+      context: context,
+      builder: (context) => BlocProvider<FunctionBloc>(
+        create: (context) => FunctionBloc()
+          ..add(
+            InitializeFunctions(deviceSelectedFunctions),
+          ),
+        child: GatewayDialog(
+          uniqueCustomId: uniqueCustomId,
+          functions: functions,
+          deviceSelectedFunctions: deviceSelectedFunctions,
+          device: device,
+        ),
+      ),
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+
+abstract final class RoutineTapFunctionHelper {
+  const RoutineTapFunctionHelper._();
+
+  static void onTapFunction(
+    BuildContext context, {
+    required String functionCode,
+    required String functionOperationName,
+    required String? functionValueDescription,
+    required String? deviceUuid,
+    required List<String> codesToAddIntoFunctionsWithDefaultValue,
+    int defaultValue = 0,
+  }) {
+    final functionsBloc = context.read<FunctionBloc>();
+    functionsBloc.add(
+      SelectFunction(
+        functionCode: functionCode,
+        operationName: functionOperationName,
+      ),
+    );
+    final addedFunctions = functionsBloc.state.addedFunctions;
+    final isFunctionAlreadyAdded = addedFunctions.any(
+      (e) => e.functionCode == functionCode,
+    );
+    final shouldAddFunction =
+        codesToAddIntoFunctionsWithDefaultValue.contains(functionCode);
+    if (!isFunctionAlreadyAdded && shouldAddFunction) {
+      context.read<FunctionBloc>().add(
+            AddFunction(
+              functionData: DeviceFunctionData(
+                entityId: deviceUuid ?? '',
+                functionCode: functionCode,
+                operationName: functionOperationName,
+                value: defaultValue,
+                condition: '==',
+                valueDescription: functionValueDescription,
+              ),
+            ),
+          );
+    }
+  }
+}

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

@@ -7,36 +7,41 @@ import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/pages/routines/helper/duration_format_helper.dart';
 import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/one_gang_switch/one_gang_switch.dart';
 import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class OneGangSwitchHelper {
-  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
-    BuildContext context,
-    List<DeviceFunction> functions,
-    AllDevicesModel? device,
-    List<DeviceFunctionData>? deviceSelectedFunctions,
-    String uniqueCustomId,
-    bool removeComparetors,
-  ) async {
-    List<BaseSwitchFunction> acFunctions = functions.whereType<BaseSwitchFunction>().toList();
+  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog({
+    required String dialogType,
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    required AllDevicesModel? device,
+    required List<DeviceFunctionData>? deviceSelectedFunctions,
+    required String uniqueCustomId,
+    required bool removeComparetors,
+  }) async {
+    List<BaseSwitchFunction> oneGangFunctions =
+        functions.whereType<BaseSwitchFunction>().toList();
 
     return showDialog<Map<String, dynamic>?>(
       context: context,
       builder: (BuildContext context) {
         return BlocProvider(
-            create: (_) => FunctionBloc()..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
+            create: (_) => FunctionBloc()
+              ..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
             child: AlertDialog(
               contentPadding: EdgeInsets.zero,
               content: BlocBuilder<FunctionBloc, FunctionBlocState>(
                 builder: (context, state) {
                   final selectedFunction = state.selectedFunction;
                   final selectedOperationName = state.selectedOperationName;
-                  final selectedFunctionData =
-                      state.addedFunctions.firstWhere((f) => f.functionCode == selectedFunction,
+                  final selectedFunctionData = state.addedFunctions
+                      .firstWhere((f) => f.functionCode == selectedFunction,
                           orElse: () => DeviceFunctionData(
                                 entityId: '',
                                 functionCode: selectedFunction ?? '',
@@ -61,12 +66,12 @@ class OneGangSwitchHelper {
                               // Left side: Function list
                               Expanded(
                                 child: ListView.separated(
-                                  itemCount: acFunctions.length,
+                                  itemCount: oneGangFunctions.length,
                                   separatorBuilder: (_, __) => const Divider(
                                     color: ColorsManager.dividerColor,
                                   ),
                                   itemBuilder: (context, index) {
-                                    final function = acFunctions[index];
+                                    final function = oneGangFunctions[index];
                                     return ListTile(
                                       leading: SvgPicture.asset(
                                         function.icon,
@@ -82,12 +87,19 @@ class OneGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () {
-                                        context.read<FunctionBloc>().add(SelectFunction(
-                                              functionCode: function.code,
-                                              operationName: function.operationName,
-                                            ));
-                                      },
+                                      onTap: () =>
+                                          RoutineTapFunctionHelper.onTapFunction(
+                                        context,
+                                        functionCode: function.code,
+                                        functionOperationName:
+                                            function.operationName,
+                                        functionValueDescription:
+                                            selectedFunctionData.valueDescription,
+                                        deviceUuid: device?.uuid,
+                                        codesToAddIntoFunctionsWithDefaultValue: [
+                                          'countdown_1',
+                                        ],
+                                      ),
                                     );
                                   },
                                 ),
@@ -99,7 +111,7 @@ class OneGangSwitchHelper {
                                     context: context,
                                     selectedFunction: selectedFunction,
                                     selectedFunctionData: selectedFunctionData,
-                                    acFunctions: acFunctions,
+                                    acFunctions: oneGangFunctions,
                                     device: device,
                                     operationName: selectedOperationName ?? '',
                                     removeComparetors: removeComparetors,
@@ -162,7 +174,7 @@ class OneGangSwitchHelper {
     required bool removeComparetors,
   }) {
     if (selectedFunction == 'countdown_1') {
-      final initialValue = selectedFunctionData?.value ?? 200;
+      final initialValue = selectedFunctionData?.value ?? 0;
       return _buildCountDownSelector(
         context: context,
         initialValue: initialValue,
@@ -174,8 +186,14 @@ class OneGangSwitchHelper {
         removeComparetors: removeComparetors,
       );
     }
+    final selectedFn = acFunctions.firstWhere(
+      (f) => f.code == selectedFunction,
+      orElse: () => OneGangSwitchFunction(
+        deviceId: '',
+        deviceName: '',
+      ),
+    );
 
-    final selectedFn = acFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     return _buildOperationalValuesList(
@@ -212,11 +230,11 @@ class OneGangSwitchHelper {
             selectedFunctionData,
           ),
         const SizedBox(height: 20),
-        _buildCountDownDisplay(
-            context, initialValue, device, operationName, selectedFunctionData, selectCode),
+        _buildCountDownDisplay(context, initialValue, device, operationName,
+            selectedFunctionData, selectCode),
         const SizedBox(height: 20),
-        _buildCountDownSlider(
-            context, initialValue, device, operationName, selectedFunctionData, selectCode),
+        _buildCountDownSlider(context, initialValue, device, operationName,
+            selectedFunctionData, selectCode),
       ],
     );
   }
@@ -242,7 +260,7 @@ class OneGangSwitchHelper {
                   functionCode: selectCode,
                   operationName: operationName,
                   condition: conditions[index],
-                  value: selectedFunctionData?.value,
+                  value: selectedFunctionData?.value ?? 0,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
@@ -293,21 +311,23 @@ class OneGangSwitchHelper {
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
   ) {
+    const twelveHoursInSeconds = 43200.0;
     final operationalValues = SwitchOperationalValue(
       icon: '',
       description: "sec",
       value: 0.0,
       minValue: 0,
-      maxValue: 86400,
+      maxValue: twelveHoursInSeconds,
       stepValue: 1,
     );
     return Slider(
       value: (initialValue ?? 0).toDouble(),
       min: operationalValues.minValue?.toDouble() ?? 0.0,
       max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions: (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
-              (operationalValues.stepValue ?? 1))
-          .round(),
+      divisions:
+          (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
+                  (operationalValues.stepValue ?? 1))
+              .round(),
       onChanged: (value) {
         context.read<FunctionBloc>().add(
               AddFunction(
@@ -359,7 +379,9 @@ class OneGangSwitchHelper {
           trailing: Icon(
             isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected ? ColorsManager.primaryColorWithOpacity : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {

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

@@ -10,33 +10,37 @@ import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_func
 import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class ThreeGangSwitchHelper {
-  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
-    BuildContext context,
-    List<DeviceFunction> functions,
-    AllDevicesModel? device,
-    List<DeviceFunctionData>? deviceSelectedFunctions,
-    String uniqueCustomId,
-    bool removeComparetors,
-  ) async {
-    List<BaseSwitchFunction> switchFunctions = functions.whereType<BaseSwitchFunction>().toList();
+  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog({
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    required AllDevicesModel? device,
+    required List<DeviceFunctionData>? deviceSelectedFunctions,
+    required String uniqueCustomId,
+    required String dialogType,
+    required bool removeComparetors,
+  }) async {
+    List<BaseSwitchFunction> switchFunctions =
+        functions.whereType<BaseSwitchFunction>().toList();
 
     return showDialog<Map<String, dynamic>?>(
       context: context,
       builder: (BuildContext context) {
         return BlocProvider(
-            create: (_) => FunctionBloc()..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
+            create: (_) => FunctionBloc()
+              ..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
             child: AlertDialog(
               contentPadding: EdgeInsets.zero,
               content: BlocBuilder<FunctionBloc, FunctionBlocState>(
                 builder: (context, state) {
                   final selectedFunction = state.selectedFunction;
                   final selectedOperationName = state.selectedOperationName;
-                  final selectedFunctionData =
-                      state.addedFunctions.firstWhere((f) => f.functionCode == selectedFunction,
+                  final selectedFunctionData = state.addedFunctions
+                      .firstWhere((f) => f.functionCode == selectedFunction,
                           orElse: () => DeviceFunctionData(
                                 entityId: '',
                                 functionCode: selectedFunction ?? '',
@@ -82,12 +86,21 @@ class ThreeGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () {
-                                        context.read<FunctionBloc>().add(SelectFunction(
-                                              functionCode: function.code,
-                                              operationName: function.operationName,
-                                            ));
-                                      },
+                                      onTap: () =>
+                                          RoutineTapFunctionHelper.onTapFunction(
+                                        context,
+                                        functionCode: function.code,
+                                        functionOperationName:
+                                            function.operationName,
+                                        functionValueDescription:
+                                            selectedFunctionData.valueDescription,
+                                        deviceUuid: device?.uuid,
+                                        codesToAddIntoFunctionsWithDefaultValue: [
+                                          'countdown_1',
+                                          'countdown_2',
+                                          'countdown_3',
+                                        ],
+                                      ),
                                     );
                                   },
                                 ),
@@ -164,7 +177,7 @@ class ThreeGangSwitchHelper {
     if (selectedFunction == 'countdown_1' ||
         selectedFunction == 'countdown_2' ||
         selectedFunction == 'countdown_3') {
-      final initialValue = selectedFunctionData?.value ?? 200;
+      final initialValue = selectedFunctionData?.value ?? 0;
       return _buildTemperatureSelector(
         context: context,
         initialValue: initialValue,
@@ -214,11 +227,11 @@ class ThreeGangSwitchHelper {
             selectedFunctionData,
           ),
         const SizedBox(height: 20),
-        _buildCountDownDisplay(
-            context, initialValue, device, operationName, selectedFunctionData, selectCode),
+        _buildCountDownDisplay(context, initialValue, device, operationName,
+            selectedFunctionData, selectCode),
         const SizedBox(height: 20),
-        _buildCountDownSlider(
-            context, initialValue, device, operationName, selectedFunctionData, selectCode),
+        _buildCountDownSlider(context, initialValue, device, operationName,
+            selectedFunctionData, selectCode),
       ],
     );
   }
@@ -244,7 +257,7 @@ class ThreeGangSwitchHelper {
                   functionCode: selectCode,
                   operationName: operationName,
                   condition: conditions[index],
-                  value: selectedFunctionData?.value,
+                  value: selectedFunctionData?.value ?? 0,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
@@ -295,21 +308,23 @@ class ThreeGangSwitchHelper {
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
   ) {
+    const twelveHoursInSeconds = 43200.0;
     final operationalValues = SwitchOperationalValue(
       icon: '',
       description: "sec",
       value: 0.0,
       minValue: 0,
-      maxValue: 86400,
+      maxValue: twelveHoursInSeconds,
       stepValue: 1,
     );
     return Slider(
       value: (initialValue ?? 0).toDouble(),
       min: operationalValues.minValue?.toDouble() ?? 0.0,
       max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions: (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
-              (operationalValues.stepValue ?? 1))
-          .round(),
+      divisions:
+          (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
+                  (operationalValues.stepValue ?? 1))
+              .round(),
       onChanged: (value) {
         context.read<FunctionBloc>().add(
               AddFunction(
@@ -361,7 +376,9 @@ class ThreeGangSwitchHelper {
           trailing: Icon(
             isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected ? ColorsManager.primaryColorWithOpacity : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {

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

@@ -10,33 +10,37 @@ import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_func
 import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class TwoGangSwitchHelper {
-  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog(
-    BuildContext context,
-    List<DeviceFunction> functions,
-    AllDevicesModel? device,
-    List<DeviceFunctionData>? deviceSelectedFunctions,
-    String uniqueCustomId,
-    bool removeComparetors,
-  ) async {
-    List<BaseSwitchFunction> switchFunctions = functions.whereType<BaseSwitchFunction>().toList();
+  static Future<Map<String, dynamic>?> showSwitchFunctionsDialog({
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    required AllDevicesModel? device,
+    required List<DeviceFunctionData>? deviceSelectedFunctions,
+    required String uniqueCustomId,
+    required bool removeComparetors,
+    required String dialogType,
+  }) async {
+    List<BaseSwitchFunction> switchFunctions =
+        functions.whereType<BaseSwitchFunction>().toList();
 
     return showDialog<Map<String, dynamic>?>(
       context: context,
       builder: (BuildContext context) {
         return BlocProvider(
-            create: (_) => FunctionBloc()..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
+            create: (_) => FunctionBloc()
+              ..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
             child: AlertDialog(
               contentPadding: EdgeInsets.zero,
               content: BlocBuilder<FunctionBloc, FunctionBlocState>(
                 builder: (context, state) {
                   final selectedFunction = state.selectedFunction;
                   final selectedOperationName = state.selectedOperationName;
-                  final selectedFunctionData =
-                      state.addedFunctions.firstWhere((f) => f.functionCode == selectedFunction,
+                  final selectedFunctionData = state.addedFunctions
+                      .firstWhere((f) => f.functionCode == selectedFunction,
                           orElse: () => DeviceFunctionData(
                                 entityId: '',
                                 functionCode: selectedFunction ?? '',
@@ -82,12 +86,20 @@ class TwoGangSwitchHelper {
                                         size: 16,
                                         color: ColorsManager.textGray,
                                       ),
-                                      onTap: () {
-                                        context.read<FunctionBloc>().add(SelectFunction(
-                                              functionCode: function.code,
-                                              operationName: function.operationName,
-                                            ));
-                                      },
+                                      onTap: () =>
+                                          RoutineTapFunctionHelper.onTapFunction(
+                                        context,
+                                        functionCode: function.code,
+                                        functionOperationName:
+                                            function.operationName,
+                                        functionValueDescription:
+                                            selectedFunctionData.valueDescription,
+                                        deviceUuid: device?.uuid,
+                                        codesToAddIntoFunctionsWithDefaultValue: [
+                                          'countdown_1',
+                                          'countdown_2',
+                                        ],
+                                      ),
                                     );
                                   },
                                 ),
@@ -162,7 +174,7 @@ class TwoGangSwitchHelper {
     required bool removeComparetors,
   }) {
     if (selectedFunction == 'countdown_1' || selectedFunction == 'countdown_2') {
-      final initialValue = selectedFunctionData?.value ?? 200;
+      final initialValue = selectedFunctionData?.value ?? 0;
       return _buildTemperatureSelector(
         context: context,
         initialValue: initialValue,
@@ -212,11 +224,11 @@ class TwoGangSwitchHelper {
             selectedFunctionData,
           ),
         const SizedBox(height: 20),
-        _buildCountDownDisplay(
-            context, initialValue, device, operationName, selectedFunctionData, selectCode),
+        _buildCountDownDisplay(context, initialValue, device, operationName,
+            selectedFunctionData, selectCode),
         const SizedBox(height: 20),
-        _buildCountDownSlider(
-            context, initialValue, device, operationName, selectedFunctionData, selectCode),
+        _buildCountDownSlider(context, initialValue, device, operationName,
+            selectedFunctionData, selectCode),
       ],
     );
   }
@@ -242,7 +254,7 @@ class TwoGangSwitchHelper {
                   functionCode: selectCode,
                   operationName: operationName,
                   condition: conditions[index],
-                  value: selectedFunctionData?.value,
+                  value: selectedFunctionData?.value ?? 0,
                   valueDescription: selectedFunctionData?.valueDescription,
                 ),
               ),
@@ -293,21 +305,23 @@ class TwoGangSwitchHelper {
     DeviceFunctionData? selectedFunctionData,
     String selectCode,
   ) {
+    const twelveHoursInSeconds = 43200.0;
     final operationalValues = SwitchOperationalValue(
       icon: '',
       description: "sec",
       value: 0.0,
       minValue: 0,
-      maxValue: 86400,
+      maxValue: twelveHoursInSeconds,
       stepValue: 1,
     );
     return Slider(
       value: (initialValue ?? 0).toDouble(),
       min: operationalValues.minValue?.toDouble() ?? 0.0,
       max: operationalValues.maxValue?.toDouble() ?? 0.0,
-      divisions: (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
-              (operationalValues.stepValue ?? 1))
-          .round(),
+      divisions:
+          (((operationalValues.maxValue ?? 0) - (operationalValues.minValue ?? 0)) /
+                  (operationalValues.stepValue ?? 1))
+              .round(),
       onChanged: (value) {
         context.read<FunctionBloc>().add(
               AddFunction(
@@ -359,7 +373,9 @@ class TwoGangSwitchHelper {
           trailing: Icon(
             isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected ? ColorsManager.primaryColorWithOpacity : ColorsManager.textGray,
+            color: isSelected
+                ? ColorsManager.primaryColorWithOpacity
+                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {

lib/pages/routines/widgets/routine_dialogs/wall_sensor/time_wheel.dart

@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class TimeWheelPicker extends StatefulWidget {
+  final int initialHours;
+  final int initialMinutes;
+  final int initialSeconds;
+  final Function(int, int, int) onTimeChanged;
+
+  const TimeWheelPicker({
+    super.key,
+    required this.initialHours,
+    required this.initialMinutes,
+    required this.initialSeconds,
+    required this.onTimeChanged,
+  });
+
+  @override
+  State<TimeWheelPicker> createState() => _TimeWheelPickerState();
+}
+
+class _TimeWheelPickerState extends State<TimeWheelPicker> {
+  late FixedExtentScrollController _hoursController;
+  late FixedExtentScrollController _minutesController;
+  late FixedExtentScrollController _secondsController;
+
+  @override
+  void initState() {
+    super.initState();
+    _hoursController =
+        FixedExtentScrollController(initialItem: widget.initialHours);
+    _minutesController =
+        FixedExtentScrollController(initialItem: widget.initialMinutes);
+    _secondsController =
+        FixedExtentScrollController(initialItem: widget.initialSeconds);
+  }
+
+  @override
+  void didUpdateWidget(TimeWheelPicker oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.initialHours != widget.initialHours) {
+      _hoursController.jumpToItem(widget.initialHours);
+    }
+    if (oldWidget.initialMinutes != widget.initialMinutes) {
+      _minutesController.jumpToItem(widget.initialMinutes);
+    }
+    if (oldWidget.initialSeconds != widget.initialSeconds) {
+      _secondsController.jumpToItem(widget.initialSeconds);
+    }
+  }
+
+
+
+  @override
+  void dispose() {
+    _hoursController.dispose();
+    _minutesController.dispose();
+    _secondsController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        _buildPickerColumn(
+            label: 'h',
+            controller: _hoursController,
+            itemCount: 3,
+            onChanged: (value) {
+              _handleTimeChange(
+                value,
+                _minutesController.selectedItem,
+                _secondsController.selectedItem,
+              );
+            }),
+        const SizedBox(width: 5),
+        _buildPickerColumn(
+            label: 'm',
+            controller: _minutesController,
+            itemCount: 60,
+            onChanged: (value) {
+              _handleTimeChange(
+                _hoursController.selectedItem,
+                value,
+                _secondsController.selectedItem,
+              );
+            }),
+        const SizedBox(width: 5),
+        _buildPickerColumn(
+          label: 's',
+          controller: _secondsController,
+          itemCount: 60,
+          onChanged: (value) => _handleTimeChange(
+            _hoursController.selectedItem,
+            _minutesController.selectedItem,
+            value,
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _handleTimeChange(int hours, int minutes, int seconds) {
+    int total = hours * 3600 + minutes * 60 + seconds;
+    if (total > 10000) {
+      hours = 2;
+      minutes = 46;
+      seconds = 40;
+      total = 10000;
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _hoursController.jumpToItem(hours);
+        _minutesController.jumpToItem(minutes);
+        _secondsController.jumpToItem(seconds);
+      });
+    }
+
+    widget.onTimeChanged(hours, minutes, seconds);
+  }
+
+  Widget _buildPickerColumn({
+    required String label,
+    required FixedExtentScrollController controller,
+    required int itemCount,
+    required Function(int) onChanged,
+  }) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Container(
+          height: 40,
+          width: 40,
+          padding: const EdgeInsets.symmetric(horizontal: 5),
+          decoration: BoxDecoration(
+            color: ColorsManager.boxColor,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: ListWheelScrollView.useDelegate(
+            controller: controller,
+            itemExtent: 40.0,
+            physics: const FixedExtentScrollPhysics(),
+            onSelectedItemChanged: onChanged,
+            childDelegate: ListWheelChildBuilderDelegate(
+              builder: (context, index) => Center(
+                child: Text(
+                  index.toString().padLeft(2),
+                  style: const TextStyle(
+                    fontSize: 18,
+                    color: ColorsManager.blue1,
+                  ),
+                ),
+              ),
+              childCount: itemCount,
+            ),
+          ),
+        ),
+        const SizedBox(width: 5),
+        Text(
+          label,
+          style: const TextStyle(
+            color: ColorsManager.blackColor,
+            fontSize: 18,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/wall_sensor/wall_presence_sensor.dart

@@ -0,0 +1,225 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/wps/wps_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/helpers/routine_tap_function_helper.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/wall_sensor/wps_value_selector_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class WallPresenceSensor extends StatefulWidget {
+  final List<DeviceFunction> functions;
+  final AllDevicesModel? device;
+  final List<DeviceFunctionData>? deviceSelectedFunctions;
+  final String? uniqueCustomId;
+  final String? dialogType;
+  final bool removeComparetors;
+
+  const WallPresenceSensor({
+    super.key,
+    required this.functions,
+    this.device,
+    this.deviceSelectedFunctions,
+    this.uniqueCustomId,
+    this.dialogType,
+    this.removeComparetors = false,
+  });
+
+  static Future<Map<String, dynamic>?> showWPSFunctionsDialog({
+    required BuildContext context,
+    required List<DeviceFunction> functions,
+    AllDevicesModel? device,
+    List<DeviceFunctionData>? deviceSelectedFunctions,
+    String? uniqueCustomId,
+    String? dialogType,
+    bool removeComparetors = false,
+  }) async {
+    return showDialog<Map<String, dynamic>?>(
+      context: context,
+      builder: (context) => WallPresenceSensor(
+        functions: functions,
+        device: device,
+        deviceSelectedFunctions: deviceSelectedFunctions,
+        uniqueCustomId: uniqueCustomId,
+        removeComparetors: removeComparetors,
+        dialogType: dialogType,
+      ),
+    );
+  }
+
+  @override
+  State<WallPresenceSensor> createState() => _WallPresenceSensorState();
+}
+
+class _WallPresenceSensorState extends State<WallPresenceSensor> {
+  late final List<WpsFunctions> _wpsFunctions;
+
+  @override
+  void initState() {
+    super.initState();
+    _wpsFunctions = widget.functions.whereType<WpsFunctions>().where((function) {
+      if (widget.dialogType == 'THEN') {
+        return function.type == 'THEN' || function.type == 'BOTH';
+      }
+      return function.type == 'IF' || function.type == 'BOTH';
+    }).toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => FunctionBloc()
+        ..add(InitializeFunctions(widget.deviceSelectedFunctions ?? [])),
+      child: _buildDialogContent(),
+    );
+  }
+
+  Widget _buildDialogContent() {
+    return AlertDialog(
+      contentPadding: EdgeInsets.zero,
+      content: BlocBuilder<FunctionBloc, FunctionBlocState>(
+        builder: (context, state) {
+          final selectedFunction = state.selectedFunction;
+          return Container(
+            width: selectedFunction != null ? 600 : 360,
+            height: 450,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(20),
+            ),
+            padding: const EdgeInsets.only(top: 20),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const DialogHeader('Presence Sensor Condition'),
+                Expanded(child: _buildMainContent(context, state)),
+                _buildDialogFooter(context, state),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildMainContent(BuildContext context, FunctionBlocState state) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        _buildFunctionList(context, state),
+        if (state.selectedFunction != null) _buildValueSelector(context, state),
+      ],
+    );
+  }
+
+  Widget _buildFunctionList(BuildContext context, FunctionBlocState state) {
+    final selectedFunction = state.selectedFunction;
+    final selectedFunctionData = state.addedFunctions.firstWhere(
+      (f) => f.functionCode == selectedFunction,
+      orElse: () => DeviceFunctionData(
+        entityId: '',
+        functionCode: selectedFunction ?? '',
+        operationName: '',
+        value: null,
+      ),
+    );
+    return SizedBox(
+      width: 360,
+      child: ListView.separated(
+        shrinkWrap: false,
+        physics: const AlwaysScrollableScrollPhysics(),
+        itemCount: _wpsFunctions.length,
+        separatorBuilder: (context, index) => const Padding(
+          padding: EdgeInsets.symmetric(horizontal: 40.0),
+          child: Divider(color: ColorsManager.dividerColor),
+        ),
+        itemBuilder: (context, index) {
+          final function = _wpsFunctions[index];
+          return ListTile(
+            leading: SvgPicture.asset(
+              function.icon,
+              width: 24,
+              height: 24,
+              placeholderBuilder: (context) => const SizedBox(
+                width: 24,
+                height: 24,
+              ),
+            ),
+            title: Text(
+              function.operationName,
+              style: context.textTheme.bodyMedium,
+            ),
+            trailing: const Icon(
+              Icons.arrow_forward_ios,
+              size: 16,
+              color: ColorsManager.textGray,
+            ),
+            onTap: () => RoutineTapFunctionHelper.onTapFunction(
+              context,
+              functionCode: function.code,
+              functionOperationName: function.operationName,
+              functionValueDescription: selectedFunctionData.valueDescription,
+              deviceUuid: widget.device?.uuid,
+              codesToAddIntoFunctionsWithDefaultValue: [
+                'dis_current',
+                'presence_time',
+                'illuminance_value',
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildValueSelector(BuildContext context, FunctionBlocState state) {
+    final selectedFunction = state.selectedFunction!;
+    final functionData = state.addedFunctions.firstWhere(
+      (f) => f.functionCode == selectedFunction,
+      orElse: () => DeviceFunctionData(
+        entityId: '',
+        functionCode: selectedFunction,
+        operationName: state.selectedOperationName ?? '',
+        value: null,
+      ),
+    );
+
+    return Expanded(
+      child: WpsValueSelectorWidget(
+        selectedFunction: selectedFunction,
+        functionData: functionData,
+        wpsFunctions: _wpsFunctions,
+        device: widget.device,
+        dialogType: widget.dialogType!,
+        removeComparators: widget.removeComparetors,
+      ),
+    );
+  }
+
+  Widget _buildDialogFooter(BuildContext context, FunctionBlocState state) {
+    return DialogFooter(
+      onCancel: () => Navigator.pop(context),
+      onConfirm: state.addedFunctions.isNotEmpty
+          ? () {
+              context.read<RoutineBloc>().add(
+                    AddFunctionToRoutine(
+                      state.addedFunctions,
+                      widget.uniqueCustomId!,
+                    ),
+                  );
+              Navigator.pop(
+                context,
+                {'deviceId': widget.functions.first.deviceId},
+              );
+            }
+          : null,
+      isConfirmEnabled: state.selectedFunction != null,
+    );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/wall_sensor/wps_operational_values_list.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/wps/wps_operational_value.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/wall_sensor/time_wheel.dart';
+
+class WpsOperationalValuesList extends StatelessWidget {
+  final List<WpsOperationalValue> values;
+  final dynamic selectedValue;
+  final AllDevicesModel? device;
+  final String operationName;
+  final String selectCode;
+
+  const WpsOperationalValuesList({
+    required this.values,
+    required this.selectedValue,
+    required this.device,
+    required this.operationName,
+    required this.selectCode,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return operationName == 'Nobody Time'
+        ? _buildTimeWheel(context)
+        : ListView.builder(
+            padding: const EdgeInsets.all(20),
+            itemCount: values.length,
+            itemBuilder: (context, index) => _buildValueItem(context, values[index]),
+          );
+  }
+
+  Widget _buildTimeWheel(BuildContext context) {
+    final currentTotalSeconds = selectedValue as int? ?? 0;
+    return TimeWheelPicker(
+      initialHours: currentTotalSeconds ~/ 3600,
+      initialMinutes: (currentTotalSeconds % 3600) ~/ 60,
+      initialSeconds: currentTotalSeconds % 60,
+      onTimeChanged: (h, m, s) => _updateTotalSeconds(context, h, m, s),
+    );
+  }
+
+  Widget _buildValueItem(BuildContext context, WpsOperationalValue value) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          _buildValueIcon(context, value),
+          Expanded(child: _buildValueDescription(value)),
+          _buildValueRadio(context, value),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildValueIcon(context, WpsOperationalValue value) {
+    return Column(
+      children: [
+        if (_shouldShowTextDescription) Text(value.description.replaceAll("cm", '')),
+        SvgPicture.asset(value.icon, width: 25, height: 25),
+      ],
+    );
+  }
+
+  bool get _shouldShowTextDescription =>
+      operationName == 'Far Detection' ||
+      operationName == 'Motionless Detection Sensitivity';
+
+  Widget _buildValueDescription(WpsOperationalValue value) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8.0),
+      child: Text(value.description),
+    );
+  }
+
+  Widget _buildValueRadio(context, WpsOperationalValue value) {
+    return Radio<dynamic>(
+      value: value.value,
+      groupValue: selectedValue,
+      onChanged: (_) => _selectValue(context, value.value),
+    );
+  }
+
+  void _selectValue(BuildContext context, dynamic value) {
+    context.read<FunctionBloc>().add(
+          AddFunction(
+            functionData: DeviceFunctionData(
+              entityId: device?.uuid ?? '',
+              functionCode: selectCode,
+              operationName: operationName,
+              value: value,
+            ),
+          ),
+        );
+  }
+
+  void _updateTotalSeconds(BuildContext context, int h, int m, int s) {
+    context.read<FunctionBloc>().add(
+          AddFunction(
+            functionData: DeviceFunctionData(
+              entityId: device?.uuid ?? '',
+              functionCode: selectCode,
+              operationName: operationName,
+              value: h * 3600 + m * 60 + s,
+            ),
+          ),
+        );
+  }
+}

lib/pages/routines/widgets/routine_dialogs/wall_sensor/wps_value_selector_widget.dart

@@ -0,0 +1,102 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/wps/wps_functions.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/wall_sensor/wps_operational_values_list.dart';
+import 'package:syncrow_web/pages/routines/widgets/slider_value_selector.dart';
+
+class WpsValueSelectorWidget extends StatelessWidget {
+  final String selectedFunction;
+  final DeviceFunctionData functionData;
+  final List<WpsFunctions> wpsFunctions;
+  final AllDevicesModel? device;
+  final String dialogType;
+  final bool removeComparators;
+
+  const WpsValueSelectorWidget({
+    required this.selectedFunction,
+    required this.functionData,
+    required this.wpsFunctions,
+    required this.device,
+    required this.dialogType,
+    required this.removeComparators,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedFn = wpsFunctions.firstWhere((f) => f.code == selectedFunction);
+    final values = selectedFn.getOperationalValues();
+
+    if (_isSliderFunction(selectedFunction)) {
+      return SliderValueSelector(
+        currentCondition: functionData.condition,
+        dialogType: dialogType,
+        sliderRange: sliderRange,
+        displayedValue: getDisplayText,
+        initialValue: functionData.value ?? 0.0,
+        onConditionChanged: (condition) => context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectedFunction,
+                  operationName: functionData.operationName,
+                  condition: condition,
+                  value: functionData.value ?? 0,
+                ),
+              ),
+            ),
+        onSliderChanged: (value) => context.read<FunctionBloc>().add(
+              AddFunction(
+                functionData: DeviceFunctionData(
+                  entityId: device?.uuid ?? '',
+                  functionCode: selectedFunction,
+                  operationName: functionData.operationName,
+                  value: value.toInt(),
+                  condition: functionData.condition,
+                ),
+              ),
+            ),
+        unit: _unit,
+        dividendOfRange: 1,
+      );
+    }
+
+    return WpsOperationalValuesList(
+      values: values,
+      selectedValue: functionData.value,
+      device: device,
+      operationName: selectedFn.operationName,
+      selectCode: selectedFunction,
+    );
+  }
+
+  bool _isSliderFunction(String function) =>
+      ['dis_current', 'presence_time', 'illuminance_value'].contains(function);
+
+  (double, double) get sliderRange => switch (functionData.functionCode) {
+        'presence_time' => (0, 65535),
+        'dis_current' => (0, 600),
+        'illuminance_value' => (0, 10000),
+        _ => (200, 300),
+      };
+
+  String get getDisplayText {
+    final intValue = int.tryParse('${functionData.value ?? ''}');
+    return switch (functionData.functionCode) {
+      'presence_time' => '${intValue ?? '0'}',
+      'dis_current' => '${intValue ?? '0'}',
+      'illuminance_value' => '${intValue ?? '0'}',
+      _ => '$intValue',
+    };
+  }
+
+  String get _unit => switch (functionData.functionCode) {
+        'presence_time' => 'Min',
+        'dis_current' => 'CM',
+        'illuminance_value' => 'Lux',
+        _ => '',
+      };
+}

lib/pages/routines/widgets/slider_value_selector.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:syncrow_web/pages/routines/widgets/condition_toggle.dart';
+import 'package:syncrow_web/pages/routines/widgets/function_slider.dart';
+import 'package:syncrow_web/pages/routines/widgets/value_display.dart';
+
+class SliderValueSelector extends StatelessWidget {
+  final String? currentCondition;
+  final String dialogType;
+  final (double, double) sliderRange;
+  final String displayedValue;
+  final Object? initialValue;
+  final void Function(String condition) onConditionChanged;
+  final void Function(double value) onSliderChanged;
+  final String unit;
+  final double dividendOfRange;
+
+  const SliderValueSelector({
+    required this.dialogType,
+    required this.sliderRange,
+    required this.displayedValue,
+    required this.initialValue,
+    required this.onConditionChanged,
+    required this.onSliderChanged,
+    required this.currentCondition,
+    required this.unit,
+    required this.dividendOfRange,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      spacing: 16,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        if (dialogType == 'IF')
+          ConditionToggle(
+            currentCondition: currentCondition,
+            onChanged: onConditionChanged,
+          ),
+        ValueDisplay(
+          value: initialValue,
+          label: displayedValue,
+          unit: unit,
+        ),
+        FunctionSlider(
+          initialValue: initialValue,
+          range: sliderRange,
+          onChanged: onSliderChanged,
+          dividendOfRange: dividendOfRange,
+        ),
+      ],
+    );
+  }
+}
+
+class RangeInputFormatter extends TextInputFormatter {
+  const RangeInputFormatter({required this.min, required this.max});
+
+  final double min;
+  final double max;
+
+  @override
+  TextEditingValue formatEditUpdate(
+    TextEditingValue oldValue,
+    TextEditingValue newValue,
+  ) {
+    final text = newValue.text;
+    if (text.isEmpty) {
+      return newValue;
+    }
+
+    final value = double.tryParse(text);
+    if (value == null || value < min || value > max) {
+      return oldValue;
+    }
+
+    return newValue;
+  }
+}

lib/pages/routines/widgets/then_container.dart

@@ -3,10 +3,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/automation_dialog.dart';
-import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/delay_dialog.dart';
 import 'package:syncrow_web/pages/routines/helper/dialog_helper/device_dialog_helper.dart';
 import 'package:syncrow_web/pages/routines/widgets/dragable_card.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/automation_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/delay_dialog.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:uuid/uuid.dart';
 
@@ -26,7 +26,9 @@ class ThenContainer extends StatelessWidget {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    const Text('THEN', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+                    const Text('THEN',
+                        style: TextStyle(
+                            fontSize: 18, fontWeight: FontWeight.bold)),
                     const SizedBox(height: 16),
                     state.isLoading && state.isUpdate == true
                         ? const Center(
@@ -39,12 +41,17 @@ class ThenContainer extends StatelessWidget {
                                 state.thenItems.length,
                                 (index) => GestureDetector(
                                       onTap: () async {
-                                        if (state.thenItems[index]['deviceId'] == 'delay') {
-                                          final result = await DelayHelper.showDelayPickerDialog(
-                                              context, state.thenItems[index]);
+                                        if (state.thenItems[index]
+                                                ['deviceId'] ==
+                                            'delay') {
+                                          final result = await DelayHelper
+                                              .showDelayPickerDialog(context,
+                                                  state.thenItems[index]);
 
                                           if (result != null) {
-                                            context.read<RoutineBloc>().add(AddToThenContainer({
+                                            context
+                                                .read<RoutineBloc>()
+                                                .add(AddToThenContainer({
                                                   ...state.thenItems[index],
                                                   'imagePath': Assets.delay,
                                                   'title': 'Delay',
@@ -53,58 +60,89 @@ class ThenContainer extends StatelessWidget {
                                           return;
                                         }
 
-                                        if (state.thenItems[index]['type'] == 'automation') {
+                                        if (state.thenItems[index]['type'] ==
+                                            'automation') {
                                           final result = await showDialog<bool>(
                                             context: context,
-                                            builder: (BuildContext context) => AutomationDialog(
+                                            builder: (BuildContext context) =>
+                                                AutomationDialog(
                                               automationName:
-                                                  state.thenItems[index]['name'] ?? 'Automation',
+                                                  state.thenItems[index]
+                                                          ['name'] ??
+                                                      'Automation',
                                               automationId:
-                                                  state.thenItems[index]['deviceId'] ?? '',
-                                              uniqueCustomId: state.thenItems[index]
-                                                  ['uniqueCustomId'],
+                                                  state.thenItems[index]
+                                                          ['deviceId'] ??
+                                                      '',
+                                              uniqueCustomId:
+                                                  state.thenItems[index]
+                                                      ['uniqueCustomId'],
                                             ),
                                           );
 
                                           if (result != null) {
-                                            context.read<RoutineBloc>().add(AddToThenContainer({
+                                            context
+                                                .read<RoutineBloc>()
+                                                .add(AddToThenContainer({
                                                   ...state.thenItems[index],
-                                                  'imagePath': Assets.automation,
-                                                  'title': state.thenItems[index]['name'] ??
-                                                      state.thenItems[index]['title'],
+                                                  'imagePath':
+                                                      Assets.automation,
+                                                  'title':
+                                                      state.thenItems[index]
+                                                              ['name'] ??
+                                                          state.thenItems[index]
+                                                              ['title'],
                                                 }));
                                           }
                                           return;
                                         }
 
-                                        final result = await DeviceDialogHelper.showDeviceDialog(
-                                            context, state.thenItems[index],
-                                            removeComparetors: true);
+                                        final result = await DeviceDialogHelper
+                                            .showDeviceDialog(
+                                                context: context,
+                                                data: state.thenItems[index],
+                                                removeComparetors: true,
+                                                dialogType: "THEN");
 
                                         if (result != null) {
-                                          context
-                                              .read<RoutineBloc>()
-                                              .add(AddToThenContainer(state.thenItems[index]));
-                                        } else if (!['AC', '1G', '2G', '3G']
-                                            .contains(state.thenItems[index]['productType'])) {
-                                          context
-                                              .read<RoutineBloc>()
-                                              .add(AddToThenContainer(state.thenItems[index]));
+                                          context.read<RoutineBloc>().add(
+                                              AddToThenContainer(
+                                                  state.thenItems[index]));
+                                        } else if (![
+                                          'AC',
+                                          '1G',
+                                          '2G',
+                                          '3G',
+                                          'WPS',
+                                          'CPS',
+                                          "GW",
+                                          "NCPS"
+                                        ].contains(state.thenItems[index]
+                                            ['productType'])) {
+                                          context.read<RoutineBloc>().add(
+                                              AddToThenContainer(
+                                                  state.thenItems[index]));
                                         }
                                       },
                                       child: DraggableCard(
-                                        imagePath: state.thenItems[index]['imagePath'] ?? '',
-                                        title: state.thenItems[index]['title'] ?? '',
+                                        imagePath: state.thenItems[index]
+                                                ['imagePath'] ??
+                                            '',
+                                        title: state.thenItems[index]
+                                                ['title'] ??
+                                            '',
                                         deviceData: state.thenItems[index],
-                                        padding:
-                                            const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
+                                        padding: const EdgeInsets.symmetric(
+                                            horizontal: 4, vertical: 8),
                                         isFromThen: true,
                                         isFromIf: false,
                                         onRemove: () {
-                                          context.read<RoutineBloc>().add(RemoveDragCard(
-                                              index: index,
-                                              isFromThen: true,
-                                              key: state.thenItems[index]['uniqueCustomId']));
+                                          context.read<RoutineBloc>().add(
+                                              RemoveDragCard(
+                                                  index: index,
+                                                  isFromThen: true,
+                                                  key: state.thenItems[index]
+                                                      ['uniqueCustomId']));
                                         },
                                       ),
                                     ))),
@@ -129,8 +167,8 @@ class ThenContainer extends StatelessWidget {
             }
 
             if (mutableData['type'] == 'automation') {
-              int index =
-                  state.thenItems.indexWhere((item) => item['deviceId'] == mutableData['deviceId']);
+              int index = state.thenItems.indexWhere(
+                  (item) => item['deviceId'] == mutableData['deviceId']);
               if (index != -1) {
                 return;
               }
@@ -155,8 +193,8 @@ class ThenContainer extends StatelessWidget {
             }
 
             if (mutableData['type'] == 'tap_to_run' && state.isAutomation) {
-              int index =
-                  state.thenItems.indexWhere((item) => item['deviceId'] == mutableData['deviceId']);
+              int index = state.thenItems.indexWhere(
+                  (item) => item['deviceId'] == mutableData['deviceId']);
               if (index != -1) {
                 return;
               }
@@ -174,7 +212,8 @@ class ThenContainer extends StatelessWidget {
             }
 
             if (mutableData['deviceId'] == 'delay') {
-              final result = await DelayHelper.showDelayPickerDialog(context, mutableData);
+              final result =
+                  await DelayHelper.showDelayPickerDialog(context, mutableData);
 
               if (result != null) {
                 context.read<RoutineBloc>().add(AddToThenContainer({
@@ -186,11 +225,15 @@ class ThenContainer extends StatelessWidget {
               return;
             }
 
-            final result = await DeviceDialogHelper.showDeviceDialog(context, mutableData,
-                removeComparetors: true);
+            final result = await DeviceDialogHelper.showDeviceDialog(
+                context: context,
+                data: mutableData,
+                removeComparetors: true,
+                dialogType: "THEN");
             if (result != null) {
               context.read<RoutineBloc>().add(AddToThenContainer(mutableData));
-            } else if (!['AC', '1G', '2G', '3G'].contains(mutableData['productType'])) {
+            } else if (!['AC', '1G', '2G', '3G', 'WPS', 'GW', 'CPS', "NCPS"]
+                .contains(mutableData['productType'])) {
               context.read<RoutineBloc>().add(AddToThenContainer(mutableData));
             }
           },

lib/pages/routines/widgets/value_display.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class ValueDisplay extends StatelessWidget {
+  final dynamic value;
+  final String label;
+  final String unit;
+
+  const ValueDisplay({
+    required this.value,
+    required this.label,
+    super.key,
+    required this.unit,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
+      decoration: BoxDecoration(
+        color: ColorsManager.primaryColorWithOpacity.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Text(
+        '$label $unit ',
+        style: context.textTheme.headlineMedium!.copyWith(
+          color: ColorsManager.primaryColorWithOpacity,
+        ),
+      ),
+    );
+  }
+}