add device type comes from products

lib/pages/spaces_management/bloc/space_management_bloc.dart

@@ -1,18 +1,41 @@
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/bloc/space_management_event.dart';
 import 'package:syncrow_web/pages/spaces_management/bloc/space_management_state.dart';
+import 'package:syncrow_web/services/product_api.dart';
 import 'package:syncrow_web/services/space_mana_api.dart';
 
 class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementState> {
   final CommunitySpaceManagementApi _api;
+  final ProductApi _productApi;
 
-  SpaceManagementBloc(this._api) : super(SpaceManagementInitial()) {
+  List<ProductModel>? _cachedProducts;
+
+  SpaceManagementBloc(this._api, this._productApi) : super(SpaceManagementInitial()) {
     on<LoadCommunityAndSpacesEvent>(_onLoadCommunityAndSpaces);
     on<UpdateSpacePositionEvent>(_onUpdateSpacePosition);
     on<CreateCommunityEvent>(_onCreateCommunity);
     on<SaveSpacesEvent>(_onSaveSpaces);
+    on<FetchProductsEvent>(_onFetchProducts);
+  }
+
+  void _onFetchProducts(
+    FetchProductsEvent event,
+    Emitter<SpaceManagementState> emit,
+  ) async {
+    if (_cachedProducts != null) {
+      // Products are already cached, no need to fetch again
+      return;
+    }
+
+    try {
+      final products = await _productApi.fetchProducts();
+      _cachedProducts = products; // Cache the products locally
+    } catch (e) {
+      emit(SpaceManagementError('Error fetching products: $e'));
+    }
   }
 
   void _onLoadCommunityAndSpaces(
@@ -21,6 +44,11 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
   ) async {
     emit(SpaceManagementLoading());
     try {
+      if (_cachedProducts == null) {
+        final products = await _productApi.fetchProducts();
+        _cachedProducts = products;
+      }
+
       // Fetch all communities
       List<CommunityModel> communities = await _api.fetchCommunities();
 
@@ -40,7 +68,7 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
         }).toList(),
       );
 
-      emit(SpaceManagementLoaded(communities: updatedCommunities));
+      emit(SpaceManagementLoaded(communities: updatedCommunities, products: _cachedProducts ?? []));
     } catch (e) {
       emit(SpaceManagementError('Error loading communities and spaces: $e'));
     }
