Merge branch 'dev' of https://github.com/SyncrowIOT/web into SP-1665-FE-Return-a-readable-error-when-a-connection-error-Exception-occurs-on-the-charts

lib/pages/analytics/models/analytics_device.dart

@@ -23,17 +23,18 @@ class AnalyticsDevice {
     return AnalyticsDevice(
       uuid: json['uuid'] as String,
       name: json['name'] as String,
-      createdAt: json['createdAt'] != null ? DateTime.parse(json['createdAt'] as String) : null,
-      updatedAt: json['updatedAt'] != null ? DateTime.parse(json['updatedAt'] as String) : null,
+      createdAt: json['createdAt'] != null
+          ? DateTime.parse(json['createdAt'] as String)
+          : null,
+      updatedAt: json['updatedAt'] != null
+          ? DateTime.parse(json['updatedAt'] as String)
+          : null,
       deviceTuyaUuid: json['deviceTuyaUuid'] as String?,
       isActive: json['isActive'] as bool?,
-      productDevice: json['productDevice'] != null 
-        ? ProductDevice.fromJson(json['productDevice'] as Map<String, dynamic>) 
-        : null,
-      spaceUuid: (json['spaces'] as List<dynamic>?)
-          ?.map((e) => e['uuid'])
-          .firstOrNull
-          ?.toString(),
+      productDevice: json['productDevice'] != null
+          ? ProductDevice.fromJson(json['productDevice'] as Map<String, dynamic>)
+          : null,
+      spaceUuid: json['spaceUuid'] as String?,
     );
   }
 }
