fixed device type counts

lib/pages/spaces_management/view/dialogs/create_space_dialog.dart

@@ -42,7 +42,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                       width: 100,
                       height: 100,
                       decoration: const BoxDecoration(
-                        color: Color(0xFFF5F6F7),
+                        color: ColorsManager.boxColor,
                         shape: BoxShape.circle,
                       ),
                     ),
@@ -87,12 +87,12 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                               color: ColorsManager.lightGrayColor,
                               fontWeight: FontWeight.w400),
                           filled: true,
-                          fillColor: const Color(0xFFF5F6F7),
+                          fillColor: ColorsManager.boxColor,
                           enabledBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color:
+                              color: ColorsManager
-                                  Color(0xFFF5F6F7), // Light gray color when enabled (not focused)
+                                  .boxColor, // Light gray color when enabled (not focused)
                               width: 1.5,
                             ),
                           ),
@@ -100,7 +100,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           focusedBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(0xFFF5F6F7), // Primary color when focused
+                              color: ColorsManager.boxColor, // Primary color when focused
                               width: 1.5,
                             ),
                           ),
@@ -108,7 +108,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           disabledBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(0xFFF5F6F7), // Light gray for disabled state
+                              color: ColorsManager.boxColor, // Light gray for disabled state
                               width: 1.5,
                             ),
                           ),
@@ -116,7 +116,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           errorBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(0xFFF5F6F7), // Red border when there's an error
+                              color: ColorsManager.boxColor, // Red border when there's an error
                               width: 1.5,
                             ),
                           ),
@@ -124,7 +124,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           focusedErrorBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: ColorsManager.boxColor, // Red border when there's an error and it's focused
+                              color: ColorsManager
+                                  .boxColor, // Red border when there's an error and it's focused
                               width: 1.5,
                             ),
                           ),
@@ -132,6 +133,9 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                       ),
                       const SizedBox(height: 16),
                       // Add Devices or Space Model Button
+                      if (selectedProducts.isNotEmpty)
+                        _buildSelectedProductsButtons(widget.products ?? [])
+                      else
                         ElevatedButton(
                           onPressed: () {
                             showDialog(
@@ -152,7 +156,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                             shape: RoundedRectangleBorder(
                                 side: const BorderSide(
                                   // Add border side here
-                                color: ColorsManager.neutralGray, // Define your desired border color
+                                  color:
+                                      ColorsManager.neutralGray, // Define your desired border color
                                   width: 2.0, // Define border width
                                 ),
                                 borderRadius: BorderRadius.circular(20)),
@@ -231,7 +236,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
             height: 200,
             padding: const EdgeInsets.all(18),
             decoration: BoxDecoration(
-              color: const Color(0xFFF5F6F7),
+              color: ColorsManager.boxColor,
               borderRadius: BorderRadius.circular(12),
             ),
             child: GridView.builder(
@@ -263,6 +268,104 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
     );
   }
 
+  Widget _buildSelectedProductsButtons(List<ProductModel> products) {
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: ColorsManager.textFieldGreyColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Wrap(
+        spacing: 8, // Horizontal spacing between buttons
+        runSpacing: 8, // Vertical spacing between rows
+        children: [
+          // Dynamically create a button for each selected product
+          for (var entry in selectedProducts.entries)
+            GestureDetector(
+              onTap: () {
+
+              },
+              child: Container(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(16),
+                ),
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    // Display the product icon
+                    SvgPicture.asset(
+                      _mapIconToProduct(entry.key, products),
+                      width: 24,
+                      height: 24,
+                    ),
+                    const SizedBox(width: 8),
+                    // Display the product count
+                    Text(
+                      'x${entry.value}',
+                      style: const TextStyle(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: ColorsManager.spaceColor,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          // Add Button
+          GestureDetector(
+            onTap: () {
+              showDialog(
+                context: context,
+                builder: (context) => AddDeviceWidget(
+                  products: widget.products,
+                  initialSelectedProducts: selectedProducts,
+                  onProductsSelected: (selectedProductsMap) {
+                    setState(() {
+                      selectedProducts = selectedProductsMap;
+                    });
+                  },
+                ),
+              );
+            },
+            child: Container(
+              width: 50,
+              height: 50,
+              decoration: BoxDecoration(
+                color: ColorsManager.textFieldGreyColor,
+                borderRadius: BorderRadius.circular(16),
+              ),
+              child: const Icon(
+                Icons.add,
+                color: ColorsManager.spaceColor,
+                size: 24,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  String _mapIconToProduct(String uuid, List<ProductModel> products) {
+    // Find the product with the matching UUID
+    final product = products.firstWhere(
+      (product) => product.uuid == uuid,
+      orElse: () => ProductModel(
+        uuid: '',
+        catName: '',
+        prodId: '',
+        prodType: '',
+        name: '',
+        icon: Assets.presenceSensor, 
+      ),
+    );
+
+    return product.icon ?? Assets.presenceSensor;
+  }
+
   final List<String> _iconList = [
     Assets.location,
     Assets.villa,

lib/pages/spaces_management/widgets/add_device_type_widget.dart

@@ -10,8 +10,10 @@ import 'package:syncrow_web/utils/extension/build_context_x.dart';
 class AddDeviceWidget extends StatefulWidget {
   final List<ProductModel>? products;
   final ValueChanged<Map<String, int>>? onProductsSelected;
+  final Map<String, int>? initialSelectedProducts;
 
-  const AddDeviceWidget({super.key, this.products, this.onProductsSelected});
+  const AddDeviceWidget(
+      {super.key, this.products, this.initialSelectedProducts, this.onProductsSelected});
 
   @override
   _AddDeviceWidgetState createState() => _AddDeviceWidgetState();
@@ -25,11 +27,9 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
   void initState() {
     super.initState();
     _scrollController = ScrollController();
-
+    print(widget.initialSelectedProducts);
-    if (widget.products != null) {
+    if (widget.initialSelectedProducts != null && widget.initialSelectedProducts!.isNotEmpty) {
-      for (var product in widget.products!) {
+      productCounts = widget.initialSelectedProducts!;
-        productCounts[product.uuid] = 0;
-      }
     }
   }
 
@@ -161,7 +161,7 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
               const SizedBox(height: 8),
               // The custom counter widget aligned at the bottom
               CounterWidget(
-                initialCount: 0,
+                initialCount: productCounts[deviceType!.uuid] ?? 0,
                 onCountChanged: (newCount) {
                   setState(() {
                     if (newCount > 0) {