@@ -71,7 +99,8 @@ class SpaceManagementBloc extends Bloc<SpaceManagementEvent, SpaceManagementStat
         if (previousState is SpaceManagementLoaded) {
           final updatedCommunities = List<CommunityModel>.from(previousState.communities)
             ..add(newCommunity);
-          emit(SpaceManagementLoaded(communities: updatedCommunities));
+          emit(SpaceManagementLoaded(
+              communities: updatedCommunities, products: _cachedProducts ?? []));
         }
       } else {
         emit(const SpaceManagementError('Error creating community'));

lib/pages/spaces_management/bloc/space_management_event.dart

@@ -74,6 +74,7 @@ class CreateCommunityEvent extends SpaceManagementEvent {
   List<Object> get props => [name, description, regionId];
 }
 
+class FetchProductsEvent extends SpaceManagementEvent {}
 
 class LoadSpaceHierarchyEvent extends SpaceManagementEvent {
   final String communityId;
@@ -82,4 +83,4 @@ class LoadSpaceHierarchyEvent extends SpaceManagementEvent {
 
   @override
   List<Object> get props => [communityId];
-}
+}

lib/pages/spaces_management/bloc/space_management_state.dart

@@ -1,5 +1,6 @@
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
 
 abstract class SpaceManagementState extends Equatable {
@@ -15,11 +16,9 @@ class SpaceManagementLoading extends SpaceManagementState {}
 
 class SpaceManagementLoaded extends SpaceManagementState {
   final List<CommunityModel> communities;
+  final List<ProductModel> products; // Include products in the state
 
-  const SpaceManagementLoaded({required this.communities});
+  SpaceManagementLoaded({required this.communities, required this.products});
-
-  @override
-  List<Object> get props => [communities];
 }
 
 class SpaceCreationSuccess extends SpaceManagementState {

lib/pages/spaces_management/model/product_model.dart

@@ -0,0 +1,70 @@
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class ProductModel {
+  final String uuid;
+  final String catName;
+  String? name;
+  final String prodId;
+  final String prodType;
+  String? icon;
+
+  ProductModel({
+    required this.uuid,
+    required this.catName,
+    required this.prodId,
+    required this.prodType,
+    required this.name,
+    this.icon,
+  });
+
+  // Factory method to create a Product from JSON
+  factory ProductModel.fromMap(Map<String, dynamic> json) {
+    String icon = _mapIconToProduct(json['prodType']);
+    return ProductModel(
+        uuid: json['uuid'],
+        catName: json['catName'],
+        prodId: json['prodId'],
+        prodType: json['prodType'],
+        name: json['name'] ?? '',
+        icon: _mapIconToProduct(json['prodType']));
+  }
+
+  // Method to convert a Product to JSON
+  Map<String, dynamic> toMap() {
+    return {
+      'uuid': uuid,
+      'catName': catName,
+      'prodId': prodId,
+      'prodType': prodType,
+    };
+  }
+
+  static String _mapIconToProduct(String prodType) {
+    const iconMapping = {
+      '1G': Assets.Gang1SwitchIcon,
+      '1GT': Assets.oneTouchSwitch,
+      '2G': Assets.Gang2SwitchIcon,
+      '2GT': Assets.twoTouchSwitch,
+      '3G': Assets.Gang3SwitchIcon,
+      '3GT': Assets.threeTouchSwitch,
+      'CUR': Assets.curtain,
+      'GD': Assets.garageDoor,
+      'GW': Assets.SmartGatewayIcon,
+      'DL': Assets.DoorLockIcon,
+      'WL': Assets.waterLeakSensor,
+      'WH': Assets.waterHeater,
+      'AC': Assets.ac,
+      'CPS': Assets.presenceSensor,
+      'PC': Assets.powerClamp,
+      'WPS': Assets.presenceSensor,
+      'DS': Assets.doorSensor
+    };
+
+    return iconMapping[prodType] ?? Assets.presenceSensor;
+  }
+
+  @override
+  String toString() {
+    return 'ProductModel(uuid: $uuid, catName: $catName, prodId: $prodId, prodType: $prodType, name: $name, icon: $icon)';
+  }
+}

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

@@ -2,14 +2,16 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
 class CreateSpaceDialog extends StatefulWidget {
   final Function(String, String) onCreateSpace;
+  final List<ProductModel>? products;
 
-  const CreateSpaceDialog({super.key, required this.onCreateSpace});
+  const CreateSpaceDialog({super.key, required this.onCreateSpace, this.products});
 
   @override
   CreateSpaceDialogState createState() => CreateSpaceDialogState();
@@ -18,6 +20,7 @@ class CreateSpaceDialog extends StatefulWidget {
 class CreateSpaceDialogState extends State<CreateSpaceDialog> {
   String selectedIcon = Assets.location;
   String enteredName = '';
+  Map<String, int> selectedProducts = {};
 
   @override
   Widget build(BuildContext context) {
@@ -60,8 +63,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                             color: Colors.white,
                             shape: BoxShape.circle,
                           ),
-                          child: SvgPicture.asset(Assets.iconEdit,
+                          child: SvgPicture.asset(Assets.iconEdit, width: 10, height: 10),
-                              width: 10, height: 10),
                         ),
                       ),
                     ),
@@ -89,8 +91,8 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           enabledBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(
+                              color:
-                                  0xFFF5F6F7), // Light gray color when enabled (not focused)
+                                  Color(0xFFF5F6F7), // Light gray color when enabled (not focused)
                               width: 1.5,
                             ),
                           ),
@@ -98,8 +100,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           focusedBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(
+                              color: Color(0xFFF5F6F7), // Primary color when focused
-                                  0xFFF5F6F7), // Primary color when focused
                               width: 1.5,
                             ),
                           ),
@@ -107,8 +108,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           disabledBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(
+                              color: Color(0xFFF5F6F7), // Light gray for disabled state
-                                  0xFFF5F6F7), // Light gray for disabled state
                               width: 1.5,
                             ),
                           ),
