Add SpaceReorderDataModel and integrate drag-and-drop functionality in CommunityStructureCanvas for improved space management.

<!--
  Thanks for contributing!

Provide a description of your changes below and a general summary in the
title

Please look at the following checklist to ensure that your PR can be
accepted quickly:
-->

## Jira Ticket
[SP-1720](https://syncrow.atlassian.net/browse/SP-1720)

## Description

Implemented products and assign tags functionality.

## Type of Change

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

- [x] ✨ New feature (non-breaking change which adds functionality)
- [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore 


[SP-1720]:
https://syncrow.atlassian.net/browse/SP-1720?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

assets/icons/group_icon.svg

@@ -0,0 +1,15 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9717_7433)">
+<path d="M17.1131 10.6766H15.5664C15.7241 11.1083 15.8102 11.5741 15.8102 12.0596V17.9053C15.8102 18.1077 15.775 18.302 15.7109 18.4827H18.2679C19.2231 18.4827 20.0002 17.7056 20.0002 16.7505V13.5637C20.0002 11.9718 18.7051 10.6766 17.1131 10.6766Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M4.19005 12.0596C4.19005 11.5741 4.27618 11.1083 4.43384 10.6766H2.88712C1.29516 10.6766 0 11.9718 0 13.5637V16.7505C0 17.7057 0.777072 18.4828 1.73227 18.4828H4.28938C4.22528 18.302 4.19005 18.1077 4.19005 17.9053V12.0596Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M11.7679 9.17249H8.23184C6.63989 9.17249 5.34473 10.4676 5.34473 12.0596V17.9053C5.34473 18.2242 5.60324 18.4827 5.92215 18.4827H14.0776C14.3965 18.4827 14.655 18.2242 14.655 17.9053V12.0596C14.655 10.4676 13.3598 9.17249 11.7679 9.17249Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M9.99995 1.51721C8.08541 1.51721 6.52783 3.07479 6.52783 4.98937C6.52783 6.288 7.24459 7.42218 8.30311 8.01765C8.80518 8.30008 9.38401 8.46148 9.99995 8.46148C10.6159 8.46148 11.1947 8.30008 11.6968 8.01765C12.7553 7.42218 13.4721 6.28796 13.4721 4.98937C13.4721 3.07483 11.9145 1.51721 9.99995 1.51721Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M3.90284 4.75354C2.471 4.75354 1.30615 5.91839 1.30615 7.35022C1.30615 8.78206 2.471 9.94691 3.90284 9.94691C4.26604 9.94691 4.6119 9.87168 4.92608 9.73644C5.46929 9.50257 5.91718 9.08859 6.19433 8.57003C6.38886 8.20609 6.49952 7.79089 6.49952 7.35022C6.49952 5.91843 5.33468 4.75354 3.90284 4.75354Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M16.0972 4.75354C14.6653 4.75354 13.5005 5.91839 13.5005 7.35022C13.5005 7.79093 13.6112 8.20612 13.8057 8.57003C14.0828 9.08863 14.5307 9.50261 15.0739 9.73644C15.3881 9.87168 15.734 9.94691 16.0972 9.94691C17.529 9.94691 18.6939 8.78206 18.6939 7.35022C18.6939 5.91839 17.529 4.75354 16.0972 4.75354Z" fill="#023DFE" fill-opacity="0.7"/>
+</g>
+<defs>
+<clipPath id="clip0_9717_7433">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/home_icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0002 5.97498L3.12109 11.2683V18.3601H8.64871V13.163H11.5852V18.3601H16.8794V11.2683L10.0002 5.97498Z" fill="#023DFE" fill-opacity="0.7"/>
+<path d="M17.1673 7.15356V3.52759H14.2702V4.92485L10 1.63989L0 9.33274L1.38043 11.1271L10 4.49458L18.6196 11.1272L20 9.33278L17.1673 7.15356Z" fill="#023DFE" fill-opacity="0.7"/>
+</svg>

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

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

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

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

lib/pages/access_management/view/access_management.dart

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

lib/pages/access_management/view/access_overview_content.dart

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

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

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

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

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

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

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

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

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

lib/pages/common/custom_table.dart

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

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

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

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

@@ -57,6 +57,9 @@ class Status {
     };
   }
 
+  factory Status.fromJson(String source) => Status.fromMap(json.decode(source));
+
+  String toJson() => json.encode(toMap());
   Status copyWith({
     String? code,
     dynamic value,
@@ -66,8 +69,4 @@ class Status {
       value: value ?? this.value,
     );
   }
-
-  factory Status.fromJson(String source) => Status.fromMap(json.decode(source));
-
-  String toJson() => json.encode(toMap());
 }

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

