fixed endpoint

added back border of tag list

assets/icons/duplicate.svg

@@ -0,0 +1,16 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9807 2.67199L16.6413 0.219727H7.91051C7.43122 0.219727 7.04266 0.608281 7.04266 1.08758V16.605C7.04266 17.0843 7.43122 17.4729 7.91051 17.4729H18.2257C18.705 17.4729 19.0935 17.0843 19.0935 16.605V16.5459H19.7312V3.8127L17.9807 2.67199Z" fill="#60B7FF"/>
+<path d="M18.1513 6.23445H9.12553C8.95881 6.23445 8.82373 6.09934 8.82373 5.93266C8.82373 5.76598 8.95885 5.63086 9.12553 5.63086H18.1513C18.318 5.63086 18.4531 5.76598 18.4531 5.93266C18.4531 6.09934 18.318 6.23445 18.1513 6.23445Z" fill="#0055A3"/>
+<path d="M18.1513 8.54891H9.12553C8.95881 8.54891 8.82373 8.41379 8.82373 8.24711C8.82373 8.08043 8.95885 7.94531 9.12553 7.94531H18.1513C18.318 7.94531 18.4531 8.08043 18.4531 8.24711C18.4531 8.41379 18.318 8.54891 18.1513 8.54891Z" fill="#0055A3"/>
+<path d="M18.1513 10.8634H9.12553C8.95881 10.8634 8.82373 10.7282 8.82373 10.5616C8.82373 10.3949 8.95885 10.2598 9.12553 10.2598H18.1513C18.318 10.2598 18.4531 10.3949 18.4531 10.5616C18.4531 10.7282 18.318 10.8634 18.1513 10.8634Z" fill="#0055A3"/>
+<path d="M18.1513 13.1778H9.12556C8.95884 13.1778 8.82376 13.0427 8.82376 12.876C8.82376 12.7093 8.95888 12.5742 9.12556 12.5742H18.1513C18.3181 12.5742 18.4531 12.7093 18.4531 12.876C18.4531 13.0427 18.3181 13.1778 18.1513 13.1778Z" fill="#0055A3"/>
+<path d="M19.0935 3.39648V16.6044C19.0935 17.0837 18.7049 17.4722 18.2256 17.4722H19.3663C19.8456 17.4722 20.2342 17.0837 20.2342 16.6044V3.81203L19.0935 3.39648Z" fill="#26A6FE"/>
+<path d="M17.5091 3.8127H20.2342L16.6413 0.219727V2.94484C16.6413 3.42414 17.0298 3.8127 17.5091 3.8127Z" fill="#004281"/>
+<path d="M11.4172 19.7805C11.8965 19.7805 12.2851 19.392 12.2851 18.9127V18.8937H12.8297V6.12031L11.039 4.78906L9.83279 2.52734H1.10204C0.622747 2.52734 0.234192 2.9159 0.234192 3.3952V18.9127C0.234192 19.392 0.622747 19.7805 1.10204 19.7805H11.4172Z" fill="#D5EDFF"/>
+<path d="M12.285 4.97852V6.11922V18.9116C12.285 19.3909 11.8964 19.7794 11.4171 19.7794H12.5578C13.0371 19.7794 13.4257 19.3909 13.4257 18.9116V6.11922L12.285 4.97852Z" fill="#D8ECFE"/>
+<path d="M10.7006 6.12031H13.4258L9.83279 2.52734V5.25246C9.83276 5.73176 10.2213 6.12031 10.7006 6.12031Z" fill="#B3DAFE"/>
+<path d="M11.3429 8.54891H2.31709C2.15037 8.54891 2.01529 8.41379 2.01529 8.24711C2.01529 8.08043 2.15041 7.94531 2.31709 7.94531H11.3429C11.5096 7.94531 11.6447 8.08043 11.6447 8.24711C11.6447 8.41379 11.5096 8.54891 11.3429 8.54891Z" fill="#82AEE3"/>
+<path d="M11.3428 10.8634H2.31706C2.15034 10.8634 2.01526 10.7282 2.01526 10.5616C2.01526 10.3949 2.15038 10.2598 2.31706 10.2598H11.3428C11.5096 10.2598 11.6446 10.3949 11.6446 10.5616C11.6446 10.7282 11.5096 10.8634 11.3428 10.8634Z" fill="#82AEE3"/>
+<path d="M11.3428 13.1778H2.31706C2.15034 13.1778 2.01526 13.0427 2.01526 12.876C2.01526 12.7093 2.15038 12.5742 2.31706 12.5742H11.3428C11.5096 12.5742 11.6446 12.7093 11.6446 12.876C11.6446 13.0427 11.5096 13.1778 11.3428 13.1778Z" fill="#82AEE3"/>
+<path d="M11.3428 15.4923H2.31706C2.15034 15.4923 2.01526 15.3571 2.01526 15.1905C2.01526 15.0238 2.15038 14.8887 2.31706 14.8887H11.3428C11.5096 14.8887 11.6446 15.0238 11.6446 15.1905C11.6447 15.3571 11.5096 15.4923 11.3428 15.4923Z" fill="#82AEE3"/>
+</svg>

assets/icons/edit_space.svg

@@ -0,0 +1,22 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4618_3290)">
+<path d="M18.7967 7.35156V19.8515C18.7967 21.0362 17.8329 22 16.6482 22H4.14825C2.9636 22 1.99982 21.0362 1.99982 19.8515V7.35156C1.99982 6.16691 2.9636 5.20312 4.14825 5.20312H16.6482C17.8329 5.20312 18.7967 6.16691 18.7967 7.35156Z" fill="#EDF2F2"/>
+<path d="M18.7967 19.8515C18.7967 21.0361 17.8329 21.9999 16.6482 21.9999H4.14825C3.55591 21.9999 3.0188 21.7589 2.62978 21.3699L18.1667 5.83301C18.5557 6.22203 18.7967 6.75914 18.7967 7.35148V19.8515Z" fill="#C9DCDC"/>
+<path d="M9.28417 14.7153C9.12722 14.5583 9.07241 14.3262 9.14265 14.1157L9.97128 11.6297C10 11.5434 10.0485 11.465 10.1128 11.4007L17.8468 3.66674C18.0756 3.43791 18.4466 3.43791 18.6754 3.66674L20.3327 5.324C20.5615 5.55283 20.5615 5.9238 20.3327 6.15263L12.5987 13.8866C12.5344 13.9509 12.456 13.9994 12.3697 14.0281L9.88374 14.8567C9.67323 14.927 9.44109 14.8722 9.28417 14.7153Z" fill="#4998EE"/>
+<path d="M19.504 4.49512L9.28413 14.715C9.44105 14.8719 9.6732 14.9267 9.88374 14.8565L12.3697 14.0279C12.456 13.9992 12.5344 13.9507 12.5987 13.8864L20.3327 6.15242C20.5615 5.92359 20.5615 5.55261 20.3327 5.32379L19.504 4.49512Z" fill="#176EDE"/>
+<path d="M20.3327 6.15305L17.8467 3.66711L19.2278 2.28602C19.6092 1.90466 20.2275 1.90466 20.6089 2.28602L21.7137 3.39087C22.0951 3.77223 22.0951 4.39055 21.7137 4.77192L20.3327 6.15305Z" fill="#FFE137"/>
+<path d="M21.1613 2.83789L19.0897 4.90949L20.3327 6.15245L21.7138 4.77136C22.0951 4.39 22.0951 3.77168 21.7138 3.39031L21.1613 2.83789Z" fill="#FAC814"/>
+</g>
+<defs>
+<filter id="filter0_d_4618_3290" x="-0.000183105" y="0" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4618_3290"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4618_3290" result="shape"/>
+</filter>
+</defs>
+</svg>

assets/icons/link.svg

@@ -0,0 +1,12 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 440">
+<path id="Vector" d="M6.7986 0.892983L4.84001 2.85148C4.48185 3.20973 4.23182 3.63572 4.08964 4.08854C3.62464 4.23503 3.19865 4.49284 2.85148 4.84001L0.892983 6.7986C-0.29757 7.98915 -0.297753 9.91625 0.892983 11.107C2.08354 12.2976 4.01072 12.2977 5.20146 11.107L7.15996 9.14848C7.5182 8.79033 7.76814 8.36433 7.91032 7.91142C8.37541 7.76503 8.80132 7.50713 9.14848 7.15996L11.107 5.20146C12.2976 4.01081 12.2978 2.08372 11.107 0.892983C9.91643 -0.29757 7.98933 -0.297753 6.7986 0.892983ZM4.17735 6.1656C4.32576 6.5276 4.54658 6.86653 4.84001 7.15996C5.1251 7.44496 5.46431 7.67027 5.83418 7.82289L3.87577 9.78139C3.41893 10.2381 2.67552 10.2382 2.21867 9.78139C1.76182 9.32445 1.76182 8.58113 2.21867 8.12428L4.17717 6.16569C4.17726 6.16569 4.17726 6.16569 4.17735 6.1656ZM6.82854 8.81706L4.86995 10.7756C3.86259 11.783 2.23194 11.7831 1.2244 10.7756C0.216957 9.76821 0.216866 8.13747 1.2244 7.13002L3.1829 5.17143C3.41105 4.94328 3.67939 4.76082 3.9719 4.63255C3.92823 4.9897 3.94819 5.34263 4.02427 5.67991C3.96128 5.72697 3.90159 5.77843 3.84574 5.83427L1.88725 7.79277C1.24766 8.43245 1.24766 9.47313 1.88725 10.1127C2.52683 10.7523 3.56752 10.7523 4.2072 10.1127L6.16569 8.15422C6.80592 7.5139 6.80601 6.47459 6.16569 5.83427C5.82365 5.49223 5.74034 4.99492 5.90358 4.57753C6.24891 4.70598 6.56587 4.90876 6.82854 5.17143C7.8336 6.1765 7.83369 7.8119 6.82854 8.81706ZM10.7756 4.86995L8.81706 6.82854C8.58891 7.05669 8.32057 7.23915 8.02806 7.36742C8.07173 7.01027 8.05177 6.65733 7.97578 6.32005C8.03868 6.27299 8.09846 6.22154 8.15422 6.16569L10.1128 4.2072C10.7524 3.56761 10.7524 2.52683 10.1128 1.88725C9.5385 1.31303 8.64028 1.25379 7.99913 1.71229C7.89384 1.78755 7.86958 1.93394 7.94484 2.03922C8.0201 2.14451 8.16649 2.16886 8.27177 2.09352C8.73952 1.75907 9.37434 1.81162 9.78139 2.21867C10.2382 2.67552 10.2382 3.41883 9.78139 3.87577L7.8228 5.83427C7.8228 5.83427 7.8228 5.83427 7.82271 5.83436C7.67421 5.47236 7.45338 5.13344 7.15996 4.84001C6.87495 4.555 6.53566 4.32969 6.16578 4.17707L6.96431 3.37855C7.05577 3.28709 7.05577 3.13868 6.96431 3.04713C6.87276 2.95567 6.72444 2.95567 6.63289 3.04713L5.83427 3.84574C5.19404 4.48597 5.19395 5.52528 5.83427 6.16569C6.17631 6.50764 6.25963 7.00505 6.09639 7.42244C5.75105 7.29399 5.43409 7.0912 5.17143 6.82844C4.16645 5.82347 4.16636 4.18797 5.17143 3.1829L7.13002 1.2244C8.13737 0.216957 9.76811 0.216774 10.7756 1.2244C11.783 2.23176 11.7831 3.8625 10.7756 4.86995Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_2" d="M7.69571 2.55103C7.69571 2.68048 7.59079 2.7854 7.46143 2.7854C7.33197 2.7854 7.22705 2.68048 7.22705 2.55103C7.22705 2.42157 7.33197 2.31665 7.46143 2.31665C7.59079 2.31665 7.69571 2.42157 7.69571 2.55103Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_3" d="M3.18286 3.1831C3.27441 3.09164 3.27441 2.94323 3.18286 2.85168L2.18859 1.85741C2.09704 1.76595 1.94872 1.76595 1.85717 1.85741C1.76571 1.94897 1.76571 2.09737 1.85717 2.18893L2.85143 3.18319C2.94308 3.27465 3.09139 3.27465 3.18286 3.1831Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_4" d="M0.891022 3.9375C0.761658 3.9375 0.656738 4.04242 0.656738 4.17178C0.656738 4.30124 0.761658 4.40616 0.891022 4.40616H2.29718C2.42655 4.40616 2.53147 4.30124 2.53147 4.17178C2.53147 4.04242 2.42655 3.9375 2.29718 3.9375H0.891022Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_5" d="M3.93774 0.821289V2.22736C3.93774 2.35672 4.04266 2.46173 4.17203 2.46173C4.30148 2.46173 4.4064 2.35672 4.4064 2.22736V0.821289C4.4064 0.691834 4.30148 0.586914 4.17203 0.586914C4.04266 0.586914 3.93774 0.691834 3.93774 0.821289Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_6" d="M8.8172 8.81738C8.72565 8.90884 8.72565 9.05724 8.8172 9.1488L9.81146 10.1431C9.85724 10.1888 9.91721 10.2117 9.97717 10.2117C10.184 10.2117 10.291 9.95986 10.1429 9.81164L9.14862 8.81738C9.05707 8.72591 8.90875 8.72591 8.8172 8.81738Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_7" d="M8.03882 11.1785V9.77237C8.03882 9.64301 7.93381 9.53809 7.80444 9.53809C7.67499 9.53809 7.57007 9.64301 7.57007 9.77237V11.1785C7.57007 11.3079 7.67499 11.4128 7.80444 11.4128C7.93381 11.4128 8.03882 11.3079 8.03882 11.1785Z" fill="#023DFE" fill-opacity="0.7"/>
+<path id="Vector_8" d="M11.1793 8.03906C11.3086 8.03906 11.4135 7.93405 11.4135 7.80469C11.4135 7.67523 11.3086 7.57031 11.1793 7.57031H9.7731C9.64374 7.57031 9.53882 7.67523 9.53882 7.80469C9.53882 7.93405 9.64374 8.03906 9.7731 8.03906H11.1793Z" fill="#023DFE" fill-opacity="0.7"/>
+</g>
+</svg>

assets/icons/space_delete.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8069 19.9998H3.50035C2.16411 19.9998 1.08087 18.9165 1.08087 17.5804V4.51562H14.2262V17.5804C14.2262 18.9165 13.1432 19.9998 11.8069 19.9998Z" fill="#D8D8D8"/>
+<path d="M1.08087 4.51562V5.48335H12.3715C12.8168 5.48335 13.1779 5.84438 13.1779 6.2898V17.3384C13.1779 18.2292 12.4557 18.9513 11.5649 18.9513H2.4519C2.05409 18.9513 1.67887 18.8547 1.34775 18.6844C1.74907 19.4652 2.56207 19.9998 3.50035 19.9998H11.8069C13.1432 19.9998 14.2262 18.9165 14.2262 17.5803V4.51562H1.08087Z" fill="#BABABA"/>
+<path d="M14.2667 1.77417H10.7439L10.1633 0.612956C9.9742 0.234837 9.5941 0 9.17142 0H6.13594C5.71311 0 5.33316 0.234837 5.1441 0.612956L4.56349 1.77417H1.04063C0.595221 1.77417 0.234192 2.1352 0.234192 2.58061V3.70978C0.234192 4.15504 0.595221 4.51622 1.04063 4.51622H14.2667C14.7121 4.51622 15.0732 4.15504 15.0732 3.70978V2.58077C15.0732 2.1352 14.7121 1.77417 14.2667 1.77417ZM5.68503 0.8835C5.77094 0.71153 5.94368 0.604869 6.13594 0.604869H9.17142C9.36354 0.604869 9.53627 0.71153 9.62218 0.8835L10.0676 1.77417H5.23977L5.68503 0.8835Z" fill="#757575"/>
+<path d="M14.2668 1.77441H12.9763C13.4217 1.77441 13.7829 2.13544 13.7829 2.58086V3.71003C13.7829 4.15529 13.4217 4.51647 12.9763 4.51647H14.2668C14.7122 4.51647 15.0732 4.15529 15.0732 3.71003V2.58101C15.0732 2.13544 14.7122 1.77441 14.2668 1.77441Z" fill="#595959"/>
+<path d="M11.3634 17.5C10.918 17.5 10.5569 17.139 10.5569 16.6935V9.15312C10.5569 8.70771 10.918 8.34668 11.3634 8.34668C11.8088 8.34668 12.1698 8.70771 12.1698 9.15312V16.6935C12.1698 17.139 11.8088 17.5 11.3634 17.5Z" fill="#757575"/>
+<path d="M3.94398 17.5C4.38924 17.5 4.75043 17.139 4.75043 16.6935V9.15312C4.75043 8.70771 4.38924 8.34668 3.94398 8.34668C3.49857 8.34668 3.13739 8.70771 3.13739 9.15312V16.6935C3.13739 17.139 3.49857 17.5 3.94398 17.5Z" fill="#757575"/>
+<path d="M7.65361 17.5C7.2082 17.5 6.84717 17.139 6.84717 16.6935V9.15312C6.84717 8.70771 7.2082 8.34668 7.65361 8.34668C8.09902 8.34668 8.46005 8.70771 8.46005 9.15312V16.6935C8.46005 17.139 8.09902 17.5 7.65361 17.5Z" fill="#757575"/>
+</svg>

lib/common/dialog_dropdown.dart