@@ -116,8 +116,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           errorBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(
+                              color: Color(0xFFF5F6F7), // Red border when there's an error
-                                  0xFFF5F6F7), // Red border when there's an error
                               width: 1.5,
                             ),
                           ),
@@ -125,8 +124,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           focusedErrorBorder: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(10),
                             borderSide: const BorderSide(
-                              color: Color(
+                              color: ColorsManager.boxColor, // Red border when there's an error and it's focused
-                                  0xFFF5F6F7), // Red border when there's an error and it's focused
                               width: 1.5,
                             ),
                           ),
@@ -138,36 +136,37 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                         onPressed: () {
                           showDialog(
                             context: context,
-                            builder: (context) => const AddDeviceWidget(),
+                            builder: (context) => AddDeviceWidget(
+                              products: widget.products,
+                              onProductsSelected: (selectedProductsMap) {
+                                setState(() {
+                                  selectedProducts = selectedProductsMap;
+                                });
+                              },
+                            ),
                           );
-                          // Logic to assign devices or select a model
                         },
                         style: ElevatedButton.styleFrom(
                           backgroundColor: ColorsManager.textFieldGreyColor,
-                          padding: const EdgeInsets.symmetric(
+                          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
-                              horizontal: 16, vertical: 20),
                           shape: RoundedRectangleBorder(
                               side: const BorderSide(
                                 // Add border side here
-                                color: Color(
+                                color: ColorsManager.neutralGray, // Define your desired border color
-                                    0xFFE5E5E5), // Define your desired border color
                                 width: 2.0, // Define border width
                               ),
                               borderRadius: BorderRadius.circular(20)),
                         ),
                         child: Row(
-                          mainAxisSize: MainAxisSize
+                          mainAxisSize:
-                              .min, // Adjust the button size to fit the content
+                              MainAxisSize.min, // Adjust the button size to fit the content
                           children: [
                             SvgPicture.asset(
-                              Assets
+                              Assets.addIcon, // Replace with your actual icon path
-                                  .addIcon, // Replace with your actual icon path
                               width: 20, // Set the size of the icon
                               height: 20,
                             ),
-                            const SizedBox(
+                            const SizedBox(width: 8), // Add spacing between the icon and text
-                                width:
-                                    8), // Add spacing between the icon and text
                             const Text(
                               'Add devices / Assign a space model',
                               style: TextStyle(
@@ -175,15 +174,13 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                                 fontSize: 16,
                                 fontFamily: 'Aftika',
                                 fontWeight: FontWeight.w400,
-                                height:
+                                height: 1.5, // Adjust line height for better spacing
-                                    1.5, // Adjust line height for better spacing
                               ),
                             ),
                             const SizedBox(width: 8),
                           ],
                         ),
                       ),
-                  
                     ],
                   ),
                 ),
@@ -207,13 +204,12 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
               child: DefaultButton(
                 onPressed: () {
                   if (enteredName.isNotEmpty) {
-                    widget.onCreateSpace(enteredName,
+                    widget.onCreateSpace(enteredName, selectedIcon); // Pass the name and icon back
-                        selectedIcon); // Pass the name and icon back
                     Navigator.of(context).pop(); // Close the dialog
                   }
                 },
                 backgroundColor: ColorsManager.secondaryColor,
-                foregroundColor: Colors.white,
+                foregroundColor: ColorsManager.whiteColors,
                 child: const Text('OK'),
               ),
             ),

lib/pages/spaces_management/view/spaces_management_page.dart

@@ -5,9 +5,11 @@ import 'package:syncrow_web/pages/spaces_management/bloc/space_management_event.
 import 'package:syncrow_web/pages/spaces_management/bloc/space_management_state.dart';
 import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/connection_model.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/space_data_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/loaded_space_widget.dart';
+import 'package:syncrow_web/services/product_api.dart';
 import 'package:syncrow_web/services/space_mana_api.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
@@ -22,11 +24,14 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
   CommunityModel? selectedCommunity;
   SpaceModel? selectedSpace;
   final CommunitySpaceManagementApi _api = CommunitySpaceManagementApi();
