push 1gang and 2 gang, better naming

2025-07-09 22:57:21 +00:00 · 2024-09-15 23:21:06 +03:00
parent ebd92c1011
commit b513f31214
27 changed files with 1028 additions and 99 deletions
--- a/lib/pages/device_managment/ac/view/ac_device_batch_control.dart
+++ b/lib/pages/device_managment/ac/view/ac_device_batch_control.dart
@ -12,8 +12,9 @@ import 'package:syncrow_web/pages/device_managment/shared/batch_control/firmware
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class AcDeviceBatchControl extends StatelessWidget with HelperResponsiveLayout {
-  const AcDeviceBatchControl({super.key, required this.devicesIds});
+class AcDeviceBatchControlView extends StatelessWidget
+    with HelperResponsiveLayout {
+  const AcDeviceBatchControlView({super.key, required this.devicesIds});

  final List<String> devicesIds;

--- a/lib/pages/device_managment/ac/view/ac_device_control.dart
+++ b/lib/pages/device_managment/ac/view/ac_device_control.dart
@ -11,8 +11,8 @@ import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_mo
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class AcDeviceControls extends StatelessWidget with HelperResponsiveLayout {
-  const AcDeviceControls({super.key, required this.device});
+class AcDeviceControlsView extends StatelessWidget with HelperResponsiveLayout {
+  const AcDeviceControlsView({super.key, required this.device});

  final AllDevicesModel device;

--- a/lib/pages/device_managment/all_devices/helper/route_controls_based_code.dart
+++ b/lib/pages/device_managment/all_devices/helper/route_controls_based_code.dart
@ -11,70 +11,90 @@ import 'package:syncrow_web/pages/device_managment/door_lock/view/door_lock_batc
 import 'package:syncrow_web/pages/device_managment/door_lock/view/door_lock_control_view.dart';
 import 'package:syncrow_web/pages/device_managment/gateway/view/gateway_batch_control.dart';
 import 'package:syncrow_web/pages/device_managment/gateway/view/gateway_view.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/view/wall_light_batch_control.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/view/wall_light_device_control.dart';
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/view/living_room_batch_controls.dart';
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/view/living_room_device_control.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/view/wall_light_batch_control.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/view/wall_light_device_control.dart';
 import 'package:syncrow_web/pages/device_managment/wall_sensor/view/wall_sensor_batch_control.dart';
 import 'package:syncrow_web/pages/device_managment/wall_sensor/view/wall_sensor_conrtols.dart';

 mixin RouteControlsBasedCode {
  Widget routeControlsWidgets({required AllDevicesModel device}) {
    switch (device.productType) {
+      case '1G':
+        return WallLightDeviceControl(
+          deviceId: device.uuid!,
+        );
+      case '2G':
+        return TwoGangDeviceControlView(
+          deviceId: device.uuid!,
+        );
      case '3G':
-        return LivingRoomDeviceControls(
+        return LivingRoomDeviceControlsView(
          deviceId: device.uuid!,
        );
      case 'GW':
-        return GateWayControls(
+        return GateWayControlsView(
          gatewayId: device.uuid!,
        );
      case 'DL':
-        return DoorLockControls(device: device);
+        return DoorLockControlsView(device: device);
      case 'WPS':
-        return WallSensorControls(device: device);
+        return WallSensorControlsView(device: device);
      case 'CPS':
-        return CeilingSensorControls(
+        return CeilingSensorControlsView(
          device: device,
        );
      case 'CUR':
-        return CurtainStatusControls(
+        return CurtainStatusControlsView(
          deviceId: device.uuid!,
        );
      case 'AC':
-        return AcDeviceControls(device: device);
+        return AcDeviceControlsView(device: device);
      default:
        return const SizedBox();
    }
  }

  /*
-  3G: 2 occurrences
-  1G: 1 occurrence
-  2G: 1 occurrence
-  GW: 2 occurrences
-  DL: 2 occurrences
-  WPS: 2 occurrences
-  CPS: 2 occurrences
-  AC: 3 occurrences
-  CUR: 1 occurrence
-
-
+  3G: 
+  1G: 
+  2G:
+  GW: 
+  DL: 
+  WPS: 
+  CPS:
+  AC: 
+  CUR: 
  */

  Widget routeBatchControlsWidgets({required List<AllDevicesModel> devices}) {
    switch (devices.first.productType) {
-      case '3G':
      case '1G':
-      case '2G':
-        return LivingRoomBatchControls(
+        return WallLightBatchControlView(
          deviceIds: devices
-              .where((e) => (e.productType == '3G' ||
-                  e.productType == '1G' ||
-                  e.productType == '2G'))
+              .where((e) => (e.productType == '1G'))
+              .map((e) => e.uuid!)
+              .toList(),
+        );
+      case '2G':
+        return TwoGangBatchControlView(
+          deviceIds: devices
+              .where((e) => (e.productType == '2G'))
+              .map((e) => e.uuid!)
+              .toList(),
+        );
+      case '3G':
+        return LivingRoomBatchControlsView(
+          deviceIds: devices
+              .where((e) => (e.productType == '3G' || e.productType == '2G'))
              .map((e) => e.uuid!)
              .toList(),
        );
      case 'GW':
-        return GatewayBatchControl(
+        return GatewayBatchControlView(
          gatewayIds: devices
              .where((e) => (e.productType == 'GW'))
              .map((e) => e.uuid!)
@ -87,14 +107,14 @@ mixin RouteControlsBasedCode {
                .map((e) => e.uuid!)
                .toList());
      case 'WPS':
-        return WallSensorBatchControl(
+        return WallSensorBatchControlView(
            devicesIds: devices
                .where((e) => (e.productType == 'WPS'))
                .map((e) => e.uuid!)
                .toList());
      case 'CPS':
-        return CeilingSensorBatchControl(
-           devicesIds: devices
+        return CeilingSensorBatchControlView(
+          devicesIds: devices
              .where((e) => (e.productType == 'CPS'))
              .map((e) => e.uuid!)
              .toList(),
@ -107,7 +127,7 @@ mixin RouteControlsBasedCode {
              .toList(),
        );
      case 'AC':
-        return AcDeviceBatchControl(
+        return AcDeviceBatchControlView(
            devicesIds: devices
                .where((e) => (e.productType == 'AC'))
                .map((e) => e.uuid!)
--- a/lib/pages/device_managment/ceiling_sensor/view/ceiling_sensor_batch_control.dart
+++ b/lib/pages/device_managment/ceiling_sensor/view/ceiling_sensor_batch_control.dart
@ -11,9 +11,9 @@ import 'package:syncrow_web/pages/device_managment/shared/sensors_widgets/presen
 import 'package:syncrow_web/pages/device_managment/shared/sensors_widgets/presense_nobody_time.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class CeilingSensorBatchControl extends StatelessWidget
+class CeilingSensorBatchControlView extends StatelessWidget
    with HelperResponsiveLayout {
-  const CeilingSensorBatchControl({super.key, required this.devicesIds});
+  const CeilingSensorBatchControlView({super.key, required this.devicesIds});

  final List<String> devicesIds;

--- a/lib/pages/device_managment/ceiling_sensor/view/ceiling_sensor_controls.dart
+++ b/lib/pages/device_managment/ceiling_sensor/view/ceiling_sensor_controls.dart
@ -16,9 +16,9 @@ import 'package:syncrow_web/pages/device_managment/shared/table/report_table.dar
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class CeilingSensorControls extends StatelessWidget
+class CeilingSensorControlsView extends StatelessWidget
    with HelperResponsiveLayout {
-  const CeilingSensorControls({super.key, required this.device});
+  const CeilingSensorControlsView({super.key, required this.device});

  final AllDevicesModel device;

--- a/lib/pages/device_managment/curtain/view/curtain_status_view.dart
+++ b/lib/pages/device_managment/curtain/view/curtain_status_view.dart
@ -6,11 +6,11 @@ import 'package:syncrow_web/pages/device_managment/curtain/bloc/curtain_event.da
 import 'package:syncrow_web/pages/device_managment/curtain/bloc/curtain_state.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class CurtainStatusControls extends StatelessWidget
+class CurtainStatusControlsView extends StatelessWidget
    with HelperResponsiveLayout {
  final String deviceId;

-  const CurtainStatusControls({super.key, required this.deviceId});
+  const CurtainStatusControlsView({super.key, required this.deviceId});

  @override
  Widget build(BuildContext context) {
--- a/lib/pages/device_managment/door_lock/view/door_lock_control_view.dart
+++ b/lib/pages/device_managment/door_lock/view/door_lock_control_view.dart
@ -7,10 +7,10 @@ import 'package:syncrow_web/pages/device_managment/door_lock/bloc/door_lock_stat
 import 'package:syncrow_web/pages/device_managment/door_lock/models/door_lock_status_model.dart';
 import 'package:syncrow_web/pages/device_managment/door_lock/widget/door_button.dart';

-class DoorLockControls extends StatelessWidget {
+class DoorLockControlsView extends StatelessWidget {
  final AllDevicesModel device;

-  const DoorLockControls({super.key, required this.device});
+  const DoorLockControlsView({super.key, required this.device});

  @override
  Widget build(BuildContext context) {
--- a/lib/pages/device_managment/gateway/view/gateway_batch_control.dart
+++ b/lib/pages/device_managment/gateway/view/gateway_batch_control.dart
@ -5,8 +5,9 @@ import 'package:syncrow_web/pages/device_managment/shared/batch_control/factory_
 import 'package:syncrow_web/pages/device_managment/shared/batch_control/firmware_update.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class GatewayBatchControl extends StatelessWidget with HelperResponsiveLayout {
-  const GatewayBatchControl({super.key, required this.gatewayIds});
+class GatewayBatchControlView extends StatelessWidget
+    with HelperResponsiveLayout {
+  const GatewayBatchControlView({super.key, required this.gatewayIds});

  final List<String> gatewayIds;

--- a/lib/pages/device_managment/gateway/view/gateway_view.dart
+++ b/lib/pages/device_managment/gateway/view/gateway_view.dart
@ -7,8 +7,8 @@ import 'package:syncrow_web/pages/visitor_password/model/device_model.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class GateWayControls extends StatelessWidget with HelperResponsiveLayout {
-  const GateWayControls({super.key, required this.gatewayId});
+class GateWayControlsView extends StatelessWidget with HelperResponsiveLayout {
+  const GateWayControlsView({super.key, required this.gatewayId});

  final String gatewayId;

--- a/lib/pages/device_managment/one_gang_switch/bloc/wall_light_switch_bloc.dart
+++ b/lib/pages/device_managment/one_gang_switch/bloc/wall_light_switch_bloc.dart
@ -0,0 +1,120 @@
+import 'dart:async';
+
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_event.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_state.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/models/wall_light_status_model.dart';
+import 'package:syncrow_web/services/devices_mang_api.dart';
+
+class WallLightSwitchBloc
+    extends Bloc<WallLightSwitchEvent, WallLightSwitchState> {
+  WallLightSwitchBloc({required this.deviceId})
+      : super(WallLightSwitchInitial()) {
+    on<WallLightSwitchFetchDeviceEvent>(_onFetchDeviceStatus);
+    on<WallLightSwitchControl>(_onControl);
+    on<WallLightSwitchFetchBatchEvent>(_onFetchBatchStatus);
+  }
+
+  late WallLightStatusModel deviceStatus;
+  final String deviceId;
+  Timer? _timer;
+
+  FutureOr<void> _onFetchDeviceStatus(WallLightSwitchFetchDeviceEvent event,
+      Emitter<WallLightSwitchState> emit) async {
+    emit(WallLightSwitchLoading());
+    try {
+      final status =
+          await DevicesManagementApi().getDeviceStatus(event.deviceId);
+
+      deviceStatus =
+          WallLightStatusModel.fromJson(event.deviceId, status.status);
+      emit(WallLightSwitchStatusLoaded(deviceStatus));
+    } catch (e) {
+      emit(WallLightSwitchError(e.toString()));
+    }
+  }
+
+  FutureOr<void> _onControl(
+      WallLightSwitchControl event, Emitter<WallLightSwitchState> emit) async {
+    final oldValue = _getValueByCode(event.code);
+
+    _updateLocalValue(event.code, event.value);
+
+    emit(WallLightSwitchStatusLoaded(deviceStatus));
+
+    await _runDebounce(
+      deviceId: event.deviceId,
+      code: event.code,
+      value: event.value,
+      oldValue: oldValue,
+      emit: emit,
+    );
+  }
+
+  Future<void> _runDebounce({
+    required String deviceId,
+    required String code,
+    required bool value,
+    required bool oldValue,
+    required Emitter<WallLightSwitchState> emit,
+  }) async {
+    if (_timer != null) {
+      _timer!.cancel();
+    }
+
+    _timer = Timer(const Duration(milliseconds: 500), () async {
+      try {
+        final status = await DevicesManagementApi()
+            .deviceControl(deviceId, Status(code: code, value: value));
+
+        if (!status) {
+          _revertValueAndEmit(deviceId, code, oldValue, emit);
+        }
+      } catch (e) {
+        _revertValueAndEmit(deviceId, code, oldValue, emit);
+      }
+    });
+  }
+
+  void _revertValueAndEmit(String deviceId, String code, bool oldValue,
+      Emitter<WallLightSwitchState> emit) {
+    _updateLocalValue(code, oldValue);
+    emit(WallLightSwitchStatusLoaded(deviceStatus));
+  }
+
+  void _updateLocalValue(String code, bool value) {
+    if (code == 'switch_1') {
+      deviceStatus = deviceStatus.copyWith(switch1: value);
+    }
+  }
+
+  bool _getValueByCode(String code) {
+    switch (code) {
+      case 'switch_1':
+        return deviceStatus.switch1;
+      default:
+        return false;
+    }
+  }
+
+  Future<void> _onFetchBatchStatus(WallLightSwitchFetchBatchEvent event,
+      Emitter<WallLightSwitchState> emit) async {
+    emit(WallLightSwitchLoading());
+    try {
+      final status =
+          await DevicesManagementApi().getDeviceStatus(event.deviceId);
+      deviceStatus =
+          WallLightStatusModel.fromJson(event.deviceId, status.status);
+      emit(WallLightSwitchStatusLoaded(deviceStatus));
+    } catch (e) {
+      emit(WallLightSwitchError(e.toString()));
+    }
+  }
+
+  @override
+  Future<void> close() {
+    _timer?.cancel();
+    return super.close();
+  }
+}
--- a/lib/pages/device_managment/one_gang_switch/bloc/wall_light_switch_event.dart
+++ b/lib/pages/device_managment/one_gang_switch/bloc/wall_light_switch_event.dart
@ -0,0 +1,48 @@
+import 'package:equatable/equatable.dart';
+
+class WallLightSwitchEvent extends Equatable {
+  @override
+  List<Object?> get props => [];
+}
+
+class WallLightSwitchFetchDeviceEvent extends WallLightSwitchEvent {
+  final String deviceId;
+
+  WallLightSwitchFetchDeviceEvent(this.deviceId);
+
+  @override
+  List<Object> get props => [deviceId];
+}
+
+class WallLightSwitchControl extends WallLightSwitchEvent {
+  final String deviceId;
+  final String code;
+  final bool value;
+
+  WallLightSwitchControl(
+      {required this.deviceId, required this.code, required this.value});
+
+  @override
+  List<Object> get props => [deviceId, code, value];
+}
+
+class WallLightSwitchFetchBatchEvent extends WallLightSwitchEvent {
+  final String deviceId;
+
+  WallLightSwitchFetchBatchEvent(this.deviceId);
+
+  @override
+  List<Object> get props => [deviceId];
+}
+
+class WallLightSwitchBatchControl extends WallLightSwitchEvent {
+  final List<String> deviceId;
+  final String code;
+  final bool value;
+
+  WallLightSwitchBatchControl(
+      {required this.deviceId, required this.code, required this.value});
+
+  @override
+  List<Object> get props => [deviceId, code, value];
+}
--- a/lib/pages/device_managment/one_gang_switch/bloc/wall_light_switch_state.dart
+++ b/lib/pages/device_managment/one_gang_switch/bloc/wall_light_switch_state.dart
@ -0,0 +1,56 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/models/wall_light_status_model.dart';
+
+class WallLightSwitchState extends Equatable {
+  @override
+  List<Object?> get props => [];
+}
+
+class WallLightSwitchInitial extends WallLightSwitchState {}
+
+class WallLightSwitchLoading extends WallLightSwitchState {}
+
+class WallLightSwitchStatusLoaded extends WallLightSwitchState {
+  final WallLightStatusModel status;
+
+  WallLightSwitchStatusLoaded(this.status);
+
+  @override
+  List<Object> get props => [status];
+}
+
+class WallLightSwitchError extends WallLightSwitchState {
+  final String message;
+
+  WallLightSwitchError(this.message);
+
+  @override
+  List<Object> get props => [message];
+}
+
+class WallLightSwitchControlError extends WallLightSwitchState {
+  final String message;
+
+  WallLightSwitchControlError(this.message);
+
+  @override
+  List<Object> get props => [message];
+}
+
+class WallLightSwitchBatchControlError extends WallLightSwitchState {
+  final String message;
+
+  WallLightSwitchBatchControlError(this.message);
+
+  @override
+  List<Object> get props => [message];
+}
+
+class WallLightSwitchBatchStatusLoaded extends WallLightSwitchState {
+  final List<String> status;
+
+  WallLightSwitchBatchStatusLoaded(this.status);
+
+  @override
+  List<Object> get props => [status];
+}
--- a/lib/pages/device_managment/one_gang_switch/models/wall_light_status_model.dart
+++ b/lib/pages/device_managment/one_gang_switch/models/wall_light_status_model.dart
@ -0,0 +1,47 @@
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+
+class WallLightStatusModel {
+  final String uuid;
+  final bool switch1;
+  final int countDown;
+
+  WallLightStatusModel({
+    required this.uuid,
+    required this.switch1,
+    required this.countDown,
+  });
+
+  factory WallLightStatusModel.fromJson(String id, List<Status> jsonList) {
+    late bool switch1;
+    late int countDown;
+
+    for (var status in jsonList) {
+      switch (status.code) {
+        case 'switch_1':
+          switch1 = status.value ?? false;
+          break;
+        case 'countdown_1':
+          countDown = status.value ?? 0;
+          break;
+      }
+    }
+
+    return WallLightStatusModel(
+      uuid: id,
+      switch1: switch1,
+      countDown: countDown,
+    );
+  }
+
+  WallLightStatusModel copyWith({
+    String? uuid,
+    bool? switch1,
+    int? countDown,
+  }) {
+    return WallLightStatusModel(
+      uuid: uuid ?? this.uuid,
+      switch1: switch1 ?? this.switch1,
+      countDown: countDown ?? this.countDown,
+    );
+  }
+}
--- a/lib/pages/device_managment/one_gang_switch/view/wall_light_batch_control.dart
+++ b/lib/pages/device_managment/one_gang_switch/view/wall_light_batch_control.dart
@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_event.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_state.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/models/wall_light_status_model.dart';
+import 'package:syncrow_web/pages/device_managment/shared/batch_control/factory_reset.dart';
+import 'package:syncrow_web/pages/device_managment/shared/batch_control/firmware_update.dart';
+import 'package:syncrow_web/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+
+class WallLightBatchControlView extends StatelessWidget
+    with HelperResponsiveLayout {
+  const WallLightBatchControlView({super.key, required this.deviceIds});
+
+  final List<String> deviceIds;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => WallLightSwitchBloc(deviceId: deviceIds.first)
+        ..add(WallLightSwitchFetchBatchEvent(deviceIds.first)),
+      child: BlocBuilder<WallLightSwitchBloc, WallLightSwitchState>(
+        builder: (context, state) {
+          if (state is WallLightSwitchLoading) {
+            return const Center(child: CircularProgressIndicator());
+          } else if (state is WallLightSwitchStatusLoaded) {
+            return _buildStatusControls(context, state.status);
+          } else if (state is WallLightSwitchError ||
+              state is WallLightSwitchControlError) {
+            return const Center(child: Text('Error fetching status'));
+          } else {
+            return const Center(child: CircularProgressIndicator());
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildStatusControls(
+      BuildContext context, WallLightStatusModel status) {
+    final isExtraLarge = isExtraLargeScreenSize(context);
+    final isLarge = isLargeScreenSize(context);
+    final isMedium = isMediumScreenSize(context);
+    return SizedBox(
+      child: GridView(
+        padding: const EdgeInsets.symmetric(horizontal: 50),
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: isLarge || isExtraLarge
+              ? 3
+              : isMedium
+                  ? 2
+                  : 1,
+          mainAxisExtent: 140,
+          crossAxisSpacing: 12,
+          mainAxisSpacing: 12,
+        ),
+        children: [
+          ToggleWidget(
+            value: status.switch1,
+            code: 'switch_1',
+            deviceId: deviceIds.first,
+            label: 'Wall Light',
+            onChange: (value) {},
+          ),
+          FirmwareUpdateWidget(
+            deviceId: deviceIds.first,
+            version: 12,
+          ),
+          FactoryResetWidget(deviceId: deviceIds.first),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/pages/device_managment/one_gang_switch/view/wall_light_device_control.dart
+++ b/lib/pages/device_managment/one_gang_switch/view/wall_light_device_control.dart
@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_event.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/bloc/wall_light_switch_state.dart';
+import 'package:syncrow_web/pages/device_managment/one_gang_switch/models/wall_light_status_model.dart';
+import 'package:syncrow_web/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+
+class WallLightDeviceControl extends StatelessWidget
+    with HelperResponsiveLayout {
+  final String deviceId;
+
+  const WallLightDeviceControl({super.key, required this.deviceId});
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => WallLightSwitchBloc(deviceId: deviceId)
+        ..add(WallLightSwitchFetchDeviceEvent(deviceId)),
+      child: BlocBuilder<WallLightSwitchBloc, WallLightSwitchState>(
+        builder: (context, state) {
+          if (state is WallLightSwitchLoading) {
+            return const Center(child: CircularProgressIndicator());
+          } else if (state is WallLightSwitchStatusLoaded) {
+            return _buildStatusControls(context, state.status);
+          } else if (state is WallLightSwitchError ||
+              state is WallLightSwitchControlError) {
+            return const Center(child: Text('Error fetching status'));
+          } else {
+            return const Center(child: CircularProgressIndicator());
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildStatusControls(
+      BuildContext context, WallLightStatusModel status) {
+    final isExtraLarge = isExtraLargeScreenSize(context);
+    final isLarge = isLargeScreenSize(context);
+    final isMedium = isMediumScreenSize(context);
+    return GridView(
+      padding: const EdgeInsets.symmetric(horizontal: 50),
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: isLarge || isExtraLarge
+            ? 3
+            : isMedium
+                ? 2
+                : 1,
+        mainAxisExtent: 140,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 12,
+      ),
+      children: [
+        const SizedBox(),
+        ToggleWidget(
+          value: status.switch1,
+          code: 'switch_1',
+          deviceId: deviceId,
+          label: 'Wall Light',
+          onChange: (value) {
+            context.read<WallLightSwitchBloc>().add(WallLightSwitchControl(
+                  deviceId: deviceId,
+                  code: 'switch_1',
+                  value: value,
+                ));
+          },
+        ),
+        const SizedBox(),
+      ],
+    );
+  }
+}
--- a/lib/pages/device_managment/three_gang_switch/bloc/living_room_event.dart
+++ b/lib/pages/device_managment/three_gang_switch/bloc/living_room_event.dart
@ -37,3 +37,15 @@ class LivingRoomControl extends LivingRoomEvent {
  @override
  List<Object> get props => [deviceId, code, value];
 }
+
+class LivingRoomBatchControl extends LivingRoomEvent {
+  final List<String> deviceId;
+  final String code;
+  final bool value;
+
+  const LivingRoomBatchControl(
+      {required this.deviceId, required this.code, required this.value});
+
+  @override
+  List<Object> get props => [deviceId, code, value];
+}
--- a/lib/pages/device_managment/three_gang_switch/view/living_room_batch_controls.dart
+++ b/lib/pages/device_managment/three_gang_switch/view/living_room_batch_controls.dart
@ -7,9 +7,9 @@ import 'package:syncrow_web/pages/device_managment/three_gang_switch/models/livi
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class LivingRoomBatchControls extends StatelessWidget
+class LivingRoomBatchControlsView extends StatelessWidget
    with HelperResponsiveLayout {
-  const LivingRoomBatchControls({super.key, required this.deviceIds});
+  const LivingRoomBatchControlsView({super.key, required this.deviceIds});

  final List<String> deviceIds;

@ -61,6 +61,7 @@ class LivingRoomBatchControls extends StatelessWidget
            code: 'switch_1',
            deviceId: deviceIds.first,
            label: 'Wall Light',
+            onChange: (value) {},
          ),
          FirmwareUpdateWidget(
            deviceId: deviceIds.first,
--- a/lib/pages/device_managment/three_gang_switch/view/living_room_device_control.dart
+++ b/lib/pages/device_managment/three_gang_switch/view/living_room_device_control.dart
@ -5,11 +5,11 @@ import 'package:syncrow_web/pages/device_managment/three_gang_switch/models/livi
 import 'package:syncrow_web/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class LivingRoomDeviceControls extends StatelessWidget
+class LivingRoomDeviceControlsView extends StatelessWidget
    with HelperResponsiveLayout {
  final String deviceId;

-  const LivingRoomDeviceControls({super.key, required this.deviceId});
+  const LivingRoomDeviceControlsView({super.key, required this.deviceId});

  @override
  Widget build(BuildContext context) {
@ -38,42 +38,58 @@ class LivingRoomDeviceControls extends StatelessWidget
    final isExtraLarge = isExtraLargeScreenSize(context);
    final isLarge = isLargeScreenSize(context);
    final isMedium = isMediumScreenSize(context);
-    return Container(
-      child: GridView(
-        padding: const EdgeInsets.symmetric(horizontal: 50),
-        shrinkWrap: true,
-        physics: const NeverScrollableScrollPhysics(),
-        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-          crossAxisCount: isLarge || isExtraLarge
-              ? 3
-              : isMedium
-                  ? 2
-                  : 1,
-          mainAxisExtent: 140,
-          crossAxisSpacing: 12,
-          mainAxisSpacing: 12,
-        ),
-        children: [
-          ToggleWidget(
-            value: status.switch1,
-            code: 'switch_1',
-            deviceId: deviceId,
-            label: 'Wall Light',
-          ),
-          ToggleWidget(
-            value: status.switch2,
-            code: 'switch_2',
-            deviceId: deviceId,
-            label: 'Ceiling Light',
-          ),
-          ToggleWidget(
-            value: status.switch3,
-            code: 'switch_3',
-            deviceId: deviceId,
-            label: 'Spotlight',
-          ),
-        ],
+    return GridView(
+      padding: const EdgeInsets.symmetric(horizontal: 50),
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: isLarge || isExtraLarge
+            ? 3
+            : isMedium
+                ? 2
+                : 1,
+        mainAxisExtent: 140,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 12,
      ),
+      children: [
+        ToggleWidget(
+          value: status.switch1,
+          code: 'switch_1',
+          deviceId: deviceId,
+          label: 'Wall Light',
+          onChange: (value) {
+            context.read<LivingRoomBloc>().add(
+                  LivingRoomControl(
+                      deviceId: deviceId, code: 'switch_1', value: value),
+                );
+          },
+        ),
+        ToggleWidget(
+          value: status.switch2,
+          code: 'switch_2',
+          deviceId: deviceId,
+          label: 'Ceiling Light',
+          onChange: (value) {
+            context.read<LivingRoomBloc>().add(
+                  LivingRoomControl(
+                      deviceId: deviceId, code: 'switch_2', value: value),
+                );
+          },
+        ),
+        ToggleWidget(
+          value: status.switch3,
+          code: 'switch_3',
+          deviceId: deviceId,
+          label: 'Spotlight',
+          onChange: (value) {
+            context.read<LivingRoomBloc>().add(
+                  LivingRoomControl(
+                      deviceId: deviceId, code: 'switch_3', value: value),
+                );
+          },
+        ),
+      ],
    );
  }
 }
--- a/lib/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart
+++ b/lib/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart
@ -1,8 +1,6 @@
 import 'package:flutter/cupertino.dart';
 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/three_gang_switch/bloc/living_room_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';
@ -12,6 +10,7 @@ class ToggleWidget extends StatelessWidget {
  final String code;
  final String deviceId;
  final String label;
+  final Function(dynamic value) onChange;

  const ToggleWidget({
    super.key,
@ -19,6 +18,7 @@ class ToggleWidget extends StatelessWidget {
    required this.code,
    required this.deviceId,
    required this.label,
+    required this.onChange,
  });

  @override
@ -64,15 +64,7 @@ class ToggleWidget extends StatelessWidget {
            child: CupertinoSwitch(
              value: value,
              activeColor: ColorsManager.dialogBlueTitle,
-              onChanged: (newValue) {
-                context.read<LivingRoomBloc>().add(
-                      LivingRoomControl(
-                        deviceId: deviceId,
-                        code: code,
-                        value: newValue,
-                      ),
-                    );
-              },
+              onChanged: onChange,
            ),
          ),
        ],
--- a/lib/pages/device_managment/two_gang_switch/bloc/two_gang_switch_bloc.dart
+++ b/lib/pages/device_managment/two_gang_switch/bloc/two_gang_switch_bloc.dart
@ -0,0 +1,125 @@
+import 'dart:async';
+
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_event.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_state.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/models/two_gang_status_model.dart';
+import 'package:syncrow_web/services/devices_mang_api.dart';
+
+class TwoGangSwitchBloc extends Bloc<TwoGangSwitchEvent, TwoGangSwitchState> {
+  TwoGangSwitchBloc({required this.deviceId})
+      : super(TwoGangSwitchInitial()) {
+    on<TwoGangSwitchFetchDeviceEvent>(_onFetchDeviceStatus);
+    on<TwoGangSwitchControl>(_onControl);
+    on<TwoGangSwitchFetchBatchEvent>(_onFetchBatchStatus);
+  }
+
+  late TwoGangStatusModel deviceStatus;
+  final String deviceId;
+  Timer? _timer;
+
+  FutureOr<void> _onFetchDeviceStatus(TwoGangSwitchFetchDeviceEvent event,
+      Emitter<TwoGangSwitchState> emit) async {
+    emit(TwoGangSwitchLoading());
+    try {
+      final status =
+          await DevicesManagementApi().getDeviceStatus(event.deviceId);
+
+      deviceStatus = TwoGangStatusModel.fromJson(event.deviceId, status.status);
+      emit(TwoGangSwitchStatusLoaded(deviceStatus));
+    } catch (e) {
+      emit(TwoGangSwitchError(e.toString()));
+    }
+  }
+
+  FutureOr<void> _onControl(
+      TwoGangSwitchControl event, Emitter<TwoGangSwitchState> emit) async {
+    final oldValue = _getValueByCode(event.code);
+
+    _updateLocalValue(event.code, event.value);
+
+    emit(TwoGangSwitchStatusLoaded(deviceStatus));
+
+    await _runDebounce(
+      deviceId: event.deviceId,
+      code: event.code,
+      value: event.value,
+      oldValue: oldValue,
+      emit: emit,
+    );
+  }
+
+  Future<void> _runDebounce({
+    required String deviceId,
+    required String code,
+    required bool value,
+    required bool oldValue,
+    required Emitter<TwoGangSwitchState> emit,
+  }) async {
+    if (_timer != null) {
+      _timer!.cancel();
+    }
+
+    _timer = Timer(const Duration(milliseconds: 500), () async {
+      try {
+        final status = await DevicesManagementApi()
+            .deviceControl(deviceId, Status(code: code, value: value));
+
+        if (!status) {
+          _revertValueAndEmit(deviceId, code, oldValue, emit);
+        }
+      } catch (e) {
+        _revertValueAndEmit(deviceId, code, oldValue, emit);
+      }
+    });
+  }
+
+  void _revertValueAndEmit(String deviceId, String code, bool oldValue,
+      Emitter<TwoGangSwitchState> emit) {
+    _updateLocalValue(code, oldValue);
+    emit(TwoGangSwitchStatusLoaded(deviceStatus));
+  }
+
+  void _updateLocalValue(String code, bool value) {
+    if (code == 'switch_1') {
+      deviceStatus = deviceStatus.copyWith(switch1: value);
+    }
+
+    if (code == 'switch_2') {
+      deviceStatus = deviceStatus.copyWith(switch2: value);
+    }
+
+  }
+
+  bool _getValueByCode(String code) {
+    switch (code) {
+      case 'switch_1':
+        return deviceStatus.switch1;
+      case 'switch_2':
+        return deviceStatus.switch2;
+      default:
+        return false;
+    }
+  }
+
+  Future<void> _onFetchBatchStatus( TwoGangSwitchFetchBatchEvent event,
+      Emitter< TwoGangSwitchState> emit) async {
+    emit(TwoGangSwitchLoading());
+    try {
+      final status =
+          await DevicesManagementApi().getDeviceStatus(event.deviceId);
+      deviceStatus =
+          TwoGangStatusModel.fromJson(event.deviceId, status.status);
+      emit(TwoGangSwitchStatusLoaded(deviceStatus));
+    } catch (e) {
+      emit(TwoGangSwitchError(e.toString()));
+    }
+  }
+
+  @override
+  Future<void> close() {
+    _timer?.cancel();
+    return super.close();
+  }
+}
--- a/lib/pages/device_managment/two_gang_switch/bloc/two_gang_switch_event.dart
+++ b/lib/pages/device_managment/two_gang_switch/bloc/two_gang_switch_event.dart
@ -0,0 +1,48 @@
+import 'package:equatable/equatable.dart';
+
+class TwoGangSwitchEvent extends Equatable {
+  @override
+  List<Object?> get props => [];
+}
+
+class TwoGangSwitchFetchDeviceEvent extends TwoGangSwitchEvent {
+  final String deviceId;
+
+  TwoGangSwitchFetchDeviceEvent(this.deviceId);
+
+  @override
+  List<Object> get props => [deviceId];
+}
+
+class TwoGangSwitchControl extends TwoGangSwitchEvent {
+  final String deviceId;
+  final String code;
+  final bool value;
+
+  TwoGangSwitchControl(
+      {required this.deviceId, required this.code, required this.value});
+
+  @override
+  List<Object> get props => [deviceId, code, value];
+}
+
+class TwoGangSwitchFetchBatchEvent extends TwoGangSwitchEvent {
+  final String deviceId;
+
+  TwoGangSwitchFetchBatchEvent(this.deviceId);
+
+  @override
+  List<Object> get props => [deviceId];
+}
+
+class TwoGangSwitchBatchControl extends TwoGangSwitchEvent {
+  final List<String> deviceId;
+  final String code;
+  final bool value;
+
+  TwoGangSwitchBatchControl(
+      {required this.deviceId, required this.code, required this.value});
+
+  @override
+  List<Object> get props => [deviceId, code, value];
+}
--- a/lib/pages/device_managment/two_gang_switch/bloc/two_gang_switch_state.dart
+++ b/lib/pages/device_managment/two_gang_switch/bloc/two_gang_switch_state.dart
@ -0,0 +1,56 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/models/two_gang_status_model.dart';
+
+class TwoGangSwitchState extends Equatable {
+  @override
+  List<Object?> get props => [];
+}
+
+class TwoGangSwitchInitial extends TwoGangSwitchState {}
+
+class TwoGangSwitchLoading extends TwoGangSwitchState {}
+
+class TwoGangSwitchStatusLoaded extends TwoGangSwitchState {
+  final TwoGangStatusModel status;
+
+  TwoGangSwitchStatusLoaded(this.status);
+
+  @override
+  List<Object> get props => [status];
+}
+
+class TwoGangSwitchError extends TwoGangSwitchState {
+  final String message;
+
+ TwoGangSwitchError(this.message);
+
+  @override
+  List<Object> get props => [message];
+}
+
+class TwoGangSwitchControlError extends TwoGangSwitchState {
+  final String message;
+
+  TwoGangSwitchControlError(this.message);
+
+  @override
+  List<Object> get props => [message];
+}
+
+class TwoGangSwitchBatchControlError extends TwoGangSwitchState {
+  final String message;
+
+  TwoGangSwitchBatchControlError(this.message);
+
+  @override
+  List<Object> get props => [message];
+}
+
+class TwoGangSwitchBatchStatusLoaded extends TwoGangSwitchState {
+  final List<String> status;
+
+  TwoGangSwitchBatchStatusLoaded(this.status);
+
+  @override
+  List<Object> get props => [status];
+}
--- a/lib/pages/device_managment/two_gang_switch/models/two_gang_status_model.dart
+++ b/lib/pages/device_managment/two_gang_switch/models/two_gang_status_model.dart
@ -0,0 +1,65 @@
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_status.dart';
+
+class TwoGangStatusModel {
+  final String uuid;
+  final bool switch1;
+  final bool switch2;
+  final int countDown;
+  final int countDown2;
+
+  TwoGangStatusModel({
+    required this.uuid,
+    required this.switch1,
+    required this.switch2,
+    required this.countDown,
+    required this.countDown2,
+  });
+
+  factory TwoGangStatusModel.fromJson(String id, List<Status> jsonList) {
+    late bool switch1;
+    late bool switch2;
+    late int countDown;
+    late int countDown2;
+
+    for (var status in jsonList) {
+      switch (status.code) {
+        case 'switch_1':
+          switch1 = status.value ?? false;
+          break;
+        case 'countdown_1':
+          countDown = status.value ?? 0;
+          break;
+        case 'switch_2':
+          switch2 = status.value ?? false;
+          break;
+        case 'countdown_2':
+          countDown2 = status.value ?? 0;
+          break;
+      }
+    }
+
+    return TwoGangStatusModel(
+      uuid: id,
+      switch1: switch1,
+      countDown: countDown,
+      switch2: switch2,
+      countDown2: countDown2,
+    );
+  }
+
+  TwoGangStatusModel copyWith({
+    String? uuid,
+    bool? switch1,
+    int? countDown,
+    bool? switch2,
+    int? countDown2,
+  }) {
+    return TwoGangStatusModel(
+      uuid: uuid ?? this.uuid,
+      switch1: switch1 ?? this.switch1,
+      countDown: countDown ?? this.countDown,
+      switch2: switch2 ?? this.switch2,
+      countDown2: countDown2 ?? this.countDown2,
+    );
+  }
+}
--- a/lib/pages/device_managment/two_gang_switch/view/wall_light_batch_control.dart
+++ b/lib/pages/device_managment/two_gang_switch/view/wall_light_batch_control.dart
@ -0,0 +1,83 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/shared/batch_control/factory_reset.dart';
+import 'package:syncrow_web/pages/device_managment/shared/batch_control/firmware_update.dart';
+import 'package:syncrow_web/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_event.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_state.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/models/two_gang_status_model.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+
+class TwoGangBatchControlView extends StatelessWidget
+    with HelperResponsiveLayout {
+  const TwoGangBatchControlView({super.key, required this.deviceIds});
+
+  final List<String> deviceIds;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => TwoGangSwitchBloc(deviceId: deviceIds.first)
+        ..add(TwoGangSwitchFetchBatchEvent(deviceIds.first)),
+      child: BlocBuilder<TwoGangSwitchBloc, TwoGangSwitchState>(
+        builder: (context, state) {
+          if (state is TwoGangSwitchLoading) {
+            return const Center(child: CircularProgressIndicator());
+          } else if (state is TwoGangSwitchStatusLoaded) {
+            return _buildStatusControls(context, state.status);
+          } else if (state is TwoGangSwitchError ||
+              state is TwoGangSwitchControlError) {
+            return const Center(child: Text('Error fetching status'));
+          } else {
+            return const Center(child: CircularProgressIndicator());
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildStatusControls(BuildContext context, TwoGangStatusModel status) {
+    final isExtraLarge = isExtraLargeScreenSize(context);
+    final isLarge = isLargeScreenSize(context);
+    final isMedium = isMediumScreenSize(context);
+    return SizedBox(
+      child: GridView(
+        padding: const EdgeInsets.symmetric(horizontal: 50),
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: isLarge || isExtraLarge
+              ? 3
+              : isMedium
+                  ? 2
+                  : 1,
+          mainAxisExtent: 140,
+          crossAxisSpacing: 12,
+          mainAxisSpacing: 12,
+        ),
+        children: [
+          ToggleWidget(
+            value: status.switch1,
+            code: 'switch_1',
+            deviceId: deviceIds.first,
+            label: 'Wall Light',
+            onChange: (value) {},
+          ),
+          ToggleWidget(
+            value: status.switch2,
+            code: 'switch_2',
+            deviceId: deviceIds.first,
+            label: 'Ceiling Light',
+            onChange: (value) {},
+          ),
+          FirmwareUpdateWidget(
+            deviceId: deviceIds.first,
+            version: 12,
+          ),
+          FactoryResetWidget(deviceId: deviceIds.first),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/pages/device_managment/two_gang_switch/view/wall_light_device_control.dart
+++ b/lib/pages/device_managment/two_gang_switch/view/wall_light_device_control.dart
@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/three_gang_switch/widgets/living_toggle_widget.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_event.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/bloc/two_gang_switch_state.dart';
+import 'package:syncrow_web/pages/device_managment/two_gang_switch/models/two_gang_status_model.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
+
+class TwoGangDeviceControlView extends StatelessWidget
+    with HelperResponsiveLayout {
+  final String deviceId;
+
+  const TwoGangDeviceControlView({super.key, required this.deviceId});
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => TwoGangSwitchBloc(deviceId: deviceId)
+        ..add(TwoGangSwitchFetchDeviceEvent(deviceId)),
+      child: BlocBuilder<TwoGangSwitchBloc, TwoGangSwitchState>(
+        builder: (context, state) {
+          if (state is TwoGangSwitchLoading) {
+            return const Center(child: CircularProgressIndicator());
+          } else if (state is TwoGangSwitchStatusLoaded) {
+            return _buildStatusControls(context, state.status);
+          } else if (state is TwoGangSwitchError ||
+              state is TwoGangSwitchControlError) {
+            return const Center(child: Text('Error fetching status'));
+          } else {
+            return const Center(child: CircularProgressIndicator());
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildStatusControls(BuildContext context, TwoGangStatusModel status) {
+    final isExtraLarge = isExtraLargeScreenSize(context);
+    final isLarge = isLargeScreenSize(context);
+    final isMedium = isMediumScreenSize(context);
+    return GridView(
+      padding: const EdgeInsets.symmetric(horizontal: 50),
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: isLarge || isExtraLarge
+            ? 3
+            : isMedium
+                ? 2
+                : 1,
+        mainAxisExtent: 140,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 12,
+      ),
+      children: [
+        ToggleWidget(
+          value: status.switch1,
+          code: 'switch_1',
+          deviceId: deviceId,
+          label: 'Wall Light',
+          onChange: (value) {
+            context.read<TwoGangSwitchBloc>().add(TwoGangSwitchControl(
+                  deviceId: deviceId,
+                  code: 'switch_1',
+                  value: value,
+                ));
+          },
+        ),
+        ToggleWidget(
+          value: status.switch2,
+          code: 'switch_2',
+          deviceId: deviceId,
+          label: 'Ceiling Light',
+          onChange: (value) {
+            context.read<TwoGangSwitchBloc>().add(TwoGangSwitchControl(
+                  deviceId: deviceId,
+                  code: 'switch_2',
+                  value: value,
+                ));
+          },
+        ),
+      ],
+    );
+  }
+}
--- a/lib/pages/device_managment/wall_sensor/view/wall_sensor_batch_control.dart
+++ b/lib/pages/device_managment/wall_sensor/view/wall_sensor_batch_control.dart
@ -9,9 +9,9 @@ import 'package:syncrow_web/pages/device_managment/wall_sensor/bloc/state.dart';
 import 'package:syncrow_web/pages/device_managment/wall_sensor/model/wall_sensor_model.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class WallSensorBatchControl extends StatelessWidget
+class WallSensorBatchControlView extends StatelessWidget
    with HelperResponsiveLayout {
-  const WallSensorBatchControl({super.key, required this.devicesIds});
+  const WallSensorBatchControlView({super.key, required this.devicesIds});

  final List<String> devicesIds;

--- a/lib/pages/device_managment/wall_sensor/view/wall_sensor_conrtols.dart
+++ b/lib/pages/device_managment/wall_sensor/view/wall_sensor_conrtols.dart
@ -14,8 +14,9 @@ import 'package:syncrow_web/pages/device_managment/wall_sensor/model/wall_sensor
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';

-class WallSensorControls extends StatelessWidget with HelperResponsiveLayout {
-  const WallSensorControls({super.key, required this.device});
+class WallSensorControlsView extends StatelessWidget
+    with HelperResponsiveLayout {
+  const WallSensorControlsView({super.key, required this.device});

  final AllDevicesModel device;