@@ -68,6 +68,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           children: [
             Expanded(child: SpaceTreeView(
               onSelect: () {
+                context.read<DeviceManagementBloc>().add(ResetFilters());
                 context.read<DeviceManagementBloc>().add(FetchDevices(context));
               },
             )),

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

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

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

@@ -17,6 +17,7 @@ class CalibrateCompletedDialog extends StatelessWidget {
   @override
   Widget build(_) {
     return AlertDialog(
+      backgroundColor: ColorsManager.whiteColors,
       contentPadding: EdgeInsets.zero,
       content: SizedBox(
         height: 250,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

lib/pages/home/bloc/home_bloc.dart

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

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

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

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

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

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

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

lib/pages/routines/create_new_routines/space_dropdown.dart

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

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

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

lib/pages/space_management_v2/main_module/models/space_reorder_data_model.dart

@@ -0,0 +1,14 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+
+class SpaceReorderDataModel {
+  const SpaceReorderDataModel({
+    required this.space,
+    this.parent,
+    this.community,
+  });
+
+  final SpaceModel space;
+  final SpaceModel? parent;
+  final CommunityModel? community;
+}

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

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

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

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

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

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

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

@@ -1,13 +1,17 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_reorder_data_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/create_space_button.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_card_widget.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_cell.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class CommunityStructureCanvas extends StatefulWidget {
   const CommunityStructureCanvas({
@@ -31,8 +35,9 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
   final double _horizontalSpacing = 150.0;
   final double _verticalSpacing = 120.0;
 
-  late TransformationController _transformationController;
+  late final TransformationController _transformationController;
-  late AnimationController _animationController;
+  late final AnimationController _animationController;
+  SpaceReorderDataModel? _draggedData;
 
   @override
   void initState() {
@@ -97,7 +102,7 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     final position = _positions[space.uuid];
     if (position == null) return;
 
-    const scale = 1.5;
+    const scale = 1;
     final viewSize = context.size;
     if (viewSize == null) return;
 
@@ -112,16 +117,33 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     _runAnimation(matrix);
   }
 
+  void _onReorder(SpaceReorderDataModel data, int newIndex) {
+    final newCommunity = widget.community.copyWith();
+    final children = data.parent?.children ?? newCommunity.spaces;
+    final oldIndex = children.indexWhere((s) => s.uuid == data.space.uuid);
+    if (oldIndex != -1) {
+      final item = children.removeAt(oldIndex);
+      if (newIndex > oldIndex) {
+        children.insert(newIndex - 1, item);
+      } else {
+        children.insert(newIndex, item);
+      }
+    }
+    context.read<CommunitiesBloc>().add(
+          CommunitiesUpdateCommunity(newCommunity),
+        );
+  }
+
   void _onSpaceTapped(SpaceModel? space) {
     context.read<CommunitiesTreeSelectionBloc>().add(
           SelectSpaceEvent(community: widget.community, space: space),
         );
   }
 
-  void _resetSelectionAndZoom() {
+  void _resetSelectionAndZoom([CommunityModel? community]) {
     context.read<CommunitiesTreeSelectionBloc>().add(
           SelectSpaceEvent(
-            community: widget.community,
+            community: community ?? widget.community,
             space: null,
           ),
         );
@@ -182,7 +204,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     _positions.clear();
     final community = widget.community;
 
-    _calculateLayout(community.spaces, 0, {});
+    final levelXOffset = <int, double>{};
+    _calculateLayout(community.spaces, 0, levelXOffset);
 
     final selectedSpace = widget.selectedSpace;
     final highlightedUuids = <String>{};
@@ -193,7 +216,24 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
 
     final widgets = <Widget>[];
     final connections = <SpaceConnectionModel>[];
-    _generateWidgets(community.spaces, widgets, connections, highlightedUuids);
+    _generateWidgets(
+      widget.community.spaces,
+      widgets,
+      connections,
+      highlightedUuids,
+      community: widget.community,
+    );
+
+    final createButtonX = levelXOffset[0] ?? 0.0;
+    const createButtonY = 0.0;
+
+    widgets.add(
+      Positioned(
+        left: createButtonX,
+        top: createButtonY,
+        child: CreateSpaceButton(communityUuid: widget.community.uuid),
+      ),
+    );
 
     return [
       CustomPaint(
@@ -211,58 +251,178 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
     List<SpaceModel> spaces,
     List<Widget> widgets,
     List<SpaceConnectionModel> connections,
-    Set<String> highlightedUuids,
+    Set<String> highlightedUuids, {
-  ) {
+    CommunityModel? community,
-    for (final space in spaces) {
+    SpaceModel? parent,
+  }) {
+    if (spaces.isNotEmpty) {
+      final firstChildPos = _positions[spaces.first.uuid]!;
+      final targetPos = Offset(
+        firstChildPos.dx - (_horizontalSpacing / 4),
+        firstChildPos.dy,
+      );
+      widgets.add(_buildDropTarget(parent, community, 0, targetPos));
+    }
+
+    for (var i = 0; i < spaces.length; i++) {
+      final space = spaces[i];
       final position = _positions[space.uuid];
-      if (position == null) continue;
+      if (position == null) {
+        continue;
+      }
 
       final isHighlighted = highlightedUuids.contains(space.uuid);
       final hasNoSelectedSpace = widget.selectedSpace == null;
 
+      final spaceCard = SpaceCardWidget(
+        buildSpaceContainer: () {
+          return Opacity(
+            opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
+            child: Tooltip(
+              message: space.spaceName,
+              preferBelow: false,
+              child: SpaceCell(
+                onTap: () => _onSpaceTapped(space),
+                icon: space.icon,
+                name: space.spaceName,
+              ),
+            ),
+          );
+        },
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
+          context,
+          communityUuid: widget.community.uuid,
+        ),
+      );
+
+      final reorderData = SpaceReorderDataModel(
+        space: space,
+        parent: parent,
+        community: community,
+      );
+
       widgets.add(
         Positioned(
           left: position.dx,
           top: position.dy,
           width: _cardWidth,
           height: _cardHeight,
-          child: SpaceCardWidget(
+          child: Draggable<SpaceReorderDataModel>(
-            buildSpaceContainer: () {
+            data: reorderData,
-              return Opacity(
+            feedback: Material(
-                opacity: hasNoSelectedSpace || isHighlighted ? 1.0 : 0.5,
+              color: Colors.transparent,
-                child: Tooltip(
+              child: Opacity(
-                  message: space.spaceName,
+                opacity: 0.2,
-                  preferBelow: false,
+                child: SizedBox(
-                  child: SpaceCell(
+                  width: _cardWidth,
-                    onTap: () => _onSpaceTapped(space),
+                  height: _cardHeight,
-                    icon: space.icon,
+                  child: spaceCard,
-                    name: space.spaceName,
-                  ),
                 ),
-              );
+              ),
-            },
+            ),
-            onTap: () => SpaceDetailsDialogHelper.showCreate(context),
+            onDragStarted: () => setState(() => _draggedData = reorderData),
+            onDragEnd: (_) => setState(() => _draggedData = null),
+            onDraggableCanceled: (_, __) => setState(() => _draggedData = null),
+            childWhenDragging: Opacity(opacity: 0.4, child: spaceCard),
+            child: spaceCard,
           ),
         ),
       );
 
+      final targetPos = Offset(
+        position.dx + _cardWidth + (_horizontalSpacing / 4) - 20,
+        position.dy,
+      );
+      widgets.add(_buildDropTarget(parent, community, i + 1, targetPos));
+
       for (final child in space.children) {
-        connections.add(
+        connections.add(SpaceConnectionModel(from: space.uuid, to: child.uuid));
-          SpaceConnectionModel(from: space.uuid, to: child.uuid),
+      }
+
+      if (space.children.isNotEmpty) {
+        _generateWidgets(
+          space.children,
+          widgets,
+          connections,
+          highlightedUuids,
+          parent: space,
         );
       }
-      _generateWidgets(space.children, widgets, connections, highlightedUuids);
     }
   }
 
+  Widget _buildDropTarget(
+    SpaceModel? parent,
+    CommunityModel? community,
+    int index,
+    Offset position,
+  ) {
+    return Positioned(
+      left: position.dx,
+      top: position.dy,
+      width: 40,
+      height: _cardHeight,
+      child: DragTarget<SpaceReorderDataModel>(
+        builder: (context, candidateData, rejectedData) {
+          if (_draggedData == null) {
+            return const SizedBox();
+          }
+
+          final isTargetForDragged = (_draggedData?.parent?.uuid == parent?.uuid &&
+                  _draggedData?.community == null) ||
+              (_draggedData?.community?.uuid == community?.uuid &&
+                  _draggedData?.parent == null);
+
+          if (!isTargetForDragged) {
+            return const SizedBox();
+          }
+
+          return Container(
+            width: 40,
+            height: _cardHeight,
+            decoration: BoxDecoration(
+              color: context.theme.colorScheme.primary.withValues(
+                alpha: candidateData.isNotEmpty ? 0.7 : 0.3,
+              ),
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Icon(
+              Icons.add,
+              color: context.theme.colorScheme.onPrimary,
+            ),
+          );
+        },
+        onWillAcceptWithDetails: (data) {
+          final children = parent?.children ?? community?.spaces ?? [];
+          final isSameParent = (data.data.parent?.uuid == parent?.uuid &&
+                  data.data.community == null) ||
+              (data.data.community?.uuid == community?.uuid &&
+                  data.data.parent == null);
+
+          if (!isSameParent) {
+            return false;
+          }
+
+          final oldIndex =
+              children.indexWhere((s) => s.uuid == data.data.space.uuid);
+          if (oldIndex == index || oldIndex == index - 1) {
+            return false;
+          }
+          return true;
+        },
+        onAcceptWithDetails: (data) => _onReorder(data.data, index),
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     final treeWidgets = _buildTreeWidgets();
     return InteractiveViewer(
       transformationController: _transformationController,
       boundaryMargin: EdgeInsets.symmetric(
-        horizontal: MediaQuery.sizeOf(context).width * 0.3,
+        horizontal: context.screenWidth * 0.3,
-        vertical: MediaQuery.sizeOf(context).height * 0.3,
+        vertical: context.screenHeight * 0.3,
       ),
       minScale: 0.5,
       maxScale: 3.0,
@@ -270,8 +430,8 @@ class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
       child: GestureDetector(
         onTap: _resetSelectionAndZoom,
         child: SizedBox(
-          width: MediaQuery.sizeOf(context).width * 5,
+          width: context.screenWidth * 5,
-          height: MediaQuery.sizeOf(context).height * 5,
+          height: context.screenHeight * 5,
           child: Stack(children: treeWidgets),
         ),
       ),

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

@@ -0,0 +1,110 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class CommunityStructureHeader extends StatelessWidget {
+  const CommunityStructureHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final screenWidth = MediaQuery.of(context).size.width;
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
+      decoration: BoxDecoration(
+        color: ColorsManager.whiteColors,
+        boxShadow: [
+          BoxShadow(
+            color: ColorsManager.shadowBlackColor,
+            blurRadius: 8,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: _buildCommunityInfo(context, theme, screenWidth),
+              ),
+              const SizedBox(width: 16),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildCommunityInfo(
+      BuildContext context, ThemeData theme, double screenWidth) {
+    final selectedCommunity =
+        context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity;
+    final selectedSpace =
+        context.watch<CommunitiesTreeSelectionBloc>().state.selectedSpace;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          'Community Structure',
+          style: theme.textTheme.headlineLarge?.copyWith(
+            color: ColorsManager.blackColor,
+          ),
+        ),
+        if (selectedCommunity != null)
+          Row(
+            children: [
+              Expanded(
+                child: Row(
+                  children: [
+                    Flexible(
+                      child: SelectableText(
+                        selectedCommunity.name,
+                        style: theme.textTheme.bodyLarge?.copyWith(
+                          color: ColorsManager.blackColor,
+                        ),
+                        maxLines: 1,
+                      ),
+                    ),
+                    const SizedBox(width: 2),
+                    GestureDetector(
+                      onTap: () {
+                        SpaceManagementCommunityDialogHelper.showEditDialog(
+                          context,
+                          selectedCommunity,
+                        );
+                      },
+                      child: SvgPicture.asset(
+                        Assets.iconEdit,
+                        width: 16,
+                        height: 16,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(width: 8),
+              CommunityStructureHeaderActionButtons(
+                onDelete: (space) {},
+                onDuplicate: (space) {},
+                onEdit: (space) => SpaceDetailsDialogHelper.showEdit(
+                  context,
+                  spaceModel: selectedSpace!,
+                  communityUuid: selectedCommunity.uuid,
+                ),
+                selectedSpace: selectedSpace,
+              ),
+            ],
+          ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header_button.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class CommunityStructureHeaderActionButtons extends StatelessWidget {
+  const CommunityStructureHeaderActionButtons({
+    super.key,
+    required this.onDelete,
+    required this.selectedSpace,
+    required this.onDuplicate,
+    required this.onEdit,
+  });
+
+  final void Function(SpaceModel space) onDelete;
+  final void Function(SpaceModel space) onDuplicate;
+  final void Function(SpaceModel space) onEdit;
+  final SpaceModel? selectedSpace;
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      alignment: WrapAlignment.end,
+      spacing: 10,
+      children: [
+        if (selectedSpace != null) ...[
+          CommunityStructureHeaderButton(
+            label: 'Edit',
+            svgAsset: Assets.editSpace,
+            onPressed: () => onEdit(selectedSpace!),
+          ),
+          CommunityStructureHeaderButton(
+            label: 'Duplicate',
+            svgAsset: Assets.duplicate,
+            onPressed: () => onDuplicate(selectedSpace!),
+          ),
+          CommunityStructureHeaderButton(
+            label: 'Delete',
+            svgAsset: Assets.spaceDelete,
+            onPressed: () => onDelete(selectedSpace!),
+          ),
+        ],
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class CommunityStructureHeaderButton extends StatelessWidget {
+  const CommunityStructureHeaderButton({
+    super.key,
+    required this.label,
+    required this.onPressed,
+    this.svgAsset,
+  });
+
+  final String label;
+  final VoidCallback onPressed;
+  final String? svgAsset;
+
+  @override
+  Widget build(BuildContext context) {
+    const double buttonHeight = 40;
+    return ConstrainedBox(
+      constraints: const BoxConstraints(
+        maxWidth: 130,
+        minHeight: buttonHeight,
+      ),
+      child: DefaultButton(
+        onPressed: onPressed,
+        borderWidth: 2,
+        backgroundColor: ColorsManager.textFieldGreyColor,
+        foregroundColor: ColorsManager.blackColor,
+        borderRadius: 12.0,
+        padding: 2.0,
+        height: buttonHeight,
+        elevation: 0,
+        borderColor: ColorsManager.lightGrayColor,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (svgAsset != null)
+              SvgPicture.asset(
+                svgAsset!,
+                width: 20,
+                height: 20,
+              ),
+            const SizedBox(width: 10),
+            Flexible(
+              child: Text(
+                label,
+                style: context.textTheme.bodySmall
+                    ?.copyWith(color: ColorsManager.blackColor, fontSize: 14),
+                overflow: TextOverflow.ellipsis,
+                maxLines: 1,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -2,38 +2,66 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
-class CreateSpaceButton extends StatelessWidget {
+class CreateSpaceButton extends StatefulWidget {
-  const CreateSpaceButton({super.key});
+  const CreateSpaceButton({
+    required this.communityUuid,
+    super.key,
+  });
+
+  final String communityUuid;
+
+  @override
+  State<CreateSpaceButton> createState() => _CreateSpaceButtonState();
+}
+
+class _CreateSpaceButtonState extends State<CreateSpaceButton> {
+  bool _isHovered = false;
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
+    return Tooltip(
-      onTap: () => SpaceDetailsDialogHelper.showCreate(context),
+      margin: const EdgeInsets.symmetric(vertical: 24),
-      child: Container(
+      message: 'Create a new space',
-        height: 60,
+      child: GestureDetector(
-        decoration: BoxDecoration(
+        onTap: () => SpaceDetailsDialogHelper.showCreate(
-          color: Colors.white,
+          context,
-          borderRadius: BorderRadius.circular(20),
+          communityUuid: widget.communityUuid,
-          boxShadow: [
-            BoxShadow(
-              color: Colors.grey.withValues(alpha: 0.5),
-              spreadRadius: 5,
-              blurRadius: 7,
-              offset: const Offset(0, 3),
-            ),
-          ],
         ),
-        child: Center(
+        child: MouseRegion(
-          child: Container(
+          onEnter: (_) => setState(() => _isHovered = true),
-            width: 40,
+          onExit: (_) => setState(() => _isHovered = false),
-            height: 40,
+          child: AnimatedOpacity(
-            decoration: const BoxDecoration(
+            duration: const Duration(milliseconds: 100),
-              color: ColorsManager.boxColor,
+            opacity: _isHovered ? 1.0 : 0.45,
-              shape: BoxShape.circle,
+            child: Container(
-            ),
+              width: 150,
-            child: const Icon(
+              height: 90,
-              Icons.add,
+              decoration: BoxDecoration(
-              color: Colors.blue,
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(20),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.grey.withValues(alpha: 0.2),
+                    spreadRadius: 3,
+                    blurRadius: 8,
+                    offset: const Offset(0, 4),
+                  ),
+                ],
+              ),
+              child: Container(
+                margin: const EdgeInsets.symmetric(vertical: 20),
+                decoration: BoxDecoration(
+                  border: Border.all(color: ColorsManager.borderColor, width: 2),
+                  color: ColorsManager.boxColor,
+                  shape: BoxShape.circle,
+                ),
+                child: const Center(
+                  child: Icon(
+                    Icons.add,
+                    color: Colors.blue,
+                  ),
+                ),
+              ),
             ),
           ),
         ),

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

@@ -22,22 +22,20 @@ class _SpaceCardWidgetState extends State<SpaceCardWidget> {
     return MouseRegion(
       onEnter: (_) => setState(() => isHovered = true),
       onExit: (_) => setState(() => isHovered = false),
-      child: SizedBox(
+      child: Stack(
-        child: Stack(
+        clipBehavior: Clip.none,
-          clipBehavior: Clip.none,
+        alignment: Alignment.center,
-          alignment: Alignment.center,
+        children: [
-          children: [
+          widget.buildSpaceContainer(),
-            widget.buildSpaceContainer(),
+          if (isHovered)
-            if (isHovered)
+            Positioned(
-              Positioned(
+              bottom: 0,
-                bottom: 0,
+              child: PlusButtonWidget(
-                child: PlusButtonWidget(
+                offset: Offset.zero,
-                  offset: Offset.zero,
+                onButtonTap: widget.onTap,
-                  onButtonTap: widget.onTap,
-                ),
               ),
-          ],
+            ),
-        ),
+        ],
       ),
     );
   }

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_canvas.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_header.dart';
 import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/create_space_button.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 
@@ -12,15 +13,29 @@ class SpaceManagementCommunityStructure extends StatelessWidget {
     final selectionBloc = context.watch<CommunitiesTreeSelectionBloc>().state;
     final selectedCommunity = selectionBloc.selectedCommunity;
     final selectedSpace = selectionBloc.selectedSpace;
-    const spacer = Spacer(flex: 10);
+    const spacer = Spacer(flex: 6);
     return Visibility(
       visible: selectedCommunity!.spaces.isNotEmpty,
-      replacement: const Row(
+      replacement: Row(
-        children: [spacer, Expanded(child: CreateSpaceButton()), spacer],
+        children: [
+          spacer,
+          Expanded(
+            child: CreateSpaceButton(communityUuid: selectedCommunity.uuid),
+          ),
+          spacer
+        ],
       ),
-      child: CommunityStructureCanvas(
+      child: Column(
-        community: selectedCommunity,
+        mainAxisSize: MainAxisSize.min,
-        selectedSpace: selectedSpace,
+        children: [
+          const CommunityStructureHeader(),
+          Expanded(
+            child: CommunityStructureCanvas(
+              community: selectedCommunity,
+              selectedSpace: selectedSpace,
+            ),
+          ),
+        ],
       ),
     );
   }

lib/pages/space_management_v2/modules/communities/domain/models/community_model.dart

@@ -39,6 +39,26 @@ class CommunityModel extends Equatable {
         .toList();
   }
 
+  CommunityModel copyWith({
+    String? uuid,
+    String? name,
+    DateTime? createdAt,
+    DateTime? updatedAt,
+    String? description,
+    String? externalId,
+    List<SpaceModel>? spaces,
+  }) {
+    return CommunityModel(
+      uuid: uuid ?? this.uuid,
+      name: name ?? this.name,
+      createdAt: createdAt ?? this.createdAt,
+      updatedAt: updatedAt ?? this.updatedAt,
+      description: description ?? this.description,
+      externalId: externalId ?? this.externalId,
+      spaces: spaces ?? this.spaces,
+    );
+  }
+
   @override
   List<Object?> get props => [uuid, name, spaces];
 }

lib/pages/space_management_v2/modules/communities/domain/models/space_model.dart

@@ -19,6 +19,16 @@ class SpaceModel extends Equatable {
     required this.parent,
   });
 
+  factory SpaceModel.empty() => const SpaceModel(
+        uuid: '',
+        createdAt: null,
+        updatedAt: null,
+        spaceName: '',
+        icon: '',
+        children: [],
+        parent: null,
+      );
+
   factory SpaceModel.fromJson(Map<String, dynamic> json) {
     return SpaceModel(
       uuid: json['uuid'] as String? ?? '',

lib/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart

@@ -16,6 +16,7 @@ class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
     on<LoadCommunities>(_onLoadCommunities);
     on<LoadMoreCommunities>(_onLoadMoreCommunities);
     on<InsertCommunity>(_onInsertCommunity);
+    on<CommunitiesUpdateCommunity>(_onCommunitiesUpdateCommunity);
   }
 
   final CommunitiesService _communitiesService;
@@ -114,4 +115,18 @@ class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
   ) {
     emit(state.copyWith(communities: [event.community, ...state.communities]));
   }
+
+  void _onCommunitiesUpdateCommunity(
+    CommunitiesUpdateCommunity event,
+    Emitter<CommunitiesState> emit,
+  ) {
+    final updatedCommunities = state.communities
+        .map((e) => e.uuid == event.community.uuid ? event.community : e)
+        .toList();
+    emit(
+      state.copyWith(
+        communities: updatedCommunities,
+      ),
+    );
+  }
 }

lib/pages/space_management_v2/modules/communities/presentation/bloc/communities_event.dart

@@ -31,3 +31,12 @@ final class InsertCommunity extends CommunitiesEvent {
   @override
   List<Object?> get props => [community];
 }
+
+final class CommunitiesUpdateCommunity extends CommunitiesEvent {
+  const CommunitiesUpdateCommunity(this.community);
+
+  final CommunityModel community;
+
+  @override
+  List<Object?> get props => [community];
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/communities_tree_failure_widget.dart

@@ -13,14 +13,14 @@ class CommunitiesTreeFailureWidget extends StatelessWidget {
     return Expanded(
       child: Center(
         child: Column(
+          spacing: 16,
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            Text(
+            SelectableText(
               errorMessage ?? 'Something went wrong',
               textAlign: TextAlign.center,
             ),
-            const SizedBox(height: 16),
+            FilledButton(
-            ElevatedButton(
               onPressed: () => context.read<CommunitiesBloc>().add(
                     LoadCommunities(
                       LoadCommunitiesParam(

lib/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart

@@ -1,57 +1,58 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/widgets/community_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/data/services/remote_create_community_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog_widget.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
 
 class CreateCommunityDialog extends StatelessWidget {
-  final void Function(CommunityModel community) onCreateCommunity;
+  const CreateCommunityDialog({super.key});
-  final String? initialName;
-  final Widget title;
-
-  const CreateCommunityDialog({
-    super.key,
-    required this.onCreateCommunity,
-    required this.title,
-    this.initialName,
-  });
 
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (_) => CreateCommunityBloc(RemoteCreateCommunityService(HTTPService())),
+      create: (_) => CreateCommunityBloc(
-      child: BlocListener<CreateCommunityBloc, CreateCommunityState>(
+        RemoteCreateCommunityService(HTTPService()),
+      ),
+      child: BlocConsumer<CreateCommunityBloc, CreateCommunityState>(
         listener: (context, state) {
           switch (state) {
-            case CreateCommunityLoading():
+            case CreateCommunityLoading() || CreateCommunityInitial():
-              showDialog<void>(
+              SpaceManagementCommunityDialogHelper.showLoadingDialog(context);
-                context: context,
-                builder: (context) => const Center(
-                  child: CircularProgressIndicator(),
-                ),
-              );
               break;
             case CreateCommunitySuccess(:final community):
               Navigator.of(context).pop();
               Navigator.of(context).pop();
-              ScaffoldMessenger.of(context).showSnackBar(
+              SpaceManagementCommunityDialogHelper.showSuccessSnackBar(
-                const SnackBar(content: Text('Community created successfully')),
+                context,
+                '${community.name} community created successfully',
               );
-              onCreateCommunity.call(community);
+              context.read<CommunitiesBloc>().add(
+                    InsertCommunity(community),
+                  );
+              context.read<CommunitiesTreeSelectionBloc>().add(
+                    SelectCommunityEvent(community: community),
+                  );
               break;
             case CreateCommunityFailure():
               Navigator.of(context).pop();
               break;
-            default:
-              break;
           }
         },
-        child: CreateCommunityDialogWidget(
+        builder: (BuildContext context, CreateCommunityState state) {
-          title: title,
+          return CommunityDialog(
-          initialName: initialName,
+            title: const Text('Create Community'),
-        ),
+            initialName: null,
+            onSubmit: (name) => context.read<CreateCommunityBloc>().add(
+                  CreateCommunity(CreateCommunityParam(name: name)),
+                ),
+            errorMessage: state is CreateCommunityFailure ? state.message : null,
+          );
+        },
       ),
     );
   }

lib/pages/space_management_v2/modules/products/data/services/remote_products_service.dart

@@ -1,9 +1,9 @@
 import 'package:dio/dio.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/params/load_products_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/services/products_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/constants/api_const.dart';
 
 class RemoteProductsService implements ProductsService {
   const RemoteProductsService(this._httpService);
@@ -13,17 +13,14 @@ class RemoteProductsService implements ProductsService {
   static const _defaultErrorMessage = 'Failed to load devices';
 
   @override
-  Future<List<Product>> getProducts(LoadProductsParam param) async {
+  Future<List<Product>> getProducts() async {
     try {
       final response = await _httpService.get(
-        path: 'devices',
+        path: ApiEndpoints.listProducts,
-        queryParameters: {
-          'spaceUuid': param.spaceUuid,
-          if (param.type != null) 'type': param.type,
-          if (param.status != null) 'status': param.status,
-        },
         expectedResponseModel: (data) {
-          return (data as List)
+          final json = data as Map<String, dynamic>;
+          final products = json['data'] as List<dynamic>;
+          return products
               .map((e) => Product.fromJson(e as Map<String, dynamic>))
               .toList();
         },

lib/pages/space_management_v2/modules/products/domain/models/product.dart

@@ -1,18 +1,24 @@
 import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 
 class Product extends Equatable {
-  final String uuid;
-  final String name;
-
   const Product({
     required this.uuid,
     required this.name,
+    required this.productType,
   });
 
+  final String uuid;
+  final String name;
+  final String productType;
+
+  String get icon => _mapIconToProduct(productType);
+
   factory Product.fromJson(Map<String, dynamic> json) {
     return Product(
-      uuid: json['uuid'] as String,
+      uuid: json['uuid'] as String? ?? '',
-      name: json['name'] as String,
+      name: json['name'] as String? ?? '',
+      productType: json['prodType'] as String? ?? '',
     );
   }
 
@@ -20,9 +26,37 @@ class Product extends Equatable {
     return {
       'uuid': uuid,
       'name': name,
+      'productType': productType,
     };
   }
 
+  static String _mapIconToProduct(String prodType) {
+    const iconMapping = {
+      '1G': Assets.Gang1SwitchIcon,
+      '1GT': Assets.oneTouchSwitch,
+      '2G': Assets.Gang2SwitchIcon,
+      '2GT': Assets.twoTouchSwitch,
+      '3G': Assets.Gang3SwitchIcon,
+      '3GT': Assets.threeTouchSwitch,
+      'CUR': Assets.curtain,
+      'CUR_2': Assets.curtain,
+      'GD': Assets.garageDoor,
+      'GW': Assets.SmartGatewayIcon,
+      'DL': Assets.DoorLockIcon,
+      'WL': Assets.waterLeakSensor,
+      'WH': Assets.waterHeater,
+      'WM': Assets.waterLeakSensor,
+      'SOS': Assets.sos,
+      'AC': Assets.ac,
+      'CPS': Assets.presenceSensor,
+      'PC': Assets.powerClamp,
+      'WPS': Assets.presenceSensor,
+      'DS': Assets.doorSensor
+    };
+
+    return iconMapping[prodType] ?? Assets.presenceSensor;
+  }
+
   @override
-  List<Object?> get props => [uuid, name];
+  List<Object?> get props => [uuid, name, productType];
 }

lib/pages/space_management_v2/modules/products/domain/params/load_products_param.dart

@@ -1,11 +0,0 @@
-class LoadProductsParam {
-  final String spaceUuid;
-  final String? type;
-  final String? status;
-
-  const LoadProductsParam({
-    required this.spaceUuid,
-    this.type,
-    this.status,
-  });
-}

lib/pages/space_management_v2/modules/products/domain/services/products_service.dart

@@ -1,6 +1,5 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/params/load_products_param.dart';
 
 abstract class ProductsService {
-  Future<List<Product>> getProducts(LoadProductsParam param);
+  Future<List<Product>> getProducts();
 }

lib/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart

@@ -1,7 +1,6 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/params/load_products_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/services/products_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 
@@ -9,20 +8,20 @@ part 'products_event.dart';
 part 'products_state.dart';
 
 class ProductsBloc extends Bloc<ProductsEvent, ProductsState> {
-  final ProductsService _deviceService;
+  ProductsBloc(this._productsService) : super(ProductsInitial()) {
-
-  ProductsBloc(this._deviceService) : super(ProductsInitial()) {
     on<LoadProducts>(_onLoadProducts);
   }
 
+  final ProductsService _productsService;
+
   Future<void> _onLoadProducts(
     LoadProducts event,
     Emitter<ProductsState> emit,
   ) async {
     emit(ProductsLoading());
     try {
-      final devices = await _deviceService.getProducts(event.param);
+      final products = await _productsService.getProducts();
-      emit(ProductsLoaded(devices));
+      emit(ProductsLoaded(products));
     } on APIException catch (e) {
       emit(ProductsFailure(e.message));
     } catch (e) {

lib/pages/space_management_v2/modules/products/presentation/bloc/products_event.dart

@@ -8,10 +8,5 @@ sealed class ProductsEvent extends Equatable {
 }
 
 final class LoadProducts extends ProductsEvent {
-  const LoadProducts(this.param);
+  const LoadProducts();
-
-  final LoadProductsParam param;
-
-  @override
-  List<Object> get props => [param];
 }

lib/pages/space_management_v2/modules/products/presentation/bloc/products_state.dart

@@ -21,10 +21,10 @@ final class ProductsLoaded extends ProductsState {
 }
 
 final class ProductsFailure extends ProductsState {
-  final String message;
+  final String errorMessage;
 
-  const ProductsFailure(this.message);
+  const ProductsFailure(this.errorMessage);
 
   @override
-  List<Object> get props => [message];
+  List<Object> get props => [errorMessage];
 }

lib/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart

@@ -1,6 +1,7 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_spaces_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/services/space_details_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
@@ -15,12 +16,15 @@ class RemoteSpaceDetailsService implements SpaceDetailsService {
   static const _defaultErrorMessage = 'Failed to load space details';
 
   @override
-  Future<SpaceDetailsModel> getSpaceDetails(LoadSpacesParam param) async {
+  Future<SpaceDetailsModel> getSpaceDetails(LoadSpaceDetailsParam param) async {
     try {
       final response = await _httpService.get(
-        path: 'endpoint',
+        path: await _makeEndpoint(param),
         expectedResponseModel: (data) {
-          return SpaceDetailsModel.fromJson(data as Map<String, dynamic>);
+          final response = data as Map<String, dynamic>;
+          return SpaceDetailsModel.fromJson(
+            response['data'] as Map<String, dynamic>,
+          );
         },
       );
       return response;
@@ -37,4 +41,13 @@ class RemoteSpaceDetailsService implements SpaceDetailsService {
       throw APIException(formattedErrorMessage);
     }
   }
+
+  Future<String> _makeEndpoint(LoadSpaceDetailsParam param) async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null || projectUuid.isEmpty) {
+      throw APIException('Project UUID is not set');
+    }
+
+    return '/projects/$projectUuid/communities/${param.communityUuid}/spaces/${param.spaceUuid}';
+  }
 }

lib/pages/space_management_v2/modules/space_details/data/services/unique_subspaces_decorator.dart

@@ -0,0 +1,27 @@
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/services/space_details_service.dart';
+
+class UniqueSubspacesDecorator implements SpaceDetailsService {
+  final SpaceDetailsService _decoratee;
+
+  const UniqueSubspacesDecorator(this._decoratee);
+
+  @override
+  Future<SpaceDetailsModel> getSpaceDetails(LoadSpaceDetailsParam param) async {
+    final response = await _decoratee.getSpaceDetails(param);
+
+    final uniqueSubspaces = <String, Subspace>{};
+
+    for (final subspace in response.subspaces) {
+      final normalizedName = subspace.name.trim().toLowerCase();
+      if (!uniqueSubspaces.containsKey(normalizedName)) {
+        uniqueSubspaces[normalizedName] = subspace;
+      }
+    }
+
+    return response.copyWith(
+      subspaces: uniqueSubspaces.values.toList(),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart

@@ -1,6 +1,8 @@
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:uuid/uuid.dart';
 
 class SpaceDetailsModel extends Equatable {
   final String uuid;
@@ -17,6 +19,13 @@ class SpaceDetailsModel extends Equatable {
     required this.subspaces,
   });
 
+  factory SpaceDetailsModel.empty() => const SpaceDetailsModel(
+        uuid: '',
+        spaceName: '',
+        icon: Assets.location,
+        productAllocations: [],
+        subspaces: [],
+      );
   factory SpaceDetailsModel.fromJson(Map<String, dynamic> json) {
     return SpaceDetailsModel(
       uuid: json['uuid'] as String,
@@ -41,23 +50,40 @@ class SpaceDetailsModel extends Equatable {
     };
   }
 
+  SpaceDetailsModel copyWith({
+    String? uuid,
+    String? spaceName,
+    String? icon,
+    List<ProductAllocation>? productAllocations,
+    List<Subspace>? subspaces,
+  }) {
+    return SpaceDetailsModel(
+      uuid: uuid ?? this.uuid,
+      spaceName: spaceName ?? this.spaceName,
+      icon: icon ?? this.icon,
+      productAllocations: productAllocations ?? this.productAllocations,
+      subspaces: subspaces ?? this.subspaces,
+    );
+  }
+
   @override
   List<Object?> get props => [uuid, spaceName, icon, productAllocations, subspaces];
 }
 
 class ProductAllocation extends Equatable {
+  final String uuid;
   final Product product;
   final Tag tag;
-  final String? location;
 
   const ProductAllocation({
+    required this.uuid,
     required this.product,
     required this.tag,
-    this.location,
   });
 
   factory ProductAllocation.fromJson(Map<String, dynamic> json) {
     return ProductAllocation(
+      uuid: json['uuid'] as String? ?? const Uuid().v4(),
       product: Product.fromJson(json['product'] as Map<String, dynamic>),
       tag: Tag.fromJson(json['tag'] as Map<String, dynamic>),
     );
@@ -65,13 +91,26 @@ class ProductAllocation extends Equatable {
 
   Map<String, dynamic> toJson() {
     return {
+      'uuid': uuid,
       'product': product.toJson(),
       'tag': tag.toJson(),
     };
   }
 
+  ProductAllocation copyWith({
+    String? uuid,
+    Product? product,
+    Tag? tag,
+  }) {
+    return ProductAllocation(
+      uuid: uuid ?? this.uuid,
+      product: product ?? this.product,
+      tag: tag ?? this.tag,
+    );
+  }
+
   @override
-  List<Object?> get props => [product, tag];
+  List<Object?> get props => [uuid, product, tag];
 }
 
 class Subspace extends Equatable {
@@ -88,7 +127,7 @@ class Subspace extends Equatable {
   factory Subspace.fromJson(Map<String, dynamic> json) {
     return Subspace(
       uuid: json['uuid'] as String,
-      name: json['name'] as String,
+      name: json['subspaceName'] as String,
       productAllocations: (json['productAllocations'] as List)
           .map((e) => ProductAllocation.fromJson(e as Map<String, dynamic>))
           .toList(),
@@ -103,6 +142,18 @@ class Subspace extends Equatable {
     };
   }
 
+  Subspace copyWith({
+    String? uuid,
+    String? name,
+    List<ProductAllocation>? productAllocations,
+  }) {
+    return Subspace(
+      uuid: uuid ?? this.uuid,
+      name: name ?? this.name,
+      productAllocations: productAllocations ?? this.productAllocations,
+    );
+  }
+
   @override
   List<Object?> get props => [uuid, name, productAllocations];
 }

lib/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart

@@ -0,0 +1,9 @@
+class LoadSpaceDetailsParam {
+  const LoadSpaceDetailsParam({
+    required this.spaceUuid,
+    required this.communityUuid,
+  });
+
+  final String spaceUuid;
+  final String communityUuid;
+}

lib/pages/space_management_v2/modules/space_details/domain/params/load_spaces_param.dart

@@ -1,3 +0,0 @@
-class LoadSpacesParam {
-  const LoadSpacesParam();
-}

lib/pages/space_management_v2/modules/space_details/domain/services/space_details_service.dart

@@ -1,6 +1,6 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_spaces_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
 
 abstract class SpaceDetailsService {
-  Future<SpaceDetailsModel> getSpaceDetails(LoadSpacesParam param);
+  Future<SpaceDetailsModel> getSpaceDetails(LoadSpaceDetailsParam param);
 }

lib/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart

@@ -1,7 +1,7 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_spaces_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/services/space_details_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 
@@ -9,12 +9,13 @@ part 'space_details_event.dart';
 part 'space_details_state.dart';
 
 class SpaceDetailsBloc extends Bloc<SpaceDetailsEvent, SpaceDetailsState> {
-  final SpaceDetailsService _spaceDetailsService;
-
   SpaceDetailsBloc(this._spaceDetailsService) : super(SpaceDetailsInitial()) {
     on<LoadSpaceDetails>(_onLoadSpaceDetails);
+    on<ClearSpaceDetails>(_onClearSpaceDetails);
   }
 
+  final SpaceDetailsService _spaceDetailsService;
+
   Future<void> _onLoadSpaceDetails(
     LoadSpaceDetails event,
     Emitter<SpaceDetailsState> emit,
@@ -31,4 +32,11 @@ class SpaceDetailsBloc extends Bloc<SpaceDetailsEvent, SpaceDetailsState> {
       emit(SpaceDetailsFailure(e.toString()));
     }
   }
+
+  void _onClearSpaceDetails(
+    ClearSpaceDetails event,
+    Emitter<SpaceDetailsState> emit,
+  ) {
+    emit(SpaceDetailsInitial());
+  }
 }

lib/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_event.dart

@@ -7,11 +7,18 @@ sealed class SpaceDetailsEvent extends Equatable {
   List<Object> get props => [];
 }
 
-class LoadSpaceDetails extends SpaceDetailsEvent {
+final class LoadSpaceDetails extends SpaceDetailsEvent {
   const LoadSpaceDetails(this.param);
 
-  final LoadSpacesParam param;
+  final LoadSpaceDetailsParam param;
 
   @override
   List<Object> get props => [param];
 }
+
+final class ClearSpaceDetails extends SpaceDetailsEvent {
+  const ClearSpaceDetails();
+
+  @override
+  List<Object> get props => [];
+}

lib/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_state.dart

@@ -21,10 +21,10 @@ final class SpaceDetailsLoaded extends SpaceDetailsState {
 }
 
 final class SpaceDetailsFailure extends SpaceDetailsState {
-  final String message;
+  final String errorMessage;
 
-  const SpaceDetailsFailure(this.message);
+  const SpaceDetailsFailure(this.errorMessage);
 
   @override
-  List<Object> get props => [message];
+  List<Object> get props => [errorMessage];
 }

lib/pages/space_management_v2/modules/space_details/presentation/helpers/space_details_dialog_helper.dart

@@ -1,11 +1,127 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/data/services/remote_space_details_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/data/services/remote_update_space_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/domain/params/update_space_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/update_space_bloc.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
 
 abstract final class SpaceDetailsDialogHelper {
-  static void showCreate(BuildContext context) {
+  static void showCreate(
+    BuildContext context, {
+    required String communityUuid,
+  }) {
     showDialog<void>(
       context: context,
-      builder: (context) => const SpaceDetailsDialog(),
+      builder: (_) => MultiBlocProvider(
+        providers: [
+          BlocProvider(
+            create: (context) => SpaceDetailsBloc(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
+            ),
+          ),
+          BlocProvider(
+            create: (context) => UpdateSpaceBloc(
+              RemoteUpdateSpaceService(HTTPService()),
+            ),
+          ),
+        ],
+        child: Builder(
+          builder: (context) => SpaceDetailsDialog(
+            context: context,
+            title: const SelectableText('Create Space'),
+            spaceModel: SpaceModel.empty(),
+            onSave: (space) {},
+            communityUuid: communityUuid,
+          ),
+        ),
+      ),
+    );
+  }
+
+  static void showEdit(
+    BuildContext context, {
+    required SpaceModel spaceModel,
+    required String communityUuid,
+  }) {
+    showDialog<void>(
+      context: context,
+      builder: (_) => MultiBlocProvider(
+        providers: [
+          BlocProvider(
+            create: (context) => SpaceDetailsBloc(
+              RemoteSpaceDetailsService(httpService: HTTPService()),
+            ),
+          ),
+          BlocProvider(
+            create: (context) => UpdateSpaceBloc(
+              RemoteUpdateSpaceService(HTTPService()),
+            ),
+          ),
+        ],
+        child: Builder(
+          builder: (context) => BlocListener<UpdateSpaceBloc, UpdateSpaceState>(
+            listener: _updateListener,
+            child: SpaceDetailsDialog(
+              context: context,
+              title: const SelectableText('Edit Space'),
+              spaceModel: spaceModel,
+              onSave: (space) => context.read<UpdateSpaceBloc>().add(
+                    UpdateSpace(
+                      UpdateSpaceParam(
+                        communityUuid: communityUuid,
+                        space: space,
+                      ),
+                    ),
+                  ),
+              communityUuid: communityUuid,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  static void _updateListener(BuildContext context, UpdateSpaceState state) {
+    return switch (state) {
+      UpdateSpaceInitial() => null,
+      UpdateSpaceLoading() => _onLoading(context),
+      UpdateSpaceSuccess(:final space) => _onUpdateSuccess(context, space),
+      UpdateSpaceFailure(:final errorMessage) => _onError(context, errorMessage),
+    };
+  }
+
+  static void _onUpdateSuccess(BuildContext context, SpaceDetailsModel space) {
+    Navigator.of(context).pop();
+  }
+
+  static void _onLoading(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (_) => const Center(child: CircularProgressIndicator()),
+    );
+  }
+
+  static void _onError(BuildContext context, String errorMessage) {
+    Navigator.of(context).pop();
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (_) => AlertDialog(
+        title: const Text('Error'),
+        content: Text(errorMessage),
+        actions: [
+          TextButton(
+            onPressed: Navigator.of(context).pop,
+            child: const Text('OK'),
+          ),
+        ],
+      ),
     );
   }
 }

lib/pages/space_management_v2/modules/space_details/presentation/widgets/button_content_widget.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class ButtonContentWidget extends StatelessWidget {
+  final String label;
+  final String? svgAssets;
+  final bool disabled;
+
+  const ButtonContentWidget({
+    required this.label,
+    this.svgAssets,
+    this.disabled = false,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Opacity(
+      opacity: disabled ? 0.5 : 1.0,
+      child: Container(
+        width: screenWidth * 0.25,
+        decoration: BoxDecoration(
+          color: ColorsManager.textFieldGreyColor,
+          border: Border.all(
+            color: ColorsManager.neutralGray,
+            width: 3.0,
+          ),
+          borderRadius: BorderRadius.circular(20),
+        ),
+        padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 16.0),
+        child: Row(
+          children: [
+            if (svgAssets != null)
+              Padding(
+                padding: const EdgeInsets.only(left: 6.0),
+                child: SvgPicture.asset(
+                  svgAssets!,
+                  width: screenWidth * 0.015,
+                  height: screenWidth * 0.015,
+                ),
+              ),
+            const SizedBox(width: 10),
+            Expanded(
+              child: Text(
+                label,
+                style: const TextStyle(
+                  color: ColorsManager.blackColor,
+                  fontSize: 16,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpaceDetailsActionButtons extends StatelessWidget {
+  const SpaceDetailsActionButtons({
+    super.key,
+    required this.onSave,
+    required this.onCancel,
+    this.saveButtonLabel = 'OK',
+    this.cancelButtonLabel = 'Cancel',
+  });
+
+  final VoidCallback onCancel;
+  final VoidCallback? onSave;
+  final String saveButtonLabel;
+  final String cancelButtonLabel;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      spacing: 10,
+      children: [
+        Expanded(child: _buildCancelButton(context)),
+        Expanded(child: _buildSaveButton()),
+      ],
+    );
+  }
+
+  Widget _buildCancelButton(BuildContext context) {
+    return CancelButton(onPressed: onCancel, label: cancelButtonLabel);
+  }
+
+  Widget _buildSaveButton() {
+    return DefaultButton(
+      onPressed: onSave,
+      borderRadius: 10,
+      backgroundColor: ColorsManager.secondaryColor,
+      foregroundColor: ColorsManager.whiteColors,
+      child: Text(saveButtonLabel),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_devices_box.dart

@@ -0,0 +1,139 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/common/edit_chip.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/button_content_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/enum/device_types.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceDetailsDevicesBox extends StatelessWidget {
+  const SpaceDetailsDevicesBox({
+    required this.space,
+    super.key,
+  });
+
+  final SpaceDetailsModel space;
+
+  @override
+  Widget build(BuildContext context) {
+    final allAllocations = [
+      ...space.productAllocations,
+      ...space.subspaces.expand((s) => s.productAllocations),
+    ];
+
+    if (allAllocations.isNotEmpty) {
+      final productCounts = <String, int>{};
+      for (final allocation in allAllocations) {
+        final productType = allocation.product.productType;
+        productCounts[productType] = (productCounts[productType] ?? 0) + 1;
+      }
+
+      return Container(
+        width: double.infinity,
+        padding: const EdgeInsets.all(8),
+        decoration: BoxDecoration(
+          color: ColorsManager.textFieldGreyColor,
+          borderRadius: BorderRadius.circular(15),
+          border: Border.all(
+            color: ColorsManager.textFieldGreyColor,
+            width: 3.0,
+          ),
+        ),
+        child: Wrap(
+          spacing: 8.0,
+          runSpacing: 8.0,
+          children: [
+            ...productCounts.entries.map((entry) {
+              final productType = entry.key;
+              final count = entry.value;
+              return Chip(
+                avatar: SizedBox(
+                  width: 24,
+                  height: 24,
+                  child: SvgPicture.asset(
+                    _getDeviceIcon(productType),
+                    fit: BoxFit.contain,
+                  ),
+                ),
+                label: Text(
+                  'x$count',
+                  style: context.textTheme.bodySmall?.copyWith(
+                    color: ColorsManager.spaceColor,
+                  ),
+                ),
+                backgroundColor: ColorsManager.whiteColors,
+                shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(16),
+                  side: const BorderSide(
+                    color: ColorsManager.spaceColor,
+                  ),
+                ),
+              );
+            }),
+            EditChip(onTap: () => _showAssignTagsDialog(context)),
+          ],
+        ),
+      );
+    } else {
+      return TextButton(
+        onPressed: () => _showAssignTagsDialog(context),
+        style: TextButton.styleFrom(
+          padding: EdgeInsets.zero,
+        ),
+        child: const SizedBox(
+          width: double.infinity,
+          child: ButtonContentWidget(
+            svgAssets: Assets.addIcon,
+            label: 'Add Devices',
+          ),
+        ),
+      );
+    }
+  }
+
+  void _showAssignTagsDialog(BuildContext context) {
+    showDialog<SpaceDetailsModel>(
+      context: context,
+      builder: (context) => AssignTagsDialog(space: space),
+    ).then((resultSpace) {
+      if (resultSpace != null) {
+        if (context.mounted) {
+          context.read<SpaceDetailsModelBloc>().add(UpdateSpaceDetails(resultSpace));
+        }
+      }
+    });
+  }
+
+  String _getDeviceIcon(String productType) =>
+      switch (devicesTypesMap[productType]) {
+        DeviceType.LightBulb => Assets.lightBulb,
+        DeviceType.CeilingSensor => Assets.sensors,
+        DeviceType.AC => Assets.ac,
+        DeviceType.DoorLock => Assets.doorLock,
+        DeviceType.Curtain => Assets.curtain,
+        DeviceType.ThreeGang => Assets.gangSwitch,
+        DeviceType.Gateway => Assets.gateway,
+        DeviceType.OneGang => Assets.oneGang,
+        DeviceType.TwoGang => Assets.twoGang,
+        DeviceType.WH => Assets.waterHeater,
+        DeviceType.DoorSensor => Assets.openCloseDoor,
+        DeviceType.GarageDoor => Assets.openedDoor,
+        DeviceType.WaterLeak => Assets.waterLeakNormal,
+        DeviceType.Curtain2 => Assets.curtainIcon,
+        DeviceType.Blind => Assets.curtainIcon,
+        DeviceType.WallSensor => Assets.sensors,
+        DeviceType.DS => Assets.openCloseDoor,
+        DeviceType.OneTouch => Assets.gangSwitch,
+        DeviceType.TowTouch => Assets.gangSwitch,
+        DeviceType.ThreeTouch => Assets.gangSwitch,
+        DeviceType.NCPS => Assets.sensors,
+        DeviceType.PC => Assets.powerClamp,
+        DeviceType.Other => Assets.blackLogo,
+        null => Assets.blackLogo,
+      };
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_dialog.dart

@@ -1,12 +1,102 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/params/load_space_details_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/bloc/space_details_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_form.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
-class SpaceDetailsDialog extends StatelessWidget {
+class SpaceDetailsDialog extends StatefulWidget {
-  const SpaceDetailsDialog({super.key});
+  const SpaceDetailsDialog({
+    required this.title,
+    required this.spaceModel,
+    required this.onSave,
+    required this.context,
+    required this.communityUuid,
+    super.key,
+  });
+
+  final Widget title;
+  final SpaceModel spaceModel;
+  final void Function(SpaceDetailsModel space) onSave;
+  final BuildContext context;
+  final String communityUuid;
+
+  @override
+  State<SpaceDetailsDialog> createState() => _SpaceDetailsDialogState();
+}
+
+class _SpaceDetailsDialogState extends State<SpaceDetailsDialog> {
+  @override
+  void initState() {
+    final isCreateMode = widget.spaceModel.uuid.isEmpty;
+
+    if (!isCreateMode) {
+      final param = LoadSpaceDetailsParam(
+        spaceUuid: widget.spaceModel.uuid,
+        communityUuid: widget.communityUuid,
+      );
+      widget.context.read<SpaceDetailsBloc>().add(LoadSpaceDetails(param));
+    }
+    super.initState();
+  }
 
   @override
   Widget build(BuildContext context) {
-    return const Dialog(
+    final isCreateMode = widget.spaceModel.uuid.isEmpty;
-      child: Text('Create Space'),
+    if (isCreateMode) {
+      return SpaceDetailsForm(
+        title: widget.title,
+        space: SpaceDetailsModel.empty(),
+        onSave: widget.onSave,
+      );
+    }
+
+    return BlocBuilder<SpaceDetailsBloc, SpaceDetailsState>(
+      bloc: widget.context.read<SpaceDetailsBloc>(),
+      builder: (context, state) => switch (state) {
+        SpaceDetailsInitial() => _buildLoadingDialog(),
+        SpaceDetailsLoading() => _buildLoadingDialog(),
+        SpaceDetailsLoaded(:final spaceDetails) => SpaceDetailsForm(
+            title: widget.title,
+            space: spaceDetails,
+            onSave: widget.onSave,
+          ),
+        SpaceDetailsFailure(:final errorMessage) => _buildErrorDialog(
+            errorMessage,
+          ),
+      },
+    );
+  }
+
+  Widget _buildLoadingDialog() {
+    return AlertDialog(
+      title: widget.title,
+      backgroundColor: ColorsManager.whiteColors,
+      content: SizedBox(
+        height: context.screenHeight * 0.3,
+        width: context.screenWidth * 0.5,
+        child: const Center(child: CircularProgressIndicator()),
+      ),
+    );
+  }
+
+  Widget _buildErrorDialog(String errorMessage) {
+    return AlertDialog(
+      title: widget.title,
+      backgroundColor: ColorsManager.whiteColors,
+      content: Center(
+        child: SelectableText(
+          errorMessage,
+          style: context.textTheme.bodyLarge?.copyWith(
+            color: ColorsManager.red,
+            fontWeight: FontWeight.w500,
+            fontSize: 18,
+          ),
+        ),
+      ),
     );
   }
 }

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_form.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_devices_box.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_icon_picker.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_name_text_field.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_sub_spaces_box.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceDetailsForm extends StatelessWidget {
+  const SpaceDetailsForm({
+    required this.title,
+    required this.space,
+    required this.onSave,
+    super.key,
+  });
+
+  final Widget title;
+  final SpaceDetailsModel space;
+  final void Function(SpaceDetailsModel space) onSave;
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => SpaceDetailsModelBloc(initialState: space),
+      child: BlocBuilder<SpaceDetailsModelBloc, SpaceDetailsModel>(
+          buildWhen: (previous, current) => previous != current,
+          builder: (context, space) {
+            return AlertDialog(
+              title: title,
+              backgroundColor: ColorsManager.whiteColors,
+              content: SizedBox(
+                height: context.screenHeight * 0.3,
+                width: context.screenWidth * 0.5,
+                child: Row(
+                  spacing: 20,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Expanded(child: SpaceIconPicker(iconPath: space.icon)),
+                    Expanded(
+                      flex: 2,
+                      child: ListView(
+                        shrinkWrap: true,
+                        children: [
+                          SpaceNameTextField(
+                            initialValue: space.spaceName,
+                            isNameFieldExist: (value) => space.subspaces.any(
+                              (subspace) => subspace.name == value,
+                            ),
+                          ),
+                          const SizedBox(height: 32),
+                          SpaceSubSpacesBox(
+                            subspaces: space.subspaces,
+                          ),
+                          const SizedBox(height: 16),
+                          SpaceDetailsDevicesBox(space: space),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              actions: [
+                SpaceDetailsActionButtons(
+                  onSave: () => onSave(space),
+                  onCancel: Navigator.of(context).pop,
+                ),
+              ],
+            );
+          }),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_icon_picker.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_icon_selection_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceIconPicker extends StatelessWidget {
+  const SpaceIconPicker({
+    required this.iconPath,
+    super.key,
+  });
+
+  final String iconPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Stack(
+        
+        alignment: Alignment.center,
+        children: [
+          Container(
+            width: context.screenWidth * 0.175,
+            height: context.screenHeight * 0.175,
+            decoration: const BoxDecoration(
+              color: ColorsManager.boxColor,
+              shape: BoxShape.circle,
+            ),
+            padding: const EdgeInsets.all(24),
+            child: SvgPicture.asset(
+              iconPath,
+              width: context.screenWidth * 0.08,
+              height: context.screenHeight * 0.08,
+            ),
+          ),
+          Positioned.directional(
+            top: 12,
+            start: context.screenHeight * 0.06,
+            textDirection: Directionality.of(context),
+            child: InkWell(
+              onTap: () {
+                showDialog<String?>(
+                  context: context,
+                  builder: (context) => SpaceIconSelectionDialog(
+                    selectedIcon: iconPath,
+                  ),
+                ).then((value) {
+                  if (value != null) {
+                    if (context.mounted) {
+                      context.read<SpaceDetailsModelBloc>().add(
+                            UpdateSpaceDetailsIcon(value),
+                          );
+                    }
+                  }
+                });
+              },
+              child: Container(
+                decoration: const BoxDecoration(
+                  shape: BoxShape.circle,
+                ),
+                child: SvgPicture.asset(
+                  Assets.iconEdit,
+                  width: 16,
+                  height: 16,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_icon_selection_dialog.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceIconSelectionDialog extends StatelessWidget {
+  const SpaceIconSelectionDialog({super.key, required this.selectedIcon});
+  final String selectedIcon;
+
+  static const List<String> _icons = [
+    Assets.location,
+    Assets.villa,
+    Assets.gym,
+    Assets.sauna,
+    Assets.bbq,
+    Assets.building,
+    Assets.desk,
+    Assets.door,
+    Assets.parking,
+    Assets.pool,
+    Assets.stair,
+    Assets.steamRoom,
+    Assets.street,
+    Assets.unit,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: SelectableText(
+        'Space Icon',
+        style: context.textTheme.headlineMedium,
+      ),
+      backgroundColor: ColorsManager.whiteColors,
+      content: Container(
+        width: context.screenWidth * 0.45,
+        height: context.screenHeight * 0.275,
+        padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(
+          color: ColorsManager.boxColor,
+          borderRadius: BorderRadius.circular(12),
+        ),
+        child: GridView.builder(
+          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 7,
+            crossAxisSpacing: 8,
+            mainAxisSpacing: 16,
+          ),
+          itemCount: _icons.length,
+          itemBuilder: (context, index) {
+            final isSelected = selectedIcon == _icons[index];
+            return Container(
+              padding: const EdgeInsetsDirectional.all(2),
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                border: isSelected
+                    ? Border.all(color: ColorsManager.vividBlue, width: 2)
+                    : null,
+              ),
+              child: IconButton(
+                onPressed: () => Navigator.of(context).pop(_icons[index]),
+                icon: SvgPicture.asset(
+                  _icons[index],
+                  width: context.screenWidth * 0.03,
+                  height: context.screenHeight * 0.08,
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_name_text_field.dart

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceNameTextField extends StatefulWidget {
+  const SpaceNameTextField({
+    required this.initialValue,
+    required this.isNameFieldExist,
+    super.key,
+  });
+
+  final String? initialValue;
+  final bool Function(String value) isNameFieldExist;
+
+  @override
+  State<SpaceNameTextField> createState() => _SpaceNameTextFieldState();
+}
+
+class _SpaceNameTextFieldState extends State<SpaceNameTextField> {
+  late final TextEditingController _controller;
+
+  @override
+  void initState() {
+    _controller = TextEditingController(text: widget.initialValue);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  final _formKey = GlobalKey<FormState>();
+
+  String? _validateName(String? value) {
+    if (value == null || value.isEmpty) {
+      return '*Space name should not be empty.';
+    }
+    if (widget.isNameFieldExist(value)) {
+      return '*Name already exists';
+    }
+    return null;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Form(
+      key: _formKey,
+      autovalidateMode: AutovalidateMode.onUserInteraction,
+      child: TextFormField(
+        controller: _controller,
+        onChanged: (value) => context.read<SpaceDetailsModelBloc>().add(
+              UpdateSpaceDetailsName(value),
+            ),
+        validator: _validateName,
+        style: context.textTheme.bodyMedium,
+        decoration: InputDecoration(
+          hintText: 'Please enter the name',
+          hintStyle: context.textTheme.bodyMedium!.copyWith(
+            color: ColorsManager.lightGrayColor,
+          ),
+          filled: true,
+          fillColor: ColorsManager.boxColor,
+          enabledBorder: _buildBorder(context, ColorsManager.vividBlue),
+          focusedBorder: _buildBorder(context, ColorsManager.primaryColor),
+          errorBorder: _buildBorder(context, context.theme.colorScheme.error),
+          focusedErrorBorder: _buildBorder(context, context.theme.colorScheme.error),
+          errorStyle: context.textTheme.bodySmall?.copyWith(
+            color: context.theme.colorScheme.error,
+          ),
+        ),
+      ),
+    );
+  }
+
+  OutlineInputBorder _buildBorder(BuildContext context, [Color? color]) {
+    return OutlineInputBorder(
+      borderRadius: BorderRadius.circular(10),
+      borderSide: BorderSide(width: 1, color: color ?? ColorsManager.boxColor),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_sub_spaces_box.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/edit_chip.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/button_content_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_sub_spaces_dialog.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/subspace_name_display_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class SpaceSubSpacesBox extends StatelessWidget {
+  const SpaceSubSpacesBox({super.key, required this.subspaces});
+
+  final List<Subspace> subspaces;
+
+  @override
+  Widget build(BuildContext context) {
+    if (subspaces.isEmpty) {
+      return TextButton(
+        style: TextButton.styleFrom(
+          padding: EdgeInsets.zero,
+          overlayColor: ColorsManager.transparentColor,
+        ),
+        onPressed: () => _showSubSpacesDialog(context),
+        child: const SizedBox(
+          width: double.infinity,
+          child: ButtonContentWidget(
+            svgAssets: Assets.addIcon,
+            label: 'Create Sub Spaces',
+          ),
+        ),
+      );
+    } else {
+      return Container(
+        padding: const EdgeInsets.all(8.0),
+        width: double.infinity,
+        decoration: BoxDecoration(
+          color: ColorsManager.textFieldGreyColor,
+          borderRadius: BorderRadius.circular(15),
+          border: Border.all(
+            color: ColorsManager.textFieldGreyColor,
+            width: 3.0,
+          ),
+        ),
+        child: Wrap(
+          spacing: 8.0,
+          runSpacing: 8.0,
+          children: [
+            ...subspaces.map((e) => SubspaceNameDisplayWidget(subSpace: e)),
+            EditChip(
+              onTap: () => _showSubSpacesDialog(context),
+            ),
+          ],
+        ),
+      );
+    }
+  }
+
+  void _showSubSpacesDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      barrierDismissible: false,
+      builder: (_) => SpaceSubSpacesDialog(
+        subspaces: subspaces,
+        onSave: (subspaces) {
+          context.read<SpaceDetailsModelBloc>().add(
+                UpdateSpaceDetailsSubspaces(subspaces),
+              );
+        },
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/space_sub_spaces_dialog.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/sub_spaces_input.dart';
+import 'package:uuid/uuid.dart';
+
+class SpaceSubSpacesDialog extends StatefulWidget {
+  const SpaceSubSpacesDialog({
+    required this.subspaces,
+    required this.onSave,
+    super.key,
+  });
+
+  final List<Subspace> subspaces;
+  final void Function(List<Subspace> subspaces) onSave;
+
+  @override
+  State<SpaceSubSpacesDialog> createState() => _SpaceSubSpacesDialogState();
+}
+
+class _SpaceSubSpacesDialogState extends State<SpaceSubSpacesDialog> {
+  late List<Subspace> _subspaces;
+
+  bool get _hasDuplicateNames =>
+      _subspaces.map((subspace) => subspace.name.toLowerCase()).toSet().length !=
+      _subspaces.length;
+
+  @override
+  void initState() {
+    super.initState();
+    _subspaces = List.from(widget.subspaces);
+  }
+
+  void _handleSubspaceAdded(String name) {
+    setState(() {
+      _subspaces = [
+        ..._subspaces,
+        Subspace(
+          name: name,
+          uuid: const Uuid().v4(),
+          productAllocations: const [],
+        ),
+      ];
+    });
+  }
+
+  void _handleSubspaceDeleted(String uuid) => setState(
+        () => _subspaces = _subspaces.where((s) => s.uuid != uuid).toList(),
+      );
+
+  void _handleSave() {
+    widget.onSave(_subspaces);
+    Navigator.of(context).pop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: const SelectableText('Create Sub Spaces'),
+      content: Column(
+        spacing: 12,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SubSpacesInput(
+            subSpaces: _subspaces,
+            onSubspaceAdded: _handleSubspaceAdded,
+            onSubspaceDeleted: _handleSubspaceDeleted,
+          ),
+          AnimatedSwitcher(
+            duration: const Duration(milliseconds: 100),
+            child: Visibility(
+              key: ValueKey(_hasDuplicateNames),
+              visible: _hasDuplicateNames,
+              child: const SelectableText(
+                'Error: Duplicate subspace names are not allowed.',
+                style: TextStyle(color: Colors.red),
+              ),
+            ),
+          ),
+        ],
+      ),
+      actions: [
+        SpaceDetailsActionButtons(
+          onSave: _hasDuplicateNames ? null : _handleSave,
+          onCancel: Navigator.of(context).pop,
+        )
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/sub_spaces_input.dart

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/subspace_chip.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubSpacesInput extends StatefulWidget {
+  const SubSpacesInput({
+    super.key,
+    required this.subSpaces,
+    required this.onSubspaceAdded,
+    required this.onSubspaceDeleted,
+  });
+
+  final List<Subspace> subSpaces;
+  final void Function(String name) onSubspaceAdded;
+  final void Function(String uuid) onSubspaceDeleted;
+
+  @override
+  State<SubSpacesInput> createState() => _SubSpacesInputState();
+}
+
+class _SubSpacesInputState extends State<SubSpacesInput> {
+  late final TextEditingController _subspaceNameController;
+  late final FocusNode _focusNode;
+  @override
+  void initState() {
+    super.initState();
+    _subspaceNameController = TextEditingController();
+    _focusNode = FocusNode();
+  }
+
+  @override
+  void dispose() {
+    _subspaceNameController.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: context.screenWidth * 0.35,
+      padding: const EdgeInsets.symmetric(
+        vertical: 10,
+        horizontal: 16,
+      ),
+      decoration: BoxDecoration(
+        color: ColorsManager.boxColor,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        alignment: WrapAlignment.start,
+        crossAxisAlignment: WrapCrossAlignment.center,
+        children: [
+          ...widget.subSpaces.asMap().entries.map(
+            (entry) {
+              final index = entry.key;
+              final subSpace = entry.value;
+
+              final lowerName = subSpace.name.toLowerCase();
+
+              final duplicateIndices = widget.subSpaces
+                  .asMap()
+                  .entries
+                  .where((e) => e.value.name.toLowerCase() == lowerName)
+                  .map((e) => e.key)
+                  .toList();
+              final isDuplicate = duplicateIndices.length > 1 &&
+                  duplicateIndices.indexOf(index) != 0;
+              return SubspaceChip(
+                subSpace: subSpace,
+                isDuplicate: isDuplicate,
+                onDeleted: () => widget.onSubspaceDeleted(subSpace.uuid),
+              );
+            },
+          ),
+          SizedBox(
+            width: 200,
+            child: TextField(
+              focusNode: _focusNode,
+              controller: _subspaceNameController,
+              decoration: InputDecoration(
+                border: InputBorder.none,
+                hintText: widget.subSpaces.isEmpty ? 'Please enter the name' : null,
+                hintStyle: context.textTheme.bodySmall?.copyWith(
+                  color: ColorsManager.lightGrayColor,
+                ),
+              ),
+              onSubmitted: (value) {
+                final trimmedValue = value.trim();
+                if (trimmedValue.isNotEmpty) {
+                  widget.onSubspaceAdded(trimmedValue);
+                  _subspaceNameController.clear();
+                  _focusNode.requestFocus();
+                }
+              },
+              style: context.textTheme.bodyMedium,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/subspace_chip.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubspaceChip extends StatelessWidget {
+  const SubspaceChip({
+    required this.subSpace,
+    required this.isDuplicate,
+    required this.onDeleted,
+    super.key,
+  });
+
+  final Subspace subSpace;
+  final bool isDuplicate;
+  final void Function() onDeleted;
+
+  @override
+  Widget build(BuildContext context) {
+    return Chip(
+      label: Text(
+        subSpace.name,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: isDuplicate ? ColorsManager.red : ColorsManager.spaceColor,
+        ),
+      ),
+      backgroundColor: ColorsManager.whiteColors,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(10),
+        side: BorderSide(
+          color: isDuplicate ? ColorsManager.red : ColorsManager.transparentColor,
+          width: 0,
+        ),
+      ),
+      deleteIcon: Container(
+        padding: const EdgeInsetsDirectional.all(1),
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: Border.all(
+            color: ColorsManager.lightGrayColor,
+            width: 1.5,
+          ),
+        ),
+        child: const FittedBox(
+          fit: BoxFit.scaleDown,
+          child: Icon(
+            Icons.close,
+            color: ColorsManager.lightGrayColor,
+          ),
+        ),
+      ),
+      onDeleted: onDeleted,
+    );
+  }
+}

lib/pages/space_management_v2/modules/space_details/presentation/widgets/subspace_name_display_widget.dart

@@ -0,0 +1,171 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/update_space/presentation/bloc/space_details_model_bloc/space_details_model_bloc.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SubspaceNameDisplayWidget extends StatefulWidget {
+  const SubspaceNameDisplayWidget({super.key, required this.subSpace});
+
+  final Subspace subSpace;
+
+  @override
+  State<SubspaceNameDisplayWidget> createState() =>
+      _SubspaceNameDisplayWidgetState();
+}
+
+class _SubspaceNameDisplayWidgetState extends State<SubspaceNameDisplayWidget> {
+  late final TextEditingController _controller;
+  late final FocusNode _focusNode;
+  bool _isEditing = false;
+  bool _hasDuplicateName = false;
+
+  @override
+  void initState() {
+    _controller = TextEditingController(text: widget.subSpace.name);
+    _focusNode = FocusNode();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  bool _checkForDuplicateName(String name) {
+    final bloc = context.read<SpaceDetailsModelBloc>();
+    return bloc.state.subspaces
+        .where((s) => s.uuid != widget.subSpace.uuid)
+        .any((s) => s.name.toLowerCase() == name.toLowerCase());
+  }
+
+  void _handleNameChange(String value) {
+    setState(() {
+      _hasDuplicateName = _checkForDuplicateName(value);
+    });
+  }
+
+  void _tryToFinishEditing() {
+    if (!_hasDuplicateName) {
+      _onFinishEditing();
+    }
+  }
+
+  void _tryToSubmit(String value) {
+    if (_hasDuplicateName) return;
+
+    final bloc = context.read<SpaceDetailsModelBloc>();
+    bloc.add(
+      UpdateSpaceDetailsSubspaces(
+        bloc.state.subspaces
+            .map(
+              (e) => e.uuid == widget.subSpace.uuid ? e.copyWith(name: value) : e,
+            )
+            .toList(),
+      ),
+    );
+    _onFinishEditing();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final textStyle = context.textTheme.bodySmall?.copyWith(
+      color: ColorsManager.spaceColor,
+    );
+    return InkWell(
+      onTap: () {
+        setState(() => _isEditing = true);
+        _focusNode.requestFocus();
+      },
+      child: Chip(
+        backgroundColor: ColorsManager.whiteColors,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(20),
+          side: const BorderSide(color: ColorsManager.transparentColor),
+        ),
+        onDeleted: () {
+          final bloc = context.read<SpaceDetailsModelBloc>();
+          bloc.add(
+            UpdateSpaceDetailsSubspaces(
+              bloc.state.subspaces
+                  .where((s) => s.uuid != widget.subSpace.uuid)
+                  .toList(),
+            ),
+          );
+        },
+        deleteIcon: Container(
+          padding: const EdgeInsetsDirectional.all(1),
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            border: Border.all(
+              color: ColorsManager.lightGrayColor,
+              width: 1.5,
+            ),
+          ),
+          child: const FittedBox(
+            child: Icon(
+              Icons.close,
+              color: ColorsManager.lightGrayColor,
+            ),
+          ),
+        ),
+        label: Visibility(
+          visible: _isEditing,
+          replacement: Text(
+            widget.subSpace.name,
+            style: textStyle,
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              SizedBox(
+                width: context.screenWidth * 0.065,
+                height: context.screenHeight * 0.025,
+                child: TextField(
+                  focusNode: _focusNode,
+                  controller: _controller,
+                  style: textStyle?.copyWith(
+                    color: _hasDuplicateName ? Colors.red : null,
+                  ),
+                  decoration: const InputDecoration.collapsed(
+                    hintText: '',
+                  ),
+                  onChanged: _handleNameChange,
+                  onTapOutside: (_) => _tryToFinishEditing(),
+                  onSubmitted: _tryToSubmit,
+                ),
+              ),
+              if (_hasDuplicateName)
+                AnimatedSwitcher(
+                  duration: const Duration(milliseconds: 250),
+                  child: Visibility(
+                    key: ValueKey(_hasDuplicateName),
+                    visible: _hasDuplicateName,
+                    child: Text(
+                      'Name already exists',
+                      style: textStyle?.copyWith(
+                        color: Colors.red,
+                        fontSize: 8,
+                      ),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void _onFinishEditing() {
+    setState(() {
+      _isEditing = false;
+      _hasDuplicateName = false;
+    });
+    _focusNode.unfocus();
+  }
+}

lib/pages/space_management_v2/modules/tags/data/services/remote_tags_service.dart

@@ -1,10 +1,9 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/params/load_tags_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/services/tags_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
-import 'package:syncrow_web/utils/constants/api_const.dart';
 
 final class RemoteTagsService implements TagsService {
   const RemoteTagsService(this._httpService);
@@ -14,17 +13,10 @@ final class RemoteTagsService implements TagsService {
   static const _defaultErrorMessage = 'Failed to load tags';
 
   @override
-  Future<List<Tag>> loadTags(LoadTagsParam param) async {
+  Future<List<Tag>> loadTags() async {
-    if (param.projectUuid == null) {
-      throw Exception('Project UUID is required');
-    }
-
     try {
       final response = await _httpService.get(
-        path: ApiEndpoints.listTags.replaceAll(
+        path: await _makeUrl(),
-          '{projectUuid}',
-          param.projectUuid!,
-        ),
         expectedResponseModel: (json) {
           final result = json as Map<String, dynamic>;
           final data = result['data'] as List<dynamic>;
@@ -46,4 +38,12 @@ final class RemoteTagsService implements TagsService {
       throw APIException(formattedErrorMessage);
     }
   }
+
+  Future<String> _makeUrl() async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null || projectUuid.isEmpty) {
+      throw APIException('Project UUID is required');
+    }
+    return '/projects/$projectUuid/tags';
+  }
 }

lib/pages/space_management_v2/modules/tags/domain/models/tag.dart

@@ -13,6 +13,13 @@ class Tag extends Equatable {
     required this.updatedAt,
   });
 
+  factory Tag.empty() => const Tag(
+        uuid: '',
+        name: '',
+        createdAt: '',
+        updatedAt: '',
+      );
+
   factory Tag.fromJson(Map<String, dynamic> json) {
     return Tag(
       uuid: json['uuid'] as String,

lib/pages/space_management_v2/modules/tags/domain/services/tags_service.dart

@@ -1,6 +1,5 @@
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/params/load_tags_param.dart';
 
 abstract interface class TagsService {
-  Future<List<Tag>> loadTags(LoadTagsParam param);
+  Future<List<Tag>> loadTags();
 }

lib/pages/space_management_v2/modules/tags/presentation/bloc/tags_bloc.dart

@@ -1,7 +1,6 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
-import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/params/load_tags_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/services/tags_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 
@@ -21,7 +20,7 @@ class TagsBloc extends Bloc<TagsEvent, TagsState> {
   ) async {
     emit(TagsLoading());
     try {
-      final tags = await _tagsService.loadTags(event.param);
+      final tags = await _tagsService.loadTags();
       emit(TagsLoaded(tags));
     } on APIException catch (e) {
       emit(TagsFailure(e.message));

lib/pages/space_management_v2/modules/tags/presentation/bloc/tags_event.dart

@@ -8,10 +8,5 @@ abstract class TagsEvent extends Equatable {
 }
 
 class LoadTags extends TagsEvent {
-  final LoadTagsParam param;
+  const LoadTags();
-
-  const LoadTags(this.param);
-
-  @override
-  List<Object?> get props => [param];
 }

lib/pages/space_management_v2/modules/tags/presentation/widgets/add_device_type_widget.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/data/services/remote_products_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/presentation/bloc/products_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/products_grid.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AddDeviceTypeWidget extends StatefulWidget {
+  const AddDeviceTypeWidget({super.key});
+
+  @override
+  State<AddDeviceTypeWidget> createState() => _AddDeviceTypeWidgetState();
+}
+
+class _AddDeviceTypeWidgetState extends State<AddDeviceTypeWidget> {
+  final Map<Product, int> _selectedProducts = {};
+
+  void _onIncrement(Product product) {
+    setState(() {
+      _selectedProducts[product] = (_selectedProducts[product] ?? 0) + 1;
+    });
+  }
+
+  void _onDecrement(Product product) {
+    setState(() {
+      if ((_selectedProducts[product] ?? 0) > 0) {
+        _selectedProducts[product] = _selectedProducts[product]! - 1;
+        if (_selectedProducts[product] == 0) {
+          _selectedProducts.remove(product);
+        }
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => ProductsBloc(RemoteProductsService(HTTPService()))
+        ..add(const LoadProducts()),
+      child: Builder(
+        builder: (context) => AlertDialog(
+          title: const SelectableText('Add Devices'),
+          backgroundColor: ColorsManager.whiteColors,
+          content: BlocBuilder<ProductsBloc, ProductsState>(
+            builder: (context, state) => switch (state) {
+              ProductsInitial() || ProductsLoading() => _buildLoading(context),
+              ProductsLoaded(:final products) => ProductsGrid(
+                  products: products,
+                  selectedProducts: _selectedProducts,
+                  onIncrement: _onIncrement,
+                  onDecrement: _onDecrement,
+                ),
+              ProductsFailure(:final errorMessage) => _buildFailure(
+                  context,
+                  errorMessage,
+                ),
+            },
+          ),
+          actions: [
+            SpaceDetailsActionButtons(
+              onSave: () {
+                final result = _selectedProducts.entries
+                    .expand((entry) => List.generate(entry.value, (_) => entry.key))
+                    .toList();
+                Navigator.of(context).pop(result);
+              },
+              onCancel: Navigator.of(context).pop,
+              saveButtonLabel: 'Next',
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildLoading(BuildContext context) => SizedBox(
+        width: context.screenWidth * 0.9,
+        height: context.screenHeight * 0.65,
+        child: const Center(child: CircularProgressIndicator()),
+      );
+
+  Widget _buildFailure(BuildContext context, String errorMessage) {
+    return SizedBox(
+      width: context.screenWidth * 0.9,
+      height: context.screenHeight * 0.65,
+      child: Center(
+        child: SelectableText(
+          errorMessage,
+          style: context.textTheme.bodyMedium?.copyWith(
+            color: context.theme.colorScheme.error,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_dialog.dart

@@ -0,0 +1,231 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/products/domain/models/product.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/domain/models/space_details_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/space_details/presentation/widgets/space_details_action_buttons.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/domain/models/tag.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/add_device_type_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_error_messages.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_table.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:uuid/uuid.dart';
+
+class AssignTagsDialog extends StatefulWidget {
+  const AssignTagsDialog({required this.space, super.key});
+
+  final SpaceDetailsModel space;
+
+  @override
+  State<AssignTagsDialog> createState() => _AssignTagsDialogState();
+}
+
+class _AssignTagsDialogState extends State<AssignTagsDialog> {
+  late SpaceDetailsModel _space;
+  final Map<String, String> _validationErrors = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _space = widget.space.copyWith(
+      productAllocations:
+          widget.space.productAllocations.map((e) => e.copyWith()).toList(),
+      subspaces: widget.space.subspaces
+          .map(
+            (s) => s.copyWith(
+              productAllocations:
+                  s.productAllocations.map((e) => e.copyWith()).toList(),
+            ),
+          )
+          .toList(),
+    );
+    _validateAllTags();
+  }
+
+  void _validateAllTags() {
+    final newErrors = <String, String>{};
+    final allAllocations = [
+      ..._space.productAllocations,
+      ..._space.subspaces.expand((s) => s.productAllocations),
+    ];
+
+    final allocationsByProductType = <String, List<ProductAllocation>>{};
+    for (final allocation in allAllocations) {
+      (allocationsByProductType[allocation.product.productType] ??= [])
+          .add(allocation);
+    }
+
+    for (final productType in allocationsByProductType.keys) {
+      final allocations = allocationsByProductType[productType]!;
+      final tagCounts = <String, int>{};
+
+      for (final allocation in allocations) {
+        final tagName = allocation.tag.name.trim().toLowerCase();
+        if (tagName.isEmpty) {
+          newErrors[allocation.uuid] =
+              'Tag for ${allocation.product.name} cannot be empty.';
+        } else {
+          tagCounts[tagName] = (tagCounts[tagName] ?? 0) + 1;
+        }
+      }
+
+      for (final allocation in allocations) {
+        final tagName = allocation.tag.name.trim().toLowerCase();
+        if (tagName.isNotEmpty && (tagCounts[tagName] ?? 0) > 1) {
+          newErrors[allocation.uuid] =
+              'Tag "${allocation.tag.name}" is used by multiple $productType devices.';
+        }
+      }
+    }
+
+    setState(() {
+      _validationErrors
+        ..clear()
+        ..addAll(newErrors);
+    });
+  }
+
+  void _handleTagChange(String allocationUuid, Tag newTag) {
+    setState(() {
+      var index =
+          _space.productAllocations.indexWhere((pa) => pa.uuid == allocationUuid);
+      if (index != -1) {
+        final allocation = _space.productAllocations[index];
+        _space.productAllocations[index] = allocation.copyWith(tag: newTag);
+      } else {
+        for (final subspace in _space.subspaces) {
+          index = subspace.productAllocations
+              .indexWhere((pa) => pa.uuid == allocationUuid);
+          if (index != -1) {
+            final allocation = subspace.productAllocations[index];
+            subspace.productAllocations[index] = allocation.copyWith(tag: newTag);
+            break;
+          }
+        }
+      }
+    });
+    _validateAllTags();
+  }
+
+  void _handleLocationChange(String allocationUuid, String? newSubspaceUuid) {
+    setState(() {
+      ProductAllocation? allocationToMove;
+
+      var index =
+          _space.productAllocations.indexWhere((pa) => pa.uuid == allocationUuid);
+      if (index != -1) {
+        allocationToMove = _space.productAllocations.removeAt(index);
+      } else {
+        for (final subspace in _space.subspaces) {
+          index = subspace.productAllocations
+              .indexWhere((pa) => pa.uuid == allocationUuid);
+          if (index != -1) {
+            allocationToMove = subspace.productAllocations.removeAt(index);
+            break;
+          }
+        }
+      }
+
+      if (allocationToMove == null) return;
+
+      if (newSubspaceUuid == null) {
+        _space.productAllocations.add(allocationToMove);
+      } else {
+        _space.subspaces
+            .firstWhere((s) => s.uuid == newSubspaceUuid)
+            .productAllocations
+            .add(allocationToMove);
+      }
+    });
+  }
+
+  void _handleProductDelete(String allocationUuid) {
+    setState(() {
+      _space.productAllocations.removeWhere((pa) => pa.uuid == allocationUuid);
+
+      for (final subspace in _space.subspaces) {
+        subspace.productAllocations.removeWhere(
+          (pa) => pa.uuid == allocationUuid,
+        );
+      }
+    });
+    _validateAllTags();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final allProductAllocations = [
+      ..._space.productAllocations,
+      ..._space.subspaces.expand((s) => s.productAllocations),
+    ];
+
+    final productLocations = <String, String?>{};
+    for (final pa in _space.productAllocations) {
+      productLocations[pa.uuid] = null;
+    }
+    for (final subspace in _space.subspaces) {
+      for (final pa in subspace.productAllocations) {
+        productLocations[pa.uuid] = subspace.uuid;
+      }
+    }
+
+    final hasErrors = _validationErrors.isNotEmpty;
+
+    return AlertDialog(
+      title: const SelectableText('Assign Tags'),
+      content: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxWidth: context.screenWidth * 0.6,
+          minWidth: context.screenWidth * 0.6,
+          maxHeight: context.screenHeight * 0.8,
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(
+              width: double.infinity,
+              child: AssignTagsTable(
+                productAllocations: allProductAllocations,
+                subspaces: _space.subspaces,
+                productLocations: productLocations,
+                onTagSelected: _handleTagChange,
+                onLocationSelected: _handleLocationChange,
+                onProductDeleted: _handleProductDelete,
+              ),
+            ),
+            if (hasErrors)
+              AssignTagsErrorMessages(
+                errorMessages: _validationErrors.values.toSet().toList(),
+              ),
+          ],
+        ),
+      ),
+      actions: [
+        SpaceDetailsActionButtons(
+          onSave: hasErrors ? null : () => Navigator.of(context).pop(_space),
+          onCancel: () async {
+            final newProducts = await showDialog<List<Product>>(
+              context: context,
+              builder: (context) => const AddDeviceTypeWidget(),
+            );
+
+            if (newProducts == null || newProducts.isEmpty) return;
+
+            setState(() {
+              for (final product in newProducts) {
+                _space.productAllocations.add(
+                  ProductAllocation(
+                    uuid: const Uuid().v4(),
+                    product: product,
+                    tag: Tag.empty(),
+                  ),
+                );
+              }
+            });
+            _validateAllTags();
+          },
+          cancelButtonLabel: 'Add New Device',
+        )
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/modules/tags/presentation/widgets/assign_tags_error_messages.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class AssignTagsErrorMessages extends StatelessWidget {
+  const AssignTagsErrorMessages({super.key, required this.errorMessages});
+
+  final List<String> errorMessages;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 16),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: errorMessages
+            .map(
+              (error) => Text(
+                '- $error',
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: context.theme.colorScheme.error,
+                ),
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+}