+  final ProductApi _productApi = ProductApi();
   Map<String, List<SpaceModel>> communitySpaces = {};
   double canvasWidth = 1000;
   double canvasHeight = 1000;
   List<SpaceData> spaces = [];
   List<Connection> connections = [];
+  List<ProductModel> products = [];
+  bool isProductDataLoaded = false;
 
   @override
   void initState() {
@@ -37,7 +42,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
   Widget build(BuildContext context) {
     return BlocProvider(
       create: (context) =>
-          SpaceManagementBloc(CommunitySpaceManagementApi())..add(LoadCommunityAndSpacesEvent()),
+          SpaceManagementBloc(_api, _productApi)..add(LoadCommunityAndSpacesEvent()),
       child: WebScaffold(
         appBarTitle: Text('Space Management', style: Theme.of(context).textTheme.headlineLarge),
         enableMenuSidebar: false,
@@ -57,6 +62,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
               communities: state.communities,
               selectedCommunity: selectedCommunity,
               selectedSpace: selectedSpace,
+              products:state.products,
               onCommunitySelected: (community) {
                 setState(() {
                   selectedCommunity = community;

lib/pages/spaces_management/widgets/add_device_type_widget.dart

@@ -1,30 +1,44 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:syncrow_web/pages/common/buttons/default_button.dart';
-import 'package:syncrow_web/pages/device_managment/all_devices/models/device_type_model.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/counter_widget.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class AddDeviceWidget extends StatefulWidget {
-  const AddDeviceWidget({super.key});
+  final List<ProductModel>? products;
+  final ValueChanged<Map<String, int>>? onProductsSelected;
+
+  const AddDeviceWidget({super.key, this.products, this.onProductsSelected});
 
   @override
   _AddDeviceWidgetState createState() => _AddDeviceWidgetState();
 }
 
-// Create a static list of DeviceTypeModel
-final List<DeviceTypeModel> staticDeviceTypes = [
-  DeviceTypeModel(name: 'Smart Light', icon: Assets.smartLightIcon),
-  DeviceTypeModel(name: 'Presence Sensor', icon: Assets.presenceSensor),
-  DeviceTypeModel(name: '3 Gang Smart switch', icon: Assets.Gang3SwitchIcon),
-  DeviceTypeModel(name: '2 Gang Smart switch', icon: Assets.Gang2SwitchIcon),
-  DeviceTypeModel(name: '1 Gang Smart switch', icon: Assets.Gang1SwitchIcon),
-  DeviceTypeModel(name: 'Smart Door Lock', icon: Assets.DoorLockIcon),
-  DeviceTypeModel(name: 'Smart Gateway', icon: Assets.SmartGatewayIcon)
-];
-
 class _AddDeviceWidgetState extends State<AddDeviceWidget> {
+  late ScrollController _scrollController;
+  Map<String, int> productCounts = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController = ScrollController();
+
+    if (widget.products != null) {
+      for (var product in widget.products!) {
+        productCounts[product.uuid] = 0;
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _scrollController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     Size size = MediaQuery.of(context).size;
@@ -33,38 +47,41 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
       title: const Text('Add Devices'),
       backgroundColor: ColorsManager.whiteColors,
       content: Container(
-        width: size.width * 0.65, // Set width for the dialog
+        width: size.width * 0.65,
-        height: size.height * 0.57, // Set height for the dialog
+        height: size.height * 0.57, // Set width for the dialog
         color: ColorsManager.textFieldGreyColor,
         child: Column(
           children: [
             const SizedBox(height: 16.0),
             Expanded(
               child: Padding(
-                padding: const EdgeInsets.symmetric(
+                  padding: const EdgeInsets.symmetric(horizontal: 20.0), // Add horizontal padding
-                    horizontal: 20.0), // Add horizontal padding
+                  child: Scrollbar(
-                child: GridView.builder(
+                    controller: _scrollController,
-                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                    thumbVisibility: false,
-                    crossAxisCount: 6, // Display 6 items in a row
+                    child: GridView.builder(
-                    mainAxisSpacing: 10,
+                      controller: _scrollController,
-                    crossAxisSpacing: 10,
+                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                    childAspectRatio: 0.7, // Adjust the aspect ratio
+                        crossAxisCount: 6, // Display 6 items in a row
-                  ),
+                        mainAxisSpacing: 10,
-                  itemCount: staticDeviceTypes.length,
+                        crossAxisSpacing: 10,
-                  itemBuilder: (context, index) {
+                        childAspectRatio: 0.7, // Adjust the aspect ratio
-                    final deviceType = staticDeviceTypes[index];
+                      ),
-                    return _buildDeviceTypeTile(deviceType);
+                      itemCount: widget.products?.length ?? 0,
-                  },
+                      itemBuilder: (context, index) {
-                ),
+                        final deviceType = widget.products![index];
-              ),
+                        return _buildDeviceTypeTile(deviceType);
+                      },
+                    ),
+                  )),
             ),
           ],
         ),
       ),
       actions: [
         Row(
-          mainAxisAlignment: MainAxisAlignment
+          mainAxisAlignment:
-              .spaceBetween, // Align cancel to the left and continue to the right
+              MainAxisAlignment.spaceBetween, // Align cancel to the left and continue to the right
           children: [
             SizedBox(
               width: 200, // Define a specific width for the button
@@ -94,42 +111,48 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
     );
   }
 
-  Widget _buildDeviceTypeTile(DeviceTypeModel deviceType) {
+  Widget _buildDeviceTypeTile(ProductModel? deviceType) {
     return SizedBox(
-      width: 90,
+      width: 75,
-      height: 150, // Increase height if needed
+      height: 90, // Increase height if needed
       child: Card(
         elevation: 2,
         color: ColorsManager.whiteColors,
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(8),
         ),
         child: Padding(
-          padding: const EdgeInsets.all(8.0),
+          padding: const EdgeInsets.all(6.0),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               // Fixed height container for the icon
               Container(
-                height: 70, // Fixed height for the icon
+                height: 80,
+                width: 80,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle, // Make it circular
+                  color: ColorsManager.textFieldGreyColor, // Background color of the circle
+                  border: Border.all(
+                    color: ColorsManager.neutralGray, // Border color
+                    width: 2, // Border width
+                  ),
+                ), // Fixed height for the icon
                 child: Center(
                   child: SvgPicture.asset(
-                    deviceType.icon,
+                    deviceType?.icon ?? Assets.sensors,
-                    width: 40,
+                    width: 45,
-                    height: 40,
+                    height: 45,
                   ),
                 ),
               ),
               const SizedBox(height: 8),
               // Fixed height container for the name
-              Container(
+              SizedBox(
                 height: 35, // Fixed height for the text (adjust as needed)
                 child: Text(
-                  deviceType.name,
+                  deviceType?.name ?? '',
-                  style: const TextStyle(
+                  style: context.textTheme.bodySmall!.copyWith(color: ColorsManager.blackColor),
-                    fontSize: 12,
-                    fontWeight: FontWeight.w500,
-                  ),
                   textAlign: TextAlign.center,
                   maxLines: 2, // Allow up to 2 lines for long names
                   overflow: TextOverflow.ellipsis, // Handle overflow
@@ -137,7 +160,21 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
               ),
               const SizedBox(height: 8),
               // The custom counter widget aligned at the bottom
-              CounterWidget(),
+              CounterWidget(
+                initialCount: 0,
+                onCountChanged: (newCount) {
+                  setState(() {
+                    if (newCount > 0) {
+                      productCounts[deviceType!.uuid] = newCount;
+                    } else {
+                      productCounts.remove(deviceType!.uuid);
+                    }
+                    if (widget.onProductsSelected != null) {
+                      widget.onProductsSelected!(productCounts);
+                    }
+                  });
+                },
+              ),
             ],
           ),
         ),

lib/pages/spaces_management/widgets/community_structure_widget.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/common/buttons/add_space_button.dart';
 import 'package:syncrow_web/pages/spaces_management/bloc/space_management_bloc.dart';
 import 'package:syncrow_web/pages/spaces_management/bloc/space_management_event.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/curved_line_painter.dart';
@@ -15,6 +16,7 @@ import 'package:syncrow_web/utils/color_manager.dart';
 class CommunityStructureArea extends StatefulWidget {
   final CommunityModel? selectedCommunity;
   final SpaceModel? selectedSpace;
+  final List<ProductModel>? products;
 
   final List<SpaceModel> spaces;
   final List<Connection> connections;
@@ -22,6 +24,7 @@ class CommunityStructureArea extends StatefulWidget {
   CommunityStructureArea({
     this.selectedCommunity,
     this.selectedSpace,
+    this.products,
     required this.spaces,
     required this.connections,
   });
@@ -236,6 +239,7 @@ class _CommunityStructureAreaState extends State<CommunityStructureArea> {
       context: context,
       builder: (BuildContext context) {
         return CreateSpaceDialog(
+          products: widget.products, 
           onCreateSpace: (String name, String icon) {
             setState(() {
               // Set the first space in the center or use passed position

lib/pages/spaces_management/widgets/counter_widget.dart

@@ -2,20 +2,34 @@ import 'package:flutter/material.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
 
 class CounterWidget extends StatefulWidget {
+  final int initialCount;
+  final ValueChanged<int> onCountChanged;
+
+  const CounterWidget({
+    Key? key,
+    this.initialCount = 0,
+    required this.onCountChanged,
+  }) : super(key: key);
+
   @override
   _CounterWidgetState createState() => _CounterWidgetState();
 }
 
 class _CounterWidgetState extends State<CounterWidget> {
-  int _counter = 0;
+  late int _counter = 0;
+
+   @override
+  void initState() {
+    super.initState();
+    _counter = widget.initialCount; 
+  }
 
   @override
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
       decoration: BoxDecoration(
-        color: ColorsManager
+        color: ColorsManager.counterBackgroundColor, // Background color for the counter
-            .counterBackgroundColor, // Background color for the counter
         borderRadius: BorderRadius.circular(20), // Rounded corners
       ),
       child: Row(
@@ -28,10 +42,11 @@ class _CounterWidgetState extends State<CounterWidget> {
               setState(() {
                 if (_counter > 0) {
                   _counter--;
+                  widget.onCountChanged(_counter);
                 }
               });
             },
-            child: Icon(
+            child: const Icon(
               Icons.remove,
               color: ColorsManager.spaceColor, // Blue color
               size: 18, // Icon size
@@ -52,6 +67,7 @@ class _CounterWidgetState extends State<CounterWidget> {
             onTap: () {
               setState(() {
                 _counter++;
+                widget.onCountChanged(_counter); 
               });
             },
             child: const Icon(

lib/pages/spaces_management/widgets/loaded_space_widget.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
+import 'package:syncrow_web/pages/spaces_management/model/product_model.dart';
 import 'package:syncrow_web/pages/spaces_management/model/space_model.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/community_structure_widget.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/gradient_canvas_border_widget.dart';
@@ -11,6 +12,7 @@ class LoadedSpaceView extends StatefulWidget {
   final SpaceModel? selectedSpace;
   final ValueChanged<CommunityModel> onCommunitySelected;
   final ValueChanged<SpaceModel> onSpaceSelected;
+  final List<ProductModel>? products;
 
   const LoadedSpaceView({
     Key? key,
@@ -19,6 +21,7 @@ class LoadedSpaceView extends StatefulWidget {
     this.selectedSpace,
     required this.onCommunitySelected,
     required this.onSpaceSelected,
+    this.products,
   }) : super(key: key);
 
   @override
@@ -43,6 +46,7 @@ class _LoadedStateViewState extends State<LoadedSpaceView> {
               selectedSpace: widget.selectedSpace,
               spaces: widget.selectedCommunity?.spaces ?? [],
               connections: [],
+              products: widget.products,
             ),
           ],
         ),

lib/pages/spaces_management/widgets/sidebar_widget.dart

@@ -220,7 +220,6 @@ class _SidebarWidgetState extends State<SidebarWidget> {
           _selectedSpaceUuid = space.uuid;
           _selectedCommunityUuid = community.uuid; // Update selected community
         });
-        print(_selectedSpaceUuid);
         if (widget.onSpaceSelected != null) {
           widget.onSpaceSelected!(space);
         }