@@ -0,0 +1,138 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class DialogDropdown extends StatefulWidget {
+  final List<String> items;
+  final ValueChanged<String> onSelected;
+  final String? selectedValue;
+
+  const DialogDropdown({
+    Key? key,
+    required this.items,
+    required this.onSelected,
+    this.selectedValue,
+  }) : super(key: key);
+
+  @override
+  _DialogDropdownState createState() => _DialogDropdownState();
+}
+
+class _DialogDropdownState extends State<DialogDropdown> {
+  bool _isOpen = false;
+  late OverlayEntry _overlayEntry;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void _toggleDropdown() {
+    if (_isOpen) {
+      _closeDropdown();
+    } else {
+      _openDropdown();
+    }
+  }
+
+  void _openDropdown() {
+    _overlayEntry = _createOverlayEntry();
+    Overlay.of(context).insert(_overlayEntry);
+    _isOpen = true;
+  }
+
+  void _closeDropdown() {
+    _overlayEntry.remove();
+    _isOpen = false;
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    final renderBox = context.findRenderObject() as RenderBox;
+    final size = renderBox.size;
+    final offset = renderBox.localToGlobal(Offset.zero);
+
+    return OverlayEntry(
+      builder: (context) {
+        return GestureDetector(
+          onTap: () {
+            _closeDropdown();
+          },
+          behavior: HitTestBehavior.translucent,
+          child: Stack(
+            children: [
+              Positioned(
+                left: offset.dx,
+                top: offset.dy + size.height,
+                width: size.width,
+                child: Material(
+                  elevation: 4.0,
+                  child: Container(
+                    color: ColorsManager.whiteColors,
+                    constraints: const BoxConstraints(
+                      maxHeight: 200.0, // Set max height for dropdown
+                    ),
+                    child: ListView.builder(
+                      shrinkWrap: true,
+                      itemCount: widget.items.length,
+                      itemBuilder: (context, index) {
+                        final item = widget.items[index];
+                        return Container(
+                          decoration: const BoxDecoration(
+                            border: Border(
+                              bottom: BorderSide(
+                                color: ColorsManager.lightGrayBorderColor,
+                                width: 1.0,
+                              ),
+                            ),
+                          ),
+                          child: ListTile(
+                            title: Text(
+                              item,
+                              style: Theme.of(context)
+                                  .textTheme
+                                  .bodyMedium
+                                  ?.copyWith(
+                                    color: ColorsManager.textPrimaryColor,
+                                  ),
+                            ),
+                            onTap: () {
+                              widget.onSelected(item);
+                              _closeDropdown();
+                            },
+                          ),
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _toggleDropdown,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+        decoration: BoxDecoration(
+          border: Border.all(color: ColorsManager.transparentColor),
+          borderRadius: BorderRadius.circular(8.0),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              widget.selectedValue ?? 'Select an item',
+              style: Theme.of(context).textTheme.bodyMedium,
+            ),
+            const Icon(Icons.arrow_drop_down),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/common/dialog_textfield_dropdown.dart

@@ -0,0 +1,176 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class DialogTextfieldDropdown extends StatefulWidget {
+  final List<String> items;
+  final ValueChanged<String> onSelected;
+  final String? initialValue;
+
+  const DialogTextfieldDropdown({
+    Key? key,
+    required this.items,
+    required this.onSelected,
+    this.initialValue,
+  }) : super(key: key);
+
+  @override
+  _DialogTextfieldDropdownState createState() =>
+      _DialogTextfieldDropdownState();
+}
+
+class _DialogTextfieldDropdownState extends State<DialogTextfieldDropdown> {
+  bool _isOpen = false;
+  OverlayEntry? _overlayEntry;
+  final TextEditingController _controller = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+  List<String> _filteredItems = [];
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.text = widget.initialValue ?? '';
+    _filteredItems = List.from(widget.items);
+
+    _focusNode.addListener(() {
+      if (!_focusNode.hasFocus) {
+        _closeDropdown();
+      }
+    });
+  }
+
+  void _toggleDropdown() {
+    if (_isOpen) {
+      _closeDropdown();
+    } else {
+      _openDropdown();
+    }
+  }
+
+  void _openDropdown() {
+    _overlayEntry = _createOverlayEntry();
+    Overlay.of(context).insert(_overlayEntry!);
+    _isOpen = true;
+  }
+
+  void _closeDropdown() {
+    if (_isOpen && _overlayEntry != null) {
+      _overlayEntry!.remove();
+      _overlayEntry = null;
+      _isOpen = false;
+    }
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    final renderBox = context.findRenderObject() as RenderBox;
+    final size = renderBox.size;
+    final offset = renderBox.localToGlobal(Offset.zero);
+
+    return OverlayEntry(
+      builder: (context) {
+        return GestureDetector(
+          onTap: _closeDropdown,
+          behavior: HitTestBehavior.translucent,
+          child: Stack(
+            children: [
+              Positioned(
+                left: offset.dx,
+                top: offset.dy + size.height,
+                width: size.width,
+                child: Material(
+                  elevation: 4.0,
+                  child: Container(
+                    color: ColorsManager.whiteColors,
+                    constraints: const BoxConstraints(maxHeight: 200.0),
+                    child: StatefulBuilder(
+                      builder: (context, setStateDropdown) {
+                        return ListView.builder(
+                          shrinkWrap: true,
+                          itemCount: _filteredItems.length,
+                          itemBuilder: (context, index) {
+                            final item = _filteredItems[index];
+
+                            return Container(
+                              decoration: const BoxDecoration(
+                                border: Border(
+                                  bottom: BorderSide(
+                                    color: ColorsManager.lightGrayBorderColor,
+                                    width: 1.0,
+                                  ),
+                                ),
+                              ),
+                              child: ListTile(
+                                title: Text(item,
+                                    style: Theme.of(context)
+                                        .textTheme
+                                        .bodyMedium
+                                        ?.copyWith(
+                                            color: ColorsManager
+                                                .textPrimaryColor)),
+                                onTap: () {
+                                  _controller.text = item;
+                                  widget.onSelected(item);
+                                  setState(() {
+                                    _filteredItems
+                                        .remove(item); // Remove selected item
+                                  });
+                                  _closeDropdown();
+                                },
+                              ),
+                            );
+                          },
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => FocusScope.of(context).unfocus(),
+      behavior: HitTestBehavior.opaque,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+        decoration: BoxDecoration(
+          border: Border.all(color: ColorsManager.transparentColor),
+          borderRadius: BorderRadius.circular(8.0),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Expanded(
+              child: TextFormField(
+                controller: _controller,
+                focusNode: _focusNode,
+                onFieldSubmitted: (value) {
+                  widget.onSelected(value);
+                  _closeDropdown();
+                },
+                onTapOutside: (event) {
+                  widget.onSelected(_controller.text);
+                  _closeDropdown();
+                },
+                style: Theme.of(context).textTheme.bodyMedium,
+                decoration: const InputDecoration(
+                  hintText: 'Enter or Select a tag',
+                  border: InputBorder.none,
+                ),
+              ),
+            ),
+            GestureDetector(
+              onTap: _toggleDropdown,
+              child: const Icon(Icons.arrow_drop_down),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/common/edit_chip.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class EditChip extends StatelessWidget {
+  final String label;
+  final VoidCallback onTap;
+  final Color labelColor;
+  final Color backgroundColor;
+  final Color borderColor;
+  final double borderRadius;
+
+  const EditChip({
+    Key? key,
+    this.label = 'Edit',
+    required this.onTap,
+    this.labelColor = ColorsManager.spaceColor,
+    this.backgroundColor = ColorsManager.whiteColors,
+    this.borderColor = ColorsManager.spaceColor,
+    this.borderRadius = 16.0,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Chip(
+        label: Text(
+          label,
+          style: Theme.of(context).textTheme.bodySmall!.copyWith(color: labelColor)
+        ),
+        backgroundColor: backgroundColor,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(borderRadius),
+          side: BorderSide(color: borderColor),
+        ),
+      ),
+    );
+  }
+}

lib/common/widgets/search_bar.dart

@@ -3,18 +3,33 @@ import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
-class CustomSearchBar extends StatelessWidget {
+class CustomSearchBar extends StatefulWidget {
   final TextEditingController? controller;
   final String hintText;
+  final String? searchQuery;
   final Function(String)? onSearchChanged; // Callback for search input changes
 
   const CustomSearchBar({
     super.key,
     this.controller,
+    this.searchQuery = '',
     this.hintText = 'Search',
     this.onSearchChanged,
   });
 
+  @override
+  State<CustomSearchBar> createState() => _CustomSearchBarState();
+}
+
+class _CustomSearchBarState extends State<CustomSearchBar> {
+  @override
+  void dispose() {
+    if (widget.controller != null) {
+      widget.controller!.dispose();
+    }
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -36,20 +51,20 @@ class CustomSearchBar extends StatelessWidget {
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(12),
         ),
-        child: TextField(
+        child: TextFormField(
-          controller: controller,
+          controller: widget.controller,
+          initialValue: widget.searchQuery,
           style: const TextStyle(
             color: Colors.black,
           ),
-          onChanged: onSearchChanged, // Call the callback on text change
+          onChanged: widget.onSearchChanged, // Call the callback on text change
           decoration: InputDecoration(
             filled: true,
             fillColor: ColorsManager.textFieldGreyColor,
-            hintText: hintText,
+            hintText: widget.hintText,
-            hintStyle: TextStyle(
+            hintStyle: Theme.of(context).textTheme.bodyLarge!.copyWith(
-              color: Color(0xB2999999),
+                  color: ColorsManager.lightGrayColor,
                   fontSize: 12,
-              fontFamily: 'Aftika',
                   fontWeight: FontWeight.w400,
                   height: 0,
                   letterSpacing: -0.24,

lib/main.dart

@@ -6,17 +6,19 @@ import 'package:go_router/go_router.dart';
 import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_event.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_event.dart';
 import 'package:syncrow_web/pages/visitor_password/bloc/visitor_password_bloc.dart';
 import 'package:syncrow_web/services/locator.dart';
 import 'package:syncrow_web/utils/app_routes.dart';
 import 'package:syncrow_web/utils/constants/routes_const.dart';
+import 'package:syncrow_web/utils/navigation_service.dart';
 import 'package:syncrow_web/utils/theme/theme.dart';
 
 Future<void> main() async {
   try {
-    const environment =
+    const environment = String.fromEnvironment('FLAVOR', defaultValue: 'development');
-        String.fromEnvironment('FLAVOR', defaultValue: 'development');
     await dotenv.load(fileName: '.env.$environment');
     WidgetsFlutterBinding.ensureInitialized();
     initialSetup();
@@ -25,9 +27,8 @@ Future<void> main() async {
 }
 
 class MyApp extends StatelessWidget {
-  MyApp({
+
-    super.key,
+  MyApp({super.key});
-  });
 
   final GoRouter _router = GoRouter(
     initialLocation: RoutesConst.auth,
@@ -48,14 +49,16 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MultiBlocProvider(
         providers: [
-          BlocProvider(
+          BlocProvider(create: (context) => HomeBloc()..add(const FetchUserInfo())),
-              create: (context) => HomeBloc()..add(const FetchUserInfo())),
           BlocProvider<VisitorPasswordBloc>(
             create: (context) => VisitorPasswordBloc(),
           ),
           BlocProvider<RoutineBloc>(
             create: (context) => RoutineBloc(),
           ),
+          BlocProvider<SpaceTreeBloc>(
+            create: (context) => SpaceTreeBloc()..add(InitialEvent()),
+          ),
         ],
         child: MaterialApp.router(
           debugShowCheckedModeBanner: false,
@@ -67,6 +70,8 @@ class MyApp extends StatelessWidget {
               PointerDeviceKind.unknown,
             },
           ),
+          key: NavigationService.navigatorKey,
+          // scaffoldMessengerKey: NavigationService.snackbarKey,
           theme: myTheme,
           routerConfig: _router,
         ));

lib/pages/access_management/bloc/access_bloc.dart

@@ -3,10 +3,14 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
 import 'package:syncrow_web/pages/access_management/model/password_model.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/common/hour_picker_dialog.dart';
 import 'package:syncrow_web/services/access_mang_api.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/app_enum.dart';
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/constants/temp_const.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
 import 'package:syncrow_web/utils/snack_bar.dart';
 
 class AccessBloc extends Bloc<AccessEvent, AccessState> {
@@ -30,8 +34,9 @@ class AccessBloc extends Bloc<AccessEvent, AccessState> {
   Future<void> _onFetchTableData(
       FetchTableData event, Emitter<AccessState> emit) async {
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
       emit(AccessLoaded());
-      data = await AccessMangApi().fetchVisitorPassword();
+      data = await AccessMangApi().fetchVisitorPassword(projectUuid);
       filteredData = data;
       updateTabsCount();
       emit(TableLoaded(data));

lib/pages/access_management/view/access_management.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_bloc.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_event.dart';
 import 'package:syncrow_web/pages/access_management/bloc/access_state.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
 import 'package:syncrow_web/pages/common/buttons/search_reset_buttons.dart';
 import 'package:syncrow_web/pages/common/custom_table.dart';
@@ -27,7 +28,8 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
     final isLargeScreen = isLargeScreenSize(context);
     final isSmallScreen = isSmallScreenSize(context);
     final isHalfMediumScreen = isHafMediumScreenSize(context);
-    final padding = isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
+    final padding =
+        isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
 
     return WebScaffold(
         enableMenuSidebar: false,
@@ -39,7 +41,8 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
         ),
         rightBody: const NavigateHomeGridView(),
         scaffoldBody: BlocProvider(
-            create: (BuildContext context) => AccessBloc()..add(FetchTableData()),
+            create: (BuildContext context) =>
+                AccessBloc()..add(FetchTableData()),
             child: BlocConsumer<AccessBloc, AccessState>(
                 listener: (context, state) {},
                 builder: (context, state) {
@@ -93,11 +96,14 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
                                   return [
                                     item.passwordName,
                                     item.passwordType.value,
-                                    accessBloc.timestampToDate(item.effectiveTime),
+                                    accessBloc
-                                    accessBloc.timestampToDate(item.invalidTime),
+                                        .timestampToDate(item.effectiveTime),
+                                    accessBloc
+                                        .timestampToDate(item.invalidTime),
                                     item.deviceName.toString(),
                                     item.authorizerEmail.toString(),
-                                    accessBloc.timestampToDate(item.invalidTime),
+                                    accessBloc
+                                        .timestampToDate(item.invalidTime),
                                     item.passwordStatus.value,
                                   ];
                                 }).toList(),
@@ -108,7 +114,8 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
                 })));
   }
 
-  Wrap _buildVisitorAdminPasswords(BuildContext context, AccessBloc accessBloc) {
+  Wrap _buildVisitorAdminPasswords(
+      BuildContext context, AccessBloc accessBloc) {
     return Wrap(
       spacing: 10,
       runSpacing: 10,
@@ -134,7 +141,8 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
               borderRadius: 8,
               child: Text(
                 'Create Visitor Password ',
-                style: context.textTheme.titleSmall!.copyWith(color: Colors.white, fontSize: 12),
+                style: context.textTheme.titleSmall!
+                    .copyWith(color: Colors.white, fontSize: 12),
               )),
         ),
         // Container(
@@ -172,8 +180,10 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
             description: '',
             onSubmitted: (value) {
               accessBloc.add(FilterDataEvent(
-                  emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                  emailAuthorizer:
-                  selectedTabIndex: BlocProvider.of<AccessBloc>(context).selectedIndex,
+                      accessBloc.emailAuthorizer.text.toLowerCase(),
+                  selectedTabIndex:
+                      BlocProvider.of<AccessBloc>(context).selectedIndex,
                   passwordName: accessBloc.passwordName.text.toLowerCase(),
                   startTime: accessBloc.effectiveTimeTimeStamp,
                   endTime: accessBloc.expirationTimeTimeStamp));
@@ -191,8 +201,10 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
             description: '',
             onSubmitted: (value) {
               accessBloc.add(FilterDataEvent(
-                  emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                  emailAuthorizer:
-                  selectedTabIndex: BlocProvider.of<AccessBloc>(context).selectedIndex,
+                      accessBloc.emailAuthorizer.text.toLowerCase(),
+                  selectedTabIndex:
+                      BlocProvider.of<AccessBloc>(context).selectedIndex,
                   passwordName: accessBloc.passwordName.text.toLowerCase(),
                   startTime: accessBloc.effectiveTimeTimeStamp,
                   endTime: accessBloc.expirationTimeTimeStamp));
@@ -221,7 +233,8 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
           onSearch: () {
             accessBloc.add(FilterDataEvent(
                 emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
-                selectedTabIndex: BlocProvider.of<AccessBloc>(context).selectedIndex,
+                selectedTabIndex:
+                    BlocProvider.of<AccessBloc>(context).selectedIndex,
                 passwordName: accessBloc.passwordName.text.toLowerCase(),
                 startTime: accessBloc.effectiveTimeTimeStamp,
                 endTime: accessBloc.expirationTimeTimeStamp));
@@ -249,8 +262,10 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
               description: '',
               onSubmitted: (value) {
                 accessBloc.add(FilterDataEvent(
-                    emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
+                    emailAuthorizer:
-                    selectedTabIndex: BlocProvider.of<AccessBloc>(context).selectedIndex,
+                        accessBloc.emailAuthorizer.text.toLowerCase(),
+                    selectedTabIndex:
+                        BlocProvider.of<AccessBloc>(context).selectedIndex,
                     passwordName: accessBloc.passwordName.text.toLowerCase(),
                     startTime: accessBloc.effectiveTimeTimeStamp,
                     endTime: accessBloc.expirationTimeTimeStamp));
@@ -274,7 +289,8 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
           onSearch: () {
             accessBloc.add(FilterDataEvent(
                 emailAuthorizer: accessBloc.emailAuthorizer.text.toLowerCase(),
-                selectedTabIndex: BlocProvider.of<AccessBloc>(context).selectedIndex,
+                selectedTabIndex:
+                    BlocProvider.of<AccessBloc>(context).selectedIndex,
                 passwordName: accessBloc.passwordName.text.toLowerCase(),
                 startTime: accessBloc.effectiveTimeTimeStamp,
                 endTime: accessBloc.expirationTimeTimeStamp));

lib/pages/auth/bloc/auth_bloc.dart

@@ -9,6 +9,7 @@ import 'package:syncrow_web/pages/auth/model/login_with_email_model.dart';
 import 'package:syncrow_web/pages/auth/model/region_model.dart';
 import 'package:syncrow_web/pages/auth/model/token.dart';
 import 'package:syncrow_web/pages/auth/model/user_model.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/services/auth_api.dart';
 import 'package:syncrow_web/utils/constants/strings_manager.dart';
 import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
@@ -31,7 +32,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
 
   ////////////////////////////// forget password //////////////////////////////////
   final TextEditingController forgetEmailController = TextEditingController();
-  final TextEditingController forgetPasswordController = TextEditingController();
+  final TextEditingController forgetPasswordController =
+      TextEditingController();
   final TextEditingController forgetOtp = TextEditingController();
   final forgetFormKey = GlobalKey<FormState>();
   final forgetEmailKey = GlobalKey<FormState>();
@@ -48,7 +50,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
       return;
     }
     _remainingTime = 1;
-    add(UpdateTimerEvent(remainingTime: _remainingTime, isButtonEnabled: false));
+    add(UpdateTimerEvent(
+        remainingTime: _remainingTime, isButtonEnabled: false));
     try {
       forgetEmailValidate = '';
       _remainingTime = (await AuthenticationAPI.sendOtp(
@@ -85,7 +88,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
         _timer?.cancel();
         add(const UpdateTimerEvent(remainingTime: 0, isButtonEnabled: true));
       } else {
-        add(UpdateTimerEvent(remainingTime: _remainingTime, isButtonEnabled: false));
+        add(UpdateTimerEvent(
+            remainingTime: _remainingTime, isButtonEnabled: false));
       }
     });
   }
@@ -95,7 +99,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     emit(const TimerState(isButtonEnabled: true, remainingTime: 0));
   }
 
-  Future<void> changePassword(ChangePasswordEvent event, Emitter<AuthState> emit) async {
+  Future<void> changePassword(
+      ChangePasswordEvent event, Emitter<AuthState> emit) async {
     emit(LoadingForgetState());
     try {
       var response = await AuthenticationAPI.verifyOtp(
@@ -111,7 +116,8 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
       }
     } on DioException catch (e) {
       final errorData = e.response!.data;
-      String errorMessage = errorData['error']['message'] ?? 'something went wrong';
+      String errorMessage =
+          errorData['error']['message'] ?? 'something went wrong';
       validate = errorMessage;
       emit(AuthInitialState());
     }
@@ -125,7 +131,9 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
   }
 
   void _onUpdateTimer(UpdateTimerEvent event, Emitter<AuthState> emit) {
-    emit(TimerState(isButtonEnabled: event.isButtonEnabled, remainingTime: event.remainingTime));
+    emit(TimerState(
+        isButtonEnabled: event.isButtonEnabled,
+        remainingTime: event.remainingTime));
   }
 
   /////////////////////////////////////  login  /////////////////////////////////////
@@ -161,15 +169,22 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
             password: event.password,
           ),
         );
-      } catch (failure) {
+      } on DioException catch (e) {
+        final errorData = e.response!.data;
+        String errorMessage = errorData['error']['message'];
+        if (errorMessage == "Access denied for web platform") {
+          validate = errorMessage;
+        } else {
           validate = 'Invalid Credentials!';
+        }
         emit(LoginInitial());
         return;
       }
 
       if (token.accessTokenIsNotEmpty) {
         FlutterSecureStorage storage = const FlutterSecureStorage();
-        await storage.write(key: Token.loginAccessTokenKey, value: token.accessToken);
+        await storage.write(
+            key: Token.loginAccessTokenKey, value: token.accessToken);
         const FlutterSecureStorage().write(
             key: UserModel.userUuidKey,
             value: Token.decodeToken(token.accessToken)['uuid'].toString());
@@ -327,12 +342,14 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
   static Future<String> getTokenAndValidate() async {
     try {
       const storage = FlutterSecureStorage();
-      final firstLaunch =
+      final firstLaunch = await SharedPreferencesHelper.readBoolFromSP(
-          await SharedPreferencesHelper.readBoolFromSP(StringsManager.firstLaunch) ?? true;
+              StringsManager.firstLaunch) ??
+          true;
       if (firstLaunch) {
         storage.deleteAll();
       }
-      await SharedPreferencesHelper.saveBoolToSP(StringsManager.firstLaunch, false);
+      await SharedPreferencesHelper.saveBoolToSP(
+          StringsManager.firstLaunch, false);
       final value = await storage.read(key: Token.loginAccessTokenKey) ?? '';
       if (value.isEmpty) {
         return 'Token not found';
@@ -385,7 +402,9 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     final String formattedTime = [
       if (days > 0) '${days}d', // Append 'd' for days
       if (days > 0 || hours > 0)
-        hours.toString().padLeft(2, '0'), // Show hours if there are days or hours
+        hours
+            .toString()
+            .padLeft(2, '0'), // Show hours if there are days or hours
       minutes.toString().padLeft(2, '0'),
       seconds.toString().padLeft(2, '0'),
     ].join(':');
@@ -423,8 +442,9 @@ class AuthBloc extends Bloc<AuthEvent, AuthState> {
     emit(LoginInitial());
   }
 
-  static logout() {
+  static Future<void> logout(BuildContext context) async {
-    const storage = FlutterSecureStorage();
+    final storage = FlutterSecureStorage();
+    ProjectManager.clearProjectUUID();
     storage.deleteAll();
   }
 }

lib/pages/auth/model/login_with_email_model.dart

@@ -21,7 +21,9 @@ class LoginWithEmailModel {
     return {
       'email': email,
       'password': password,
+      "platform": "web"
       // 'regionUuid': regionUuid,
     };
   }
 }
+//tst@tst.com

lib/pages/auth/model/project_model.dart

@@ -0,0 +1,27 @@
+class Project {
+  final String uuid;
+  final String name;
+  final String description;
+
+  const Project({
+    required this.uuid,
+    required this.name,
+    required this.description,
+  });
+
+  factory Project.fromJson(Map<String, dynamic> json) {
+    return Project(
+      uuid: json['uuid'] as String,
+      name: json['name'] as String,
+      description: json['description'] as String,
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'uuid': uuid,
+      'name': name,
+      'description': description,
+    };
+  }
+}

lib/pages/auth/model/user_model.dart

@@ -1,3 +1,4 @@
+import 'package:syncrow_web/pages/auth/model/project_model.dart';
 import 'package:syncrow_web/pages/auth/model/token.dart';
 
 class UserModel {
@@ -10,6 +11,11 @@ class UserModel {
   final String? phoneNumber;
   final bool? isEmailVerified;
   final bool? isAgreementAccepted;
+  final bool? hasAcceptedWebAgreement;
+  final DateTime? webAgreementAcceptedAt;
+  final UserRole? role;
+  final Project? project;
+
   UserModel({
     required this.uuid,
     required this.email,
@@ -19,6 +25,10 @@ class UserModel {
     required this.phoneNumber,
     required this.isEmailVerified,
     required this.isAgreementAccepted,
+    required this.hasAcceptedWebAgreement,
+    required this.webAgreementAcceptedAt,
+    required this.role,
+    required this.project,
   });
 
   factory UserModel.fromJson(Map<String, dynamic> json) {
@@ -31,6 +41,13 @@ class UserModel {
       phoneNumber: json['phoneNumber'],
       isEmailVerified: json['isEmailVerified'],
       isAgreementAccepted: json['isAgreementAccepted'],
+      hasAcceptedWebAgreement: json['hasAcceptedWebAgreement'],
+      webAgreementAcceptedAt: json['webAgreementAcceptedAt'] != null
+          ? DateTime.parse(json['webAgreementAcceptedAt'])
+          : null,
+      role: json['role'] != null ? UserRole.fromJson(json['role']) : null,
+      project:
+          json['project'] != null ? Project.fromJson(json['project']) : null,
     );
   }
 
@@ -41,6 +58,9 @@ class UserModel {
     Map<String, dynamic> tempJson = Token.decodeToken(token.accessToken);
 
     return UserModel(
+      hasAcceptedWebAgreement: null,
+      role: null,
+      webAgreementAcceptedAt: null,
       uuid: tempJson['uuid'].toString(),
       email: tempJson['email'],
       firstName: null,
@@ -49,6 +69,7 @@ class UserModel {
       phoneNumber: null,
       isEmailVerified: null,
       isAgreementAccepted: null,
+      project: null
     );
   }
 
@@ -65,3 +86,26 @@ class UserModel {
     };
   }
 }
+
+class UserRole {
+  final String uuid;
+  final DateTime createdAt;
+  final DateTime updatedAt;
+  final String type;
+
+  UserRole({
+    required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.type,
+  });
+
+  factory UserRole.fromJson(Map<String, dynamic> json) {
+    return UserRole(
+      uuid: json['uuid'],
+      createdAt: DateTime.parse(json['createdAt']),
+      updatedAt: DateTime.parse(json['updatedAt']),
+      type: json['type'],
+    );
+  }
+}

lib/pages/common/bloc/project_manager.dart

@@ -0,0 +1,19 @@
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
+
+class ProjectManager {
+  static Future<String?> getProjectUUID() async {
+    final projectUuid = await SharedPreferencesHelper.readStringFromSP(
+        StringsManager.projectKey);
+    return projectUuid.isNotEmpty ? projectUuid : null;
+  }
+
+  static Future<void> setProjectUUID(String newUUID) async {
+    await SharedPreferencesHelper.saveStringToSP(
+        StringsManager.projectKey, newUUID);
+  }
+
+  static Future<void> clearProjectUUID() async {
+    await SharedPreferencesHelper.removeValueFromSP(StringsManager.projectKey);
+  }
+}

lib/pages/common/buttons/default_button.dart

@@ -19,12 +19,14 @@ class DefaultButton extends StatelessWidget {
     this.padding,
     this.borderColor,
     this.elevation,
+    this.borderWidth = 1.0,
   });
   final void Function()? onPressed;
   final Widget child;
   final double? height;
   final bool isSecondary;
   final double? borderRadius;
+  final double borderWidth;
   final bool enabled;
   final double? padding;
   final bool isDone;
@@ -66,7 +68,10 @@ class DefaultButton extends StatelessWidget {
                 }),
                 shape: WidgetStateProperty.all(
                   RoundedRectangleBorder(
-                    side: BorderSide(color: borderColor ?? Colors.transparent),
+                    side: BorderSide(
+                      color: borderColor ?? Colors.transparent,
+                      width: borderWidth,
+                    ),
                     borderRadius: BorderRadius.circular(borderRadius ?? 20),
                   ),
                 ),

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

@@ -1,7 +1,13 @@
 import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/services/devices_mang_api.dart';
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/constants/temp_const.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
 
 part 'device_managment_event.dart';
 part 'device_managment_state.dart';
@@ -34,7 +40,25 @@ class DeviceManagementBloc
       FetchDevices event, Emitter<DeviceManagementState> emit) async {
     emit(DeviceManagementLoading());
     try {
-      final devices = await DevicesManagementApi().fetchDevices();
+      List<AllDevicesModel> devices = [];
+      _devices.clear();
+      var spaceBloc = event.context.read<SpaceTreeBloc>();
+           final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
+      if (spaceBloc.state.selectedCommunities.isEmpty) {
+        devices = await DevicesManagementApi()
+            .fetchDevices('', '', projectUuid );
+      } else {
+        for (var community in spaceBloc.state.selectedCommunities) {
+          List<String> spacesList =
+              spaceBloc.state.selectedCommunityAndSpaces[community] ?? [];
+          for (var space in spacesList) {
+            devices.addAll(await DevicesManagementApi().fetchDevices(
+                community, space, projectUuid));
+          }
+        }
+      }
+
       _selectedDevices.clear();
       _devices = devices;
       _filteredDevices = devices;
@@ -288,8 +312,8 @@ class DeviceManagementBloc
             event.unitName!.isEmpty ||
             (device.spaces != null &&
                 device.spaces!.isNotEmpty &&
-                device.spaces![0].spaceName
+                device.spaces![0].spaceName!
-                    !.toLowerCase()
+                    .toLowerCase()
                     .contains(event.unitName!.toLowerCase()));
         final matchesProductName = event.productName == null ||
             event.productName!.isEmpty ||

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

@@ -7,7 +7,15 @@ abstract class DeviceManagementEvent extends Equatable {
   List<Object?> get props => [];
 }
 
-class FetchDevices extends DeviceManagementEvent {}
+class FetchDevices extends DeviceManagementEvent {
+  // final Map<String, List<String>> selectedCommunitiesSpaces;
+  // final String spaceId;
+  final BuildContext context;
+
+  const FetchDevices(this.context);
+  @override
+  List<Object?> get props => [context];
+}
 
 class FilterDevices extends DeviceManagementEvent {
   final String filter;

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

@@ -0,0 +1,47 @@
+class DeviceSubspace {
+  final String uuid;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
+  final String subspaceName;
+  final bool disabled;
+
+  DeviceSubspace({
+    required this.uuid,
+    this.createdAt,
+    this.updatedAt,
+    required this.subspaceName,
+    required this.disabled,
+  });
+
+  factory DeviceSubspace.fromJson(Map<String, dynamic> json) {
+    return DeviceSubspace(
+      uuid: json['uuid'] as String,
+      createdAt: json['createdAt'] != null
+          ? DateTime.tryParse(json['createdAt'].toString())
+          : null,
+      updatedAt: json['updatedAt'] != null
+          ? DateTime.tryParse(json['updatedAt'].toString())
+          : null,
+      subspaceName: json['subspaceName'] as String,
+      disabled: json['disabled'] as bool,
+    );
+  }
+
+  Map<String, dynamic> toJson() {
+    return {
+      'uuid': uuid,
+      'createdAt': createdAt?.toIso8601String(),
+      'updatedAt': updatedAt?.toIso8601String(),
+      'subspaceName': subspaceName,
+      'disabled': disabled,
+    };
+  }
+
+  static List<DeviceSubspace> listFromJson(List<dynamic> jsonList) {
+    return jsonList.map((json) => DeviceSubspace.fromJson(json)).toList();
+  }
+
+  static List<Map<String, dynamic>> listToJson(List<DeviceSubspace> subspaces) {
+    return subspaces.map((subspace) => subspace.toJson()).toList();
+  }
+}

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

@@ -1,12 +1,13 @@
 import 'package:syncrow_web/pages/device_managment/all_devices/models/device_community.model.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/device_space_model.dart';
+import 'package:syncrow_web/pages/device_managment/all_devices/models/device_subspace.model.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/room.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/unit.dart';
-import 'package:syncrow_web/pages/routiens/models/ac/ac_function.dart';
+import 'package:syncrow_web/pages/routines/models/ac/ac_function.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/one_gang_switch/one_gang_switch.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/one_gang_switch/one_gang_switch.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/three_gang_switch/three_gang_switch.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/three_gang_switch/three_gang_switch.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/two_gang_switch/two_gang_switch.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/two_gang_switch/two_gang_switch.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/enum/device_types.dart';
 
@@ -47,6 +48,7 @@ class AllDevicesModel {
 */
 
   DevicesModelRoom? room;
+  DeviceSubspace? subspace;
   DevicesModelUnit? unit;
   DeviceCommunityModel? community;
   String? productUuid;
@@ -77,6 +79,7 @@ class AllDevicesModel {
 
   AllDevicesModel({
     this.room,
+    this.subspace,
     this.unit,
     this.community,
     this.productUuid,
@@ -110,6 +113,9 @@ class AllDevicesModel {
     room = (json['room'] != null && (json['room'] is Map))
         ? DevicesModelRoom.fromJson(json['room'])
         : null;
+    subspace = (json['subspace'] != null && (json['subspace'] is Map))
+        ? DeviceSubspace.fromJson(json['subspace'])
+        : null;
     unit = (json['unit'] != null && (json['unit'] is Map))
         ? DevicesModelUnit.fromJson(json['unit'])
         : null;
@@ -142,9 +148,7 @@ class AllDevicesModel {
 
     productName = json['productName']?.toString();
     if (json['spaces'] != null && json['spaces'] is List) {
-      spaces = (json['spaces'] as List)
+      spaces = (json['spaces'] as List).map((space) => DeviceSpaceModel.fromJson(space)).toList();
-          .map((space) => DeviceSpaceModel.fromJson(space))
-          .toList();
     }
   }
 
@@ -192,8 +196,7 @@ SOS
     String tempIcon = '';
     if (type == DeviceType.LightBulb) {
       tempIcon = Assets.lightBulb;
-    } else if (type == DeviceType.CeilingSensor ||
+    } else if (type == DeviceType.CeilingSensor || type == DeviceType.WallSensor) {
-        type == DeviceType.WallSensor) {
       tempIcon = Assets.sensors;
     } else if (type == DeviceType.AC) {
       tempIcon = Assets.ac;
@@ -248,34 +251,25 @@ SOS
       case '1G':
         return [
           OneGangSwitchFunction(deviceId: uuid ?? '', deviceName: name ?? ''),
-          OneGangCountdownFunction(
+          OneGangCountdownFunction(deviceId: uuid ?? '', deviceName: name ?? ''),
-              deviceId: uuid ?? '', deviceName: name ?? ''),
         ];
 
       case '2G':
         return [
           TwoGangSwitch1Function(deviceId: uuid ?? '', deviceName: name ?? ''),
           TwoGangSwitch2Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-          TwoGangCountdown1Function(
+          TwoGangCountdown1Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-              deviceId: uuid ?? '', deviceName: name ?? ''),
+          TwoGangCountdown2Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-          TwoGangCountdown2Function(
-              deviceId: uuid ?? '', deviceName: name ?? ''),
         ];
 
       case '3G':
         return [
-          ThreeGangSwitch1Function(
+          ThreeGangSwitch1Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-              deviceId: uuid ?? '', deviceName: name ?? ''),
+          ThreeGangSwitch2Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-          ThreeGangSwitch2Function(
+          ThreeGangSwitch3Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-              deviceId: uuid ?? '', deviceName: name ?? ''),
+          ThreeGangCountdown1Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-          ThreeGangSwitch3Function(
+          ThreeGangCountdown2Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-              deviceId: uuid ?? '', deviceName: name ?? ''),
+          ThreeGangCountdown3Function(deviceId: uuid ?? '', deviceName: name ?? ''),
-          ThreeGangCountdown1Function(
-              deviceId: uuid ?? '', deviceName: name ?? ''),
-          ThreeGangCountdown2Function(
-              deviceId: uuid ?? '', deviceName: name ?? ''),
-          ThreeGangCountdown3Function(
-              deviceId: uuid ?? '', deviceName: name ?? ''),
         ];
 
       default:
@@ -288,6 +282,9 @@ SOS
     if (room != null) {
       data['room'] = room!.toJson();
     }
+    if (subspace != null) {
+      data['subspace'] = subspace!.toJson();
+    }
     if (unit != null) {
       data['unit'] = unit!.toJson();
     }
@@ -330,6 +327,7 @@ SOS
 
     return other is AllDevicesModel &&
         other.room == room &&
+        other.subspace == subspace &&
         other.unit == unit &&
         other.productUuid == productUuid &&
         other.productType == productType &&
@@ -360,6 +358,7 @@ SOS
   @override
   int get hashCode {
     return room.hashCode ^
+        subspace.hashCode ^
         unit.hashCode ^
         productUuid.hashCode ^
         productType.hashCode ^

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

@@ -1,11 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/widgets/device_managment_body.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/view/create_new_routine_view.dart';
+import 'package:syncrow_web/pages/routines/view/create_new_routine_view.dart';
-import 'package:syncrow_web/pages/routiens/view/routines_view.dart';
+import 'package:syncrow_web/pages/routines/view/routines_view.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
@@ -19,7 +20,8 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
     return MultiBlocProvider(
       providers: [
         BlocProvider(
-          create: (context) => DeviceManagementBloc()..add(FetchDevices()),
+          create: (context) =>
+              DeviceManagementBloc()..add(FetchDevices(context)),
         ),
       ],
       child: WebScaffold(
@@ -41,6 +43,7 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
                   context
                       .read<RoutineBloc>()
                       .add(const TriggerSwitchTabsEvent(isRoutineTab: false));
+                  context.read<DeviceManagementBloc>().add(FetchDevices(context));
                 },
                 child: Text(
                   'Devices',
@@ -80,7 +83,7 @@ class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
           return BlocBuilder<DeviceManagementBloc, DeviceManagementState>(
             builder: (context, deviceState) {
               if (deviceState is DeviceManagementLoading) {
-                return const Center(child: CircularProgressIndicator());
+                return const DeviceManagementBody(devices: []);
               } else if (deviceState is DeviceManagementLoaded) {
                 return DeviceManagementBody(devices: deviceState.devices);
               } else if (deviceState is DeviceManagementFiltered) {

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

@@ -8,6 +8,8 @@ import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_mo
 import 'package:syncrow_web/pages/device_managment/all_devices/widgets/device_search_filters.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_batch_control_dialog.dart';
 import 'package:syncrow_web/pages/device_managment/shared/device_control_dialog.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
 import 'package:syncrow_web/utils/format_date_time.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 import 'package:syncrow_web/utils/style.dart';
@@ -59,10 +61,23 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
 
         final buttonLabel = (selectedDevices.length > 1) ? 'Batch Control' : 'Control';
 
-        return Column(
+        return Row(
+          children: [
+            Expanded(child: SpaceTreeView(
+              onSelect: () {
+                context.read<DeviceManagementBloc>().add(FetchDevices(context));
+              },
+            )),
+            Expanded(
+              flex: 4,
+              child: state is DeviceManagementLoading
+                  ? const Center(child: CircularProgressIndicator())
+                  : Column(
                       children: [
                         Container(
-              padding: isLargeScreenSize(context) ? const EdgeInsets.all(30) : const EdgeInsets.all(15),
+                          padding: isLargeScreenSize(context)
+                              ? const EdgeInsets.all(30)
+                              : const EdgeInsets.all(15),
                           child: Column(
                             crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
@@ -71,7 +86,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                 tabs: tabs,
                                 selectedIndex: selectedIndex,
                                 onTabChanged: (index) {
-                      context.read<DeviceManagementBloc>().add(SelectedFilterChanged(index));
+                                  context
+                                      .read<DeviceManagementBloc>()
+                                      .add(SelectedFilterChanged(index));
                                 },
                               ),
                               const SizedBox(height: 20),
@@ -93,7 +110,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                                                 ),
                                               );
                                             } else if (selectedDevices.length > 1) {
-                                  final productTypes = selectedDevices.map((device) => device.productType).toSet();
+                                              final productTypes = selectedDevices
+                                                  .map((device) => device.productType)
+                                                  .toSet();
                                               if (productTypes.length == 1) {
                                                 showDialog(
                                                   context: context,
@@ -122,13 +141,17 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                         ),
                         Expanded(
                           child: Padding(
-                padding: isLargeScreenSize(context) ? const EdgeInsets.all(30) : const EdgeInsets.all(15),
+                            padding: isLargeScreenSize(context)
+                                ? const EdgeInsets.all(30)
+                                : const EdgeInsets.all(15),
                             child: DynamicTable(
                               withSelectAll: true,
                               cellDecoration: containerDecoration,
                               onRowSelected: (index, isSelected, row) {
                                 final selectedDevice = devicesToShow[index];
-                    context.read<DeviceManagementBloc>().add(SelectDevice(selectedDevice));
+                                context
+                                    .read<DeviceManagementBloc>()
+                                    .add(SelectDevice(selectedDevice));
                               },
                               withCheckBox: true,
                               size: MediaQuery.of(context).size,
@@ -147,31 +170,45 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                               data: devicesToShow.map((device) {
                                 final combinedSpaceNames = device.spaces != null
                                     ? device.spaces!.map((space) => space.spaceName).join(' > ') +
-                            (device.community != null ? ' > ${device.community!.name}' : '')
+                                        (device.community != null
+                                            ? ' > ${device.community!.name}'
+                                            : '')
                                     : (device.community != null ? device.community!.name : '');
 
                                 return [
                                   device.name ?? '',
                                   device.productName ?? '',
                                   device.uuid ?? '',
-                      (device.spaces != null && device.spaces!.isNotEmpty) ? device.spaces![0].spaceName : '',
+                                  (device.spaces != null && device.spaces!.isNotEmpty)
+                                      ? device.spaces![0].spaceName
+                                      : '',
                                   combinedSpaceNames,
                                   device.batteryLevel != null ? '${device.batteryLevel}%' : '-',
-                      formatDateTime(DateTime.fromMillisecondsSinceEpoch((device.createTime ?? 0) * 1000)),
+                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
+                                      (device.createTime ?? 0) * 1000)),
                                   device.online == true ? 'Online' : 'Offline',
-                      formatDateTime(DateTime.fromMillisecondsSinceEpoch((device.updateTime ?? 0) * 1000)),
+                                  formatDateTime(DateTime.fromMillisecondsSinceEpoch(
+                                      (device.updateTime ?? 0) * 1000)),
                                 ];
                               }).toList(),
                               onSelectionChanged: (selectedRows) {
-                    context.read<DeviceManagementBloc>().add(UpdateSelection(selectedRows));
+                                context
+                                    .read<DeviceManagementBloc>()
+                                    .add(UpdateSelection(selectedRows));
                               },
-                  initialSelectedIds:
+                              initialSelectedIds: context
-                      context.read<DeviceManagementBloc>().selectedDevices.map((device) => device.uuid!).toList(),
+                                  .read<DeviceManagementBloc>()
+                                  .selectedDevices
+                                  .map((device) => device.uuid!)
+                                  .toList(),
                               isEmpty: devicesToShow.isEmpty,
                             ),
                           ),
                         )
                       ],
+                    ),
+            ),
+          ],
         );
       },
     );

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

@@ -12,8 +12,7 @@ class DeviceSearchFilters extends StatefulWidget {
   State<DeviceSearchFilters> createState() => _DeviceSearchFiltersState();
 }
 
-class _DeviceSearchFiltersState extends State<DeviceSearchFilters>
+class _DeviceSearchFiltersState extends State<DeviceSearchFilters> with HelperResponsiveLayout {
-    with HelperResponsiveLayout {
   final TextEditingController communityController = TextEditingController();
   final TextEditingController unitNameController = TextEditingController();
   final TextEditingController productNameController = TextEditingController();
@@ -27,8 +26,7 @@ class _DeviceSearchFiltersState extends State<DeviceSearchFilters>
               const SizedBox(width: 20),
               _buildSearchField("Space Name", unitNameController, 200),
               const SizedBox(width: 20),
-              _buildSearchField(
+              _buildSearchField("Device Name / Product Name", productNameController, 300),
-                  "Device Name / Product Name", productNameController, 300),
               const SizedBox(width: 20),
               _buildSearchResetButtons(),
             ],
@@ -53,8 +51,7 @@ class _DeviceSearchFiltersState extends State<DeviceSearchFilters>
           );
   }
 
-  Widget _buildSearchField(
+  Widget _buildSearchField(String title, TextEditingController controller, double width) {
-      String title, TextEditingController controller, double width) {
     return Container(
       child: StatefulTextField(
         title: title,
@@ -88,7 +85,7 @@ class _DeviceSearchFiltersState extends State<DeviceSearchFilters>
         productNameController.clear();
         context.read<DeviceManagementBloc>()
           ..add(ResetFilters())
-          ..add(FetchDevices());
+          ..add(FetchDevices(context));
       },
     );
   }

lib/pages/device_managment/shared/device_control_dialog.dart

@@ -95,8 +95,9 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
           ]),
           TableRow(
             children: [
-              _buildInfoRow('Space Name:', device.unit?.name ?? 'N/A'),
+              _buildInfoRow('Space Name:',
-              _buildInfoRow('Room:', device.room?.name ?? 'N/A'),
+                  device.spaces?.firstOrNull?.spaceName ?? 'N/A'),
+              _buildInfoRow('Room:', device.subspace?.subspaceName ?? 'N/A'),
             ],
           ),
           TableRow(
@@ -111,9 +112,13 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
               ),
               _buildInfoRow(
                 'Battery Level:',
-                device.batteryLevel != null ? '${device.batteryLevel ?? 0}%' : "-",
+                device.batteryLevel != null
+                    ? '${device.batteryLevel ?? 0}%'
+                    : "-",
                 statusColor: device.batteryLevel != null
-                    ? (device.batteryLevel! < 20 ? ColorsManager.red : ColorsManager.green)
+                    ? (device.batteryLevel! < 20
+                        ? ColorsManager.red
+                        : ColorsManager.green)
                     : null,
               ),
             ],

lib/pages/home/bloc/home_bloc.dart

@@ -1,56 +1,111 @@
+import 'package:flutter/widgets.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
 import 'package:go_router/go_router.dart';
-import 'package:graphview/GraphView.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+// import 'package:graphview/GraphView.dart';
 import 'package:syncrow_web/pages/auth/model/user_model.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/home/bloc/home_event.dart';
 import 'package:syncrow_web/pages/home/bloc/home_state.dart';
 import 'package:syncrow_web/pages/home/home_model/home_item_model.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/services/home_api.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/constants/routes_const.dart';
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
 
 class HomeBloc extends Bloc<HomeEvent, HomeState> {
-  final Graph graph = Graph()..isTree = true;
+  // final Graph graph = Graph()..isTree = true;
-  final BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();
+  // final BuchheimWalkerConfiguration builder = BuchheimWalkerConfiguration();
-  List<Node> sourcesList = [];
+  // List<Node> sourcesList = [];
-  List<Node> destinationsList = [];
+  // List<Node> destinationsList = [];
   UserModel? user;
+  String terms = '';
+  String policy = '';
 
   HomeBloc() : super((HomeInitial())) {
-    on<CreateNewNode>(_createNode);
+    // on<CreateNewNode>(_createNode);
     on<FetchUserInfo>(_fetchUserInfo);
+    on<FetchTermEvent>(_fetchTerms);
+    on<FetchPolicyEvent>(_fetchPolicy);
+    on<ConfirmUserAgreementEvent>(_confirmUserAgreement);
   }
 
-  void _createNode(CreateNewNode event, Emitter<HomeState> emit) async {
+  // void _createNode(CreateNewNode event, Emitter<HomeState> emit) async {
-    emit(HomeInitial());
+  //   emit(HomeInitial());
-    sourcesList.add(event.sourceNode);
+  //   sourcesList.add(event.sourceNode);
-    destinationsList.add(event.destinationNode);
+  //   destinationsList.add(event.destinationNode);
-    for (int i = 0; i < sourcesList.length; i++) {
+  //   for (int i = 0; i < sourcesList.length; i++) {
-      graph.addEdge(sourcesList[i], destinationsList[i]);
+  //     graph.addEdge(sourcesList[i], destinationsList[i]);
-    }
+  //   }
 
-    builder
+  //   builder
-      ..siblingSeparation = (100)
+  //     ..siblingSeparation = (100)
-      ..levelSeparation = (150)
+  //     ..levelSeparation = (150)
-      ..subtreeSeparation = (150)
+  //     ..subtreeSeparation = (150)
-      ..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
+  //     ..orientation = (BuchheimWalkerConfiguration.ORIENTATION_TOP_BOTTOM);
-    emit(HomeUpdateTree(graph: graph, builder: builder));
+  //   emit(HomeUpdateTree(graph: graph, builder: builder));
-  }
+  // }
 
   Future _fetchUserInfo(FetchUserInfo event, Emitter<HomeState> emit) async {
     try {
       var uuid =
           await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
       user = await HomeApi().fetchUserInfo(uuid);
+
+      if (user != null && user!.project != null) {
+        await ProjectManager.setProjectUUID(user!.project!.uuid);
+      }
+      add(FetchTermEvent());
+      add(FetchPolicyEvent());
+
       emit(HomeInitial());
     } catch (e) {
       return;
     }
   }
 
+  Future _fetchTerms(FetchTermEvent event, Emitter<HomeState> emit) async {
+    try {
+      emit(LoadingHome());
+      terms = await HomeApi().fetchTerms();
+      emit(HomeInitial());
+
+      // emit(PolicyAgreement());
+    } catch (e) {
+      return;
+    }
+  }
+
+  Future _fetchPolicy(FetchPolicyEvent event, Emitter<HomeState> emit) async {
+    try {
+      emit(LoadingHome());
+      policy = await HomeApi().fetchPolicy();
+      debugPrint("Fetched policy: $policy");
+      // Emit a state to trigger the UI update
+      emit(HomeInitial());
+    } catch (e) {
+      debugPrint("Error fetching policy: $e");
+      return;
+    }
+  }
+
+  Future _confirmUserAgreement(
+      ConfirmUserAgreementEvent event, Emitter<HomeState> emit) async {
+    try {
+      emit(LoadingHome());
+      var uuid =
+          await const FlutterSecureStorage().read(key: UserModel.userUuidKey);
+      policy = await HomeApi().confirmUserAgreements(uuid);
+      emit(PolicyAgreement());
+    } catch (e) {
+      return;
+    }
+  }
+
 //  static  Future fetchUserInfo() async {
 //     try {
 //       var uuid =

lib/pages/home/bloc/home_event.dart

@@ -1,5 +1,5 @@
 import 'package:equatable/equatable.dart';
-import 'package:graphview/GraphView.dart';
+// import 'package:graphview/GraphView.dart';
 
 abstract class HomeEvent extends Equatable {
   const HomeEvent();
@@ -8,16 +8,22 @@ abstract class HomeEvent extends Equatable {
   List<Object> get props => [];
 }
 
-class CreateNewNode extends HomeEvent {
+// class CreateNewNode extends HomeEvent {
-  final Node sourceNode;
+//   final Node sourceNode;
-  final Node destinationNode;
+//   final Node destinationNode;
-  const CreateNewNode(
+//   const CreateNewNode(
-      {required this.sourceNode, required this.destinationNode});
+//       {required this.sourceNode, required this.destinationNode});
 
-  @override
+//   @override
-  List<Object> get props => [sourceNode, destinationNode];
+//   List<Object> get props => [sourceNode, destinationNode];
-}
+// }
 
 class FetchUserInfo extends HomeEvent {
   const FetchUserInfo();
 }
+
+class FetchTermEvent extends HomeEvent {}
+
+class FetchPolicyEvent extends HomeEvent {}
+
+class ConfirmUserAgreementEvent extends HomeEvent {}

lib/pages/home/bloc/home_state.dart

@@ -1,5 +1,5 @@
 import 'package:equatable/equatable.dart';
-import 'package:graphview/GraphView.dart';
+// import 'package:graphview/GraphView.dart';
 
 abstract class HomeState extends Equatable {
   const HomeState();
@@ -8,19 +8,25 @@ abstract class HomeState extends Equatable {
   List<Object> get props => [];
 }
 
+class LoadingHome extends HomeState {}
+
 class HomeInitial extends HomeState {}
 
-class HomeCounterState extends HomeState {
+class TermsAgreement extends HomeState {}
-  final int counter;
-  const HomeCounterState(this.counter);
-}
 
-class HomeUpdateTree extends HomeState {
+class PolicyAgreement extends HomeState {}
-  final Graph graph;
-  final BuchheimWalkerConfiguration builder;
 
-  const HomeUpdateTree({required this.graph, required this.builder});
+// class HomeCounterState extends HomeState {
+//   final int counter;
+//   const HomeCounterState(this.counter);
+// }
 
-  @override
+// class HomeUpdateTree extends HomeState {
-  List<Object> get props => [graph, builder];
+//   final Graph graph;
-}
+//   final BuchheimWalkerConfiguration builder;
+
+//   const HomeUpdateTree({required this.graph, required this.builder});
+
+//   @override
+//   List<Object> get props => [graph, builder];
+// }

lib/pages/home/view/agreement_and_privacy_dialog.dart

@@ -0,0 +1,180 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_html/flutter_html.dart';
+import 'package:go_router/go_router.dart';
+import 'package:syncrow_web/pages/auth/bloc/auth_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/routes_const.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class AgreementAndPrivacyDialog extends StatefulWidget {
+  final String terms;
+  final String policy;
+
+  const AgreementAndPrivacyDialog({
+    super.key,
+    required this.terms,
+    required this.policy,
+  });
+
+  @override
+  _AgreementAndPrivacyDialogState createState() =>
+      _AgreementAndPrivacyDialogState();
+}
+
+class _AgreementAndPrivacyDialogState extends State<AgreementAndPrivacyDialog> {
+  final ScrollController _scrollController = ScrollController();
+  bool _isAtEnd = false;
+  int _currentPage = 1;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_onScroll);
+    WidgetsBinding.instance
+        .addPostFrameCallback((_) => _checkScrollRequirement());
+  }
+
+  void _checkScrollRequirement() {
+    final scrollPosition = _scrollController.position;
+    if (scrollPosition.maxScrollExtent <= 0) {
+      setState(() {
+        _isAtEnd = true;
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _scrollController.removeListener(_onScroll);
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.atEdge) {
+      final isAtBottom = _scrollController.position.pixels ==
+          _scrollController.position.maxScrollExtent;
+      if (isAtBottom && !_isAtEnd) {
+        setState(() {
+          _isAtEnd = true;
+        });
+      }
+    }
+  }
+
+  String get _dialogTitle =>
+      _currentPage == 1 ? 'User Agreement' : 'Privacy Policy';
+
+  String get _dialogContent => _currentPage == 1 ? widget.terms : widget.policy;
+  final String staticText =
+      '<h5 style="color: #FF5722;">If you cancel you will be logged out.</h5>';
+
+  Widget _buildScrollableContent() {
+    return Container(
+      padding: const EdgeInsets.all(40),
+      width: MediaQuery.of(context).size.width * 0.8,
+      height: MediaQuery.of(context).size.height * 0.75,
+      decoration: BoxDecoration(
+        color: Colors.grey[200],
+        borderRadius: const BorderRadius.all(Radius.circular(20)),
+      ),
+      child: Scrollbar(
+        thumbVisibility: true,
+        trackVisibility: true,
+        interactive: true,
+        controller: _scrollController,
+        child: SingleChildScrollView(
+          controller: _scrollController,
+          padding: const EdgeInsets.all(25),
+          child: Html(
+            data: "$_dialogContent $staticText",
+            onLinkTap: (url, attributes, element) async {
+              if (url != null) {
+                final uri = Uri.parse(url);
+                await launchUrl(uri, mode: LaunchMode.externalApplication);
+              }
+            },
+            style: {
+              "body": Style(
+                fontSize: FontSize(14),
+                color: Colors.black87,
+                lineHeight: LineHeight(1.5),
+              ),
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildActionButton() {
+    final String buttonText = _currentPage == 2 ? "I Agree" : "Next";
+
+    return InkWell(
+      onTap: _isAtEnd
+          ? () {
+              if (_currentPage == 1) {
+                setState(() {
+                  _currentPage = 2;
+                  _isAtEnd = false;
+                  _scrollController.jumpTo(0);
+                  WidgetsBinding.instance
+                      .addPostFrameCallback((_) => _checkScrollRequirement());
+                });
+              } else {
+                Navigator.of(context).pop(true);
+              }
+            }
+          : null,
+      child: Text(
+        buttonText,
+        style: TextStyle(
+          color: _isAtEnd ? ColorsManager.secondaryColor : Colors.grey,
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Text(
+              _dialogTitle,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.w700,
+                color: ColorsManager.secondaryColor,
+              ),
+            ),
+          ),
+          const Divider(),
+          _buildScrollableContent(),
+          const Divider(),
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: [
+                InkWell(
+                  onTap: () {
+                    AuthBloc.logout(context);
+                    context.go(RoutesConst.auth);
+                  },
+                  child: const Text("Cancel"),
+                ),
+                _buildActionButton(),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/home/view/home_page_mobile.dart

@@ -41,8 +41,7 @@ class HomeMobilePage extends StatelessWidget {
                     SizedBox(height: size.height * 0.05),
                     const Text(
                       'ACCESS YOUR APPS',
-                      style:
+                      style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
-                          TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
                     ),
                     const SizedBox(height: 30),
                     Expanded(
@@ -51,9 +50,8 @@ class HomeMobilePage extends StatelessWidget {
                         height: size.height * 0.6,
                         width: size.width * 0.68,
                         child: GridView.builder(
-                          itemCount: 8,
+                          itemCount: 3,
-                          gridDelegate:
+                          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                              const SliverGridDelegateWithFixedCrossAxisCount(
                             crossAxisCount: 2,
                             crossAxisSpacing: 20.0,
                             mainAxisSpacing: 20.0,
@@ -65,8 +63,7 @@ class HomeMobilePage extends StatelessWidget {
                               active: homeItems[index]['active'],
                               name: homeItems[index]['title'],
                               img: homeItems[index]['icon'],
-                              onTap: () =>
+                              onTap: () => homeBloc.homeItems[index].onPress(context),
-                                  homeBloc.homeItems[index].onPress(context),
                             );
                           },
                         ),
@@ -97,33 +94,33 @@ class HomeMobilePage extends StatelessWidget {
       'icon': Assets.devicesIcon,
       'active': true,
     },
-    {
+    // {
-      'title': 'Move in',
+    //   'title': 'Move in',
-      'icon': Assets.moveinIcon,
+    //   'icon': Assets.moveinIcon,
-      'active': false,
+    //   'active': false,
-    },
+    // },
-    {
+    // {
-      'title': 'Construction',
+    //   'title': 'Construction',
-      'icon': Assets.constructionIcon,
+    //   'icon': Assets.constructionIcon,
-      'active': false,
+    //   'active': false,
-    },
+    // },
-    {
+    // {
-      'title': 'Energy',
+    //   'title': 'Energy',
-      'icon': Assets.energyIcon,
+    //   'icon': Assets.energyIcon,
-      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+    //   'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
-      'active': false,
+    //   'active': false,
-    },
+    // },
-    {
+    // {
-      'title': 'Integrations',
+    //   'title': 'Integrations',
-      'icon': Assets.integrationsIcon,
+    //   'icon': Assets.integrationsIcon,
-      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+    //   'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
-      'active': false,
+    //   'active': false,
-    },
+    // },
-    {
+    // {
-      'title': 'Asset',
+    //   'title': 'Asset',
-      'icon': Assets.assetIcon,
+    //   'icon': Assets.assetIcon,
-      'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
+    //   'color': ColorsManager.slidingBlueColor.withOpacity(0.2),
-      'active': false,
+    //   'active': false,
-    },
+    // },
   ];
 }

lib/pages/home/view/home_page_web.dart

@@ -1,24 +1,67 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/home/bloc/home_event.dart';
+import 'package:syncrow_web/pages/home/view/agreement_and_privacy_dialog.dart';
 import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
 import 'package:syncrow_web/pages/home/bloc/home_state.dart';
 import 'package:syncrow_web/pages/home/view/home_card.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
-class HomeWebPage extends StatelessWidget {
+class HomeWebPage extends StatefulWidget {
   const HomeWebPage({super.key});
+
+  @override
+  State<HomeWebPage> createState() => _HomeWebPageState();
+}
+
+class _HomeWebPageState extends State<HomeWebPage> {
+  // Flag to track whether the dialog is already shown.
+  bool _dialogShown = false;
+
+  @override
+  void initState() {
+    super.initState();
+    final homeBloc = BlocProvider.of<HomeBloc>(context);
+    homeBloc.add(FetchUserInfo());
+  }
+
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
+    final homeBloc = BlocProvider.of<HomeBloc>(context);
+
     return PopScope(
       canPop: false,
       onPopInvoked: (didPop) => false,
       child: BlocConsumer<HomeBloc, HomeState>(
-          listener: (BuildContext context, state) {},
+        listener: (BuildContext context, state) {
+          if (state is HomeInitial) {
+            if (homeBloc.user!.hasAcceptedWebAgreement == false && !_dialogShown) {
+              _dialogShown = true; // Set the flag to true to indicate the dialog is showing.
+              Future.delayed(const Duration(seconds: 1), () {
+                showDialog(
+                  context: context,
+                  barrierDismissible: false,
+                  builder: (BuildContext context) {
+                    return AgreementAndPrivacyDialog(
+                      terms: homeBloc.terms,
+                      policy: homeBloc.policy,
+                    );
+                  },
+                ).then((v) {
+                  _dialogShown = false;
+                  if (v != null) {
+                    homeBloc.add(ConfirmUserAgreementEvent());
+                    homeBloc.add(const FetchUserInfo());
+                  }
+                });
+              });
+            }
+          }
+        },
         builder: (context, state) {
-            final homeBloc = BlocProvider.of<HomeBloc>(context);
           return WebScaffold(
             enableMenuSidebar: false,
             appBarTitle: Row(
@@ -32,7 +75,10 @@ class HomeWebPage extends StatelessWidget {
             scaffoldBody: SizedBox(
               height: size.height,
               width: size.width,
-                child: Column(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     crossAxisAlignment: CrossAxisAlignment.center,
                     children: [
@@ -51,9 +97,9 @@ class HomeWebPage extends StatelessWidget {
                           height: size.height * 0.6,
                           width: size.width * 0.68,
                           child: GridView.builder(
-                          itemCount: 3, //8
+                            itemCount: 3, // Change this count if needed.
                             gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                            crossAxisCount: 4,
+                              crossAxisCount: 3, // Adjust as needed.
                               crossAxisSpacing: 20.0,
                               mainAxisSpacing: 20.0,
                               childAspectRatio: 1.5,
@@ -72,9 +118,12 @@ class HomeWebPage extends StatelessWidget {
                       ),
                     ],
                   ),
+                ],
+              ),
             ),
           );
         },
-        ));
+      ),
+    );
   }
 }

lib/pages/home/view/tree_page.dart

@@ -1,185 +1,185 @@
-import 'package:flutter/material.dart';
+// import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
+// import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:graphview/GraphView.dart';
+// import 'package:graphview/GraphView.dart';
-import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
+// import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
-import 'package:syncrow_web/pages/home/bloc/home_event.dart';
+// import 'package:syncrow_web/pages/home/bloc/home_event.dart';
-import 'package:syncrow_web/pages/home/bloc/home_state.dart';
+// import 'package:syncrow_web/pages/home/bloc/home_state.dart';
 
-class TreeWidget extends StatelessWidget {
+// class TreeWidget extends StatelessWidget {
-  const TreeWidget({super.key});
+//   const TreeWidget({super.key});
 
-  @override
+//   @override
-  Widget build(BuildContext context) {
+//   Widget build(BuildContext context) {
-    // final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
+//     // final HomeBloc homeBloc = BlocProvider.of<HomeBloc>(context);
-    String firstNodeName = '';
+//     String firstNodeName = '';
-    String secondNodeName = '';
+//     String secondNodeName = '';
 
-    return SafeArea(
+//     return SafeArea(
-      child: Container(
+//       child: Container(
-        padding: const EdgeInsets.all(24),
+//         padding: const EdgeInsets.all(24),
-        width: MediaQuery.sizeOf(context).width,
+//         width: MediaQuery.sizeOf(context).width,
-        height: MediaQuery.sizeOf(context).height,
+//         height: MediaQuery.sizeOf(context).height,
-        alignment: AlignmentDirectional.center,
+//         alignment: AlignmentDirectional.center,
-        child: Column(
+//         child: Column(
-          mainAxisSize: MainAxisSize.max,
+//           mainAxisSize: MainAxisSize.max,
-          crossAxisAlignment: CrossAxisAlignment.center,
+//           crossAxisAlignment: CrossAxisAlignment.center,
-          mainAxisAlignment: MainAxisAlignment.center,
+//           mainAxisAlignment: MainAxisAlignment.center,
-          children: [
+//           children: [
-            BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
+//             BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
-              if (state is HomeInitial) {
+//               if (state is HomeInitial) {
-                return Wrap(
+//                 return Wrap(
-                  children: [
+//                   children: [
-                    SizedBox(
+//                     SizedBox(
-                      width: 100,
+//                       width: 100,
-                      child: TextFormField(
+//                       child: TextFormField(
-                        decoration: const InputDecoration(
+//                         decoration: const InputDecoration(
-                            labelText: "Subtree separation"),
+//                             labelText: "Subtree separation"),
-                        onChanged: (text) {
+//                         onChanged: (text) {
-                          firstNodeName = text;
+//                           firstNodeName = text;
-                        },
+//                         },
-                      ),
+//                       ),
-                    ),
+//                     ),
-                    const SizedBox(
+//                     const SizedBox(
-                      width: 8,
+//                       width: 8,
-                    ),
+//                     ),
-                    Container(
+//                     Container(
-                      width: 100,
+//                       width: 100,
-                      child: TextFormField(
+//                       child: TextFormField(
-                        decoration: InputDecoration(labelText: "Node Name"),
+//                         decoration: InputDecoration(labelText: "Node Name"),
-                        onChanged: (text) {
+//                         onChanged: (text) {
-                          secondNodeName = text;
+//                           secondNodeName = text;
-                        },
+//                         },
-                      ),
+//                       ),
-                    ),
+//                     ),
-                    ElevatedButton(
+//                     ElevatedButton(
-                      onPressed: () {
+//                       onPressed: () {
-                        final node1 = Node.Id(firstNodeName);
+//                         final node1 = Node.Id(firstNodeName);
-                        final node2 = Node.Id(secondNodeName);
+//                         final node2 = Node.Id(secondNodeName);
-                        context.read<HomeBloc>().add(CreateNewNode(
+//                         context.read<HomeBloc>().add(CreateNewNode(
-                            sourceNode: node1, destinationNode: node2));
+//                             sourceNode: node1, destinationNode: node2));
-                      },
+//                       },
-                      child: Text("Add"),
+//                       child: Text("Add"),
-                    )
+//                     )
-                  ],
+//                   ],
-                );
+//                 );
-              }
+//               }
-              if (state is HomeUpdateTree) {
+//               if (state is HomeUpdateTree) {
-                return Expanded(
+//                 return Expanded(
-                  child: InteractiveViewer(
+//                   child: InteractiveViewer(
-                      constrained: false,
+//                       constrained: false,
-                      boundaryMargin: const EdgeInsets.all(100),
+//                       boundaryMargin: const EdgeInsets.all(100),
-                      minScale: 0.01,
+//                       minScale: 0.01,
-                      maxScale: 5.6,
+//                       maxScale: 5.6,
-                      child: GraphView(
+//                       child: GraphView(
-                        graph: state.graph,
+//                         graph: state.graph,
-                        algorithm: BuchheimWalkerAlgorithm(
+//                         algorithm: BuchheimWalkerAlgorithm(
-                            state.builder, TreeEdgeRenderer(state.builder)),
+//                             state.builder, TreeEdgeRenderer(state.builder)),
-                        paint: Paint()
+//                         paint: Paint()
-                          ..color = Colors.green
+//                           ..color = Colors.green
-                          ..strokeWidth = 1
+//                           ..strokeWidth = 1
-                          ..style = PaintingStyle.stroke,
+//                           ..style = PaintingStyle.stroke,
-                        builder: (Node node) {
+//                         builder: (Node node) {
-                          // I can decide what widget should be shown here based on the id
+//                           // I can decide what widget should be shown here based on the id
-                          var nodeName = node.key!.value;
+//                           var nodeName = node.key!.value;
-                          return rectangleWidget(nodeName, node, context);
+//                           return rectangleWidget(nodeName, node, context);
-                        },
+//                         },
-                      )),
+//                       )),
-                );
+//                 );
-              } else {
+//               } else {
-                return Container();
+//                 return Container();
-              }
+//               }
-            })
+//             })
-          ],
+//           ],
-        ),
+//         ),
-      ),
+//       ),
-    );
+//     );
-  }
+//   }
-}
+// }
 
-Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
+// Widget rectangleWidget(String text, Node node, BuildContext blocContext) {
-  String nodeName = '';
+//   String nodeName = '';
-  return InkWell(
+//   return InkWell(
-    onTap: () {
+//     onTap: () {
-      showDialog(
+//       showDialog(
-        context: blocContext,
+//         context: blocContext,
-        builder: (BuildContext context) {
+//         builder: (BuildContext context) {
-          return AlertDialog(
+//           return AlertDialog(
-            title: const Text('Add a child'),
+//             title: const Text('Add a child'),
-            content: TextField(
+//             content: TextField(
-              decoration:
+//               decoration:
-                  const InputDecoration(hintText: 'Enter your text here'),
+//                   const InputDecoration(hintText: 'Enter your text here'),
-              onChanged: (value) {
+//               onChanged: (value) {
-                nodeName = value;
+//                 nodeName = value;
-              },
+//               },
-            ),
+//             ),
-            actions: <Widget>[
+//             actions: <Widget>[
-              TextButton(
+//               TextButton(
-                onPressed: () {
+//                 onPressed: () {
-                  Navigator.of(context).pop();
+//                   Navigator.of(context).pop();
-                },
+//                 },
-                child: Text('Close'),
+//                 child: Text('Close'),
-              ),
+//               ),
-              TextButton(
+//               TextButton(
-                onPressed: () {
+//                 onPressed: () {
-                  if (nodeName.isNotEmpty) {
+//                   if (nodeName.isNotEmpty) {
-                    final newNode = Node.Id(nodeName);
+//                     final newNode = Node.Id(nodeName);
-                    blocContext.read<HomeBloc>().add(CreateNewNode(
+//                     blocContext.read<HomeBloc>().add(CreateNewNode(
-                        sourceNode: node, destinationNode: newNode));
+//                         sourceNode: node, destinationNode: newNode));
-                  }
+//                   }
-                  Navigator.of(context).pop();
+//                   Navigator.of(context).pop();
-                },
+//                 },
-                child: Text('Add'),
+//                 child: Text('Add'),
-              ),
+//               ),
-            ],
+//             ],
-          );
+//           );
-        },
+//         },
-      );
+//       );
-    },
+//     },
-    child: Container(
+//     child: Container(
-      width: MediaQuery.of(blocContext).size.width * 0.2,
+//       width: MediaQuery.of(blocContext).size.width * 0.2,
-      margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
+//       margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
-      padding: EdgeInsets.all(20.0),
+//       padding: EdgeInsets.all(20.0),
-      decoration: BoxDecoration(
+//       decoration: BoxDecoration(
-        color: Colors.white,
+//         color: Colors.white,
-        borderRadius: BorderRadius.circular(10.0),
+//         borderRadius: BorderRadius.circular(10.0),
-        boxShadow: [
+//         boxShadow: [
-          BoxShadow(
+//           BoxShadow(
-            color: Colors.grey.withOpacity(0.5),
+//             color: Colors.grey.withOpacity(0.5),
-            spreadRadius: 2,
+//             spreadRadius: 2,
-            blurRadius: 5,
+//             blurRadius: 5,
-            offset: Offset(0, 3), // changes position of shadow
+//             offset: Offset(0, 3), // changes position of shadow
-          ),
+//           ),
-        ],
+//         ],
-      ),
+//       ),
-      child: Row(
+//       child: Row(
-        children: [
+//         children: [
-          const SizedBox(
+//           const SizedBox(
-            child: Icon(
+//             child: Icon(
-              Icons.location_on,
+//               Icons.location_on,
-              color: Colors.blue,
+//               color: Colors.blue,
-              size: 40.0,
+//               size: 40.0,
-            ),
+//             ),
-          ),
+//           ),
-          const SizedBox(width: 10.0),
+//           const SizedBox(width: 10.0),
-          SizedBox(
+//           SizedBox(
-            child: Text(
+//             child: Text(
-              text,
+//               text,
-              style: const TextStyle(
+//               style: const TextStyle(
-                fontSize: 24.0,
+//                 fontSize: 24.0,
-                fontWeight: FontWeight.bold,
+//                 fontWeight: FontWeight.bold,
-              ),
+//               ),
-            ),
+//             ),
-          ),
+//           ),
-          const Spacer(),
+//           const Spacer(),
-          Container(
+//           Container(
-            child: const Icon(
+//             child: const Icon(
-              Icons.add_circle_outline,
+//               Icons.add_circle_outline,
-              color: Colors.grey,
+//               color: Colors.grey,
-              size: 24.0,
+//               size: 24.0,
-            ),
+//             ),
-          ),
+//           ),
-        ],
+//         ],
-      ),
+//       ),
-    ),
+//     ),
-  );
+//   );
-}
+// }

lib/pages/roles_and_permission/model/roles_user_model.dart

@@ -42,7 +42,9 @@ class RolesUserModel {
       invitedBy:
           json['invitedBy'].toString().toLowerCase().replaceAll("_", " "),
       phoneNumber: json['phoneNumber'],
-      jobTitle: json['jobTitle'].toString(),
+      jobTitle: json['jobTitle'] == null || json['jobTitle'] == " "
+          ? "_"
+          : json['jobTitle'],
       createdDate: json['createdDate'],
       createdTime: json['createdTime'],
     );

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

@@ -1,5 +1,6 @@
 import 'package:bloc/bloc.dart';
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/common/custom_dialog.dart';
 import 'package:syncrow_web/pages/roles_and_permission/model/edit_user_model.dart';
 import 'package:syncrow_web/pages/roles_and_permission/model/role_type_model.dart';
@@ -12,6 +13,9 @@ import 'package:syncrow_web/pages/spaces_management/all_spaces/model/space_model
 import 'package:syncrow_web/services/space_mana_api.dart';
 import 'package:syncrow_web/services/user_permission.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/constants/temp_const.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
 
 class UsersBloc extends Bloc<UsersEvent, UsersState> {
   UsersBloc() : super(UsersInitial()) {
@@ -74,18 +78,24 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
 
   Future<List<SpaceModel>> _fetchSpacesForCommunity(
       String communityUuid) async {
-    return await CommunitySpaceManagementApi().getSpaceHierarchy(communityUuid);
+    final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
+    return await CommunitySpaceManagementApi()
+        .getSpaceHierarchy(communityUuid, projectUuid);
   }
 
   List<TreeNode> updatedCommunities = [];
   List<TreeNode> spacesNodes = [];
-
+  List<String> communityIds = [];
   _onLoadCommunityAndSpaces(
       LoadCommunityAndSpacesEvent event, Emitter<UsersState> emit) async {
     try {
       emit(UsersLoadingState());
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
       List<CommunityModel> communities =
-          await CommunitySpaceManagementApi().fetchCommunities();
+          await CommunitySpaceManagementApi().fetchCommunities(projectUuid);
+      communityIds = communities.map((community) => community.uuid).toList();
       updatedCommunities = await Future.wait(
         communities.map((community) async {
           List<SpaceModel> spaces =
@@ -101,13 +111,19 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
           );
         }).toList(),
       );
+      originalCommunities = updatedCommunities;
       emit(const SpacesLoadedState());
-      return updatedCommunities;
     } catch (e) {
       emit(ErrorState('Error loading communities and spaces: $e'));
     }
   }
 
+// This variable holds the full original list.
+  List<TreeNode> originalCommunities = [];
+
+// This variable holds the working list that may be filtered.
+
+// Build tree nodes from your data model.
   List<TreeNode> _buildTreeNodes(List<SpaceModel> spaces) {
     return spaces.map((space) {
       List<TreeNode> childNodes =
@@ -123,12 +139,39 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
     }).toList();
   }
 
+// Optional helper method to deep clone a TreeNode.
+  TreeNode _cloneNode(TreeNode node) {
+    return TreeNode(
+      uuid: node.uuid,
+      title: node.title,
+      isChecked: node.isChecked,
+      isHighlighted: node.isHighlighted,
+      isExpanded: node.isExpanded,
+      children: node.children.map(_cloneNode).toList(),
+    );
+  }
+
+// Clone an entire list of tree nodes.
+  List<TreeNode> _cloneNodes(List<TreeNode> nodes) {
+    return nodes.map(_cloneNode).toList();
+  }
+
+// Your search event handler.
   void searchTreeNode(SearchAnode event, Emitter<UsersState> emit) {
     emit(UsersLoadingState());
+
+    // If the search term is empty, restore the original list.
     if (event.searchTerm!.isEmpty) {
+      // Clear any highlights on the restored copy.
+      updatedCommunities = _cloneNodes(originalCommunities);
       _clearHighlights(updatedCommunities);
     } else {
-      _searchAndHighlightNodes(updatedCommunities, event.searchTerm!);
+      // Start with a fresh clone of the original tree.
+      List<TreeNode> freshClone = _cloneNodes(originalCommunities);
+
+      _searchAndHighlightNodes(freshClone, event.searchTerm!);
+
+      updatedCommunities = _filterNodes(freshClone, event.searchTerm!);
     }
     emit(ChangeStatusSteps());
   }
@@ -155,6 +198,91 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
     return anyMatch;
   }
 
+  List<TreeNode> _filterNodes(List<TreeNode> nodes, String searchTerm) {
+    List<TreeNode> filteredNodes = [];
+    for (var node in nodes) {
+      bool isMatch =
+          node.title.toLowerCase().contains(searchTerm.toLowerCase());
+      List<TreeNode> filteredChildren = _filterNodes(node.children, searchTerm);
+      if (isMatch || filteredChildren.isNotEmpty) {
+        node.isHighlighted = isMatch;
+        node.children = filteredChildren;
+        filteredNodes.add(node);
+      }
+    }
+    return filteredNodes;
+  }
+
+  // List<TreeNode> _buildTreeNodes(List<SpaceModel> spaces) {
+  //   return spaces.map((space) {
+  //     List<TreeNode> childNodes =
+  //         space.children.isNotEmpty ? _buildTreeNodes(space.children) : [];
+  //     return TreeNode(
+  //       uuid: space.uuid!,
+  //       title: space.name,
+  //       isChecked: false,
+  //       isHighlighted: false,
+  //       isExpanded: childNodes.isNotEmpty,
+  //       children: childNodes,
+  //     );
+  //   }).toList();
+  // }
+
+  // void searchTreeNode(SearchAnode event, Emitter<UsersState> emit) {
+  //   emit(UsersLoadingState());
+  //   if (event.searchTerm!.isEmpty) {
+  //     _clearHighlights(updatedCommunities);
+  //   } else {
+  //     _searchAndHighlightNodes(updatedCommunities, event.searchTerm!);
+  //     updatedCommunities = _filterNodes(updatedCommunities, event.searchTerm!);
+  //   }
+  //   emit(ChangeStatusSteps());
+  // }
+
+  // void _clearHighlights(List<TreeNode> nodes) {
+  //   for (var node in nodes) {
+  //     node.isHighlighted = false;
+  //     if (node.children.isNotEmpty) {
+  //       _clearHighlights(node.children);
+  //     }
+  //   }
+  // }
+
+  // bool _searchAndHighlightNodes(List<TreeNode> nodes, String searchTerm) {
+  //   bool anyMatch = false;
+  //   for (var node in nodes) {
+  //     bool isMatch =
+  //         node.title.toLowerCase().contains(searchTerm.toLowerCase());
+  //     bool childMatch = _searchAndHighlightNodes(node.children, searchTerm);
+  //     node.isHighlighted = isMatch || childMatch;
+
+  //     anyMatch = anyMatch || node.isHighlighted;
+  //   }
+  //   return anyMatch;
+  // }
+
+  // List<TreeNode> _filterNodes(List<TreeNode> nodes, String searchTerm) {
+  //   List<TreeNode> filteredNodes = [];
+  //   for (var node in nodes) {
+  //     // Check if the current node's title contains the search term.
+  //     bool isMatch =
+  //         node.title.toLowerCase().contains(searchTerm.toLowerCase());
+
+  //     // Recursively filter the children.
+  //     List<TreeNode> filteredChildren = _filterNodes(node.children, searchTerm);
+
+  //     // If the current node is a match or any of its children are, include it.
+  //     if (isMatch || filteredChildren.isNotEmpty) {
+  //       // Optionally, update any properties (like isHighlighted) if you still need them.
+  //       node.isHighlighted = isMatch;
+  //       // Replace the children with the filtered ones.
+  //       node.children = filteredChildren;
+  //       filteredNodes.add(node);
+  //     }
+  //   }
+  //   return filteredNodes;
+  // }
+
   List<String> selectedIds = [];
 
   List<String> getSelectedIds(List<TreeNode> nodes) {
@@ -177,7 +305,6 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
     try {
       emit(UsersLoadingState());
       roles = await UserPermissionApi().fetchRoles();
-      //  add(PermissionEvent(roleUuid: roles.first.uuid));
       emit(RolePermissionInitial());
     } catch (e) {
       emit(ErrorState('Error loading communities and spaces: $e'));
@@ -208,10 +335,15 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
     return anyMatch;
   }
 
-  _sendInvitUser(SendInviteUsers event, Emitter<UsersState> emit) async {
+  void _sendInvitUser(SendInviteUsers event, Emitter<UsersState> emit) async {
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
       emit(UsersLoadingState());
-      List<String> selectedIds = getSelectedIds(updatedCommunities);
+      List<String> selectedIds = getSelectedIds(updatedCommunities)
+          .where((id) => !communityIds.contains(id))
+          .toList();
+
       bool res = await UserPermissionApi().sendInviteUser(
           email: emailController.text,
           firstName: firstNameController.text,
@@ -220,8 +352,9 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
           phoneNumber: phoneController.text,
           roleUuid: roleSelected,
           spaceUuids: selectedIds,
-      );
+          projectUuid: projectUuid);
-      if (res == true) {
+
+      if (res) {
         showCustomDialog(
           barrierDismissible: false,
           context: event.context,
@@ -251,7 +384,11 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
   _editInviteUser(EditInviteUsers event, Emitter<UsersState> emit) async {
     try {
       emit(UsersLoadingState());
-      List<String> selectedIds = getSelectedIds(updatedCommunities);
+      List<String> selectedIds = getSelectedIds(updatedCommunities)
+          .where((id) => !communityIds.contains(id))
+          .toList();
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
       bool res = await UserPermissionApi().editInviteUser(
           userId: event.userId,
           firstName: firstNameController.text,
@@ -260,7 +397,7 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
           phoneNumber: phoneController.text,
           roleUuid: roleSelected,
           spaceUuids: selectedIds,
-      );
+          projectUuid: projectUuid);
       if (res == true) {
         showCustomDialog(
           barrierDismissible: false,
@@ -365,8 +502,11 @@ class UsersBloc extends Bloc<UsersEvent, UsersState> {
     emit(UsersLoadingState());
 
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
       if (event.uuid?.isNotEmpty ?? false) {
-        final res = await UserPermissionApi().fetchUserById(event.uuid);
+        final res =
+            await UserPermissionApi().fetchUserById(event.uuid, projectUuid);
 
         if (res != null) {
           // Populate the text controllers

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.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';
@@ -34,8 +35,7 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
               return Dialog(
                   child: Container(
                 decoration: const BoxDecoration(
-                    color: Colors.white,
+                    color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20))),
-                    borderRadius: BorderRadius.all(Radius.circular(20))),
                 width: 900,
                 child: Column(
                   children: [
@@ -64,8 +64,7 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                                 children: [
                                   _buildStep1Indicator(1, "Basics", _blocRole),
                                   _buildStep2Indicator(2, "Spaces", _blocRole),
-                                  _buildStep3Indicator(
+                                  _buildStep3Indicator(3, "Role & Permissions", _blocRole),
-                                      3, "Role & Permissions", _blocRole),
                                 ],
                               ),
                             ),
@@ -113,15 +112,12 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                                 if (currentStep < 3) {
                                   currentStep++;
                                   if (currentStep == 2) {
-                                    _blocRole.add(
+                                    _blocRole.add(const CheckStepStatus(isEditUser: false));
-                                        CheckStepStatus(isEditUser: false));
                                   } else if (currentStep == 3) {
-                                    _blocRole
+                                    _blocRole.add(const CheckSpacesStepStatus());
-                                        .add(const CheckSpacesStepStatus());
                                   }
                                 } else {
-                                  _blocRole
+                                  _blocRole.add(SendInviteUsers(context: context));
-                                      .add(SendInviteUsers(context: context));
                                 }
                               });
                             },
@@ -129,11 +125,8 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                               currentStep < 3 ? "Next" : "Save",
                               style: TextStyle(
                                   color: (_blocRole.isCompleteSpaces == false ||
-                                              _blocRole.isCompleteBasics ==
+                                              _blocRole.isCompleteBasics == false ||
-                                                  false ||
+                                              _blocRole.isCompleteRolePermissions == false) &&
-                                              _blocRole
-                                                      .isCompleteRolePermissions ==
-                                                  false) &&
                                           currentStep == 3
                                       ? ColorsManager.grayColor
                                       : ColorsManager.secondaryColor),
@@ -151,11 +144,11 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
   Widget _getFormContent() {
     switch (currentStep) {
       case 1:
-        return BasicsView(
+        return const BasicsView(
           userId: '',
         );
       case 2:
-        return SpacesAccessView();
+        return const SpacesAccessView();
       case 3:
         return const RolesAndPermission();
       default:
@@ -172,7 +165,7 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
           bloc.add(const CheckSpacesStepStatus());
           currentStep = step;
           Future.delayed(const Duration(milliseconds: 500), () {
-            bloc.add(ValidateBasicsStep());
+            bloc.add(const ValidateBasicsStep());
           });
         });
 
@@ -204,12 +197,8 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step
+                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                        ? ColorsManager.blackColor
+                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
-                        : ColorsManager.greyColor,
-                    fontWeight: currentStep == step
-                        ? FontWeight.bold
-                        : FontWeight.normal,
                   ),
                 ),
               ],
@@ -236,10 +225,15 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
     return GestureDetector(
       onTap: () {
         setState(() {
+          bloc.add(const CheckStepStatus(isEditUser: false));
           currentStep = step;
-          bloc.add(CheckStepStatus(isEditUser: false));
+          Future.delayed(const Duration(milliseconds: 500), () {
+            bloc.add(const CheckStepStatus(isEditUser: false));
+          });
           if (step3 == 3) {
+            Future.delayed(const Duration(seconds: 1), () {
               bloc.add(const CheckRoleStepStatus());
+            });
           }
         });
       },
@@ -267,12 +261,8 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step
+                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                        ? ColorsManager.blackColor
+                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
-                        : ColorsManager.greyColor,
-                    fontWeight: currentStep == step
-                        ? FontWeight.bold
-                        : FontWeight.normal,
                   ),
                 ),
               ],
@@ -329,12 +319,8 @@ class _AddNewUserDialogState extends State<AddNewUserDialog> {
                   label,
                   style: TextStyle(
                     fontSize: 16,
-                    color: currentStep == step
+                    color: currentStep == step ? ColorsManager.blackColor : ColorsManager.greyColor,
-                        ? ColorsManager.blackColor
+                    fontWeight: currentStep == step ? FontWeight.bold : FontWeight.normal,
-                        : ColorsManager.greyColor,
-                    fontWeight: currentStep == step
-                        ? FontWeight.bold
-                        : FontWeight.normal,
                   ),
                 ),
               ],

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

@@ -4,7 +4,6 @@ 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';
@@ -47,7 +46,10 @@ class BasicsView extends StatelessWidget {
             ),
             Row(
               children: [
-                Expanded(
+                Flexible(
+                  child: SizedBox(
+                    // width: MediaQuery.of(context).size.width * 0.18,
+                    height: MediaQuery.of(context).size.width * 0.08,
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
@@ -74,14 +76,14 @@ class BasicsView extends StatelessWidget {
                         Padding(
                           padding: const EdgeInsets.all(8.0),
                           child: TextFormField(
-                          style:
+                            style: const TextStyle(
-                              const TextStyle(color: ColorsManager.blackColor),
+                                color: ColorsManager.blackColor),
-                          onChanged: (value) {
+                            // onChanged: (value) {
-                            Future.delayed(const Duration(milliseconds: 200),
+                            //   Future.delayed(const Duration(milliseconds: 200),
-                                () {
+                            //       () {
-                              _blocRole.add(ValidateBasicsStep());
+                            //     _blocRole.add(const ValidateBasicsStep());
-                            });
+                            //   });
-                          },
+                            // },
                             controller: _blocRole.firstNameController,
                             decoration: inputTextFormDeco(
                               hintText: "Enter first name",
@@ -102,8 +104,12 @@ class BasicsView extends StatelessWidget {
                       ],
                     ),
                   ),
+                ),
                 const SizedBox(width: 10),
-                Expanded(
+                Flexible(
+                  child: SizedBox(
+                    // width: MediaQuery.of(context).size.width * 0.18,
+                    height: MediaQuery.of(context).size.width * 0.08,
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
@@ -128,19 +134,18 @@ class BasicsView extends StatelessWidget {
                         Padding(
                           padding: const EdgeInsets.all(8.0),
                           child: TextFormField(
-                          onChanged: (value) {
+                            // onChanged: (value) {
-                            Future.delayed(const Duration(milliseconds: 200),
+                            //   Future.delayed(const Duration(milliseconds: 200),
-                                () {
+                            //       () {
-                              _blocRole.add(ValidateBasicsStep());
+                            //     _blocRole.add(ValidateBasicsStep());
-                            });
+                            //   });
-                          },
+                            // },
                             controller: _blocRole.lastNameController,
                             style: const TextStyle(color: Colors.black),
                             decoration:
                                 inputTextFormDeco(hintText: "Enter last name")
                                     .copyWith(
-                                      hintStyle: context
+                                        hintStyle: context.textTheme.bodyMedium
-                                          .textTheme.bodyMedium
                                             ?.copyWith(
                                                 fontWeight: FontWeight.w400,
                                                 fontSize: 12,
@@ -156,6 +161,7 @@ class BasicsView extends StatelessWidget {
                       ],
                     ),
                   ),
+                ),
               ],
             ),
             const SizedBox(height: 10),
@@ -186,13 +192,13 @@ class BasicsView extends StatelessWidget {
                   padding: const EdgeInsets.all(8.0),
                   child: TextFormField(
                     enabled: userId != '' ? false : true,
-                    onChanged: (value) {
+                    // onChanged: (value) {
-                      Future.delayed(const Duration(milliseconds: 200), () {
+                    //   Future.delayed(const Duration(milliseconds: 200), () {
-                        _blocRole.add(CheckStepStatus(
+                    //     _blocRole.add(CheckStepStatus(
-                            isEditUser: userId != '' ? false : true));
+                    //         isEditUser: userId != '' ? false : true));
-                        _blocRole.add(ValidateBasicsStep());
+                    //     _blocRole.add(ValidateBasicsStep());
-                      });
+                    //   });
-                    },
+                    // },
                     controller: _blocRole.emailController,
                     style: const TextStyle(color: ColorsManager.blackColor),
                     decoration: inputTextFormDeco(hintText: "name@example.com")
@@ -215,7 +221,7 @@ class BasicsView extends StatelessWidget {
                       if (_blocRole.checkEmailValid != "Valid email") {
                         return _blocRole.checkEmailValid;
                       }
-                      return null;
+                      // return null;
                     },
                   ),
                 ),

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.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';

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

@@ -11,7 +11,14 @@ class DeleteUserDialog extends StatefulWidget {
 }
 
 class _DeleteUserDialogState extends State<DeleteUserDialog> {
-  int currentStep = 1;
+  bool isLoading = false;
+  bool _isDisposed = false;
+
+  @override
+  void dispose() {
+    _isDisposed = true;
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -56,7 +63,7 @@ class _DeleteUserDialogState extends State<DeleteUserDialog> {
               Expanded(
                   child: InkWell(
                 onTap: () {
-                  Navigator.of(context).pop(true);
+                  Navigator.of(context).pop(false); // Return false if canceled
                 },
                 child: Container(
                     padding: const EdgeInsets.all(10),
@@ -76,7 +83,26 @@ class _DeleteUserDialogState extends State<DeleteUserDialog> {
               )),
               Expanded(
                   child: InkWell(
-                onTap: widget.onTapDelete,
+                onTap: isLoading
+                    ? null
+                    : () async {
+                        setState(() {
+                          isLoading = true;
+                        });
+
+                        try {
+                          if (widget.onTapDelete != null) {
+                            await widget.onTapDelete!();
+                          }
+                        } finally {
+                          if (!_isDisposed) {
+                            setState(() {
+                              isLoading = false;
+                            });
+                          }
+                        }
+                        Navigator.of(context).pop(true);
+                      },
                 child: Container(
                     padding: const EdgeInsets.all(10),
                     decoration: const BoxDecoration(
@@ -91,8 +117,17 @@ class _DeleteUserDialogState extends State<DeleteUserDialog> {
                         ),
                       ),
                     ),
-                    child: const Center(
+                    child: Center(
-                        child: Text(
+                        child: isLoading
+                            ? const SizedBox(
+                                height: 20,
+                                width: 20,
+                                child: CircularProgressIndicator(
+                                  color: ColorsManager.red,
+                                  strokeWidth: 2.0,
+                                ),
+                              )
+                            : const Text(
                                 'Delete',
                                 style: TextStyle(
                                   color: ColorsManager.red,

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

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.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';

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

@@ -128,7 +128,7 @@ class _PermissionManagementState extends State<PermissionManagement> {
                 ),
                 const SizedBox(width: 8),
                 Text(
-                  option.title,
+                  ' ${option.title.isNotEmpty ? option.title[0].toUpperCase() : ''}${option.title.substring(1)}',
                   style: context.textTheme.bodyMedium?.copyWith(
                       fontWeight: FontWeight.w700,
                       fontSize: 12,
@@ -184,7 +184,7 @@ class _PermissionManagementState extends State<PermissionManagement> {
                         ),
                         const SizedBox(width: 8),
                         Text(
-                          subOption.title,
+                          ' ${subOption.title.isNotEmpty ? subOption.title[0].toUpperCase() : ''}${subOption.title.substring(1)}',
                           style: context.textTheme.bodyMedium?.copyWith(
                               fontWeight: FontWeight.w700,
                               fontSize: 12,
@@ -246,7 +246,7 @@ class _PermissionManagementState extends State<PermissionManagement> {
                               ),
                               const SizedBox(width: 8),
                               Text(
-                                child.title,
+                                ' ${child.title.isNotEmpty ? child.title[0].toUpperCase() : ''}${child.title.substring(1)}',
                                 style: context.textTheme.bodyMedium?.copyWith(
                                     fontWeight: FontWeight.w400,
                                     fontSize: 12,

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

@@ -5,94 +5,91 @@ import 'package:syncrow_web/utils/style.dart';
 
 Future<void> showPopUpFilterMenu({
   required BuildContext context,
-  Function()? onSortAtoZ,
+  required Function(String value) onSortAtoZ,
-  Function()? onSortZtoA,
+  required Function(String value) onSortZtoA,
   Function()? cancelButton,
   required Map<String, bool> checkboxStates,
   required RelativeRect position,
   Function()? onOkPressed,
   List<String>? list,
+  String? isSelected,
 }) async {
-
-
   await showMenu(
     context: context,
     position: position,
-    
-  
     color: ColorsManager.whiteColors,
     shape: const RoundedRectangleBorder(
       borderRadius: BorderRadius.all(Radius.circular(10)),
     ),
     items: <PopupMenuEntry>[
       PopupMenuItem(
-        onTap: onSortAtoZ,
+        enabled: false,
+        child: StatefulBuilder(
+          builder: (context, setState) {
+            return Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                SizedBox(
                   child: ListTile(
+                    onTap: () {
+                      setState(() {
+                        if (isSelected == 'Asc') {
+                          isSelected = null;
+                          onSortAtoZ.call('');
+                        } else {
+                          onSortAtoZ.call('Asc');
+                          isSelected = 'Asc';
+                        }
+                      });
+                    },
                     leading: Image.asset(
                       Assets.AtoZIcon,
                       width: 25,
                     ),
-          title: const Text(
+                    title: Text(
                       "Sort A to Z",
-            style: TextStyle(color: Colors.blueGrey),
+                      style: TextStyle(
+                          color: isSelected == "Asc"
+                              ? ColorsManager.blackColor
+                              : ColorsManager.grayColor),
                     ),
                   ),
                 ),
-      PopupMenuItem(
+                ListTile(
-        onTap: onSortZtoA,
+                  onTap: () {
-        child: ListTile(
+                    setState(() {
+                      if (isSelected == 'Desc') {
+                        isSelected = null;
+                        onSortZtoA.call('');
+                      } else {
+                        onSortZtoA.call('Desc');
+                        isSelected = 'Desc';
+                      }
+                    });
+                  },
                   leading: Image.asset(
                     Assets.ZtoAIcon,
                     width: 25,
                   ),
-          title: const Text(
+                  title: Text(
                     "Sort Z to A",
-            style: TextStyle(color: Colors.blueGrey),
+                    style: TextStyle(
+                        color: isSelected == "Desc"
+                            ? ColorsManager.blackColor
+                            : ColorsManager.grayColor),
                   ),
                 ),
-      ),
+                const Divider(),
-      const PopupMenuDivider(),
+                const Text(
-      const PopupMenuItem(
+                  "Filter by ",
-          child: Text(
-        "Filter by Status",
                   style: TextStyle(fontWeight: FontWeight.bold),
-      )
-          // Container(
-          //   decoration: containerDecoration.copyWith(
-          //       boxShadow: [],
-          //       borderRadius: const BorderRadius.only(
-          //           topLeft: Radius.circular(10), topRight: Radius.circular(10))),
-          //   child: Padding(
-          //     padding: const EdgeInsets.all(8.0),
-          //     child: TextFormField(
-          //       onChanged: onTextFieldChanged,
-          //       style: const TextStyle(color: Colors.black),
-          //       decoration: textBoxDecoration(radios: 15)!.copyWith(
-          //         fillColor: ColorsManager.whiteColors,
-          //         errorStyle: const TextStyle(height: 0),
-          //         hintStyle: context.textTheme.titleSmall?.copyWith(
-          //           color: Colors.grey,
-          //           fontSize: 12,
-          //         ),
-          //         hintText: 'Search',
-          //         suffixIcon: SizedBox(
-          //           child: SvgPicture.asset(
-          //             Assets.searchIconUser,
-          //             fit: BoxFit.none,
-          //           ),
-          //         ),
-          //       ),
-          //       // "Filter by Status",
-          //       // style: TextStyle(fontWeight: FontWeight.bold),
-          //     ),
-          //   ),
-          // ),
                 ),
-      PopupMenuItem(
+                Container(
-        child: Container(
                   decoration: containerDecoration.copyWith(
                       boxShadow: [],
                       borderRadius: const BorderRadius.only(
+                          topLeft: Radius.circular(10),
+                          topRight: Radius.circular(10),
                           bottomLeft: Radius.circular(10),
                           bottomRight: Radius.circular(10))),
                   padding: const EdgeInsets.all(10),
@@ -105,22 +102,33 @@ Future<void> showPopUpFilterMenu({
                       itemCount: list?.length ?? 0,
                       itemBuilder: (context, index) {
                         final item = list![index];
-                return CheckboxListTile(
+                        return Row(
-                  dense: true,
+                          children: [
-                  title: Text(item),
+                            Checkbox(
                               value: checkboxStates[item],
                               onChanged: (bool? newValue) {
                                 checkboxStates[item] = newValue ?? false;
                                 (context as Element).markNeedsBuild();
                               },
+                            ),
+                            Text(
+                              item,
+                              style: TextStyle(color: ColorsManager.grayColor),
+                            ),
+                          ],
                         );
                       },
                     ),
                   ),
                 ),
+                const SizedBox(
+                  height: 10,
                 ),
-      PopupMenuItem(
+                const Divider(),
-        child: Row(
+                const SizedBox(
+                  height: 10,
+                ),
+                Row(
                   crossAxisAlignment: CrossAxisAlignment.center,
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
@@ -141,6 +149,13 @@ Future<void> showPopUpFilterMenu({
                     ),
                   ],
                 ),
+                const SizedBox(
+                  height: 10,
+                ),
+              ],
+            );
+          },
+        ),
       ),
     ],
   );

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

@@ -52,14 +52,16 @@ class _RoleDropdownState extends State<RoleDropdown> {
           SizedBox(
             child: DropdownButtonFormField<String>(
               dropdownColor: ColorsManager.whiteColors,
-              alignment: Alignment.center,
+              // alignment: Alignment.,
               focusColor: Colors.white,
               autofocus: true,
               value: selectedRole.isNotEmpty ? selectedRole : null,
               items: widget.bloc!.roles.map((role) {
                 return DropdownMenuItem<String>(
                   value: role.uuid,
-                  child: Text(role.type),
+                  child: Text(
+                    ' ${role.type.isNotEmpty ? role.type[0].toUpperCase() : ''}${role.type.substring(1)}',
+                  ),
                 );
               }).toList(),
               onChanged: (value) {

lib/pages/roles_and_permission/users_page/users_table/bloc/user_table_bloc.dart

@@ -1,10 +1,13 @@
 import 'dart:async';
-import 'package:bloc/bloc.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/roles_and_permission/model/roles_user_model.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/users_table/bloc/user_table_event.dart';
 import 'package:syncrow_web/pages/roles_and_permission/users_page/users_table/bloc/user_table_state.dart';
 import 'package:syncrow_web/services/user_permission.dart';
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
 
 class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
   UserTableBloc() : super(TableInitial()) {
@@ -27,7 +30,16 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
   int currentPage = 1;
   List<RolesUserModel> users = [];
   List<RolesUserModel> initialUsers = [];
+
+  List<RolesUserModel> totalUsersCount = [];
   String currentSortOrder = '';
+
+  String currentSortJopTitle = '';
+  String currentSortRole = '';
+  String currentSortCreatedDate = '';
+  String currentSortStatus = '';
+  String currentSortCreatedBy = '';
+
   String currentSortOrderDate = '';
   List<String> roleTypes = [];
   List<String> jobTitle = [];
@@ -37,12 +49,12 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
   Future<void> _getUsers(GetUsers event, Emitter<UserTableState> emit) async {
     emit(UsersLoadingState());
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
       roleTypes.clear();
       jobTitle.clear();
       createdBy.clear();
-      // deActivate.clear();
+      users = await UserPermissionApi().fetchUsers(projectUuid);
-      users = await UserPermissionApi().fetchUsers();
-
       users.sort((a, b) {
         final dateA = _parseDateTime(a.createdDate);
         final dateB = _parseDateTime(b.createdDate);
@@ -57,15 +69,13 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
       for (var user in users) {
         createdBy.add(user.invitedBy.toString());
       }
-      // for (var user in users) {
-      //   deActivate.add(user.status.toString());
-      // }
       initialUsers = List.from(users);
       roleTypes = roleTypes.toSet().toList();
       jobTitle = jobTitle.toSet().toList();
       createdBy = createdBy.toSet().toList();
-      // deActivate = deActivate.toSet().toList();
       _handlePageChange(ChangePage(1), emit);
+      totalUsersCount = initialUsers;
+      add(ChangePage(currentPage));
       emit(UsersLoadedState(users: users));
     } catch (e) {
       emit(ErrorState(e.toString()));
@@ -91,31 +101,13 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
   Future<void> _changeUserStatus(
       ChangeUserStatus event, Emitter<UserTableState> emit) async {
     try {
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
       emit(UsersLoadingState());
-      bool res = await UserPermissionApi().changeUserStatusById(
+      bool res = await UserPermissionApi().changeUserStatusById(event.userId,
-          event.userId, event.newStatus == "disabled" ? true : false);
+          event.newStatus == "disabled" ? false : true, projectUuid);
       if (res == true) {
         add(const GetUsers());
-        // users = users.map((user) {
-        //   if (user.uuid == event.userId) {
-        //     return RolesUserModel(
-        //       uuid: user.uuid,
-        //       createdAt: user.createdAt,
-        //       email: user.email,
-        //       firstName: user.firstName,
-        //       lastName: user.lastName,
-        //       roleType: user.roleType,
-        //       status: event.newStatus,
-        //       isEnabled: event.newStatus == "disabled" ? false : true,
-        //       invitedBy: user.invitedBy,
-        //       phoneNumber: user.phoneNumber,
-        //       jobTitle: user.jobTitle,
-        //       createdDate: user.createdDate,
-        //       createdTime: user.createdTime,
-        //     );
-        //   }
-        //   return user;
-        // }).toList();
       }
       emit(UsersLoadedState(users: users));
     } catch (e) {
@@ -125,37 +117,57 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
 
   void _toggleSortUsersByNameAsc(
       SortUsersByNameAsc event, Emitter<UserTableState> emit) {
+    selectedRoles.clear();
+    selectedJobTitles.clear();
+    selectedCreatedBy.clear();
+    selectedStatuses.clear();
     if (currentSortOrder == "Asc") {
       emit(UsersLoadingState());
       currentSortOrder = "";
       users = List.from(users);
-      emit(UsersLoadedState(users: users));
     } else {
       emit(UsersLoadingState());
       currentSortOrder = "Asc";
-      users.sort((a, b) => a.firstName!.compareTo(b.firstName!));
+      users.sort((a, b) => a.firstName
-      emit(UsersLoadedState(users: users));
+          .toString()
+          .toLowerCase()
+          .compareTo(b.firstName.toString().toLowerCase()));
     }
+    currentSortJopTitle = '';
+    currentSortCreatedDate = '';
+    currentSortStatus = '';
+    currentSortCreatedBy = '';
+    emit(UsersLoadedState(users: users));
   }
 
   void _toggleSortUsersByNameDesc(
       SortUsersByNameDesc event, Emitter<UserTableState> emit) {
+    selectedRoles.clear();
+    selectedJobTitles.clear();
+    selectedCreatedBy.clear();
+    selectedStatuses.clear();
     if (currentSortOrder == "Desc") {
       emit(UsersLoadingState());
       currentSortOrder = "";
-      users = List.from(initialUsers); // Reset to saved initial state
+      users = List.from(initialUsers);
-      emit(UsersLoadedState(users: users));
     } else {
-      // Sort descending
       emit(UsersLoadingState());
       currentSortOrder = "Desc";
       users.sort((a, b) => b.firstName!.compareTo(a.firstName!));
-      emit(UsersLoadedState(users: users));
     }
+    currentSortJopTitle = '';
+    currentSortCreatedDate = '';
+    currentSortStatus = '';
+    currentSortCreatedBy = '';
+    emit(UsersLoadedState(users: users));
   }
 
   void _toggleSortUsersByDateNewestToOldest(
       DateNewestToOldestEvent event, Emitter<UserTableState> emit) {
+    selectedRoles.clear();
+    selectedJobTitles.clear();
+    selectedCreatedBy.clear();
+    selectedStatuses.clear();
     if (currentSortOrderDate == "NewestToOldest") {
       emit(UsersLoadingState());
       currentSortOrder = "";
@@ -164,6 +176,7 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
       emit(UsersLoadedState(users: users));
     } else {
       emit(UsersLoadingState());
+      currentSortOrder = "NewestToOldest";
       users.sort((a, b) {
         final dateA = _parseDateTime(a.createdDate);
         final dateB = _parseDateTime(b.createdDate);
@@ -175,6 +188,10 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
 
   void _toggleSortUsersByDateOldestToNewest(
       DateOldestToNewestEvent event, Emitter<UserTableState> emit) {
+    selectedRoles.clear();
+    selectedJobTitles.clear();
+    selectedCreatedBy.clear();
+    selectedStatuses.clear();
     if (currentSortOrderDate == "OldestToNewest") {
       emit(UsersLoadingState());
       currentSortOrder = "";
@@ -188,6 +205,7 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
         final dateB = _parseDateTime(b.createdDate);
         return dateA.compareTo(dateB);
       });
+      currentSortOrder = "OldestToNewest";
       emit(UsersLoadedState(users: users));
     }
   }
@@ -207,6 +225,7 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
   Future<void> _searchUsers(
       SearchUsers event, Emitter<UserTableState> emit) async {
     try {
+      emit(TableSearch());
       final query = event.query.toLowerCase();
       final filteredUsers = initialUsers.where((user) {
         final fullName = "${user.firstName} ${user.lastName}".toLowerCase();
@@ -235,7 +254,8 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
   }
 
   void _handlePageChange(ChangePage event, Emitter<UserTableState> emit) {
-    const itemsPerPage = 10;
+    currentPage = event.pageNumber;
+    const itemsPerPage = 20;
     final startIndex = (event.pageNumber - 1) * itemsPerPage;
     final endIndex = startIndex + itemsPerPage;
     if (startIndex >= users.length) {
@@ -256,48 +276,132 @@ class UserTableBloc extends Bloc<UserTableEvent, UserTableState> {
 
   void _filterUsersByRole(
       FilterUsersByRoleEvent event, Emitter<UserTableState> emit) {
-    selectedRoles = event.selectedRoles.toSet();
+    selectedRoles = event.selectedRoles!.toSet();
 
     final filteredUsers = initialUsers.where((user) {
       if (selectedRoles.isEmpty) return true;
       return selectedRoles.contains(user.roleType);
     }).toList();
 
+    if (event.sortOrder == "Asc") {
+      currentSortOrder = "Asc";
+      filteredUsers.sort((a, b) => a.firstName
+          .toString()
+          .toLowerCase()
+          .compareTo(b.firstName.toString().toLowerCase()));
+    } else if (event.sortOrder == "Desc") {
+      currentSortOrder = "Desc";
+      filteredUsers.sort((a, b) => b.firstName!.compareTo(a.firstName!));
+    } else {}
+    currentSortOrder = "";
+    currentSortCreatedDate = '';
+    currentSortStatus = '';
+    currentSortCreatedBy = '';
+    currentSortJopTitle = '';
+    currentSortOrderDate = "";
+
+    totalUsersCount = filteredUsers;
+
     emit(UsersLoadedState(users: filteredUsers));
   }
 
   void _filterUsersByJobTitle(
       FilterUsersByJobEvent event, Emitter<UserTableState> emit) {
-    selectedJobTitles = event.selectedJob.toSet();
+    selectedJobTitles = event.selectedJob!.toSet();
-
+    emit(UsersLoadingState());
     final filteredUsers = initialUsers.where((user) {
       if (selectedJobTitles.isEmpty) return true;
       return selectedJobTitles.contains(user.jobTitle);
     }).toList();
+    if (event.sortOrder == "Asc") {
+      currentSortOrder = "Asc";
+      filteredUsers.sort((a, b) => a.firstName
+          .toString()
+          .toLowerCase()
+          .compareTo(b.firstName.toString().toLowerCase()));
+    } else if (event.sortOrder == "Desc") {
+      currentSortOrder = "Desc";
+      filteredUsers.sort((a, b) => b.firstName!.compareTo(a.firstName!));
+    } else {}
+    currentSortOrder = "";
+    currentSortCreatedDate = '';
+    currentSortStatus = '';
+    currentSortCreatedBy = '';
+    currentSortRole = '';
+    currentSortOrderDate = "";
+
+    totalUsersCount = filteredUsers;
 
     emit(UsersLoadedState(users: filteredUsers));
   }
 
   void _filterUsersByCreated(
       FilterUsersByCreatedEvent event, Emitter<UserTableState> emit) {
-    selectedCreatedBy = event.selectedCreatedBy.toSet();
+    selectedCreatedBy = event.selectedCreatedBy!.toSet();
 
     final filteredUsers = initialUsers.where((user) {
       if (selectedCreatedBy.isEmpty) return true;
       return selectedCreatedBy.contains(user.invitedBy);
     }).toList();
 
+    if (event.sortOrder == "Asc") {
+      currentSortOrder = "Asc";
+      filteredUsers.sort((a, b) => a.firstName
+          .toString()
+          .toLowerCase()
+          .compareTo(b.firstName.toString().toLowerCase()));
+    } else if (event.sortOrder == "Desc") {
+      currentSortOrder = "Desc";
+      filteredUsers.sort((a, b) => b.firstName!.compareTo(a.firstName!));
+    } else {}
+    currentSortOrder = '';
+    currentSortRole = '';
+    currentSortCreatedDate = '';
+    currentSortStatus = '';
+    currentSortOrderDate = "";
+
+    totalUsersCount = filteredUsers;
+
     emit(UsersLoadedState(users: filteredUsers));
   }
 
   void _filterUserStatus(
       FilterUsersByDeActevateEvent event, Emitter<UserTableState> emit) {
-    selectedStatuses = event.selectedActivate.toSet();
+    selectedStatuses = event.selectedActivate!.toSet();
 
     final filteredUsers = initialUsers.where((user) {
       if (selectedStatuses.isEmpty) return true;
-      return selectedStatuses.contains(user.status);
+
+      return selectedStatuses.any((status) {
+        final userStatus = user.status?.toLowerCase() ?? '';
+        switch (status.toLowerCase()) {
+          case 'active':
+            return user.isEnabled == true && userStatus != 'invited';
+          case 'disabled':
+            return user.isEnabled == false;
+          case 'invited':
+            return userStatus == 'invited';
+          default:
+            return false;
+        }
+      });
     }).toList();
+    if (event.sortOrder == "Asc") {
+      currentSortOrder = "Asc";
+      filteredUsers.sort((a, b) => a.firstName
+          .toString()
+          .toLowerCase()
+          .compareTo(b.firstName.toString().toLowerCase()));
+    } else if (event.sortOrder == "Desc") {
+      currentSortOrder = "Desc";
+      filteredUsers.sort((a, b) => b.firstName!.compareTo(a.firstName!));
+      totalUsersCount = filteredUsers;
+    } else {}
+    currentSortOrder = '';
+    currentSortRole = '';
+    currentSortCreatedDate = '';
+    currentSortCreatedBy = '';
+    currentSortOrderDate = "";
 
     emit(UsersLoadedState(users: filteredUsers));
   }

lib/pages/roles_and_permission/users_page/users_table/bloc/user_table_event.dart

@@ -89,35 +89,36 @@ class DeleteUserEvent extends UserTableEvent {
 }
 
 class FilterUsersByRoleEvent extends UserTableEvent {
-  final List<String> selectedRoles;
+  final List<String>? selectedRoles;
+  final String? sortOrder;
 
-  FilterUsersByRoleEvent(this.selectedRoles);
+  const FilterUsersByRoleEvent({this.selectedRoles, this.sortOrder});
-  @override
+  List<Object?> get props => [selectedRoles, sortOrder];
-  List<Object?> get props => [selectedRoles];
 }
 
 class FilterUsersByJobEvent extends UserTableEvent {
-  final List<String> selectedJob;
+  final List<String>? selectedJob;
+  final String? sortOrder;
 
-  FilterUsersByJobEvent(this.selectedJob);
+  const FilterUsersByJobEvent({this.selectedJob, this.sortOrder});
-  @override
+  List<Object?> get props => [selectedJob, sortOrder];
-  List<Object?> get props => [selectedJob];
 }
 
 class FilterUsersByCreatedEvent extends UserTableEvent {
-  final List<String> selectedCreatedBy;
+  final List<String>? selectedCreatedBy;
 
-  FilterUsersByCreatedEvent(this.selectedCreatedBy);
+  final String? sortOrder;
-  @override
+
-  List<Object?> get props => [selectedCreatedBy];
+  const FilterUsersByCreatedEvent({this.selectedCreatedBy, this.sortOrder});
+  List<Object?> get props => [selectedCreatedBy, sortOrder];
 }
 
 class FilterUsersByDeActevateEvent extends UserTableEvent {
-  final List<String> selectedActivate;
+  final List<String>? selectedActivate;
+  final String? sortOrder;
 
-  FilterUsersByDeActevateEvent(this.selectedActivate);
+  const FilterUsersByDeActevateEvent({this.selectedActivate, this.sortOrder});
-  @override
+  List<Object?> get props => [selectedActivate, sortOrder];
-  List<Object?> get props => [selectedActivate];
 }
 
 class FilterOptionsEvent extends UserTableEvent {

lib/pages/roles_and_permission/users_page/users_table/bloc/user_table_state.dart

@@ -9,7 +9,10 @@ final class TableInitial extends UserTableState {
   @override
   List<Object> get props => [];
 }
-
+final class TableSearch extends UserTableState {
+  @override
+  List<Object> get props => [];
+}
 final class RolesLoadingState extends UserTableState {
   @override
   List<Object> get props => [];

lib/pages/roles_and_permission/users_page/users_table/view/creation_date_filter.dart

@@ -12,7 +12,7 @@ Future<void> showDateFilterMenu({
       Overlay.of(context).context.findRenderObject() as RenderBox;
   final RelativeRect position = RelativeRect.fromRect(
     Rect.fromLTRB(
-      overlay.size.width / 2,
+      overlay.size.width / 3,
       240,
       0,
       overlay.size.height,
@@ -40,7 +40,6 @@ Future<void> showDateFilterMenu({
           ),
           title: Text(
             "Sort from newest to oldest",
-            // style: context.textTheme.bodyMedium,
             style: TextStyle(
                 color: isSelected == "NewestToOldest"
                     ? Colors.black
@@ -65,9 +64,5 @@ Future<void> showDateFilterMenu({
         ),
       ),
     ],
-  ).then((value) {
+  ).then((value) {});
-    // setState(() {
-    //   _isDropdownOpen = false;
-    // });
-  });
 }

lib/pages/roles_and_permission/users_page/users_table/view/de_activate_filter.dart

@@ -40,7 +40,6 @@ Future<void> showDeActivateFilterMenu({
           ),
           title: Text(
             "Sort A to Z",
-            // style: context.textTheme.bodyMedium,
             style: TextStyle(
                 color: isSelected == "NewestToOldest"
                     ? Colors.black
@@ -65,9 +64,5 @@ Future<void> showDeActivateFilterMenu({
         ),
       ),
     ],
-  ).then((value) {
+  ).then((value) {});
-    // setState(() {
-    //   _isDropdownOpen = false;
-    // });
-  });
 }

lib/pages/roles_and_permission/users_page/users_table/view/name_filter.dart

@@ -12,7 +12,7 @@ Future<void> showNameMenu({
       Overlay.of(context).context.findRenderObject() as RenderBox;
   final RelativeRect position = RelativeRect.fromRect(
     Rect.fromLTRB(
-      overlay.size.width / 25,
+      overlay.size.width / 35,
       240,
       0,
       overlay.size.height,
@@ -40,7 +40,6 @@ Future<void> showNameMenu({
           ),
           title: Text(
             "Sort A to Z",
-            // style: context.textTheme.bodyMedium,
             style: TextStyle(
                 color: isSelected == "Asc" ? Colors.black : Colors.blueGrey),
           ),
@@ -61,9 +60,5 @@ Future<void> showNameMenu({
         ),
       ),
     ],
-  ).then((value) {
+  ).then((value) {});
-    // setState(() {
-    //   _isDropdownOpen = false;
-    // });
-  });
 }

lib/pages/roles_and_permission/users_page/users_table/view/user_table.dart

@@ -1,356 +1,264 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/style.dart';
 
-class DynamicTableScreen extends StatefulWidget {
+class _HeaderColumn extends StatelessWidget {
-  final List<String> titles;
+  final String title;
-  final List<List<Widget>> rows;
+  final double width;
-  final void Function(int columnIndex)? onFilter;
+  final bool showFilter;
+  final VoidCallback? onFilter;
+  final Function(double) onResize;
 
-  DynamicTableScreen(
+  const _HeaderColumn({
-      {required this.titles, required this.rows, required this.onFilter});
+    required this.title,
-
+    required this.width,
-  @override
+    required this.showFilter,
-  _DynamicTableScreenState createState() => _DynamicTableScreenState();
+    required this.onResize,
-}
+    this.onFilter,
-
+    Key? key,
-class _DynamicTableScreenState extends State<DynamicTableScreen>
+  }) : super(key: key);
-    with WidgetsBindingObserver {
-  late List<double> columnWidths;
-
-  // @override
-  // void initState() {
-  //   super.initState();
-  //   // Initialize column widths with default sizes proportional to the screen width
-  //   // Assigning placeholder values here. The actual sizes will be updated in `build`.
-  // }
-  @override
-  void initState() {
-    super.initState();
-    setState(() {
-      columnWidths = List<double>.filled(widget.titles.length, 150.0);
-    });
-    WidgetsBinding.instance.addObserver(this);
-  }
-
-  @override
-  void dispose() {
-    WidgetsBinding.instance.removeObserver(this);
-    super.dispose();
-  }
-
-  @override
-  void didChangeMetrics() {
-    super.didChangeMetrics();
-    // Screen size might have changed
-    final newScreenWidth = MediaQuery.of(context).size.width;
-    setState(() {
-      columnWidths = List<double>.generate(widget.titles.length, (index) {
-        if (index == 1) {
-          return newScreenWidth *
-              0.12; // 20% of screen width for the second column
-        } else if (index == 9) {
-          return newScreenWidth *
-              0.2; // 25% of screen width for the tenth column
-        }
-        return newScreenWidth *
-            0.09; // Default to 10% of screen width for other columns
-      });
-    });
-  }
 
   @override
   Widget build(BuildContext context) {
-    final screenWidth = MediaQuery.of(context).size.width;
+    return MouseRegion(
-
+      cursor: SystemMouseCursors.resizeColumn,
-    // Initialize column widths if they are still set to placeholder values
+      child: GestureDetector(
-    if (columnWidths.every((width) => width == 120.0)) {
+        onHorizontalDragUpdate: (details) => onResize(details.delta.dx),
-      columnWidths = List<double>.generate(widget.titles.length, (index) {
-        if (index == 1) {
-          return screenWidth * 0.11;
-        } else if (index == 9) {
-          return screenWidth * 0.2;
-        }
-        return screenWidth * 0.11;
-      });
-      setState(() {});
-    }
-    return Container(
-      child: SingleChildScrollView(
-        clipBehavior: Clip.none,
-        scrollDirection: Axis.horizontal,
         child: Container(
-          decoration: containerDecoration.copyWith(
+          width: width,
-              color: ColorsManager.whiteColors,
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
-              borderRadius: const BorderRadius.all(Radius.circular(20))),
+          decoration: const BoxDecoration(
-          child: FittedBox(
+            border: Border(right: BorderSide(color: ColorsManager.boxDivider)),
-            child: Column(
+          ),
-              children: [
-                // Header Row with Resizable Columns
-                Container(
-                  width: MediaQuery.of(context).size.width,
-                  decoration: containerDecoration.copyWith(
-                      color: ColorsManager.circleRolesBackground,
-                      borderRadius: const BorderRadius.only(
-                          topLeft: Radius.circular(15),
-                          topRight: Radius.circular(15))),
           child: Row(
-                    children: List.generate(widget.titles.length, (index) {
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      return Row(
-                        mainAxisAlignment: MainAxisAlignment.start,
             children: [
-                          FittedBox(
+              Expanded(
-                            child: Container(
-                              padding: const EdgeInsets.only(left: 5, right: 5),
-                              width: columnWidths[index],
-                              child: Row(
-                                mainAxisAlignment:
-                                    MainAxisAlignment.spaceBetween,
-                                crossAxisAlignment: CrossAxisAlignment.center,
-                                children: [
-                                  SizedBox(
                 child: Text(
-                                      widget.titles[index],
+                  title,
                   maxLines: 2,
-                                      style: const TextStyle(
                   overflow: TextOverflow.ellipsis,
+                  style: const TextStyle(
                     fontWeight: FontWeight.w400,
                     fontSize: 13,
                     color: ColorsManager.grayColor,
                   ),
                 ),
               ),
-                                  if (index != 1 &&
+              if (showFilter)
-                                      index != 9 &&
+                IconButton(
-                                      index != 8 &&
+                  icon: SvgPicture.asset(Assets.filterTableIcon),
-                                      index != 5)
+                  onPressed: onFilter,
-                                    FittedBox(
+                  padding: EdgeInsets.zero,
-                                      child: IconButton(
+                  constraints: const BoxConstraints(),
-                                        icon: SvgPicture.asset(
-                                          Assets.filterTableIcon,
-                                          fit: BoxFit.none,
                 ),
-                                        onPressed: () {
-                                          if (widget.onFilter != null) {
-                                            widget.onFilter!(index);
-                                          }
-                                        },
-                                      ),
-                                    )
             ],
           ),
         ),
       ),
-                          GestureDetector(
+    );
-                            onHorizontalDragUpdate: (details) {
+  }
-                              setState(() {
+}
-                                columnWidths[index] = (columnWidths[index] +
+
-                                        details.delta.dx)
+class _TableRow extends StatelessWidget {
-                                    .clamp(
+  final List<Widget> cells;
-                                        150.0, 300.0); // Minimum & Maximum size
+  final List<double> columnWidths;
-                              });
+  final bool isLast;
-                            },
+
-                            child: MouseRegion(
+  const _TableRow({
-                              cursor: SystemMouseCursors
+    required this.cells,
-                                  .resizeColumn, // Set the cursor to resize
+    required this.columnWidths,
-                              child: Container(
+    required this.isLast,
-                                color: Colors.green,
+    Key? key,
-                                child: Container(
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Row(
+          children: [
+            for (int i = 0; i < cells.length; i++)
+              Container(
+                width: columnWidths[i],
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                // decoration: BoxDecoration(
+                //   border: Border(
+                //     right: BorderSide(color: ColorsManager.boxDivider),
+                //   ),
+                // ),
+                child: cells[i],
+              ),
+          ],
+        ),
+        if (!isLast)
+          Divider(
+            height: 1,
+            thickness: 1,
             color: ColorsManager.boxDivider,
-                                  width: 1,
-                                  height: 50, // Height of the header cell
-                                ),
-                              ),
-                            ),
           ),
       ],
     );
-                    }),
+  }
+}
+//===========================================================================
+
+class DynamicTableScreen extends StatefulWidget {
+  final List<String> titles;
+  final List<List<Widget>> rows;
+  final void Function(int columnIndex)? onFilter;
+
+  const DynamicTableScreen({
+    required this.titles,
+    required this.rows,
+    required this.onFilter,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  _DynamicTableScreenState createState() => _DynamicTableScreenState();
+}
+
+class _DynamicTableScreenState extends State<DynamicTableScreen> {
+  late List<double> columnWidths;
+  final double _minColumnWidth = 100.0;
+  final double _maxColumnWidth = 300.0;
+  final double _dividerWidth = 1.0;
+  double _lastAvailableWidth = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    columnWidths = List.filled(widget.titles.length, _minColumnWidth);
+  }
+
+  void _handleColumnResize(int index, double delta) {
+    setState(() {
+      double newWidth = columnWidths[index] + delta;
+      newWidth = newWidth.clamp(_minColumnWidth, _maxColumnWidth);
+      double actualDelta = newWidth - columnWidths[index];
+      if (actualDelta == 0) return;
+
+      int nextIndex = (index + 1) % columnWidths.length;
+      columnWidths[index] = newWidth;
+      columnWidths[nextIndex] = (columnWidths[nextIndex] - actualDelta)
+          .clamp(_minColumnWidth, _maxColumnWidth);
+    });
+  }
+
+  Widget _buildHeader() {
+    return Container(
+      decoration: containerDecoration.copyWith(
+        color: ColorsManager.circleRolesBackground,
+        borderRadius: const BorderRadius.only(
+          topLeft: Radius.circular(15),
+          topRight: Radius.circular(15),
         ),
       ),
-                // Data Rows with Dividers
+      child: Row(
-                widget.rows.isEmpty
-                    ? Container(
-                        child: SizedBox(
-                          height: MediaQuery.of(context).size.height / 2,
-                          child: Container(
-                            child: Column(
-                              crossAxisAlignment: CrossAxisAlignment.center,
-                              mainAxisAlignment: MainAxisAlignment.center,
         children: [
-                                Column(
+          for (int i = 0; i < widget.titles.length; i++)
+            _HeaderColumn(
+              title: widget.titles[i],
+              width: columnWidths[i],
+              showFilter: i != 1 && i != 9 && i != 8 && i != 5,
+              onFilter: () => widget.onFilter?.call(i),
+              onResize: (delta) => _handleColumnResize(i, delta),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildBody() {
+    if (widget.rows.isEmpty) {
+      return SizedBox(
+        height: 300,
+        child: Center(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
             children: [
               SvgPicture.asset(Assets.emptyTable),
-                                    const SizedBox(
+              const SizedBox(height: 15),
-                                      height: 15,
-                                    ),
               const Text(
                 'No Users',
                 style: TextStyle(
                   color: ColorsManager.lightGrayColor,
                   fontSize: 16,
-                                          fontWeight: FontWeight.w700),
+                  fontWeight: FontWeight.w700,
-                                    )
+                ),
-                                  ],
               ),
             ],
           ),
         ),
-                        ),
+      );
-                      )
+    }
-                    : Center(
+
-                        child: Container(
+    return Container(
-                          // height: MediaQuery.of(context).size.height * 0.59,
-                          width: MediaQuery.of(context).size.width,
       decoration: containerDecoration.copyWith(
         color: ColorsManager.whiteColors,
         borderRadius: const BorderRadius.only(
           bottomLeft: Radius.circular(15),
-                                  bottomRight: Radius.circular(15))),
+          bottomRight: Radius.circular(15),
-                          child: ListView.builder(
+        ),
-                            physics: const NeverScrollableScrollPhysics(),
+      ),
-                            shrinkWrap: true,
+      child: Column(
-                            itemCount: widget.rows.length,
-                            itemBuilder: (context, rowIndex) {
-                              if (columnWidths
-                                  .every((width) => width == 120.0)) {
-                                columnWidths = List<double>.generate(
-                                    widget.titles.length, (index) {
-                                  if (index == 1) {
-                                    return screenWidth * 0.11;
-                                  } else if (index == 9) {
-                                    return screenWidth * 0.2;
-                                  }
-                                  return screenWidth * 0.11;
-                                });
-                                setState(() {});
-                              }
-                              final row = widget.rows[rowIndex];
-                              return Column(
         children: [
-                                  Container(
+          for (int rowIndex = 0; rowIndex < widget.rows.length; rowIndex++)
-                                    child: Padding(
+            _TableRow(
-                                      padding: const EdgeInsets.only(
+              cells: widget.rows[rowIndex],
-                                          left: 5,
+              columnWidths: columnWidths,
-                                          top: 10,
+              isLast: rowIndex == widget.rows.length - 1,
-                                          right: 5,
-                                          bottom: 10),
-                                      child: Row(
-                                        children:
-                                            List.generate(row.length, (index) {
-                                          return SizedBox(
-                                            width: columnWidths[index],
-                                            child: SizedBox(
-                                              child: Padding(
-                                                padding: const EdgeInsets.only(
-                                                    left: 15, right: 10),
-                                                child: row[index],
-                                              ),
-                                            ),
-                                          );
-                                        }),
-                                      ),
-                                    ),
-                                  ),
-                                  if (rowIndex < widget.rows.length - 1)
-                                    Row(
-                                      children: List.generate(
-                                          widget.titles.length, (index) {
-                                        return SizedBox(
-                                          width: columnWidths[index],
-                                          child: const Divider(
-                                            color: ColorsManager.boxDivider,
-                                            thickness: 1,
-                                            height: 1,
-                                          ),
-                                        );
-                                      }),
             ),
         ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final availableWidth = constraints.maxWidth;
+        final totalDividersWidth = (widget.titles.length - 1) * _dividerWidth;
+
+        if (_lastAvailableWidth != availableWidth) {
+          final equalWidth =
+              (availableWidth - totalDividersWidth) / widget.titles.length;
+          final clampedWidth =
+              equalWidth.clamp(_minColumnWidth, _maxColumnWidth);
+
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            setState(() {
+              columnWidths = List.filled(widget.titles.length, clampedWidth);
+              _lastAvailableWidth = availableWidth;
+            });
+          });
+        }
+
+        final totalTableWidth =
+            columnWidths.fold(0.0, (sum, w) => sum + w) + totalDividersWidth;
+        return SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Container(
+            width: totalTableWidth,
+            decoration: containerDecoration.copyWith(
+              color: ColorsManager.whiteColors,
+              borderRadius: const BorderRadius.all(Radius.circular(20)),
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _buildHeader(),
+                _buildBody(),
+              ],
+            ),
+          ),
         );
       },
-                          ),
-                        ),
-                      ),
-              ],
-            ),
-          ),
-        ),
-      ),
     );
   }
 }
-
-
-
- // Widget build(BuildContext context) {
-  //   return Scaffold(
-  //     body: SingleChildScrollView(
-  //       scrollDirection: Axis.horizontal,
-  //       child: SingleChildScrollView(
-  //         scrollDirection: Axis.vertical,
-  //         child: Column(
-  //           children: [
-  //             // Header Row with Resizable Columns
-  //             Container(
-  //               color: Colors.green,
-  //               child: Row(
-  //                 children: List.generate(widget.titles.length, (index) {
-  //                   return Row(
-  //                     children: [
-  //                       Container(
-  //                         width: columnWidths[index],
-  //                         decoration: const BoxDecoration(
-  //                           color: Colors.green,
-  //                         ),
-  //                         child: Text(
-  //                           widget.titles[index],
-  //                           style: TextStyle(fontWeight: FontWeight.bold),
-  //                           textAlign: TextAlign.center,
-  //                         ),
-  //                       ),
-  //                       GestureDetector(
-  //                         onHorizontalDragUpdate: (details) {
-  //                           setState(() {
-  //                             columnWidths[index] = (columnWidths[index] +
-  //                                     details.delta.dx)
-  //                                 .clamp(50.0, 300.0); // Minimum & Maximum size
-  //                           });
-  //                         },
-  //                         child: MouseRegion(
-  //                           cursor: SystemMouseCursors
-  //                               .resizeColumn, // Set the cursor to resize
-  //                           child: Container(
-  //                             color: Colors.green,
-  //                             child: Container(
-  //                               color: Colors.black,
-  //                               width: 1,
-  //                               height: 50, // Height of the header cell
-  //                             ),
-  //                           ),
-  //                         ),
-  //                       ),
-  //                     ],
-  //                   );
-  //                 }),
-  //               ),
-  //             ),
-  //             // Data Rows
-  //             ...widget.rows.map((row) {
-  //               return Row(
-  //                 children: List.generate(row.length, (index) {
-  //                   return Container(
-  //                     width: columnWidths[index],
-  //                     child: row[index],
-  //                   );
-  //                 }),
-  //               );
-  //             }).toList(),
-  //           ],
-  //         ),
-  //       ),
-  //     ),
-  //   );
-  // }

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

@@ -17,7 +17,6 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:syncrow_web/utils/style.dart';
-
 class UsersPage extends StatelessWidget {
   UsersPage({super.key});
 
@@ -25,7 +24,8 @@ class UsersPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final TextEditingController searchController = TextEditingController();
 
-    Widget actionButton({required String title, required Function()? onTap}) {
+    Widget actionButton(
+        {bool isActive = false, required String title, Function()? onTap}) {
       return InkWell(
         onTap: onTap,
         child: Padding(
@@ -33,7 +33,9 @@ class UsersPage extends StatelessWidget {
           child: Text(
             title,
             style: Theme.of(context).textTheme.bodySmall?.copyWith(
-                  color: title == "Delete"
+                  color: isActive == false && title != "Delete"
+                      ? Colors.grey
+                      : title == "Delete"
                           ? ColorsManager.red
                           : ColorsManager.spaceColor,
                   fontWeight: FontWeight.w400,
@@ -107,9 +109,7 @@ class UsersPage extends StatelessWidget {
       builder: (context, state) {
         final screenSize = MediaQuery.of(context).size;
         final _blocRole = BlocProvider.of<UserTableBloc>(context);
-
         if (state is UsersLoadingState) {
-          _blocRole.add(ChangePage(_blocRole.currentPage));
           return const Center(child: CircularProgressIndicator());
         } else if (state is UsersLoadedState) {
           return Padding(
@@ -131,9 +131,12 @@ class UsersPage extends StatelessWidget {
                         child: TextFormField(
                           controller: searchController,
                           onChanged: (value) {
-                            context
+                            final bloc = context.read<UserTableBloc>();
-                                .read<UserTableBloc>()
+                            bloc.add(FilterClearEvent());
-                                .add(SearchUsers(value));
+                            bloc.add(SearchUsers(value));
+                            if (value == '') {
+                              bloc.add(ChangePage(1));
+                            }
                           },
                           style: const TextStyle(color: Colors.black),
                           decoration: textBoxDecoration(radios: 15)!.copyWith(
@@ -189,8 +192,6 @@ class UsersPage extends StatelessWidget {
                   const SizedBox(height: 25),
                   DynamicTableScreen(
                     onFilter: (columnIndex) {
-                      _blocRole.add(FilterClearEvent());
-
                       if (columnIndex == 0) {
                         showNameMenu(
                           context: context,
@@ -210,14 +211,15 @@ class UsersPage extends StatelessWidget {
                       if (columnIndex == 2) {
                         final Map<String, bool> checkboxStates = {
                           for (var item in _blocRole.jobTitle)
-                            item: false, // Initialize with false
+                            item: _blocRole.selectedJobTitles.contains(item),
                         };
                         final RenderBox overlay = Overlay.of(context)
                             .context
                             .findRenderObject() as RenderBox;
+
                         showPopUpFilterMenu(
                           position: RelativeRect.fromLTRB(
-                            overlay.size.width / 4,
+                            overlay.size.width / 5.3,
                             240,
                             overlay.size.width / 4,
                             0,
@@ -225,26 +227,29 @@ class UsersPage extends StatelessWidget {
                           list: _blocRole.jobTitle,
                           context: context,
                           checkboxStates: checkboxStates,
+                          isSelected: _blocRole.currentSortJopTitle,
                           onOkPressed: () {
+                            searchController.clear();
+                            _blocRole.add(FilterClearEvent());
                             final selectedItems = checkboxStates.entries
                                 .where((entry) => entry.value)
                                 .map((entry) => entry.key)
                                 .toList();
                             Navigator.of(context).pop();
-                            _blocRole.add(FilterUsersByJobEvent(selectedItems));
+                            _blocRole.add(FilterUsersByJobEvent(
+                              selectedJob: selectedItems,
+                              sortOrder: _blocRole.currentSortJopTitle,
+                            ));
                           },
-                          onSortAtoZ: () {
+                          onSortAtoZ: (v) {
-                            context
+                            _blocRole.currentSortJopTitle = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameAsc());
                           },
-                          onSortZtoA: () {
+                          onSortZtoA: (v) {
-                            context
+                            _blocRole.currentSortJopTitle = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameDesc());
                           },
                         );
                       }
+
                       if (columnIndex == 3) {
                         final Map<String, bool> checkboxStates = {
                           for (var item in _blocRole.roleTypes)
@@ -263,32 +268,32 @@ class UsersPage extends StatelessWidget {
                           list: _blocRole.roleTypes,
                           context: context,
                           checkboxStates: checkboxStates,
+                          isSelected: _blocRole.currentSortRole,
                           onOkPressed: () {
+                            searchController.clear();
+                            _blocRole.add(FilterClearEvent());
                             final selectedItems = checkboxStates.entries
                                 .where((entry) => entry.value)
                                 .map((entry) => entry.key)
                                 .toList();
                             Navigator.of(context).pop();
-                            context
+                            context.read<UserTableBloc>().add(
-                                .read<UserTableBloc>()
+                                FilterUsersByRoleEvent(
-                                .add(FilterUsersByRoleEvent(selectedItems));
+                                    selectedRoles: selectedItems,
+                                    sortOrder: _blocRole.currentSortRole));
                           },
-                          onSortAtoZ: () {
+                          onSortAtoZ: (v) {
-                            context
+                            _blocRole.currentSortRole = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameAsc());
                           },
-                          onSortZtoA: () {
+                          onSortZtoA: (v) {
-                            context
+                            _blocRole.currentSortRole = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameDesc());
                           },
                         );
                       }
                       if (columnIndex == 4) {
                         showDateFilterMenu(
                           context: context,
-                          isSelected: _blocRole.currentSortOrderDate,
+                          isSelected: _blocRole.currentSortOrder,
                           aToZTap: () {
                             context
                                 .read<UserTableBloc>()
@@ -319,33 +324,33 @@ class UsersPage extends StatelessWidget {
                           list: _blocRole.createdBy,
                           context: context,
                           checkboxStates: checkboxStates,
+                          isSelected: _blocRole.currentSortCreatedBy,
                           onOkPressed: () {
+                            searchController.clear();
+                            _blocRole.add(FilterClearEvent());
                             final selectedItems = checkboxStates.entries
                                 .where((entry) => entry.value)
                                 .map((entry) => entry.key)
                                 .toList();
                             Navigator.of(context).pop();
-                            _blocRole
+                            _blocRole.add(FilterUsersByCreatedEvent(
-                                .add(FilterUsersByCreatedEvent(selectedItems));
+                                selectedCreatedBy: selectedItems,
+                                sortOrder: _blocRole.currentSortCreatedBy));
                           },
-                          onSortAtoZ: () {
+                          onSortAtoZ: (v) {
-                            context
+                            _blocRole.currentSortCreatedBy = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameAsc());
                           },
-                          onSortZtoA: () {
+                          onSortZtoA: (v) {
-                            context
+                            _blocRole.currentSortCreatedBy = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameDesc());
                           },
                         );
                       }
-
                       if (columnIndex == 7) {
                         final Map<String, bool> checkboxStates = {
                           for (var item in _blocRole.status)
-                            item: _blocRole.selectedCreatedBy.contains(item),
+                            item: _blocRole.selectedStatuses.contains(item),
                         };
+
                         final RenderBox overlay = Overlay.of(context)
                             .context
                             .findRenderObject() as RenderBox;
@@ -353,30 +358,30 @@ class UsersPage extends StatelessWidget {
                           position: RelativeRect.fromLTRB(
                             overlay.size.width / 0,
                             240,
-                            overlay.size.width / 4,
+                            overlay.size.width / 5,
                             0,
                           ),
                           list: _blocRole.status,
                           context: context,
                           checkboxStates: checkboxStates,
+                          isSelected: _blocRole.currentSortStatus,
                           onOkPressed: () {
+                            searchController.clear();
+                            _blocRole.add(FilterClearEvent());
                             final selectedItems = checkboxStates.entries
                                 .where((entry) => entry.value)
                                 .map((entry) => entry.key)
                                 .toList();
                             Navigator.of(context).pop();
-                            _blocRole
+                            _blocRole.add(FilterUsersByDeActevateEvent(
-                                .add(FilterUsersByCreatedEvent(selectedItems));
+                                selectedActivate: selectedItems,
+                                sortOrder: _blocRole.currentSortStatus));
                           },
-                          onSortAtoZ: () {
+                          onSortAtoZ: (v) {
-                            context
+                            _blocRole.currentSortStatus = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameAsc());
                           },
-                          onSortZtoA: () {
+                          onSortZtoA: (v) {
-                            context
+                            _blocRole.currentSortStatus = v;
-                                .read<UserTableBloc>()
-                                .add(const SortUsersByNameDesc());
                           },
                         );
                       }
@@ -413,7 +418,7 @@ class UsersPage extends StatelessWidget {
                       return [
                         Text('${user.firstName} ${user.lastName}'),
                         Text(user.email),
-                        Text(user.jobTitle ?? ''),
+                        Text(user.jobTitle),
                         Text(user.roleType ?? ''),
                         Text(user.createdDate ?? ''),
                         Text(user.createdTime ?? ''),
@@ -430,11 +435,6 @@ class UsersPage extends StatelessWidget {
                           userId: user.uuid,
                           onTap: user.status != "invited"
                               ? () {
-                                  // final newStatus = user.status == 'active'
-                                  //     ? 'disabled'
-                                  //     : user.status == 'disabled'
-                                  //         ? 'invited'
-                                  //         : 'active';
                                   context.read<UserTableBloc>().add(
                                       ChangeUserStatus(
                                           userId: user.uuid,
@@ -446,18 +446,17 @@ class UsersPage extends StatelessWidget {
                         ),
                         Row(
                           children: [
-                            // actionButton(
+                            user.isEnabled != false
-                            //   title: "Activity Log",
+                                ? actionButton(
-                            //   onTap: () {},
+                                    isActive: true,
-                            // ),
-                            actionButton(
                                     title: "Edit",
                                     onTap: () {
                                       showDialog(
                                         context: context,
                                         barrierDismissible: false,
                                         builder: (BuildContext context) {
-                                    return EditUserDialog(userId: user.uuid);
+                                          return EditUserDialog(
+                                              userId: user.uuid);
                                         },
                                       ).then((v) {
                                         if (v != null) {
@@ -467,6 +466,9 @@ class UsersPage extends StatelessWidget {
                                         }
                                       });
                                     },
+                                  )
+                                : actionButton(
+                                    title: "Edit",
                                   ),
                             actionButton(
                               title: "Delete",
@@ -476,18 +478,22 @@ class UsersPage extends StatelessWidget {
                                   barrierDismissible: false,
                                   builder: (BuildContext context) {
                                     return DeleteUserDialog(
-                                      onTapDelete: () {
+                                        onTapDelete: () async {
+                                      try {
                                         _blocRole.add(DeleteUserEvent(
                                             user.uuid, context));
-                                      },
+                                        await Future.delayed(
-                                    );
+                                            const Duration(seconds: 2));
+                                        return true;
+                                      } catch (e) {
+                                        return false;
+                                      }
+                                    });
                                   },
                                 ).then((v) {
-                                  if (v != null) {
                                   if (v != null) {
                                     _blocRole.add(const GetUsers());
                                   }
-                                  }
                                 });
                               },
                             ),
@@ -504,6 +510,7 @@ class UsersPage extends StatelessWidget {
                         SizedBox(
                           width: 500,
                           child: NumberPagination(
+                            visiblePagesCount: 4,
                             buttonRadius: 10,
                             selectedButtonColor: ColorsManager.secondaryColor,
                             buttonUnSelectedBorderColor:
@@ -512,12 +519,11 @@ class UsersPage extends StatelessWidget {
                                 const Icon(Icons.keyboard_double_arrow_right),
                             firstPageIcon:
                                 const Icon(Icons.keyboard_double_arrow_left),
-                            totalPages: (_blocRole.users.length /
+                            totalPages: (_blocRole.totalUsersCount.length /
                                     _blocRole.itemsPerPage)
                                 .ceil(),
                             currentPage: _blocRole.currentPage,
                             onPageChanged: (int pageNumber) {
-                              _blocRole.currentPage = pageNumber;
                               context
                                   .read<UserTableBloc>()
                                   .add(ChangePage(pageNumber));

lib/pages/roles_and_permission/view/roles_and_permission_page.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
 import 'package:syncrow_web/pages/roles_and_permission/bloc/roles_permission_bloc.dart';
 import 'package:syncrow_web/pages/roles_and_permission/bloc/roles_permission_state.dart';

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

@@ -1,85 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_dialogs/ac_dialog.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_dialogs/one_gang_switch_dialog.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_dialogs/three_gang_switch_dialog.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_dialogs/two_gang_switch_dialog.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
-
-class DeviceDialogHelper {
-  static Future<Map<String, dynamic>?> showDeviceDialog(
-    BuildContext context,
-    Map<String, dynamic> data, {
-    required bool removeComparetors,
-  }) async {
-    final functions = data['functions'] as List<DeviceFunction>;
-
-    try {
-      final result = await _getDialogForDeviceType(
-        context,
-        data['productType'],
-        data,
-        functions,
-        removeComparetors: removeComparetors,
-      );
-
-      if (result != null) {
-        return result;
-      }
-    } catch (e) {
-      debugPrint('Error: $e');
-    }
-
-    return null;
-  }
-
-  static Future<Map<String, dynamic>?> _getDialogForDeviceType(
-      BuildContext context,
-      String productType,
-      Map<String, dynamic> data,
-      List<DeviceFunction> functions,
-      {required bool removeComparetors}) async {
-    final routineBloc = context.read<RoutineBloc>();
-    final deviceSelectedFunctions =
-        routineBloc.state.selectedFunctions[data['uniqueCustomId']] ?? [];
-
-    switch (productType) {
-      case 'AC':
-        return ACHelper.showACFunctionsDialog(
-            context,
-            functions,
-            data['device'],
-            deviceSelectedFunctions,
-            data['uniqueCustomId'],
-            removeComparetors);
-
-      case '1G':
-        return OneGangSwitchHelper.showSwitchFunctionsDialog(
-            context,
-            functions,
-            data['device'],
-            deviceSelectedFunctions,
-            data['uniqueCustomId'],
-            removeComparetors);
-      case '2G':
-        return TwoGangSwitchHelper.showSwitchFunctionsDialog(
-            context,
-            functions,
-            data['device'],
-            deviceSelectedFunctions,
-            data['uniqueCustomId'],
-            removeComparetors);
-      case '3G':
-        return ThreeGangSwitchHelper.showSwitchFunctionsDialog(
-            context,
-            functions,
-            data['device'],
-            deviceSelectedFunctions,
-            data['uniqueCustomId'],
-            removeComparetors);
-      default:
-        return null;
-    }
-  }
-}

lib/pages/routiens/view/routines_view.dart

@@ -1,69 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/view/create_new_routine_view.dart';
-import 'package:syncrow_web/pages/routiens/widgets/main_routine_view/fetch_routine_scenes_automation.dart';
-import 'package:syncrow_web/pages/routiens/widgets/main_routine_view/routine_view_card.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-
-class RoutinesView extends StatefulWidget {
-  const RoutinesView({super.key});
-
-  @override
-  State<RoutinesView> createState() => _RoutinesViewState();
-}
-
-class _RoutinesViewState extends State<RoutinesView> {
-  @override
-  void initState() {
-    super.initState();
-    context.read<RoutineBloc>().add(FetchDevicesInRoutine());
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<RoutineBloc, RoutineState>(
-      builder: (context, state) {
-        if (state.createRoutineView) {
-          return const CreateNewRoutineView();
-        }
-        return Padding(
-          padding: const EdgeInsets.all(16),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              Text(
-                "Create New Routines",
-                style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                      color: ColorsManager.grayColor,
-                      fontWeight: FontWeight.bold,
-                    ),
-              ),
-              const SizedBox(
-                height: 10,
-              ),
-              RoutineViewCard(
-                onTap: () {
-                  context.read<RoutineBloc>().add(
-                        (ResetRoutineState()),
-                      );
-                  BlocProvider.of<RoutineBloc>(context).add(
-                    const CreateNewRoutineViewEvent(createRoutineView: true),
-                  );
-                },
-                icon: Icons.add,
-                textString: '',
-              ),
-              const SizedBox(
-                height: 15,
-              ),
-              const Expanded(child: FetchRoutineScenesAutomation()),
-            ],
-          ),
-        );
-      },
-    );
-  }
-}

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

@@ -1,143 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/widgets/main_routine_view/routine_view_card.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
-import 'package:syncrow_web/utils/constants/assets.dart';
-import 'package:syncrow_web/utils/extension/build_context_x.dart';
-import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
-
-class FetchRoutineScenesAutomation extends StatefulWidget {
-  const FetchRoutineScenesAutomation({super.key});
-
-  @override
-  State<FetchRoutineScenesAutomation> createState() => _FetchRoutineScenesState();
-}
-
-class _FetchRoutineScenesState extends State<FetchRoutineScenesAutomation>
-    with HelperResponsiveLayout {
-  @override
-  void initState() {
-    super.initState();
-    context.read<RoutineBloc>()
-      ..add(const LoadScenes(spaceId, communityId))
-      ..add(const LoadAutomation(spaceId));
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<RoutineBloc, RoutineState>(
-      builder: (context, state) {
-        return state.isLoading
-            ? const Center(
-                child: CircularProgressIndicator(),
-              )
-            : SingleChildScrollView(
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 16.0),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Text(
-                        "Scenes (Tab to Run)",
-                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                              color: ColorsManager.grayColor,
-                              fontWeight: FontWeight.bold,
-                            ),
-                      ),
-                      const SizedBox(height: 10),
-                      if (state.scenes.isEmpty)
-                        Text(
-                          "No scenes found",
-                          style: context.textTheme.bodyMedium?.copyWith(
-                            color: ColorsManager.grayColor,
-                          ),
-                        ),
-                      if (state.scenes.isNotEmpty)
-                        ConstrainedBox(
-                          constraints: BoxConstraints(
-                            maxHeight: isSmallScreenSize(context) ? 160 : 170,
-                          ),
-                          child: ListView.builder(
-                            scrollDirection: Axis.horizontal,
-                            itemCount: state.scenes.length,
-                            itemBuilder: (context, index) => Padding(
-                              padding: EdgeInsets.only(
-                                right: isSmallScreenSize(context) ? 4.0 : 8.0,
-                              ),
-                              child: RoutineViewCard(
-                                onTap: () {
-                                  BlocProvider.of<RoutineBloc>(context).add(
-                                    const CreateNewRoutineViewEvent(createRoutineView: true),
-                                  );
-                                  context.read<RoutineBloc>().add(
-                                        GetSceneDetails(
-                                          sceneId: state.scenes[index].id,
-                                          isTabToRun: true,
-                                          isUpdate: true,
-                                        ),
-                                      );
-                                },
-                                textString: state.scenes[index].name,
-                                icon: state.scenes[index].icon ?? Assets.logoHorizontal,
-                                isFromScenes: true,
-                                iconInBytes: state.scenes[index].iconInBytes,
-                              ),
-                            ),
-                          ),
-                        ),
-                      const SizedBox(height: 15),
-                      Text(
-                        "Automations",
-                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                              color: ColorsManager.grayColor,
-                              fontWeight: FontWeight.bold,
-                            ),
-                      ),
-                      const SizedBox(height: 10),
-                      if (state.automations.isEmpty)
-                        Text(
-                          "No automations found",
-                          style: context.textTheme.bodyMedium?.copyWith(
-                            color: ColorsManager.grayColor,
-                          ),
-                        ),
-                      if (state.automations.isNotEmpty)
-                        ConstrainedBox(
-                          constraints: BoxConstraints(
-                            maxHeight: isSmallScreenSize(context) ? 160 : 170,
-                          ),
-                          child: ListView.builder(
-                            scrollDirection: Axis.horizontal,
-                            itemCount: state.automations.length,
-                            itemBuilder: (context, index) => Padding(
-                              padding: EdgeInsets.only(
-                                right: isSmallScreenSize(context) ? 4.0 : 8.0,
-                              ),
-                              child: RoutineViewCard(
-                                onTap: () {
-                                  BlocProvider.of<RoutineBloc>(context).add(
-                                    const CreateNewRoutineViewEvent(createRoutineView: true),
-                                  );
-                                  context.read<RoutineBloc>().add(
-                                        GetAutomationDetails(
-                                            automationId: state.automations[index].id,
-                                            isAutomation: true,
-                                            isUpdate: true),
-                                      );
-                                },
-                                textString: state.automations[index].name,
-                                icon: state.automations[index].icon ?? Assets.automation,
-                              ),
-                            ),
-                          ),
-                        ),
-                    ],
-                  ),
-                ),
-              );
-      },
-    );
-  }
-}

lib/pages/routines/bloc/effective_period/effect_period_bloc.dart

@@ -1,7 +1,7 @@
 import 'dart:async';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_event.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_state.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_state.dart';
 import 'package:syncrow_web/utils/constants/app_enum.dart';
 
 class EffectPeriodBloc extends Bloc<EffectPeriodEvent, EffectPeriodState> {

lib/pages/routines/bloc/effective_period/effect_period_event.dart

@@ -1,5 +1,5 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/routiens/models/create_scene_and_autoamtion/create_automation_model.dart';
+import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_automation_model.dart';
 import 'package:syncrow_web/utils/constants/app_enum.dart';
 
 abstract class EffectPeriodEvent extends Equatable {

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

@@ -2,7 +2,7 @@ import 'dart:async';
 
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 
 part 'functions_bloc_event.dart';
 part 'functions_bloc_state.dart';
@@ -26,8 +26,7 @@ class FunctionBloc extends Bloc<FunctionBlocEvent, FunctionBlocState> {
         functionCode: event.functionData.functionCode,
         operationName: event.functionData.operationName,
         value: event.functionData.value ?? existingData.value,
-        valueDescription: event.functionData.valueDescription ??
+        valueDescription: event.functionData.valueDescription ?? existingData.valueDescription,
-            existingData.valueDescription,
         condition: event.functionData.condition ?? existingData.condition,
       );
     } else {
@@ -59,10 +58,8 @@ class FunctionBloc extends Bloc<FunctionBlocEvent, FunctionBlocState> {
     );
   }
 
-  FutureOr<void> _onSelectFunction(
+  FutureOr<void> _onSelectFunction(SelectFunction event, Emitter<FunctionBlocState> emit) {
-      SelectFunction event, Emitter<FunctionBlocState> emit) {
     emit(state.copyWith(
-        selectedFunction: event.functionCode,
+        selectedFunction: event.functionCode, selectedOperationName: event.operationName));
-        selectedOperationName: event.operationName));
   }
 }

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

@@ -3,24 +3,31 @@ import 'dart:async';
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
-import 'package:syncrow_web/pages/routiens/models/create_scene_and_autoamtion/create_automation_model.dart';
+import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_automation_model.dart';
-import 'package:syncrow_web/pages/routiens/models/create_scene_and_autoamtion/create_scene_model.dart';
+import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_scene_model.dart';
-import 'package:syncrow_web/pages/routiens/models/delay/delay_fucntions.dart';
+import 'package:syncrow_web/pages/routines/models/delay/delay_fucntions.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
-import 'package:syncrow_web/pages/routiens/models/routine_details_model.dart';
+import 'package:syncrow_web/pages/routines/models/routine_details_model.dart';
-import 'package:syncrow_web/pages/routiens/models/routine_model.dart';
+import 'package:syncrow_web/pages/routines/models/routine_model.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
 import 'package:syncrow_web/services/devices_mang_api.dart';
 import 'package:syncrow_web/services/routines_api.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/constants/strings_manager.dart';
+import 'package:syncrow_web/utils/constants/temp_const.dart';
+import 'package:syncrow_web/utils/helpers/shared_preferences_helper.dart';
+import 'package:syncrow_web/utils/navigation_service.dart';
 import 'package:syncrow_web/utils/snack_bar.dart';
 import 'package:uuid/uuid.dart';
 
 part 'routine_event.dart';
 part 'routine_state.dart';
 
-const spaceId = '25c96044-fadf-44bb-93c7-3c079e527ce6';
+// String spaceId = '25c96044-fadf-44bb-93c7-3c079e527ce6';
-const communityId = 'aff21a57-2f91-4e5c-b99b-0182c3ab65a9';
+// String communityId = 'aff21a57-2f91-4e5c-b99b-0182c3ab65a9';
 
 class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   RoutineBloc() : super(const RoutineState()) {
@@ -57,8 +64,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
     emit(state.copyWith(routineTab: event.isRoutineTab, createRoutineView: false));
     add(ResetRoutineState());
     if (event.isRoutineTab) {
-      add(const LoadScenes(spaceId, communityId));
+      add(const LoadScenes());
-      add(const LoadAutomation(spaceId));
+      add(const LoadAutomation());
     }
   }
 
@@ -154,9 +161,19 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
   Future<void> _onLoadScenes(LoadScenes event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
-
+    List<ScenesModel> scenes = [];
     try {
-      final scenes = await SceneApi.getScenesByUnitId(event.unitId, event.communityId);
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var spaceBloc = context.read<SpaceTreeBloc>();
+      for (var communityId in spaceBloc.state.selectedCommunities) {
+        List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+        for (var spaceId in spacesList) {
+          scenes.addAll(await SceneApi.getScenes(spaceId, communityId, projectUuid));
+        }
+      }
+
       emit(state.copyWith(
         scenes: scenes,
         isLoading: false,
@@ -167,35 +184,34 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           loadScenesErrorMessage: 'Failed to load scenes',
           errorMessage: '',
           loadAutomationErrorMessage: '',
-      ));
+          scenes: scenes));
     }
   }
 
   Future<void> _onLoadAutomation(LoadAutomation event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true, errorMessage: null));
+    List<ScenesModel> automations = [];
 
     try {
-      final automations = await SceneApi.getAutomationByUnitId(event.unitId);
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
-      if (automations.isNotEmpty) {
+      var spaceBloc = context.read<SpaceTreeBloc>();
+      for (var communityId in spaceBloc.state.selectedCommunities) {
+        List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+        for (var spaceId in spacesList) {
+          automations.addAll(await SceneApi.getAutomation(spaceId));
+        }
+      }
       emit(state.copyWith(
         automations: automations,
         isLoading: false,
       ));
-      } else {
-        emit(state.copyWith(
-          isLoading: false,
-          loadAutomationErrorMessage: 'Failed to load automations',
-          errorMessage: '',
-          loadScenesErrorMessage: '',
-        ));
-      }
     } catch (e) {
       emit(state.copyWith(
           isLoading: false,
           loadAutomationErrorMessage: 'Failed to load automations',
           errorMessage: '',
           loadScenesErrorMessage: '',
-      ));
+          automations: automations));
     }
   }
 
@@ -278,8 +294,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         });
       }).toList();
 
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var spaceBloc = context.read<SpaceTreeBloc>();
+
       final createSceneModel = CreateSceneModel(
-        spaceUuid: spaceId,
+        spaceUuid: spaceBloc.state.selectedSpaces[0],
         iconId: state.selectedIcon ?? '',
         showInDevice: true,
         sceneName: state.routineName ?? '',
@@ -290,8 +309,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       final result = await SceneApi.createScene(createSceneModel);
       if (result['success']) {
         add(ResetRoutineState());
-        add(const LoadScenes(spaceId, communityId));
+        add(const LoadScenes());
-        add(const LoadAutomation(spaceId));
+        add(const LoadAutomation());
       } else {
         emit(state.copyWith(
           isLoading: false,
@@ -402,9 +421,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
           );
         });
       }).toList();
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var spaceBloc = context.read<SpaceTreeBloc>();
 
       final createAutomationModel = CreateAutomationModel(
-        spaceUuid: spaceId,
+        spaceUuid: spaceBloc.state.selectedSpaces[0],
         automationName: state.routineName ?? '',
         decisionExpr: state.selectedAutomationOperator,
         effectiveTime: EffectiveTime(
@@ -419,8 +440,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       final result = await SceneApi.createAutomation(createAutomationModel);
       if (result['success']) {
         add(ResetRoutineState());
-        add(const LoadAutomation(spaceId));
+        add(const LoadAutomation());
-        add(const LoadScenes(spaceId, communityId));
+        add(const LoadScenes());
       } else {
         emit(state.copyWith(
           isLoading: false,
@@ -776,17 +797,21 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         createRoutineView: false));
   }
 
-  FutureOr<void> _deleteScene(DeleteScene event, Emitter<RoutineState> emit) {
+  FutureOr<void> _deleteScene(DeleteScene event, Emitter<RoutineState> emit) async {
     try {
       emit(state.copyWith(isLoading: true));
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var spaceBloc = context.read<SpaceTreeBloc>();
       if (state.isTabToRun) {
-        SceneApi.deleteScene(unitUuid: spaceId, sceneId: state.sceneId ?? '');
+        await SceneApi.deleteScene(
+            unitUuid: spaceBloc.state.selectedSpaces[0], sceneId: state.sceneId ?? '');
       } else {
-        SceneApi.deleteAutomation(unitUuid: spaceId, automationId: state.automationId ?? '');
+        await SceneApi.deleteAutomation(
+            unitUuid: spaceBloc.state.selectedSpaces[0], automationId: state.automationId ?? '');
       }
 
-      add(const LoadScenes(spaceId, communityId));
+      add(const LoadScenes());
-      add(const LoadAutomation(spaceId));
+      add(const LoadAutomation());
       add(ResetRoutineState());
       emit(state.copyWith(isLoading: false, createRoutineView: false));
     } catch (e) {
@@ -814,7 +839,19 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
   FutureOr<void> _fetchDevices(FetchDevicesInRoutine event, Emitter<RoutineState> emit) async {
     emit(state.copyWith(isLoading: true));
     try {
-      final devices = await DevicesManagementApi().fetchDevices();
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+
+      List<AllDevicesModel> devices = [];
+
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var spaceBloc = context.read<SpaceTreeBloc>();
+      for (var communityId in spaceBloc.state.selectedCommunities) {
+        List<String> spacesList = spaceBloc.state.selectedCommunityAndSpaces[communityId] ?? [];
+        for (var spaceId in spacesList) {
+          devices
+              .addAll(await DevicesManagementApi().fetchDevices(communityId, spaceId, projectUuid));
+        }
+      }
 
       emit(state.copyWith(isLoading: false, devices: devices));
     } catch (e) {
@@ -892,8 +929,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
       final result = await SceneApi.updateScene(createSceneModel, state.sceneId ?? '');
       if (result['success']) {
         add(ResetRoutineState());
-        add(const LoadScenes(spaceId, communityId));
+        add(const LoadScenes());
-        add(const LoadAutomation(spaceId));
+        add(const LoadAutomation());
       } else {
         emit(state.copyWith(
           isLoading: false,
@@ -1003,8 +1040,11 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
         });
       }).toList();
 
+      BuildContext context = NavigationService.navigatorKey.currentContext!;
+      var spaceBloc = context.read<SpaceTreeBloc>();
+
       final createAutomationModel = CreateAutomationModel(
-        spaceUuid: spaceId,
+        spaceUuid: spaceBloc.state.selectedSpaces[0],
         automationName: state.routineName ?? '',
         decisionExpr: state.selectedAutomationOperator,
         effectiveTime: EffectiveTime(
@@ -1021,8 +1061,8 @@ class RoutineBloc extends Bloc<RoutineEvent, RoutineState> {
 
       if (result['success']) {
         add(ResetRoutineState());
-        add(const LoadAutomation(spaceId));
+        add(LoadAutomation());
-        add(const LoadScenes(spaceId, communityId));
+        add(LoadScenes());
       } else {
         emit(state.copyWith(
           isLoading: false,

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

@@ -27,22 +27,24 @@ class AddToThenContainer extends RoutineEvent {
 }
 
 class LoadScenes extends RoutineEvent {
-  final String unitId;
+  // final String spaceId;
-  final String communityId;
+  // final String communityId;
+  // final BuildContext context;
 
-  const LoadScenes(this.unitId, this.communityId);
+  const LoadScenes();
 
   @override
-  List<Object> get props => [unitId, communityId];
+  List<Object> get props => [];
 }
 
 class LoadAutomation extends RoutineEvent {
-  final String unitId;
+  // final String spaceId;
+  // final BuildContext context;
 
-  const LoadAutomation(this.unitId);
+  const LoadAutomation();
 
   @override
-  List<Object> get props => [unitId];
+  List<Object> get props => [];
 }
 
 class AddFunctionToRoutine extends RoutineEvent {

lib/pages/routines/bloc/setting_bloc/setting_bloc.dart

@@ -1,7 +1,7 @@
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/setting_bloc/setting_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/setting_bloc/setting_event.dart';
-import 'package:syncrow_web/pages/routiens/bloc/setting_bloc/setting_state.dart';
+import 'package:syncrow_web/pages/routines/bloc/setting_bloc/setting_state.dart';
-import 'package:syncrow_web/pages/routiens/models/icon_model.dart';
+import 'package:syncrow_web/pages/routines/models/icon_model.dart';
 import 'package:syncrow_web/services/routines_api.dart';
 
 class SettingBloc extends Bloc<SettingEvent, SettingState> {

lib/pages/routines/bloc/setting_bloc/setting_state.dart

@@ -1,5 +1,5 @@
 import 'package:equatable/equatable.dart';
-import 'package:syncrow_web/pages/routiens/models/icon_model.dart';
+import 'package:syncrow_web/pages/routines/models/icon_model.dart';
 
 abstract class SettingState extends Equatable {
   const SettingState();

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

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/ac_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/one_gang_switch_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/three_gang_switch_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/two_gang_switch_dialog.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
+
+class DeviceDialogHelper {
+  static Future<Map<String, dynamic>?> showDeviceDialog(
+    BuildContext context,
+    Map<String, dynamic> data, {
+    required bool removeComparetors,
+  }) async {
+    final functions = data['functions'] as List<DeviceFunction>;
+
+    try {
+      final result = await _getDialogForDeviceType(
+        context,
+        data['productType'],
+        data,
+        functions,
+        removeComparetors: removeComparetors,
+      );
+
+      if (result != null) {
+        return result;
+      }
+    } catch (e) {
+      debugPrint('Error: $e');
+    }
+
+    return null;
+  }
+
+  static Future<Map<String, dynamic>?> _getDialogForDeviceType(BuildContext context,
+      String productType, Map<String, dynamic> data, List<DeviceFunction> functions,
+      {required bool removeComparetors}) async {
+    final routineBloc = context.read<RoutineBloc>();
+    final deviceSelectedFunctions =
+        routineBloc.state.selectedFunctions[data['uniqueCustomId']] ?? [];
+
+    switch (productType) {
+      case 'AC':
+        return ACHelper.showACFunctionsDialog(context, functions, data['device'],
+            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+
+      case '1G':
+        return OneGangSwitchHelper.showSwitchFunctionsDialog(context, functions, data['device'],
+            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+      case '2G':
+        return TwoGangSwitchHelper.showSwitchFunctionsDialog(context, functions, data['device'],
+            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+      case '3G':
+        return ThreeGangSwitchHelper.showSwitchFunctionsDialog(context, functions, data['device'],
+            deviceSelectedFunctions, data['uniqueCustomId'], removeComparetors);
+      default:
+        return null;
+    }
+  }
+}

lib/pages/routines/helper/save_routine_helper.dart

@@ -3,9 +3,9 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dialog_footer.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';

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

@@ -1,6 +1,6 @@
 import 'package:syncrow_web/pages/device_managment/ac/model/ac_model.dart';
-import 'package:syncrow_web/pages/routiens/models/ac/ac_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/ac/ac_operational_value.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/utils/constants/app_enum.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 

lib/pages/routines/models/delay/delay_fucntions.dart

@@ -1,5 +1,5 @@
-import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class DelayFunction extends BaseSwitchFunction {

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

@@ -1,5 +1,5 @@
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 
 abstract class BaseSwitchFunction extends DeviceFunction<bool> {
   BaseSwitchFunction({

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

@@ -1,5 +1,5 @@
-import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class OneGangSwitchFunction extends BaseSwitchFunction {

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

@@ -1,5 +1,5 @@
-import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class ThreeGangSwitch1Function extends BaseSwitchFunction {
@@ -26,8 +26,7 @@ class ThreeGangSwitch1Function extends BaseSwitchFunction {
 }
 
 class ThreeGangCountdown1Function extends BaseSwitchFunction {
-  ThreeGangCountdown1Function(
+  ThreeGangCountdown1Function({required super.deviceId, required super.deviceName})
-      {required super.deviceId, required super.deviceName})
       : super(
           code: 'countdown_1',
           operationName: 'Light 1 Countdown',
@@ -71,8 +70,7 @@ class ThreeGangSwitch2Function extends BaseSwitchFunction {
 }
 
 class ThreeGangCountdown2Function extends BaseSwitchFunction {
-  ThreeGangCountdown2Function(
+  ThreeGangCountdown2Function({required super.deviceId, required super.deviceName})
-      {required super.deviceId, required super.deviceName})
       : super(
           code: 'countdown_2',
           operationName: 'Light 2 Countdown',
@@ -116,8 +114,7 @@ class ThreeGangSwitch3Function extends BaseSwitchFunction {
 }
 
 class ThreeGangCountdown3Function extends BaseSwitchFunction {
-  ThreeGangCountdown3Function(
+  ThreeGangCountdown3Function({required super.deviceId, required super.deviceName})
-      {required super.deviceId, required super.deviceName})
       : super(
           code: 'countdown_3',
           operationName: 'Light 3 Countdown',

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

@@ -1,5 +1,5 @@
-import 'package:syncrow_web/pages/routiens/models/gang_switches/base_switch_function.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/base_switch_function.dart';
-import 'package:syncrow_web/pages/routiens/models/gang_switches/switch_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/gang_switches/switch_operational_value.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class TwoGangSwitch1Function extends BaseSwitchFunction {
@@ -49,8 +49,7 @@ class TwoGangSwitch2Function extends BaseSwitchFunction {
 }
 
 class TwoGangCountdown1Function extends BaseSwitchFunction {
-  TwoGangCountdown1Function(
+  TwoGangCountdown1Function({required super.deviceId, required super.deviceName})
-      {required super.deviceId, required super.deviceName})
       : super(
           code: 'countdown_1',
           operationName: 'Light 1 Countdown',
@@ -71,8 +70,7 @@ class TwoGangCountdown1Function extends BaseSwitchFunction {
 }
 
 class TwoGangCountdown2Function extends BaseSwitchFunction {
-  TwoGangCountdown2Function(
+  TwoGangCountdown2Function({required super.deviceId, required super.deviceName})
-      {required super.deviceId, required super.deviceName})
       : super(
           code: 'countdown_2',
           operationName: 'Light 2 Countdown',

lib/pages/routines/models/routine_details_model.dart

@@ -1,7 +1,7 @@
 import 'dart:convert';
 
-import 'package:syncrow_web/pages/routiens/models/create_scene_and_autoamtion/create_automation_model.dart';
+import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_automation_model.dart';
-import 'package:syncrow_web/pages/routiens/models/create_scene_and_autoamtion/create_scene_model.dart';
+import 'package:syncrow_web/pages/routines/models/create_scene_and_autoamtion/create_scene_model.dart';
 
 class RoutineDetailsModel {
   final String spaceUuid;

lib/pages/routines/view/create_new_routine_view.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/routiens/widgets/conditions_routines_devices_view.dart';
+import 'package:syncrow_web/pages/routines/widgets/conditions_routines_devices_view.dart';
-import 'package:syncrow_web/pages/routiens/widgets/if_container.dart';
+import 'package:syncrow_web/pages/routines/widgets/if_container.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_search_and_buttons.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_search_and_buttons.dart';
-import 'package:syncrow_web/pages/routiens/widgets/then_container.dart';
+import 'package:syncrow_web/pages/routines/widgets/then_container.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class CreateNewRoutineView extends StatelessWidget {

lib/pages/routines/view/effective_period_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_dialogs/effictive_period_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/effictive_period_dialog.dart';
-import 'package:syncrow_web/pages/routiens/widgets/period_option.dart';
+import 'package:syncrow_web/pages/routines/widgets/period_option.dart';
-import 'package:syncrow_web/pages/routiens/widgets/repeat_days.dart';
+import 'package:syncrow_web/pages/routines/widgets/repeat_days.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class EffectivePeriodView extends StatelessWidget {

lib/pages/routines/view/routines_view.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/view/create_new_routine_view.dart';
+import 'package:syncrow_web/pages/routines/widgets/main_routine_view/fetch_routine_scenes_automation.dart';
+import 'package:syncrow_web/pages/routines/widgets/main_routine_view/routine_view_card.dart';
+import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
+import 'package:syncrow_web/pages/space_tree/view/space_tree_view.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/snack_bar.dart';
+
+class RoutinesView extends StatefulWidget {
+  const RoutinesView({super.key});
+
+  @override
+  State<RoutinesView> createState() => _RoutinesViewState();
+}
+
+class _RoutinesViewState extends State<RoutinesView> {
+  @override
+  void initState() {
+    super.initState();
+    // context.read<RoutineBloc>().add(FetchDevicesInRoutine());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<RoutineBloc, RoutineState>(
+      builder: (context, state) {
+        if (state.createRoutineView) {
+          return const CreateNewRoutineView();
+        }
+        return Row(
+          children: [
+            Expanded(child: SpaceTreeView(
+              onSelect: () {
+                context.read<RoutineBloc>()
+                  ..add(const LoadScenes())
+                  ..add(const LoadAutomation());
+              },
+            )),
+            Expanded(
+              flex: 4,
+              child: ListView(children: [
+                Container(
+                  padding: const EdgeInsets.all(16),
+                  height: MediaQuery.sizeOf(context).height,
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    children: [
+                      Text(
+                        "Create New Routines",
+                        style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                              color: ColorsManager.grayColor,
+                              fontWeight: FontWeight.bold,
+                            ),
+                      ),
+                      const SizedBox(
+                        height: 10,
+                      ),
+                      RoutineViewCard(
+                        onTap: () {
+                          if (context.read<SpaceTreeBloc>().state.selectedCommunities.length == 1 &&
+                              context.read<SpaceTreeBloc>().state.selectedSpaces.length == 1) {
+                            context.read<RoutineBloc>().add(
+                                  (ResetRoutineState()),
+                                );
+                            BlocProvider.of<RoutineBloc>(context).add(
+                              const CreateNewRoutineViewEvent(createRoutineView: true),
+                            );
+                          } else {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text(
+                                    context.read<SpaceTreeBloc>().state.selectedSpaces.isEmpty
+                                        ? 'Please select a space'
+                                        : 'Please select only one space to proceed'),
+                              ),
+                            );
+                            // CustomSnackBar.redSnackBar(
+                            //     context.read<SpaceTreeBloc>().state.selectedSpaces.isEmpty
+                            //         ? 'Please select a space'
+                            //         : 'Please select only one space to proceed');
+                          }
+                        },
+                        icon: Icons.add,
+                        textString: '',
+                      ),
+                      const SizedBox(
+                        height: 15,
+                      ),
+                      const Expanded(child: FetchRoutineScenesAutomation()),
+                    ],
+                  ),
+                ),
+              ]),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/pages/routines/widgets/conditions_routines_devices_view.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dragable_card.dart';
+import 'package:syncrow_web/pages/routines/widgets/dragable_card.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_devices.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_devices.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routines_title_widget.dart';
+import 'package:syncrow_web/pages/routines/widgets/routines_title_widget.dart';
-import 'package:syncrow_web/pages/routiens/widgets/scenes_and_automations.dart';
+import 'package:syncrow_web/pages/routines/widgets/scenes_and_automations.dart';
-import 'package:syncrow_web/pages/routiens/widgets/search_bar_condition_title.dart';
+import 'package:syncrow_web/pages/routines/widgets/search_bar_condition_title.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class ConditionsRoutinesDevicesView extends StatelessWidget {

lib/pages/routines/widgets/delete_scene.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/common/custom_dialog.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class DeleteSceneWidget extends StatelessWidget {

lib/pages/routines/widgets/dragable_card.dart

@@ -3,8 +3,8 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 

lib/pages/routines/widgets/if_container.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/helper/dialog_helper/device_dialog_helper.dart';
+import 'package:syncrow_web/pages/routines/helper/dialog_helper/device_dialog_helper.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dragable_card.dart';
+import 'package:syncrow_web/pages/routines/widgets/dragable_card.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';
@@ -26,9 +26,7 @@ class IfContainer extends StatelessWidget {
                   Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      const Text('IF',
+                      const Text('IF', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
-                          style: TextStyle(
-                              fontSize: 18, fontWeight: FontWeight.bold)),
                       if (state.isAutomation && state.ifItems.isNotEmpty)
                         AutomationOperatorSelector(
                             selectedOperator: state.selectedAutomationOperator),
@@ -55,44 +53,34 @@ class IfContainer extends StatelessWidget {
                           (index) => GestureDetector(
                                 onTap: () async {
                                   if (!state.isTabToRun) {
-                                    final result = await DeviceDialogHelper
+                                    final result = await DeviceDialogHelper.showDeviceDialog(
-                                        .showDeviceDialog(
                                         context, state.ifItems[index],
                                         removeComparetors: false);
 
                                     if (result != null) {
-                                      context.read<RoutineBloc>().add(
+                                      context
-                                          AddToIfContainer(
+                                          .read<RoutineBloc>()
-                                              state.ifItems[index], false));
+                                          .add(AddToIfContainer(state.ifItems[index], false));
-                                    } else if (![
+                                    } else if (!['AC', '1G', '2G', '3G']
-                                      'AC',
+                                        .contains(state.ifItems[index]['productType'])) {
-                                      '1G',
+                                      context
-                                      '2G',
+                                          .read<RoutineBloc>()
-                                      '3G'
+                                          .add(AddToIfContainer(state.ifItems[index], false));
-                                    ].contains(
-                                        state.ifItems[index]['productType'])) {
-                                      context.read<RoutineBloc>().add(
-                                          AddToIfContainer(
-                                              state.ifItems[index], false));
                                     }
                                   }
                                 },
                                 child: DraggableCard(
-                                  imagePath:
+                                  imagePath: state.ifItems[index]['imagePath'] ?? '',
-                                      state.ifItems[index]['imagePath'] ?? '',
                                   title: state.ifItems[index]['title'] ?? '',
                                   deviceData: state.ifItems[index],
-                                  padding: const EdgeInsets.symmetric(
+                                  padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
-                                      horizontal: 4, vertical: 8),
                                   isFromThen: false,
                                   isFromIf: true,
                                   onRemove: () {
-                                    context.read<RoutineBloc>().add(
+                                    context.read<RoutineBloc>().add(RemoveDragCard(
-                                        RemoveDragCard(
                                         index: index,
                                         isFromThen: false,
-                                            key: state.ifItems[index]
+                                        key: state.ifItems[index]['uniqueCustomId']));
-                                                ['uniqueCustomId']));
                                   },
                                 ),
                               )),
@@ -113,23 +101,15 @@ class IfContainer extends StatelessWidget {
 
             if (!state.isTabToRun) {
               if (mutableData['deviceId'] == 'tab_to_run') {
-                context
+                context.read<RoutineBloc>().add(AddToIfContainer(mutableData, true));
-                    .read<RoutineBloc>()
-                    .add(AddToIfContainer(mutableData, true));
               } else {
-                final result = await DeviceDialogHelper.showDeviceDialog(
+                final result = await DeviceDialogHelper.showDeviceDialog(context, mutableData,
-                    context, mutableData,
                     removeComparetors: false);
 
                 if (result != null) {
-                  context
+                  context.read<RoutineBloc>().add(AddToIfContainer(mutableData, false));
-                      .read<RoutineBloc>()
+                } else if (!['AC', '1G', '2G', '3G'].contains(mutableData['productType'])) {
-                      .add(AddToIfContainer(mutableData, false));
+                  context.read<RoutineBloc>().add(AddToIfContainer(mutableData, false));
-                } else if (!['AC', '1G', '2G', '3G']
-                    .contains(mutableData['productType'])) {
-                  context
-                      .read<RoutineBloc>()
-                      .add(AddToIfContainer(mutableData, false));
                 }
               }
             }
@@ -175,9 +155,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               ),
             ),
             onPressed: () {
-              context
+              context.read<RoutineBloc>().add(const ChangeAutomationOperator(operator: 'or'));
-                  .read<RoutineBloc>()
-                  .add(const ChangeAutomationOperator(operator: 'or'));
             },
           ),
           Container(
@@ -203,9 +181,7 @@ class AutomationOperatorSelector extends StatelessWidget {
               ),
             ),
             onPressed: () {
-              context
+              context.read<RoutineBloc>().add(const ChangeAutomationOperator(operator: 'and'));
-                  .read<RoutineBloc>()
-                  .add(const ChangeAutomationOperator(operator: 'and'));
             },
           ),
         ],

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

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

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

@@ -70,15 +70,13 @@ class RoutineViewCard extends StatelessWidget with HelperResponsiveLayout {
                     height: iconSize,
                     width: iconSize,
                     child: (isFromScenes ?? false)
-                        ? (iconInBytes != null &&
+                        ? (iconInBytes != null && iconInBytes?.isNotEmpty == true)
-                                iconInBytes?.isNotEmpty == true)
                             ? Image.memory(
                                 iconInBytes!,
                                 height: iconSize,
                                 width: iconSize,
                                 fit: BoxFit.contain,
-                                errorBuilder: (context, error, stackTrace) =>
+                                errorBuilder: (context, error, stackTrace) => Image.asset(
-                                    Image.asset(
                                   Assets.logo,
                                   height: iconSize,
                                   width: iconSize,

lib/pages/routines/widgets/period_option.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_event.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_state.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_state.dart';
-import 'package:syncrow_web/pages/routiens/widgets/routine_dialogs/effictive_period_dialog.dart';
+import 'package:syncrow_web/pages/routines/widgets/routine_dialogs/effictive_period_dialog.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/app_enum.dart';
 

lib/pages/routines/widgets/repeat_days.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_event.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_event.dart';
-import 'package:syncrow_web/pages/routiens/bloc/effective_period/effect_period_state.dart';
+import 'package:syncrow_web/pages/routines/bloc/effective_period/effect_period_state.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class RepeatDays extends StatelessWidget {

lib/pages/routines/widgets/routine_devices.dart

@@ -1,12 +1,23 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dragable_card.dart';
+import 'package:syncrow_web/pages/routines/widgets/dragable_card.dart';
 
-class RoutineDevices extends StatelessWidget {
+class RoutineDevices extends StatefulWidget {
   const RoutineDevices({super.key});
 
+  @override
+  State<RoutineDevices> createState() => _RoutineDevicesState();
+}
+
+class _RoutineDevicesState extends State<RoutineDevices> {
+  @override
+  void initState() {
+    super.initState();
+    context.read<RoutineBloc>().add(FetchDevicesInRoutine());
+  }
+
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<RoutineBloc, RoutineState>(
@@ -35,9 +46,7 @@ class RoutineDevices extends StatelessWidget {
           children: deviceList.asMap().entries.map((entry) {
             final device = entry.value;
             if (state.searchText != null && state.searchText!.isNotEmpty) {
-              return device.name!
+              return device.name!.toLowerCase().contains(state.searchText!.toLowerCase())
-                      .toLowerCase()
-                      .contains(state.searchText!.toLowerCase())
                   ? DraggableCard(
                       imagePath: device.getDefaultIcon(device.productType),
                       title: device.name ?? '',

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

@@ -1,16 +1,16 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/devices_model.dart';
-import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
-import 'package:syncrow_web/pages/routiens/models/ac/ac_function.dart';
+import 'package:syncrow_web/pages/routines/models/ac/ac_function.dart';
-import 'package:syncrow_web/pages/routiens/models/ac/ac_operational_value.dart';
+import 'package:syncrow_web/pages/routines/models/ac/ac_operational_value.dart';
-import 'package:syncrow_web/pages/routiens/models/device_functions.dart';
+import 'package:syncrow_web/pages/routines/models/device_functions.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dialog_footer.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
-import 'package:syncrow_web/pages/routiens/widgets/dialog_header.dart';
+import 'package:syncrow_web/pages/routines/widgets/dialog_header.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/extension/build_context_x.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_web/pages/routiens/bloc/functions_bloc/functions_bloc_bloc.dart';
+import 'package:syncrow_web/pages/routines/bloc/functions_bloc/functions_bloc_bloc.dart';
 
 class ACHelper {
   static Future<Map<String, dynamic>?> showACFunctionsDialog(
@@ -27,16 +27,15 @@ class ACHelper {
       context: context,
       builder: (BuildContext context) {
         return BlocProvider(
-          create: (_) => FunctionBloc()
+          create: (_) => FunctionBloc()..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
-            ..add(InitializeFunctions(deviceSelectedFunctions ?? [])),
           child: AlertDialog(
             contentPadding: EdgeInsets.zero,
             content: BlocBuilder<FunctionBloc, FunctionBlocState>(
               builder: (context, state) {
                 final selectedFunction = state.selectedFunction;
                 final selectedOperationName = state.selectedOperationName;
-                final selectedFunctionData = state.addedFunctions
+                final selectedFunctionData =
-                    .firstWhere((f) => f.functionCode == selectedFunction,
+                    state.addedFunctions.firstWhere((f) => f.functionCode == selectedFunction,
                         orElse: () => DeviceFunctionData(
                               entityId: '',
                               functionCode: selectedFunction ?? '',
@@ -66,10 +65,8 @@ class ACHelper {
                               child: _buildFunctionsList(
                                 context: context,
                                 acFunctions: acFunctions,
-                                onFunctionSelected:
+                                onFunctionSelected: (functionCode, operationName) =>
-                                    (functionCode, operationName) => context
+                                    context.read<FunctionBloc>().add(SelectFunction(
-                                        .read<FunctionBloc>()
-                                        .add(SelectFunction(
                                           functionCode: functionCode,
                                           operationName: operationName,
                                         )),
@@ -184,7 +181,7 @@ class ACHelper {
     bool? removeComparators,
   }) {
     if (selectedFunction == 'temp_set' || selectedFunction == 'temp_current') {
-      final initialValue = selectedFunctionData?.value ?? 200;
+      final initialValue = selectedFunctionData?.value ?? 250;
       return _buildTemperatureSelector(
         context: context,
         initialValue: initialValue,
@@ -197,8 +194,7 @@ class ACHelper {
       );
     }
 
-    final selectedFn =
+    final selectedFn = acFunctions.firstWhere((f) => f.code == selectedFunction);
-        acFunctions.firstWhere((f) => f.code == selectedFunction);
     final values = selectedFn.getOperationalValues();
 
     return _buildOperationalValuesList(
@@ -294,8 +290,7 @@ class ACHelper {
         minHeight: 40.0,
         minWidth: 40.0,
       ),
-      isSelected:
+      isSelected: conditions.map((c) => c == (currentCondition ?? "==")).toList(),
-          conditions.map((c) => c == (currentCondition ?? "==")).toList(),
       children: conditions.map((c) => Text(c)).toList(),
     );
   }
@@ -333,10 +328,10 @@ class ACHelper {
     String selectCode,
   ) {
     return Slider(
-      value: initialValue is int ? initialValue.toDouble() : 160.0,
+      value: initialValue is int ? initialValue.toDouble() : 200.0,
-      min: 160,
+      min: 200,
       max: 300,
-      divisions: 14,
+      divisions: 10,
       label: '${((initialValue ?? 160) / 10).toInt()}°C',
       onChanged: (value) {
         context.read<FunctionBloc>().add(
@@ -389,13 +384,9 @@ class ACHelper {
             style: context.textTheme.bodyMedium,
           ),
           trailing: Icon(
-            isSelected
+            isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
-                ? Icons.radio_button_checked
-                : Icons.radio_button_unchecked,
             size: 24,
-            color: isSelected
+            color: isSelected ? ColorsManager.primaryColorWithOpacity : ColorsManager.textGray,
-                ? ColorsManager.primaryColorWithOpacity
-                : ColorsManager.textGray,
           ),
           onTap: () {
             if (!isSelected) {
@@ -407,8 +398,7 @@ class ACHelper {
                         operationName: operationName,
                         value: value.value,
                         condition: selectedFunctionData?.condition,
-                        valueDescription:
+                        valueDescription: selectedFunctionData?.valueDescription,
-                            selectedFunctionData?.valueDescription,
                       ),
                     ),
                   );