@@ -60,8 +61,12 @@ class ProductDevice {
   factory ProductDevice.fromJson(Map<String, dynamic> json) {
     return ProductDevice(
       uuid: json['uuid'] as String?,
-      createdAt: json['createdAt'] != null ? DateTime.parse(json['createdAt'] as String) : null,
-      updatedAt: json['updatedAt'] != null ? DateTime.parse(json['updatedAt'] as String) : null,
+      createdAt: json['createdAt'] != null
+          ? DateTime.parse(json['createdAt'] as String)
+          : null,
+      updatedAt: json['updatedAt'] != null
+          ? DateTime.parse(json['updatedAt'] as String)
+          : null,
       catName: json['catName'] as String?,
       prodId: json['prodId'] as String?,
       name: json['name'] as String?,

lib/pages/analytics/modules/energy_management/helpers/energy_management_charts_helper.dart

@@ -38,7 +38,7 @@ abstract final class EnergyManagementChartsHelper {
         sideTitles: SideTitles(
           showTitles: true,
           maxIncluded: false,
-          minIncluded: false,
+          minIncluded: true,
           interval: leftTitlesInterval,
           reservedSize: 110,
           getTitlesWidget: (value, meta) => Padding(

lib/pages/analytics/modules/energy_management/helpers/fetch_energy_management_data_helper.dart

@@ -16,7 +16,6 @@ import 'package:syncrow_web/pages/analytics/params/get_total_energy_consumption_
 abstract final class FetchEnergyManagementDataHelper {
   const FetchEnergyManagementDataHelper._();
 
-  // static const String _powerClampId = 'cb71d6ad-6e29-4eaa-ae3e-1a0d1c5f60fa';
   static AnalyticsDevice? getSelectedDevice(BuildContext context) {
     return context.read<AnalyticsDevicesBloc>().state.selectedDevice;
   }
@@ -48,7 +47,6 @@ abstract final class FetchEnergyManagementDataHelper {
     loadTotalEnergyConsumption(
       context,
       selectedDate: selectedDate0,
-      communityId: communityId,
       spaceId: spaceId,
     );
     final selectedDevice = getSelectedDevice(context);
@@ -61,7 +59,6 @@ abstract final class FetchEnergyManagementDataHelper {
     }
     loadEnergyConsumptionPerDevice(
       context,
-      communityId: communityId,
       spaceId: spaceId,
       selectedDate: selectedDate0,
     );
@@ -84,12 +81,10 @@ abstract final class FetchEnergyManagementDataHelper {
   static void loadTotalEnergyConsumption(
     BuildContext context, {
     DateTime? selectedDate,
-    required String communityId,
     required String spaceId,
   }) {
     final param = GetTotalEnergyConsumptionParam(
       spaceId: spaceId,
-      communityId: communityId,
       monthDate: selectedDate,
     );
     context.read<TotalEnergyConsumptionBloc>().add(
@@ -100,12 +95,10 @@ abstract final class FetchEnergyManagementDataHelper {
   static void loadEnergyConsumptionPerDevice(
     BuildContext context, {
     DateTime? selectedDate,
-    required String communityId,
     required String spaceId,
   }) {
     final param = GetEnergyConsumptionPerDeviceParam(
       spaceId: spaceId,
-      communityId: communityId,
       monthDate: selectedDate,
     );
     context.read<EnergyConsumptionPerDeviceBloc>().add(

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

@@ -23,7 +23,6 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
           ),
           padding: const EdgeInsets.all(30),
           child: Column(
-            spacing: 20,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               AnalyticsErrorWidget(state.errorMessage),
@@ -52,7 +51,9 @@ class EnergyConsumptionPerDeviceChartBox extends StatelessWidget {
                   ),
                 ],
               ),
+              const SizedBox(height: 20),
               const Divider(height: 0),
+              const SizedBox(height: 20),
               Expanded(
                 child: EnergyConsumptionPerDeviceChart(chartData: state.chartData),
               ),

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

@@ -41,7 +41,7 @@ class EnergyConsumptionPerDeviceDevicesList extends StatelessWidget {
         .color;
 
     return Tooltip(
-      message: '${device.name}\n${device.productDevice?.uuid ?? ''}',
+      message: '${device.name}\n${device.spaceUuid ?? ''}',
       child: ChartInformativeCell(title: Text(device.name), color: deviceColor),
     );
   }

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

@@ -41,7 +41,7 @@ class PowerClampEnergyDataWidget extends StatelessWidget {
                 AnalyticsErrorWidget(state.errorMessage),
                 AnalyticsSidebarHeader(
                   title: 'Smart Power Clamp',
-                  showSpaceUuid: true,
+                  showSpaceUuidInDevicesDropdown: true,
                   onChanged: (device) {
                     FetchEnergyManagementDataHelper.loadEnergyConsumptionByPhases(
                       context,

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

@@ -19,7 +19,6 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
         ),
         padding: const EdgeInsets.all(30),
         child: Column(
-          spacing: 20,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             AnalyticsErrorWidget(state.errorMessage),
@@ -39,7 +38,9 @@ class TotalEnergyConsumptionChartBox extends StatelessWidget {
                 const Spacer(flex: 4),
               ],
             ),
+            const SizedBox(height: 20),
             const Divider(),
+            const SizedBox(height: 20),
             TotalEnergyConsumptionChart(chartData: state.chartData),
           ],
         ),

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

@@ -16,7 +16,7 @@ class OccupancyChart extends StatelessWidget {
   Widget build(BuildContext context) {
     return BarChart(
       BarChartData(
-        maxY: 100.0,
+        maxY: 100.001,
         gridData: EnergyManagementChartsHelper.gridData().copyWith(
           checkToShowHorizontalLine: (value) => true,
           horizontalInterval: 20,
@@ -134,7 +134,7 @@ class OccupancyChart extends StatelessWidget {
           alignment: AlignmentDirectional.bottomCenter,
           fit: BoxFit.scaleDown,
           child: Text(
-            (value + 1).toString(),
+            chartData[value.toInt()].date.day.toString(),
             style: context.textTheme.bodySmall?.copyWith(
               color: ColorsManager.greyColor,
               fontSize: 8,

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

@@ -22,7 +22,6 @@ class OccupancyChartBox extends StatelessWidget {
           padding: const EdgeInsets.all(30),
           decoration: containerWhiteDecoration,
           child: Column(
-            spacing: 20,
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -65,7 +64,9 @@ class OccupancyChartBox extends StatelessWidget {
                   ),
                 ],
               ),
-              const Divider(height: 0),
+              const SizedBox(height: 20),
+              const Divider(),
+              const SizedBox(height: 20),
               Expanded(child: OccupancyChart(chartData: state.chartData)),
             ],
           ),

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

@@ -22,7 +22,6 @@ class OccupancyHeatMapBox extends StatelessWidget {
           padding: const EdgeInsets.all(30),
           decoration: containerWhiteDecoration,
           child: Column(
-            spacing: 20,
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -66,7 +65,9 @@ class OccupancyHeatMapBox extends StatelessWidget {
                   ),
                 ],
               ),
-              const Divider(height: 0),
+              const SizedBox(height: 20),
+              const Divider(),
+              const SizedBox(height: 20),
               Expanded(
                 child: OccupancyHeatMap(
                   heatMapData: state.heatMapData.asMap().map(

lib/pages/analytics/params/get_energy_consumption_per_device_param.dart

@@ -2,18 +2,15 @@ class GetEnergyConsumptionPerDeviceParam {
   const GetEnergyConsumptionPerDeviceParam({
     this.monthDate,
     this.spaceId,
-    this.communityId,
   });
 
   final DateTime? monthDate;
   final String? spaceId;
-  final String? communityId;
 
   Map<String, dynamic> toJson() => {
         'monthDate':
             '${monthDate?.year}-${monthDate?.month.toString().padLeft(2, '0')}',
         if (spaceId == null || spaceId == null) 'spaceUuid': spaceId,
-        'communityUuid': communityId,
         'groupByDevice': true,
       };
 }

lib/pages/analytics/params/get_total_energy_consumption_param.dart

@@ -1,12 +1,10 @@
 class GetTotalEnergyConsumptionParam {
   final DateTime? monthDate;
   final String? spaceId;
-  final String? communityId;
 
   const GetTotalEnergyConsumptionParam({
     this.monthDate,
     this.spaceId,
-    this.communityId,
   });
 
   Map<String, dynamic> toJson() {
@@ -14,7 +12,6 @@ class GetTotalEnergyConsumptionParam {
       'monthDate':
           '${monthDate?.year}-${monthDate?.month.toString().padLeft(2, '0')}',
       if (spaceId == null || spaceId == null) 'spaceUuid': spaceId,
-      'communityUuid': communityId,
       'groupByDevice': false,
     };
   }

lib/pages/analytics/widgets/analytics_error_widget.dart

@@ -11,14 +11,17 @@ class AnalyticsErrorWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Visibility(
       visible: errorMessage != null || (errorMessage?.isNotEmpty ?? false),
-      child: Text(
-        errorMessage ?? 'Something went wrong',
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-        style: context.textTheme.bodySmall?.copyWith(
-          color: ColorsManager.red,
-          fontWeight: FontWeight.w400,
-          fontSize: 8,
+      child: Padding(
+        padding: const EdgeInsetsDirectional.only(bottom: 10),
+        child: Text(
+          errorMessage ?? 'Something went wrong',
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.red,
+            fontWeight: FontWeight.w400,
+            fontSize: 8,
+          ),
         ),
       ),
     );

lib/pages/analytics/widgets/analytics_sidebar_header.dart

@@ -10,13 +10,13 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 class AnalyticsSidebarHeader extends StatelessWidget {
   const AnalyticsSidebarHeader({
     required this.title,
-    this.showSpaceUuid = false,
+    this.showSpaceUuidInDevicesDropdown = false,
     this.onChanged,
     super.key,
   });
 
   final String title;
-  final bool showSpaceUuid;
+  final bool showSpaceUuidInDevicesDropdown;
   final void Function(AnalyticsDevice device)? onChanged;
 
   @override
@@ -49,6 +49,7 @@ class AnalyticsSidebarHeader extends StatelessWidget {
                 alignment: AlignmentDirectional.centerEnd,
                 fit: BoxFit.scaleDown,
                 child: AnalyticsDeviceDropdown(
+                  showSpaceUuid: showSpaceUuidInDevicesDropdown,
                   onChanged: (value) {
                     context.read<AnalyticsDevicesBloc>().add(
                           SelectAnalyticsDeviceEvent(value),

lib/pages/common/custom_table.dart

@@ -162,31 +162,34 @@ class _DynamicTableState extends State<DynamicTable> {
                   child: SingleChildScrollView(
                     scrollDirection: Axis.horizontal,
                     controller: _horizontalBodyScrollController,
-                    child: SizedBox(
-                      width: widget.size.width,
-                      child: widget.isEmpty
-                          ? _buildEmptyState()
-                          : Column(
-                              children:
-                                  List.generate(widget.data.length, (rowIndex) {
-                                final row = widget.data[rowIndex];
-                                return Row(
-                                  children: [
-                                    if (widget.withCheckBox)
-                                      _buildRowCheckbox(
-                                          rowIndex, widget.size.height * 0.08),
-                                    ...row.asMap().entries.map((entry) {
-                                      return _buildTableCell(
-                                        entry.value.toString(),
-                                        widget.size.height * 0.08,
-                                        rowIndex: rowIndex,
-                                        columnIndex: entry.key,
-                                      );
-                                    }).toList(),
-                                  ],
-                                );
-                              }),
-                            ),
+                    child: Container(
+                      color: ColorsManager.whiteColors,
+                      child: SizedBox(
+                        width: widget.size.width,
+                        child: widget.isEmpty
+                            ? _buildEmptyState()
+                            : Column(
+                                children: List.generate(widget.data.length,
+                                    (rowIndex) {
+                                  final row = widget.data[rowIndex];
+                                  return Row(
+                                    children: [
+                                      if (widget.withCheckBox)
+                                        _buildRowCheckbox(rowIndex,
+                                            widget.size.height * 0.08),
+                                      ...row.asMap().entries.map((entry) {
+                                        return _buildTableCell(
+                                          entry.value.toString(),
+                                          widget.size.height * 0.08,
+                                          rowIndex: rowIndex,
+                                          columnIndex: entry.key,
+                                        );
+                                      }).toList(),
+                                    ],
+                                  );
+                                }),
+                              ),
+                      ),
                     ),
                   ),
                 ),
@@ -310,7 +313,12 @@ class _DynamicTableState extends State<DynamicTable> {
     bool isSettingsColumn = widget.headers[columnIndex] == 'Settings';
 
     if (isSettingsColumn) {
-      return _buildSettingsIcon(rowIndex, size);
+      return buildSettingsIcon(
+        width: 120,
+        height: 60,
+        iconSize: 40,
+        onTap: () => widget.onSettingsPressed?.call(rowIndex),
+      );
     }
 
     Color? statusColor;
@@ -364,22 +372,63 @@ class _DynamicTableState extends State<DynamicTable> {
     );
   }
 
-  Widget _buildSettingsIcon(int rowIndex, double size) {
-    return Container(
-      height: size,
-      width: 120,
-      padding: const EdgeInsets.all(5.0),
-      decoration: const BoxDecoration(
-        border: Border(
-          bottom: BorderSide(color: ColorsManager.boxDivider, width: 1.0),
+  Widget buildSettingsIcon(
+      {double width = 120,
+      double height = 60,
+      double iconSize = 40,
+      VoidCallback? onTap}) {
+    return Column(
+      children: [
+        Container(
+          padding: const EdgeInsets.only(top: 10, bottom: 15, left: 10),
+          margin: const EdgeInsets.only(right: 15),
+          decoration: const BoxDecoration(
+            color: ColorsManager.whiteColors,
+            border: Border(
+              bottom: BorderSide(
+                color: ColorsManager.boxDivider,
+                width: 1.0,
+              ),
+            ),
+          ),
+          width: width,
+          child: Padding(
+            padding: const EdgeInsets.only(
+              right: 16.0,
+              left: 17.0,
+            ),
+            child: Container(
+              width: 50,
+              decoration: BoxDecoration(
+                color: const Color(0xFFF7F8FA),
+                borderRadius: BorderRadius.circular(height / 2),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black.withOpacity(0.17),
+                    blurRadius: 14,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
+              ),
+              child: InkWell(
+                onTap: onTap,
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Center(
+                    child: SvgPicture.asset(
+                      Assets.settings, // ضع المسار الصحيح هنا
+                      width: 40,
+                      height: 22,
+                      color: ColorsManager
+                          .primaryColor, // نفس لون الأيقونة في الصورة
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
         ),
-        color: Colors.white,
-      ),
-      alignment: Alignment.center,
-      child: IconButton(
-        icon: SvgPicture.asset(Assets.settings),
-        onPressed: () => widget.onSettingsPressed?.call(rowIndex),
-      ),
+      ],
     );
   }
 }

lib/pages/device_managment/all_devices/view/device_managment_page.dart

@@ -95,7 +95,7 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
             return const RoutinesView();
           }
           if (state.createRoutineView) {
-            return CreateNewRoutineView();
+            return const CreateNewRoutineView();
           }
 
           return BlocBuilder<DeviceManagementBloc, DeviceManagementState>(

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

@@ -6,9 +6,11 @@ import 'package:syncrow_web/pages/common/filter/filter_widget.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/widgets/device_search_filters.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/device_settings_panel.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_batch_control_dialog.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_control_dialog.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/format_date_time.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -58,7 +60,8 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           'Low Battery ($lowBatteryCount)',
         ];
 
-        final buttonLabel = (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
+        final buttonLabel =
+            (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
 
         return Row(
           children: [
@@ -105,18 +108,23 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                             if (selectedDevices.length == 1) {
                                               showDialog(
                                                 context: context,
-                                                builder: (context) => DeviceControlDialog(
+                                                builder: (context) =>
+                                                    DeviceControlDialog(
                                                   device: selectedDevices.first,
                                                 ),
                                               );
-                                            } else if (selectedDevices.length > 1) {
-                                              final productTypes = selectedDevices
-                                                  .map((device) => device.productType)
-                                                  .toSet();
+                                            } else if (selectedDevices.length >
+                                                1) {
+                                              final productTypes =
+                                                  selectedDevices
+                                                      .map((device) =>
+                                                          device.productType)
+                                                      .toSet();
                                               if (productTypes.length == 1) {
                                                 showDialog(
                                                   context: context,
-                                                  builder: (context) => DeviceBatchControlDialog(
+                                                  builder: (context) =>
+                                                      DeviceBatchControlDialog(
                                                     devices: selectedDevices,
                                                   ),
                                                 );
@@ -130,7 +138,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                       textAlign: TextAlign.center,
                                       style: TextStyle(
                                         fontSize: 12,
-                                        color: isControlButtonEnabled ? Colors.white : Colors.grey,
+                                        color: isControlButtonEnabled
+                                            ? Colors.white
+                                            : Colors.grey,
                                       ),
                                     ),
                                   ),
@@ -166,29 +176,40 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                 'Installation Date and Time',
                                 'Status',
                                 'Last Offline Date and Time',
+                                'Settings'
                               ],
                               data: devicesToShow.map((device) {
                                 final combinedSpaceNames = device.spaces != null
-                                    ? device.spaces!.map((space) => space.spaceName).join(' > ') +
+                                    ? device.spaces!
+                                            .map((space) => space.spaceName)
+                                            .join(' > ') +
                                         (device.community != null
                                             ? ' > ${device.community!.name}'
                                             : '')
-                                    : (device.community != null ? device.community!.name : '');
+                                    : (device.community != null
+                                        ? device.community!.name
+                                        : '');
 
                                 return [
                                   device.name ?? '',
                                   device.productName ?? '',
                                   device.uuid ?? '',
-                                  (device.spaces != null && device.spaces!.isNotEmpty)
+                                  (device.spaces != null &&
+                                          device.spaces!.isNotEmpty)
                                       ? device.spaces![0].spaceName
                                       : '',
                                   combinedSpaceNames,
-                                  device.batteryLevel != null ? '${device.batteryLevel}%' : '-',
-                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
-                                      (device.createTime ?? 0) * 1000)),
+                                  device.batteryLevel != null
+                                      ? '${device.batteryLevel}%'
+                                      : '-',
+                                  formatDateTime(
+                                      DateTime.fromMillisecondsSinceEpoch(
+                                          (device.createTime ?? 0) * 1000)),
                                   device.online == true ? 'Online' : 'Offline',
-                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
-                                      (device.updateTime ?? 0) * 1000)),
+                                  formatDateTime(
+                                      DateTime.fromMillisecondsSinceEpoch(
+                                          (device.updateTime ?? 0) * 1000)),
+                                  'Settings',
                                 ];
                               }).toList(),
                               onSelectionChanged: (selectedRows) {
@@ -202,6 +223,10 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                   .map((device) => device.uuid!)
                                   .toList(),
                               isEmpty: devicesToShow.isEmpty,
+                              onSettingsPressed: (rowIndex) {
+                                final device = devicesToShow[rowIndex];
+                                showDeviceSettingsSidebar(context, device);
+                              },
                             ),
                           ),
                         )
@@ -213,4 +238,37 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
       },
     );
   }
+
+  void showDeviceSettingsSidebar(BuildContext context, AllDevicesModel device) {
+    showGeneralDialog(
+      context: context,
+      barrierDismissible: true,
+      barrierLabel: "Device Settings",
+      transitionDuration: const Duration(milliseconds: 300),
+      pageBuilder: (context, anim1, anim2) {
+        return Align(
+          alignment: Alignment.centerRight,
+          child: Material(
+            child: Container(
+              width: MediaQuery.of(context).size.width * 0.3,
+              color: ColorsManager.whiteColors,
+              child: DeviceSettingsPanel(
+                device: device,
+                onClose: () => Navigator.of(context).pop(),
+              ),
+            ),
+          ),
+        );
+      },
+      transitionBuilder: (context, anim1, anim2, child) {
+        return SlideTransition(
+          position: Tween<Offset>(
+            begin: const Offset(1, 0),
+            end: Offset.zero,
+          ).animate(anim1),
+          child: child,
+        );
+      },
+    );
+  }
 }

lib/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart

@@ -0,0 +1,165 @@
+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:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/services/devices_mang_api.dart';
+import 'package:syncrow_web/services/space_mana_api.dart';
+import 'package:syncrow_web/utils/snack_bar.dart';
+part 'setting_bloc_event.dart';
+
+class SettingDeviceBloc extends Bloc<DeviceSettingEvent, DeviceSettingsState> {
+  final String deviceId;
+  SettingDeviceBloc({
+    required this.deviceId,
+  }) : super(const DeviceSettingsInitial()) {
+    on<DeviceSettingInitialInfo>(_fetchDeviceInfo);
+    on<SettingBlocSaveName>(_saveName);
+    on<ChangeNameEvent>(_changeName);
+    on<SettingBlocDeleteDevice>(_deleteDevice);
+    on<SettingBlocFetchRooms>(_fetchRooms);
+    on<SettingBlocAssignRoom>(_onAssignDevice);
+  }
+  final TextEditingController nameController = TextEditingController();
+  List<SubSpaceModel> roomsList = [];
+  bool isEditingName = false;
+
+  bool _validateInputs() {
+    final nameError = _fullNameValidator(nameController.text);
+    if (nameError != null) {
+      CustomSnackBar.displaySnackBar(nameError);
+      return true;
+    }
+    return false;
+  }
+
+  String? _fullNameValidator(String? value) {
+    if (value == null) return 'name is required';
+    final withoutExtraSpaces = value.replaceAll(RegExp(r"\s+"), ' ').trim();
+    if (withoutExtraSpaces.length < 2 || withoutExtraSpaces.length > 30) {
+      return 'name must be between 2 and 30 characters long';
+    }
+    if (RegExp(r"/[^ a-zA-Z0-9-\']/").hasMatch(withoutExtraSpaces)) {
+      return 'Only alphanumeric characters, space, dash and single quote are allowed';
+    }
+    return null;
+  }
+
+  Future<void> _saveName(
+      SettingBlocSaveName event, Emitter<DeviceSettingsState> emit) async {
+    if (_validateInputs()) return;
+    try {
+      emit(DeviceSettingsLoading());
+      await DevicesManagementApi.putDeviceName(
+          deviceId: deviceId, deviceName: nameController.text);
+      add(DeviceSettingInitialInfo());
+      CustomSnackBar.displaySnackBar('Save Successfully');
+      emit(DeviceSettingsUpdate(deviceName: nameController.text));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+    }
+  }
+
+  Future<void> _fetchDeviceInfo(
+      DeviceSettingInitialInfo event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      var response = await DevicesManagementApi.getDeviceInfo(deviceId);
+      DeviceInfoModel deviceInfo = DeviceInfoModel.fromJson(response);
+      nameController.text = deviceInfo.name;
+      emit(DeviceSettingsUpdate(
+        deviceName: nameController.text,
+        deviceInfo: deviceInfo,
+        roomsList: roomsList,
+      ));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+    }
+  }
+
+  bool editName = false;
+  final FocusNode focusNode = FocusNode();
+
+  void _changeName(ChangeNameEvent event, Emitter<DeviceSettingsState> emit) {
+    emit(DeviceSettingsInitial(
+      deviceName: nameController.text,
+      deviceId: deviceId,
+      isEditingName: event.value ?? false,
+      editingNameValue: event.value?.toString() ?? '',
+      deviceInfo: state.deviceInfo,
+    ));
+    editName = event.value!;
+    if (editName) {
+      Future.delayed(const Duration(milliseconds: 500), () {
+        focusNode.requestFocus();
+      });
+    } else {
+      add(const SettingBlocSaveName());
+      focusNode.unfocus();
+    }
+    emit(DeviceSettingsUpdate(
+      deviceName: nameController.text,
+      deviceInfo: state.deviceInfo,
+      roomsList: roomsList,
+    ));
+  }
+
+  void _deleteDevice(
+      SettingBlocDeleteDevice event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      await DevicesManagementApi.resetDevice(devicesUuid: deviceId);
+      CustomSnackBar.displaySnackBar('Reset Successfully');
+      emit(DeviceSettingsUpdate(
+        deviceName: nameController.text,
+        deviceInfo: state.deviceInfo,
+        roomsList: roomsList,
+      ));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+      return;
+    }
+  }
+
+  void _onAssignDevice(
+      SettingBlocAssignRoom event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      await CommunitySpaceManagementApi.assignDeviceToRoom(
+          communityId: event.communityUuid,
+          spaceId: event.spaceUuid,
+          subSpaceId: event.subSpaceUuid,
+          deviceId: deviceId,
+          projectId: projectUuid);
+      add(DeviceSettingInitialInfo());
+      CustomSnackBar.displaySnackBar('Save Successfully');
+      emit(DeviceSettingsSaveSelectionSuccess());
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+      return;
+    }
+  }
+
+  void _fetchRooms(
+      SettingBlocFetchRooms event, Emitter<DeviceSettingsState> emit) async {
+    try {
+      emit(DeviceSettingsLoading());
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      roomsList = await CommunitySpaceManagementApi.getSubSpaceBySpaceId(
+          communityId: event.communityUuid,
+          spaceId: event.spaceUuid,
+          projectId: projectUuid);
+      emit(DeviceSettingsUpdate(
+        deviceName: nameController.text,
+        deviceInfo: state.deviceInfo,
+        roomsList: roomsList,
+      ));
+    } catch (e) {
+      emit(DeviceSettingsError(message: e.toString()));
+      return;
+    }
+  }
+}

lib/pages/device_managment/device_setting/bloc/setting_bloc_event.dart

@@ -0,0 +1,69 @@
+part of 'setting_bloc_bloc.dart';
+
+abstract class DeviceSettingEvent extends Equatable {
+  const DeviceSettingEvent();
+  @override
+  List<Object?> get props => [];
+}
+
+class SettingBlocSaveDeviceName extends DeviceSettingEvent {
+  final String deviceName;
+  final String deviceId;
+
+  const SettingBlocSaveDeviceName(
+      {required this.deviceName, required this.deviceId});
+
+  @override
+  List<Object?> get props => [deviceName, deviceId];
+}
+
+class SettingBlocStartEditingName extends DeviceSettingEvent {}
+
+class SettingBlocCancelEditingName extends DeviceSettingEvent {}
+
+class SettingBlocChangeEditingNameValue extends DeviceSettingEvent {
+  final String value;
+  const SettingBlocChangeEditingNameValue(this.value);
+
+  @override
+  List<Object?> get props => [value];
+}
+
+class SettingBlocFetchRooms extends DeviceSettingEvent {
+  final String communityUuid;
+  final String spaceUuid;
+
+  const SettingBlocFetchRooms(
+      {required this.communityUuid, required this.spaceUuid});
+
+  @override
+  List<Object?> get props => [communityUuid, spaceUuid];
+}
+
+class SettingBlocSaveName extends DeviceSettingEvent {
+  const SettingBlocSaveName();
+}
+
+class DeviceSettingInitialInfo extends DeviceSettingEvent {}
+
+class ChangeNameEvent extends DeviceSettingEvent {
+  final bool? value;
+  const ChangeNameEvent({this.value});
+}
+
+class SettingBlocDeleteDevice extends DeviceSettingEvent {}
+
+class SettingBlocAssignRoom extends DeviceSettingEvent {
+  final String communityUuid;
+  final String spaceUuid;
+  final String subSpaceUuid;
+
+  const SettingBlocAssignRoom({
+    required this.communityUuid,
+    required this.spaceUuid,
+    required this.subSpaceUuid,
+  });
+
+  @override
+  List<Object?> get props => [spaceUuid, communityUuid, subSpaceUuid];
+}

lib/pages/device_managment/device_setting/bloc/setting_bloc_state.dart

@@ -0,0 +1,81 @@
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+
+abstract class DeviceSettingsState extends Equatable {
+  const DeviceSettingsState({this.deviceInfo});
+
+  final DeviceInfoModel? deviceInfo;
+
+  @override
+  List<Object?> get props => [deviceInfo];
+}
+
+class DeviceSettingsInitial extends DeviceSettingsState {
+  final String deviceName;
+  final String deviceId;
+  final bool isEditingName;
+  final String editingNameValue;
+
+  const DeviceSettingsInitial({
+    this.deviceName = '',
+    this.deviceId = '',
+    this.isEditingName = false,
+    this.editingNameValue = '',
+    super.deviceInfo,
+  });
+
+  DeviceSettingsInitial copyWith({
+    String? deviceName,
+    String? deviceId,
+    bool? isEditingName,
+    String? editingNameValue,
+  }) =>
+      DeviceSettingsInitial(
+        deviceName: deviceName ?? this.deviceName,
+        deviceId: deviceId ?? this.deviceId,
+        isEditingName: isEditingName ?? this.isEditingName,
+        editingNameValue: editingNameValue ?? this.editingNameValue,
+      );
+
+  @override
+  List<Object?> get props =>
+      [deviceName, deviceId, isEditingName, editingNameValue];
+}
+
+class DeviceSettingsLoading extends DeviceSettingsState {}
+
+class DeviceSettingsUpdate extends DeviceSettingsState {
+  final String? deviceName;
+  final List<SubSpaceModel> roomsList;
+
+  const DeviceSettingsUpdate({
+    this.deviceName,
+    super.deviceInfo,
+    this.roomsList = const [],
+  });
+
+  @override
+  List<Object?> get props => [deviceName, deviceInfo, roomsList];
+}
+
+class DeviceSettingsError extends DeviceSettingsState {
+  final String message;
+
+  const DeviceSettingsError({required this.message});
+  @override
+  List<Object?> get props => [message];
+}
+
+class DeviceSettingsFetchRooms extends DeviceSettingsState {
+  final List<SubSpaceModel> roomsList;
+
+  const DeviceSettingsFetchRooms({required this.roomsList});
+
+  @override
+  List<Object?> get props => [roomsList];
+}
+
+class DeviceSettingsSaveSelectionSuccess extends DeviceSettingsState {}
+
+class ChangeNameState extends DeviceSettingsState {}

lib/pages/device_managment/device_setting/device_icon_type_helper.dart

@@ -0,0 +1,28 @@
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class DeviceIconTypeHelper {
+  static const Map<String, String> _iconMap = {
+    'AC': Assets.ac,
+    'GW': Assets.gateway,
+    'CPS': Assets.sensors,
+    'DL': Assets.doorLock,
+    'WPS': Assets.sensors,
+    '3G': Assets.gangSwitch,
+    '2G': Assets.twoGang,
+    '1G': Assets.oneGang,
+    'CUR': Assets.curtain,
+    'WH': Assets.waterHeater,
+    'DS': Assets.doorSensor,
+    '1GT': Assets.oneTouchSwitch,
+    '2GT': Assets.twoTouchSwitch,
+    '3GT': Assets.threeTouchSwitch,
+    'GD': Assets.garageDoor,
+    'WL': Assets.waterLeakNormal,
+    'NCPS': Assets.sensors,
+  };
+
+  static String getDeviceIconByTypeCode(String? typeCode) {
+    if (typeCode == null) return Assets.logoHorizontal;
+    return _iconMap[typeCode] ?? Assets.logoHorizontal;
+  }
+}

lib/pages/device_managment/device_setting/device_management_content.dart

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/web_layout/default_container.dart';
+
+class DeviceManagementContent extends StatelessWidget {
+  const DeviceManagementContent({
+    super.key,
+    required this.device,
+    required this.subSpaces,
+    required this.deviceInfo,
+  });
+
+  final AllDevicesModel device;
+  final List<SubSpaceModel> subSpaces;
+  final DeviceInfoModel deviceInfo;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget infoRow(
+        {required String label,
+        required String value,
+        Widget? trailing,
+        required Color? valueColor}) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: 6.0),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              label,
+              style: context.theme.textTheme.bodyMedium!.copyWith(
+                fontSize: 14,
+                color: ColorsManager.grayColor,
+              ),
+            ),
+            Expanded(
+              child: Text(
+                value,
+                textAlign: TextAlign.end,
+                style: context.theme.textTheme.bodyMedium!
+                    .copyWith(fontSize: 14, color: valueColor),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+            const SizedBox(width: 8),
+            trailing ?? const SizedBox.shrink(),
+          ],
+        ),
+      );
+    }
+
+    return DefaultContainer(
+      padding: EdgeInsets.zero,
+      child: Column(
+        children: [
+          const SizedBox(height: 5),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: InkWell(
+              onTap: () {
+                showSubSpaceDialog(
+                  context,
+                  communityUuid: device.community!.uuid!,
+                  spaceUuid: device.spaces!.first.uuid!,
+                  subSpaces: subSpaces,
+                  selected: device.subspace!.uuid,
+                );
+              },
+              child: infoRow(
+                label: 'Sub-Space:',
+                value: deviceInfo.subspace.subspaceName,
+                valueColor: ColorsManager.textGray,
+                trailing: const Icon(
+                  Icons.arrow_forward_ios,
+                  size: 16,
+                  color: ColorsManager.greyColor,
+                ),
+              ),
+            ),
+          ),
+          const Divider(color: ColorsManager.dividerColor),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: infoRow(
+              label: 'Virtual Address:',
+              value: deviceInfo.productUuid,
+              valueColor: ColorsManager.blackColor,
+              trailing: InkWell(
+                onTap: () {
+                  Clipboard.setData(
+                    ClipboardData(text: device.productUuid ?? ''),
+                  );
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    const SnackBar(
+                      content: Text('Virtual Address copied to clipboard'),
+                    ),
+                  );
+                },
+                child: const Icon(
+                  Icons.copy,
+                  size: 16,
+                  color: ColorsManager.greyColor,
+                ),
+              ),
+            ),
+          ),
+          const Divider(color: ColorsManager.dividerColor),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: infoRow(
+              label: 'MAC Address:',
+              valueColor: ColorsManager.blackColor,
+              value: deviceInfo.macAddress,
+            ),
+          ),
+          const SizedBox(height: 5),
+        ],
+      ),
+    );
+  }
+}

lib/pages/device_managment/device_setting/device_settings_panel.dart

@@ -0,0 +1,184 @@
+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/device_managment/device_setting/device_icon_type_helper.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/device_management_content.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/remove_device_widget.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/device_info_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_state.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/web_layout/default_container.dart';
+
+class DeviceSettingsPanel extends StatelessWidget {
+  final VoidCallback? onClose;
+  final AllDevicesModel device;
+  const DeviceSettingsPanel({super.key, this.onClose, required this.device});
+
+  @override
+  Widget build(BuildContext context) {
+    final sectionTitle = context.theme.textTheme.titleMedium!.copyWith(
+      fontWeight: FontWeight.bold,
+      color: ColorsManager.grayColor,
+    );
+    return BlocProvider(
+      create: (context) => SettingDeviceBloc(
+        deviceId: device.uuid ?? '',
+      )
+        ..add(DeviceSettingInitialInfo())
+        ..add(SettingBlocFetchRooms(
+          communityUuid: device.community!.uuid!,
+          spaceUuid: device.spaces!.first.uuid!,
+        )),
+      child: Builder(
+        builder: (context) {
+          return BlocBuilder<SettingDeviceBloc, DeviceSettingsState>(
+            builder: (context, state) {
+              final _bloc = context.read<SettingDeviceBloc>();
+              final iconPath = DeviceIconTypeHelper.getDeviceIconByTypeCode(
+                  device.productType);
+              final deviceInfo = state is DeviceSettingsUpdate
+                  ? state.deviceInfo ?? DeviceInfoModel.empty()
+                  : DeviceInfoModel.empty();
+              final subSpaces =
+                  state is DeviceSettingsUpdate ? state.roomsList ?? [] : [];
+              return Stack(
+                children: [
+                  Container(
+                    width: MediaQuery.of(context).size.width * 0.3,
+                    color: ColorsManager.grey25,
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 20, vertical: 24),
+                    child: ListView(
+                      children: [
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            IconButton(
+                              icon: SvgPicture.asset(Assets.closeSettingsIcon),
+                              onPressed:
+                                  onClose ?? () => Navigator.of(context).pop(),
+                            ),
+                          ],
+                        ),
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          children: [
+                            Text(
+                              'Device Settings',
+                              style:
+                                  context.theme.textTheme.titleLarge!.copyWith(
+                                fontWeight: FontWeight.bold,
+                                color: ColorsManager.primaryColor,
+                              ),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 24),
+                        DefaultContainer(
+                          child: Row(
+                            children: [
+                              CircleAvatar(
+                                radius: 40,
+                                backgroundColor:
+                                    const Color.fromARGB(177, 213, 213, 213),
+                                child: CircleAvatar(
+                                  backgroundColor: ColorsManager.whiteColors,
+                                  radius: 36,
+                                  child: SvgPicture.asset(
+                                    iconPath,
+                                    fit: BoxFit.cover,
+                                  ),
+                                ),
+                              ),
+                              const SizedBox(width: 12),
+                              Expanded(
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.start,
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      'Device Name:',
+                                      style: context.textTheme.bodyMedium!
+                                          .copyWith(
+                                        color: ColorsManager.grayColor,
+                                      ),
+                                    ),
+                                    TextFormField(
+                                      maxLength: 30,
+                                      style: const TextStyle(
+                                        color: ColorsManager.blackColor,
+                                      ),
+                                      textAlign: TextAlign.start,
+                                      focusNode: _bloc.focusNode,
+                                      controller: _bloc.nameController,
+                                      enabled: _bloc.editName,
+                                      onFieldSubmitted: (value) {
+                                        _bloc.add(const ChangeNameEvent(
+                                            value: false));
+                                      },
+                                      decoration: const InputDecoration(
+                                        border: InputBorder.none,
+                                        fillColor: Colors.white10,
+                                        counterText: '',
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                              const SizedBox(width: 8),
+                              Visibility(
+                                visible: _bloc.editName != true,
+                                replacement: const SizedBox(),
+                                child: GestureDetector(
+                                  onTap: () {
+                                    _bloc.add(
+                                        const ChangeNameEvent(value: true));
+                                  },
+                                  child: SvgPicture.asset(
+                                    Assets.editNameIconSettings,
+                                    color: ColorsManager.grayColor,
+                                    height: 20,
+                                    width: 20,
+                                  ),
+                                ),
+                              )
+                            ],
+                          ),
+                        ),
+                        const SizedBox(height: 32),
+                        Text('Device Management', style: sectionTitle),
+                        DeviceManagementContent(
+                          device: device,
+                          subSpaces: subSpaces.cast<SubSpaceModel>(),
+                          deviceInfo: deviceInfo,
+                        ),
+                        const SizedBox(height: 32),
+                        RemoveDeviceWidget(bloc: _bloc),
+                      ],
+                    ),
+                  ),
+                  if (state is DeviceSettingsLoading)
+                    Positioned.fill(
+                      child: Container(
+                        color: Colors.black.withOpacity(0.1),
+                        child: const Center(
+                          child: CircularProgressIndicator(
+                            color: ColorsManager.primaryColor,
+                          ),
+                        ),
+                      ),
+                    ),
+                ],
+              );
+            },
+          );
+        },
+      ),
+    );
+  }
+}

lib/pages/device_managment/device_setting/remove_device_widget.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/web_layout/default_container.dart';
+
+class RemoveDeviceWidget extends StatelessWidget {
+  const RemoveDeviceWidget({
+    super.key,
+    required SettingDeviceBloc bloc,
+  }) : _bloc = bloc;
+
+  final SettingDeviceBloc _bloc;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: double.infinity,
+      child: InkWell(
+        onTap: () {
+          showDialog(
+            context: context,
+            builder: (context) {
+              return AlertDialog(
+                title: Text(
+                  'Remove Device',
+                  style: context.textTheme.bodyMedium!.copyWith(
+                    fontWeight: FontWeight.w700,
+                    color: ColorsManager.red,
+                  ),
+                ),
+                content: Text(
+                  'Are you sure you want to remove this device?',
+                  style: context.textTheme.bodyMedium!.copyWith(
+                    color: ColorsManager.grayColor,
+                  ),
+                ),
+                actions: [
+                  TextButton(
+                    onPressed: () {
+                      Navigator.of(context).pop();
+                    },
+                    child: Text(
+                      'Cancel',
+                      style: context.textTheme.bodyMedium!.copyWith(
+                        color: ColorsManager.grayColor,
+                      ),
+                    ),
+                  ),
+                  TextButton(
+                    onPressed: () {
+                      _bloc.add(SettingBlocDeleteDevice());
+                      Navigator.of(context).pop();
+                    },
+                    child: Text(
+                      'Remove',
+                      style: context.textTheme.bodyMedium!.copyWith(
+                        color: ColorsManager.red,
+                      ),
+                    ),
+                  ),
+                ],
+              );
+            },
+          );
+        },
+        child: DefaultContainer(
+          padding: const EdgeInsets.all(25),
+          child: Center(
+            child: Text(
+              'Remove Device',
+              style: context.textTheme.bodyMedium!.copyWith(
+                  fontSize: 14,
+                  color: ColorsManager.red,
+                  fontWeight: FontWeight.w700),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/device_managment/device_setting/settings_model/device_info_model.dart

@@ -0,0 +1,183 @@
+class DeviceInfoModel {
+  final int activeTime;
+  final String category;
+  final String categoryName;
+  final int createTime;
+  final String gatewayId;
+  final String icon;
+  final String ip;
+  final String lat;
+  final String localKey;
+  final String lon;
+  final String model;
+  final String name;
+  final String nodeId;
+  final bool online;
+  final String ownerId;
+  final String productName;
+  final bool sub;
+  final String timeZone;
+  final int updateTime;
+  final String uuid;
+  final String productUuid;
+  final String productType;
+  final String permissionType;
+  final String macAddress;
+  final Subspace subspace;
+
+  DeviceInfoModel({
+    required this.activeTime,
+    required this.category,
+    required this.categoryName,
+    required this.createTime,
+    required this.gatewayId,
+    required this.icon,
+    required this.ip,
+    required this.lat,
+    required this.localKey,
+    required this.lon,
+    required this.model,
+    required this.name,
+    required this.nodeId,
+    required this.online,
+    required this.ownerId,
+    required this.productName,
+    required this.sub,
+    required this.timeZone,
+    required this.updateTime,
+    required this.uuid,
+    required this.productUuid,
+    required this.productType,
+    required this.permissionType,
+    required this.macAddress,
+    required this.subspace,
+  });
+
+  factory DeviceInfoModel.fromJson(Map<String, dynamic> json) {
+    return DeviceInfoModel(
+      activeTime: json['activeTime'] as int? ?? 0,
+      category: json['category'] ?? '',
+      categoryName: json['categoryName'] as String? ?? '',
+      createTime: json['createTime'] as int? ?? 0,
+      gatewayId: json['gatewayId'] as String? ?? '',
+      icon: json['icon'] as String? ?? '',
+      ip: json['ip'] as String? ?? '',
+      lat: json['lat'] as String? ?? '',
+      localKey: json['localKey'] as String? ?? '',
+      lon: json['lon'] as String? ?? '',
+      model: json['model'] as String? ?? '',
+      name: json['name'] as String? ?? '',
+      nodeId: json['nodeId'] as String? ?? '',
+      online: json['online'] as bool? ?? false,
+      ownerId: json['ownerId'] as String? ?? '',
+      productName: json['productName'] as String? ?? '',
+      sub: json['sub'] as bool? ?? false,
+      timeZone: json['timeZone'] as String? ?? '',
+      updateTime: json['updateTime'] as int? ?? 0,
+      uuid: json['uuid'] as String? ?? '',
+      productUuid: json['productUuid'] as String? ?? '',
+      productType: json['productType'] as String? ?? '',
+      permissionType: json['permissionType'] as String? ?? '',
+      macAddress: json['macAddress'] as String? ?? '',
+      subspace:
+          Subspace.fromJson(json['subspace'] as Map<String, dynamic>? ?? {}),
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'activeTime': activeTime,
+      'category': category,
+      'categoryName': categoryName,
+      'createTime': createTime,
+      'gatewayId': gatewayId,
+      'icon': icon,
+      'ip': ip,
+      'lat': lat,
+      'localKey': localKey,
+      'lon': lon,
+      'model': model,
+      'name': name,
+      'nodeId': nodeId,
+      'online': online,
+      'ownerId': ownerId,
+      'productName': productName,
+      'sub': sub,
+      'timeZone': timeZone,
+      'updateTime': updateTime,
+      'uuid': uuid,
+      'productUuid': productUuid,
+      'productType': productType,
+      'permissionType': permissionType,
+      'macAddress': macAddress,
+      'subspace': subspace.toJson(),
+    };
+  }
+
+  static DeviceInfoModel empty() {
+    return DeviceInfoModel(
+      activeTime: 0,
+      category: '',
+      categoryName: '',
+      createTime: 0,
+      gatewayId: '',
+      icon: '',
+      ip: '',
+      lat: '',
+      localKey: '',
+      lon: '',
+      model: '',
+      name: '',
+      nodeId: '',
+      online: false,
+      ownerId: '',
+      productName: '',
+      sub: false,
+      timeZone: '',
+      updateTime: 0,
+      uuid: '',
+      productUuid: '',
+      productType: '',
+      permissionType: '',
+      macAddress: '',
+      subspace: Subspace(
+        uuid: '',
+        createdAt: '',
+        updatedAt: '',
+        subspaceName: '',
+      ),
+    );
+  }
+}
+
+class Subspace {
+  final String uuid;
+  final String createdAt;
+  final String updatedAt;
+  final String subspaceName;
+
+  Subspace({
+    required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.subspaceName,
+  });
+
+  factory Subspace.fromJson(Map<String, dynamic> json) {
+    return Subspace(
+      uuid: json['uuid'] as String? ?? '',
+      createdAt: json['createdAt'] as String? ?? '',
+      updatedAt: json['updatedAt'] as String? ?? '',
+      subspaceName: json['subspaceName'] as String? ?? '',
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'uuid': uuid,
+      'createdAt': createdAt,
+      'updatedAt': updatedAt,
+      'subspaceName': subspaceName,
+    };
+  }
+}

lib/pages/device_managment/device_setting/settings_model/sub_space_model.dart

@@ -0,0 +1,35 @@
+import 'package:syncrow_web/pages/visitor_password/model/device_model.dart';
+
+class SubSpaceModel {
+  final String? id;
+  final String? name;
+  List<DeviceModel>? devices;
+
+  SubSpaceModel({
+    required this.id,
+    required this.name,
+    required this.devices,
+  });
+
+  Map<String, dynamic> toJson() {
+    return {
+      'id': id,
+      'name': name,
+      'devices': devices?.map((device) => device.toJson()).toList(),
+    };
+  }
+
+  factory SubSpaceModel.fromJson(Map<String, dynamic> json) {
+    List<DeviceModel> devices = [];
+    if (json['devices'] != null) {
+      for (var device in json['devices']) {
+        devices.add(DeviceModel.fromJson(device));
+      }
+    }
+    return SubSpaceModel(
+      id: json['uuid'] as String? ?? '',
+      name: json['subspaceName'] as String? ?? '',
+      devices: devices.isNotEmpty ? devices : null as List<DeviceModel>?,
+    );
+  }
+}

lib/pages/device_managment/device_setting/sub_space_dialog.dart

@@ -0,0 +1,115 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/subspace_dialog_buttons.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubSpaceDialog extends StatefulWidget {
+  final List<SubSpaceModel> subSpaces;
+  final String? selected;
+  final void Function(SubSpaceModel?) onConfirmed;
+
+  const SubSpaceDialog({
+    Key? key,
+    required this.subSpaces,
+    this.selected,
+    required this.onConfirmed,
+  }) : super(key: key);
+
+  @override
+  State<SubSpaceDialog> createState() => _SubSpaceDialogState();
+}
+
+class _SubSpaceDialogState extends State<SubSpaceDialog> {
+  String? _selectedId;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedId = widget.selected;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: ColorsManager.whiteColors,
+      insetPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 60),
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(28),
+      ),
+      child: Container(
+        width: MediaQuery.of(context).size.width * 0.35,
+        padding: const EdgeInsets.fromLTRB(0, 24, 0, 0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              'Sub-Space',
+              style: context.textTheme.bodyMedium?.copyWith(
+                  fontWeight: FontWeight.w700,
+                  color: ColorsManager.blueColor,
+                  fontSize: 20),
+            ),
+            const Divider(),
+            const SizedBox(height: 10),
+            ...widget.subSpaces.map((space) {
+              return RadioListTile<String>(
+                value: space.id!,
+                groupValue: _selectedId,
+                onChanged: (value) {
+                  setState(() {
+                    _selectedId = value;
+                  });
+                },
+                activeColor: Color(0xFF2962FF),
+                title: Text(
+                  space.name ?? 'Unnamed Sub-Space',
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    fontSize: 15,
+                    color: ColorsManager.grayColor,
+                    fontWeight: FontWeight.w400,
+                  ),
+                ),
+                controlAffinity: ListTileControlAffinity.trailing,
+                contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+              );
+            }).toList(),
+            const SizedBox(height: 12),
+            const Divider(height: 1, thickness: 1),
+            SubSpaceDialogButtons(selectedId: _selectedId, widget: widget),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+void showSubSpaceDialog(
+  BuildContext context, {
+  required List<SubSpaceModel> subSpaces,
+  String? selected,
+  required String communityUuid,
+  required String spaceUuid,
+}) {
+  showDialog(
+    context: context,
+    barrierDismissible: true,
+    builder: (ctx) => SubSpaceDialog(
+      subSpaces: subSpaces,
+      selected: selected,
+      onConfirmed: (selectedModel) {
+        if (selectedModel != null) {
+          context.read<SettingDeviceBloc>().add(
+                SettingBlocAssignRoom(
+                  communityUuid: communityUuid,
+                  spaceUuid: spaceUuid,
+                  subSpaceUuid: selectedModel.id ?? '',
+                ),
+              );
+        }
+      },
+    ),
+  );
+}

lib/pages/device_managment/device_setting/subspace_dialog_buttons.dart

@@ -0,0 +1,114 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/bloc/setting_bloc_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/sub_space_dialog.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubSpaceDialogButtons extends StatelessWidget {
+  const SubSpaceDialogButtons({
+    super.key,
+    required String? selectedId,
+    required this.widget,
+  }) : _selectedId = selectedId;
+
+  final String? _selectedId;
+  final SubSpaceDialog widget;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 50,
+      child: Row(
+        children: [
+          Expanded(
+            child: Container(
+              decoration: const BoxDecoration(
+                border: Border(
+                  right: BorderSide(
+                    color: ColorsManager.dividerColor,
+                    width: 0.5,
+                  ),
+                ),
+              ),
+              child: TextButton(
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+                child: Text(
+                  'Cancel',
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    color: ColorsManager.textGray,
+                    fontSize: 18,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+          ),
+          Expanded(
+            child: Container(
+              decoration: const BoxDecoration(
+                border: Border(
+                  left: BorderSide(
+                    color: ColorsManager.dividerColor,
+                    width: 0.5,
+                  ),
+                ),
+              ),
+              child: TextButton(
+                onPressed: _selectedId == null
+                    ? null
+                    : () {
+                        final selectedModel = widget.subSpaces.firstWhere(
+                            (space) => space.id == _selectedId,
+                            orElse: () =>
+                                SubSpaceModel(id: null, name: '', devices: []));
+                        widget.onConfirmed(selectedModel);
+                        Navigator.of(context).pop();
+                      },
+                child: Text(
+                  'Confirm',
+                  style: context.textTheme.bodyMedium?.copyWith(
+                    color: ColorsManager.secondaryColor,
+                    fontSize: 14,
+                    fontWeight: FontWeight.w400,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+void showSubSpaceDialog(
+  BuildContext context, {
+  required List<SubSpaceModel> subSpaces,
+  String? selected,
+  required String communityUuid,
+  required String spaceUuid,
+}) {
+  showDialog(
+    context: context,
+    barrierDismissible: true,
+    builder: (ctx) => SubSpaceDialog(
+      subSpaces: subSpaces,
+      selected: selected,
+      onConfirmed: (selectedModel) {
+        if (selectedModel != null) {
+          context.read<SettingDeviceBloc>().add(
+                SettingBlocAssignRoom(
+                  communityUuid: communityUuid,
+                  spaceUuid: spaceUuid,
+                  subSpaceUuid: selectedModel.id ?? '',
+                ),
+              );
+        }
+      },
+    ),
+  );
+}

lib/pages/routines/helper/save_routine_helper.dart

@@ -109,12 +109,12 @@ class SaveRoutineHelper {
       spacing: 16,
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,
       children: [
-        DialogFooterButton(
-          text: 'Cancel',
+ DialogFooterButton(
+          text: 'Back',
           onTap: () => Navigator.pop(context),
         ),
         DialogFooterButton(
-          text: 'Confirm',
+          text: 'Save',
           onTap: () {
             if (state.isAutomation) {
               if (state.isUpdate ?? false) {

lib/services/devices_mang_api.dart

@@ -91,7 +91,8 @@ class DevicesManagementApi {
     }
   }
 
-  Future<bool> deviceBatchControl(List<String> uuids, String code, dynamic value) async {
+  Future<bool> deviceBatchControl(
+      List<String> uuids, String code, dynamic value) async {
     try {
       final body = {
         'devicesUuid': uuids,
@@ -116,7 +117,8 @@ class DevicesManagementApi {
     }
   }
 
-  static Future<List<DeviceModel>> getDevicesByGatewayId(String gatewayId) async {
+  static Future<List<DeviceModel>> getDevicesByGatewayId(
+      String gatewayId) async {
     final response = await HTTPService().get(
       path: ApiEndpoints.gatewayApi.replaceAll('{gatewayUuid}', gatewayId),
       showServerMessage: false,
@@ -150,7 +152,9 @@ class DevicesManagementApi {
     String code,
   ) async {
     final response = await HTTPService().get(
-      path: ApiEndpoints.getDeviceLogs.replaceAll('{uuid}', uuid).replaceAll('{code}', code),
+      path: ApiEndpoints.getDeviceLogs
+          .replaceAll('{uuid}', uuid)
+          .replaceAll('{code}', code),
       showServerMessage: false,
       expectedResponseModel: (json) {
         return DeviceReport.fromJson(json['data']);
@@ -223,7 +227,8 @@ class DevicesManagementApi {
     }
   }
 
-  Future<bool> addScheduleRecord(ScheduleEntry sendSchedule, String uuid) async {
+  Future<bool> addScheduleRecord(
+      ScheduleEntry sendSchedule, String uuid) async {
     try {
       final response = await HTTPService().post(
         path: ApiEndpoints.scheduleByDeviceId.replaceAll('{deviceUuid}', uuid),
@@ -240,7 +245,8 @@ class DevicesManagementApi {
     }
   }
 
-  Future<List<ScheduleModel>> getDeviceSchedules(String uuid, String category) async {
+  Future<List<ScheduleModel>> getDeviceSchedules(
+      String uuid, String category) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.getScheduleByDeviceId
@@ -263,7 +269,9 @@ class DevicesManagementApi {
   }
 
   Future<bool> updateScheduleRecord(
-      {required bool enable, required String uuid, required String scheduleId}) async {
+      {required bool enable,
+      required String uuid,
+      required String scheduleId}) async {
     try {
       final response = await HTTPService().put(
         path: ApiEndpoints.updateScheduleByDeviceId
@@ -284,7 +292,8 @@ class DevicesManagementApi {
     }
   }
 
-  Future<bool> editScheduleRecord(String uuid, ScheduleEntry newSchedule) async {
+  Future<bool> editScheduleRecord(
+      String uuid, ScheduleEntry newSchedule) async {
     try {
       final response = await HTTPService().put(
         path: ApiEndpoints.scheduleByDeviceId.replaceAll('{deviceUuid}', uuid),
@@ -335,4 +344,46 @@ class DevicesManagementApi {
       return false;
     }
   }
+
+  static Future<Map<String, dynamic>> putDeviceName(
+      {required String deviceId, required String deviceName}) async {
+    try {
+      final response = await HTTPService().put(
+        path: ApiEndpoints.deviceByUuid.replaceAll('{deviceUuid}', deviceId),
+        body: {"deviceName": deviceName},
+        expectedResponseModel: (json) {
+          return json['data'];
+        },
+      );
+      return response;
+    } catch (e) {
+      rethrow;
+    }
+  }
+
+  static Future getDeviceInfo(String deviceId) async {
+    final response = await HTTPService().get(
+        path: ApiEndpoints.deviceByUuid.replaceAll('{deviceUuid}', deviceId),
+        showServerMessage: false,
+        expectedResponseModel: (json) {
+          return json['data'] as Map<String, dynamic>;
+        });
+    return response;
+  }
+
+  static Future resetDevice({
+    String? devicesUuid,
+  }) async {
+    final response = await HTTPService().post(
+      path: ApiEndpoints.resetDevice.replaceAll('{deviceUuid}', devicesUuid!),
+      showServerMessage: false,
+      body: {
+        "devicesUuid": [devicesUuid]
+      },
+      expectedResponseModel: (json) {
+        return json;
+      },
+    );
+    return response;
+  }
 }

lib/services/space_mana_api.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/device_managment/device_setting/settings_model/sub_space_model.dart';
 import 'package:syncrow_web/pages/space_tree/model/pagination_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/community_model.dart';
 import 'package:syncrow_web/pages/spaces_management/all_spaces/model/create_subspace_model.dart';
@@ -12,14 +13,16 @@ import 'package:syncrow_web/utils/constants/api_const.dart';
 
 class CommunitySpaceManagementApi {
   // Community Management APIs
-  Future<List<CommunityModel>> fetchCommunities(String projectId, {int page = 1}) async {
+  Future<List<CommunityModel>> fetchCommunities(String projectId,
+      {int page = 1}) async {
     try {
       List<CommunityModel> allCommunities = [];
       bool hasNext = true;
 
       while (hasNext) {
         await HTTPService().get(
-          path: ApiEndpoints.getCommunityList.replaceAll('{projectId}', projectId),
+          path: ApiEndpoints.getCommunityList
+              .replaceAll('{projectId}', projectId),
           queryParameters: {
             'page': page,
           },
@@ -55,8 +58,14 @@ class CommunitySpaceManagementApi {
     try {
       bool hasNext = false;
       await HTTPService().get(
-        path: ApiEndpoints.getCommunityList.replaceAll('{projectId}', projectId),
-        queryParameters: {'page': page, 'includeSpaces': true, 'size': 25, 'search': search},
+        path:
+            ApiEndpoints.getCommunityList.replaceAll('{projectId}', projectId),
+        queryParameters: {
+          'page': page,
+          'includeSpaces': true,
+          'size': 25,
+          'search': search
+        },
         expectedResponseModel: (json) {
           try {
             List<dynamic> jsonData = json['data'] ?? [];
@@ -68,7 +77,10 @@ class CommunitySpaceManagementApi {
 
             page = currentPage + 1;
             paginationModel = PaginationModel(
-                pageNum: page, hasNext: hasNext, size: 25, communities: communityList);
+                pageNum: page,
+                hasNext: hasNext,
+                size: 25,
+                communities: communityList);
             return paginationModel;
           } catch (_) {
             hasNext = false;
@@ -83,7 +95,8 @@ class CommunitySpaceManagementApi {
   Future<CommunityModel?> getCommunityById(String communityId) async {
     try {
       final response = await HTTPService().get(
-        path: ApiEndpoints.getCommunityById.replaceAll('{communityId}', communityId),
+        path: ApiEndpoints.getCommunityById
+            .replaceAll('{communityId}', communityId),
         expectedResponseModel: (json) {
           return CommunityModel.fromJson(json['data']);
         },
@@ -95,7 +108,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<CommunityModel?> createCommunity(String name, String description, String projectId) async {
+  Future<CommunityModel?> createCommunity(
+      String name, String description, String projectId) async {
     try {
       final response = await HTTPService().post(
         path: ApiEndpoints.createCommunity.replaceAll('{projectId}', projectId),
@@ -114,7 +128,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<bool> updateCommunity(String communityId, String name, String projectId) async {
+  Future<bool> updateCommunity(
+      String communityId, String name, String projectId) async {
     try {
       final response = await HTTPService().put(
         path: ApiEndpoints.updateCommunity
@@ -151,7 +166,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<SpacesResponse> fetchSpaces(String communityId, String projectId) async {
+  Future<SpacesResponse> fetchSpaces(
+      String communityId, String projectId) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.listSpaces
@@ -177,7 +193,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<SpaceModel?> getSpace(String communityId, String spaceId, String projectId) async {
+  Future<SpaceModel?> getSpace(
+      String communityId, String spaceId, String projectId) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.getSpace
@@ -289,7 +306,8 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<bool> deleteSpace(String communityId, String spaceId, String projectId) async {
+  Future<bool> deleteSpace(
+      String communityId, String spaceId, String projectId) async {
     try {
       final response = await HTTPService().delete(
         path: ApiEndpoints.deleteSpace
@@ -307,15 +325,17 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<List<SpaceModel>> getSpaceHierarchy(String communityId, String projectId) async {
+  Future<List<SpaceModel>> getSpaceHierarchy(
+      String communityId, String projectId) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.getSpaceHierarchy
             .replaceAll('{communityId}', communityId)
             .replaceAll('{projectId}', projectId),
         expectedResponseModel: (json) {
-          final spaceModels =
-              (json['data'] as List).map((spaceJson) => SpaceModel.fromJson(spaceJson)).toList();
+          final spaceModels = (json['data'] as List)
+              .map((spaceJson) => SpaceModel.fromJson(spaceJson))
+              .toList();
 
           return spaceModels;
         },
@@ -327,15 +347,17 @@ class CommunitySpaceManagementApi {
     }
   }
 
-  Future<List<SpaceModel>> getSpaceOnlyWithDevices({String? communityId, String? projectId}) async {
+  Future<List<SpaceModel>> getSpaceOnlyWithDevices(
+      {String? communityId, String? projectId}) async {
     try {
       final response = await HTTPService().get(
         path: ApiEndpoints.spaceOnlyWithDevices
             .replaceAll('{communityId}', communityId!)
             .replaceAll('{projectId}', projectId!),
         expectedResponseModel: (json) {
-          final spaceModels =
-              (json['data'] as List).map((spaceJson) => SpaceModel.fromJson(spaceJson)).toList();
+          final spaceModels = (json['data'] as List)
+              .map((spaceJson) => SpaceModel.fromJson(spaceJson))
+              .toList();
           return spaceModels;
         },
       );
@@ -345,4 +367,59 @@ class CommunitySpaceManagementApi {
       return [];
     }
   }
+
+  static Future<List<SubSpaceModel>> getSubSpaceBySpaceId(
+      {required String communityId,
+      required String spaceId,
+      required String projectId}) async {
+    try {
+      final path = ApiEndpoints.listSubspace
+          .replaceFirst('{communityUuid}', communityId)
+          .replaceFirst('{spaceUuid}', spaceId)
+          .replaceAll('{projectUuid}', projectId);
+
+      final response = await HTTPService().get(
+        path: path,
+        queryParameters: {"page": 1, "pageSize": 10},
+        showServerMessage: false,
+        expectedResponseModel: (json) {
+          List<SubSpaceModel> rooms = [];
+          if (json['data'] != null) {
+            for (var subspace in json['data']) {
+              rooms.add(SubSpaceModel.fromJson(subspace));
+            }
+          }
+          return rooms;
+        },
+      );
+
+      return response;
+    } catch (error, stackTrace) {
+      return [];
+    }
+  }
+
+  static Future<Map<String, dynamic>> assignDeviceToRoom(
+      {required String communityId,
+      required String spaceId,
+      required String subSpaceId,
+      required String deviceId,
+      required String projectId}) async {
+    try {
+      final response = await HTTPService().post(
+        path: ApiEndpoints.assignDeviceToRoom
+            .replaceAll('{projectUuid}', projectId)
+            .replaceAll('{communityUuid}', communityId)
+            .replaceAll('{spaceUuid}', spaceId)
+            .replaceAll('{subSpaceUuid}', subSpaceId)
+            .replaceAll('{deviceUuid}', deviceId),
+        expectedResponseModel: (json) {
+          return json;
+        },
+      );
+      return response;
+    } catch (e) {
+      rethrow;
+    }
+  }
 }

lib/utils/color_manager.dart

@@ -83,4 +83,7 @@ abstract class ColorsManager {
   static const Color maxPurpleDot = Color(0xFF5F00BD);
   static const Color minBlue = Color(0xFF93AAFD);
   static const Color minBlueDot = Color(0xFF023DFE);
+    static const Color grey25 = Color(0xFFF9F9F9);
+    
+
 }

lib/utils/constants/api_const.dart

@@ -60,9 +60,12 @@ abstract class ApiEndpoints {
       '/devices/{uuid}/report-logs?code={code}&startTime={startTime}&endTime={endTime}';
 
   static const String scheduleByDeviceId = '/schedule/{deviceUuid}';
-  static const String getScheduleByDeviceId = '/schedule/{deviceUuid}?category={category}';
-  static const String deleteScheduleByDeviceId = '/schedule/{deviceUuid}/{scheduleUuid}';
-  static const String updateScheduleByDeviceId = '/schedule/enable/{deviceUuid}';
+  static const String getScheduleByDeviceId =
+      '/schedule/{deviceUuid}?category={category}';
+  static const String deleteScheduleByDeviceId =
+      '/schedule/{deviceUuid}/{scheduleUuid}';
+  static const String updateScheduleByDeviceId =
+      '/schedule/enable/{deviceUuid}';
   static const String factoryReset = '/devices/batch';
 
   //product
@@ -124,4 +127,13 @@ abstract class ApiEndpoints {
       '/projects/{projectId}/communities/{communityId}/spaces/{unitUuid}/automations';
   static const String spaceOnlyWithDevices =
       '/projects/{projectId}/communities/{communityId}/spaces?onlyWithDevices=true';
+
+  static const String listSubspace =
+      '/projects/{projectUuid}/communities/{communityUuid}/spaces/{spaceUuid}/subspaces';
+  static const String deviceByUuid = '/devices/{deviceUuid}';
+
+  static const String resetDevice = '/factory/reset/{deviceUuid}';
+
+  static const String assignDeviceToRoom =
+      '/projects/{projectUuid}/communities/{communityUuid}/spaces/{spaceUuid}/subspaces/{subSpaceUuid}/devices/{deviceUuid}';
 }

lib/utils/constants/assets.dart

@@ -14,7 +14,8 @@ class Assets {
   static const String rightLine = "assets/images/right_line.png";
   static const String google = "assets/images/google.svg";
   static const String facebook = "assets/images/facebook.svg";
-  static const String invisiblePassword = "assets/images/Password_invisible.svg";
+  static const String invisiblePassword =
+      "assets/images/Password_invisible.svg";
   static const String visiblePassword = "assets/images/password_visible.svg";
   static const String accessIcon = "assets/images/access_icon.svg";
   static const String spaseManagementIcon =
@@ -33,7 +34,8 @@ class Assets {
   static const String emptyTable = "assets/images/empty_table.svg";
 
   // General assets
-  static const String motionlessDetection = "assets/icons/motionless_detection.svg";
+  static const String motionlessDetection =
+      "assets/icons/motionless_detection.svg";
   static const String acHeating = "assets/icons/ac_heating.svg";
   static const String acPowerOff = "assets/icons/ac_power_off.svg";
   static const String acFanMiddle = "assets/icons/ac_fan_middle.svg";
@@ -70,19 +72,22 @@ class Assets {
       "assets/icons/automation_functions/temp_password_unlock.svg";
   static const String doorlockNormalOpen =
       "assets/icons/automation_functions/doorlock_normal_open.svg";
-  static const String doorbell = "assets/icons/automation_functions/doorbell.svg";
+  static const String doorbell =
+      "assets/icons/automation_functions/doorbell.svg";
   static const String remoteUnlockViaApp =
       "assets/icons/automation_functions/remote_unlock_via_app.svg";
   static const String doubleLock =
       "assets/icons/automation_functions/double_lock.svg";
   static const String selfTestResult =
       "assets/icons/automation_functions/self_test_result.svg";
-  static const String lockAlarm = "assets/icons/automation_functions/lock_alarm.svg";
+  static const String lockAlarm =
+      "assets/icons/automation_functions/lock_alarm.svg";
   static const String presenceState =
       "assets/icons/automation_functions/presence_state.svg";
   static const String currentTemp =
       "assets/icons/automation_functions/current_temp.svg";
-  static const String presence = "assets/icons/automation_functions/presence.svg";
+  static const String presence =
+      "assets/icons/automation_functions/presence.svg";
   static const String residualElectricity =
       "assets/icons/automation_functions/residual_electricity.svg";
   static const String hijackAlarm =
@@ -99,12 +104,15 @@ class Assets {
 
   // Presence Sensor Assets
   static const String sensorMotionIcon = "assets/icons/sensor_motion_ic.svg";
-  static const String sensorPresenceIcon = "assets/icons/sensor_presence_ic.svg";
+  static const String sensorPresenceIcon =
+      "assets/icons/sensor_presence_ic.svg";
   static const String sensorVacantIcon = "assets/icons/sensor_vacant_ic.svg";
   static const String illuminanceRecordIcon =
       "assets/icons/illuminance_record_ic.svg";
-  static const String presenceRecordIcon = "assets/icons/presence_record_ic.svg";
-  static const String helpDescriptionIcon = "assets/icons/help_description_ic.svg";
+  static const String presenceRecordIcon =
+      "assets/icons/presence_record_ic.svg";
+  static const String helpDescriptionIcon =
+      "assets/icons/help_description_ic.svg";
 
   static const String lightPulp = "assets/icons/light_pulb.svg";
   static const String acDevice = "assets/icons/ac_device.svg";
@@ -154,10 +162,12 @@ class Assets {
   static const String unit = 'assets/icons/unit_icon.svg';
   static const String villa = 'assets/icons/villa_icon.svg';
   static const String iconEdit = 'assets/icons/icon_edit_icon.svg';
-  static const String textFieldSearch = 'assets/icons/textfield_search_icon.svg';
+  static const String textFieldSearch =
+      'assets/icons/textfield_search_icon.svg';
   static const String roundedAddIcon = 'assets/icons/rounded_add_icon.svg';
   static const String addIcon = 'assets/icons/add_icon.svg';
-  static const String smartThermostatIcon = 'assets/icons/smart_thermostat_icon.svg';
+  static const String smartThermostatIcon =
+      'assets/icons/smart_thermostat_icon.svg';
   static const String smartLightIcon = 'assets/icons/smart_light_icon.svg';
   static const String presenceSensor = 'assets/icons/presence_sensor.svg';
   static const String Gang3SwitchIcon = 'assets/icons/3_Gang_switch_icon.svg';
@@ -205,7 +215,8 @@ class Assets {
   //assets/icons/water_leak_normal.svg
   static const String waterLeakNormal = 'assets/icons/water_leak_normal.svg';
   //assets/icons/water_leak_detected.svg
-  static const String waterLeakDetected = 'assets/icons/water_leak_detected.svg';
+  static const String waterLeakDetected =
+      'assets/icons/water_leak_detected.svg';
 
   //assets/icons/automation_records.svg
   static const String automationRecords = 'assets/icons/automation_records.svg';
@@ -276,13 +287,16 @@ class Assets {
       "assets/icons/functions_icons/sensitivity.svg";
   static const String assetsSensitivityOperationIcon =
       "assets/icons/functions_icons/sesitivity_operation_icon.svg";
-  static const String assetsAcPower = "assets/icons/functions_icons/ac_power.svg";
+  static const String assetsAcPower =
+      "assets/icons/functions_icons/ac_power.svg";
   static const String assetsAcPowerOFF =
       "assets/icons/functions_icons/ac_power_off.svg";
   static const String assetsChildLock =
       "assets/icons/functions_icons/child_lock.svg";
-  static const String assetsFreezing = "assets/icons/functions_icons/freezing.svg";
-  static const String assetsFanSpeed = "assets/icons/functions_icons/fan_speed.svg";
+  static const String assetsFreezing =
+      "assets/icons/functions_icons/freezing.svg";
+  static const String assetsFanSpeed =
+      "assets/icons/functions_icons/fan_speed.svg";
   static const String assetsAcCooling =
       "assets/icons/functions_icons/ac_cooling.svg";
   static const String assetsAcHeating =
@@ -291,7 +305,8 @@ class Assets {
       "assets/icons/functions_icons/celsius_degrees.svg";
   static const String assetsTempreture =
       "assets/icons/functions_icons/tempreture.svg";
-  static const String assetsAcFanLow = "assets/icons/functions_icons/ac_fan_low.svg";
+  static const String assetsAcFanLow =
+      "assets/icons/functions_icons/ac_fan_low.svg";
   static const String assetsAcFanMiddle =
       "assets/icons/functions_icons/ac_fan_middle.svg";
   static const String assetsAcFanHigh =
@@ -310,7 +325,8 @@ class Assets {
       "assets/icons/functions_icons/far_detection.svg";
   static const String assetsFarDetectionFunction =
       "assets/icons/functions_icons/far_detection_function.svg";
-  static const String assetsIndicator = "assets/icons/functions_icons/indicator.svg";
+  static const String assetsIndicator =
+      "assets/icons/functions_icons/indicator.svg";
   static const String assetsMotionDetection =
       "assets/icons/functions_icons/motion_detection.svg";
   static const String assetsMotionlessDetection =
@@ -323,7 +339,8 @@ class Assets {
       "assets/icons/functions_icons/master_state.svg";
   static const String assetsSwitchAlarmSound =
       "assets/icons/functions_icons/switch_alarm_sound.svg";
-  static const String assetsResetOff = "assets/icons/functions_icons/reset_off.svg";
+  static const String assetsResetOff =
+      "assets/icons/functions_icons/reset_off.svg";
 
 // Assets for automation_functions
   static const String assetsCardUnlock =
@@ -367,12 +384,14 @@ class Assets {
   static const String activeUser = 'assets/icons/active_user.svg';
   static const String deActiveUser = 'assets/icons/deactive_user.svg';
   static const String invitedIcon = 'assets/icons/invited_icon.svg';
-  static const String rectangleCheckBox = 'assets/icons/rectangle_check_box.png';
+  static const String rectangleCheckBox =
+      'assets/icons/rectangle_check_box.png';
   static const String CheckBoxChecked = 'assets/icons/box_checked.png';
   static const String emptyBox = 'assets/icons/empty_box.png';
   static const String completeProcessIcon =
       'assets/icons/compleate_process_icon.svg';
-  static const String currentProcessIcon = 'assets/icons/current_process_icon.svg';
+  static const String currentProcessIcon =
+      'assets/icons/current_process_icon.svg';
   static const String uncomplete_ProcessIcon =
       'assets/icons/uncompleate_process_icon.svg';
   static const String wrongProcessIcon = 'assets/icons/wrong_process_icon.svg';
@@ -393,9 +412,11 @@ class Assets {
   static const String successIcon = 'assets/icons/success_icon.svg';
   static const String spaceLocationIcon = 'assets/icons/spaseLocationIcon.svg';
   static const String scenesPlayIcon = 'assets/icons/scenesPlayIcon.png';
-  static const String scenesPlayIconCheck = 'assets/icons/scenesPlayIconCheck.png';
+  static const String scenesPlayIconCheck =
+      'assets/icons/scenesPlayIconCheck.png';
   static const String presenceStateIcon = 'assets/icons/presence_state.svg';
-  static const String currentDistanceIcon = 'assets/icons/current_distance_icon.svg';
+  static const String currentDistanceIcon =
+      'assets/icons/current_distance_icon.svg';
 
   static const String farDetectionIcon = 'assets/icons/far_detection_icon.svg';
   static const String motionDetectionSensitivityIcon =
@@ -418,29 +439,44 @@ class Assets {
   static const String cpsMode4 = 'assets/icons/cps_mode4.svg';
   static const String closeToMotion = 'assets/icons/close_to_motion.svg';
   static const String farAwayMotion = 'assets/icons/far_away_motion.svg';
-  static const String communicationFault = 'assets/icons/communication_fault.svg';
+  static const String communicationFault =
+      'assets/icons/communication_fault.svg';
   static const String radarFault = 'assets/icons/radar_fault.svg';
-  static const String selfTestingSuccess = 'assets/icons/self_testing_success.svg';
-  static const String selfTestingFailure = 'assets/icons/self_testing_failure.svg';
-  static const String selfTestingTimeout = 'assets/icons/self_testing_timeout.svg';
+  static const String selfTestingSuccess =
+      'assets/icons/self_testing_success.svg';
+  static const String selfTestingFailure =
+      'assets/icons/self_testing_failure.svg';
+  static const String selfTestingTimeout =
+      'assets/icons/self_testing_timeout.svg';
   static const String movingSpeed = 'assets/icons/moving_speed.svg';
   static const String boundary = 'assets/icons/boundary.svg';
   static const String motionMeter = 'assets/icons/motion_meter.svg';
-  static const String spatialStaticValue = 'assets/icons/spatial_static_value.svg';
-  static const String spatialMotionValue = 'assets/icons/spatial_motion_value.svg';
+  static const String spatialStaticValue =
+      'assets/icons/spatial_static_value.svg';
+  static const String spatialMotionValue =
+      'assets/icons/spatial_motion_value.svg';
   static const String presenceJudgementThrshold =
       'assets/icons/presence_judgement_threshold.svg';
   static const String spaceType = 'assets/icons/space_type.svg';
   static const String sportsPara = 'assets/icons/sports_para.svg';
-  static const String sensitivityFeature1 = 'assets/icons/sensitivity_feature_1.svg';
-  static const String sensitivityFeature2 = 'assets/icons/sensitivity_feature_2.svg';
-  static const String sensitivityFeature3 = 'assets/icons/sensitivity_feature_3.svg';
-  static const String sensitivityFeature4 = 'assets/icons/sensitivity_feature_4.svg';
-  static const String sensitivityFeature5 = 'assets/icons/sensitivity_feature_5.svg';
-  static const String sensitivityFeature6 = 'assets/icons/sensitivity_feature_6.svg';
-  static const String sensitivityFeature7 = 'assets/icons/sensitivity_feature_7.svg';
-  static const String sensitivityFeature8 = 'assets/icons/sensitivity_feature_8.svg';
-  static const String sensitivityFeature9 = 'assets/icons/sensitivity_feature_9.svg';
+  static const String sensitivityFeature1 =
+      'assets/icons/sensitivity_feature_1.svg';
+  static const String sensitivityFeature2 =
+      'assets/icons/sensitivity_feature_2.svg';
+  static const String sensitivityFeature3 =
+      'assets/icons/sensitivity_feature_3.svg';
+  static const String sensitivityFeature4 =
+      'assets/icons/sensitivity_feature_4.svg';
+  static const String sensitivityFeature5 =
+      'assets/icons/sensitivity_feature_5.svg';
+  static const String sensitivityFeature6 =
+      'assets/icons/sensitivity_feature_6.svg';
+  static const String sensitivityFeature7 =
+      'assets/icons/sensitivity_feature_7.svg';
+  static const String sensitivityFeature8 =
+      'assets/icons/sensitivity_feature_8.svg';
+  static const String sensitivityFeature9 =
+      'assets/icons/sensitivity_feature_9.svg';
   static const String deviceTagIcon = 'assets/icons/device_tag_ic.svg';
   static const String targetConfirmTimeIcon =
       'assets/icons/target_confirm_time_icon.svg';
@@ -452,6 +488,13 @@ class Assets {
       'assets/icons/refresh_status_icon.svg';
   static const String energyConsumedIcon =
       'assets/icons/energy_consumed_icon.svg';
+
+  static const String closeSettingsIcon =
+      'assets/icons/close_settings_icon.svg';
+
+  static const String editNameIconSettings =
+      'assets/icons/edit_name_icon_settings.svg';
+
   static const String locationPin = 'assets/icons/location_pin.svg';
   static const String aqiTemperature = 'assets/icons/aqi_temperature.svg';
   static const String aqiHumidity = 'assets/icons/aqi_humidity.svg';

lib/web_layout/default_container.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+
+class DefaultContainer extends StatelessWidget {
+  const DefaultContainer({
+    super.key,
+    required this.child,
+    this.height,
+    this.width,
+    this.color,
+    this.boxConstraints,
+    this.margin,
+    this.padding,
+    this.onTap,
+    this.borderRadius,
+  });
+
+  final double? height;
+  final double? width;
+  final Widget child;
+  final BoxConstraints? boxConstraints;
+  final EdgeInsets? margin;
+  final EdgeInsets? padding;
+  final Color? color;
+  final Function()? onTap;
+  final BorderRadius? borderRadius;
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(20),
+      child: Container(
+        height: height,
+        width: width,
+        margin: margin ?? const EdgeInsets.only(right: 3, bottom: 3),
+        constraints: boxConstraints,
+        decoration: BoxDecoration(
+          color: color ?? Colors.white,
+          borderRadius: borderRadius ?? BorderRadius.circular(20),
+        ),
+        padding: padding ?? const EdgeInsets.all(10),
+        child: child,
+      ),
+    );
+  }
+}