updated device management

lib/pages/spaces_management/bloc/space_management_event.dart

@@ -17,7 +17,7 @@ class CreateSpaceEvent extends SpaceManagementEvent {
   final int? parentIndex;
   final String? direction;
 
-  CreateSpaceEvent({
+  const CreateSpaceEvent({
     required this.name,
     required this.icon,
     required this.position,
@@ -39,7 +39,7 @@ class UpdateSpacePositionEvent extends SpaceManagementEvent {
   final int index;
   final Offset newPosition;
 
-  UpdateSpacePositionEvent(this.index, this.newPosition);
+  const UpdateSpacePositionEvent(this.index, this.newPosition);
 
   @override
   List<Object> get props => [index, newPosition];
@@ -51,7 +51,7 @@ class CreateCommunityEvent extends SpaceManagementEvent {
   final String description;
   final String regionId;
 
-  CreateCommunityEvent({
+  const CreateCommunityEvent({
     required this.name,
     required this.description,
     required this.regionId,

lib/pages/spaces_management/model/space_response_model.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/material.dart';
 
 import 'space_model.dart';
 

lib/pages/spaces_management/view/community_list_view.dart

@@ -6,10 +6,10 @@ class CommunityListViewWidget extends StatelessWidget {
   final Function(CommunityModel?) onCommunitySelected;
 
   const CommunityListViewWidget({
-    Key? key,
+    super.key,
     required this.communities,
     required this.onCommunitySelected,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -52,7 +52,7 @@ class CommunityListViewWidget extends StatelessWidget {
 
   // Build the blank community container
   Widget _buildBlankCommunityCard(Size size) {
-    return Container(
+    return SizedBox(
       width: size.width * .18,
       height: size.height * .22,
       child: Column(
@@ -66,7 +66,7 @@ class CommunityListViewWidget extends StatelessWidget {
               color: Colors.white,
               borderRadius: BorderRadius.circular(5),
               border: Border.all(
-                color: Color(0xFFE5E5E5),
+                color: const Color(0xFFE5E5E5),
                 width: 5,
               ),
             ),
@@ -92,7 +92,7 @@ class CommunityListViewWidget extends StatelessWidget {
 
   // Build a single community container based on the format provided
   Widget _buildCommunityCard(CommunityModel community, Size size) {
-    return Container(
+    return SizedBox(
       width: size.width * .18,
       height: size.height * .22,
       child: Column(
@@ -106,7 +106,7 @@ class CommunityListViewWidget extends StatelessWidget {
               color: Colors.white,
               borderRadius: BorderRadius.circular(5),
               border: Border.all(
-                color: Color(0xFFE5E5E5),
+                color: const Color(0xFFE5E5E5),
                 width: 5,
               ),
             ),
@@ -118,7 +118,7 @@ class CommunityListViewWidget extends StatelessWidget {
           Text(
             community.name ?? 'Blank', // Display community name
             textAlign: TextAlign.center,
-            style: TextStyle(
+            style: const TextStyle(
               color: Colors.black,
               fontSize: 18,
               fontFamily: 'Aftika',

lib/pages/spaces_management/view/curved_line_painter.dart

@@ -23,15 +23,14 @@ class CurvedLinePainter extends CustomPainter {
 
     for (var connection in connections) {
       // Ensure positions are valid before drawing lines
-      if (connection.startSpace.position == null ||
+      if (connection.endSpace.position == null) {
-          connection.endSpace.position == null) {
         continue;
       }
 
       Offset start = connection.startSpace.position +
-          Offset(75, 60); // Center bottom of start space
+          const Offset(75, 60); // Center bottom of start space
       Offset end = connection.endSpace.position +
-          Offset(75, 0); // Center top of end space
+          const Offset(75, 0); // Center top of end space
 
       if (connection.direction == 'down') {
         // Curved line for down connections

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

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
 
 class CreateCommunityDialog extends StatefulWidget {
   final Function(String name, String description, String regionId)
@@ -120,7 +121,7 @@ class CreateCommunityDialogState extends State<CreateCommunityDialog> {
                         },
                         style: ElevatedButton.styleFrom(
                           padding: const EdgeInsets.symmetric(vertical: 16),
-                          backgroundColor: const Color(0xFF023DFE),
+                          backgroundColor: ColorsManager.secondaryColor,
                           foregroundColor: Colors.white,
                           shape: RoundedRectangleBorder(
                             borderRadius: BorderRadius.circular(10),

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

@@ -138,7 +138,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                         onPressed: () {
                           showDialog(
                             context: context,
-                            builder: (context) => AddDeviceWidget(),
+                            builder: (context) => const AddDeviceWidget(),
                           );
                           // Logic to assign devices or select a model
                         },
@@ -183,6 +183,7 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                           ],
                         ),
                       ),
+                  
                     ],
                   ),
                 ),
@@ -211,9 +212,9 @@ class CreateSpaceDialogState extends State<CreateSpaceDialog> {
                     Navigator.of(context).pop(); // Close the dialog
                   }
                 },
-                child: const Text('OK'),
+                backgroundColor: ColorsManager.secondaryColor,
-                backgroundColor: const Color(0xFF023DFE),
                 foregroundColor: Colors.white,
+                child: const Text('OK'),
               ),
             ),
           ],

lib/pages/spaces_management/view/spaces_management_page.dart

@@ -18,6 +18,8 @@ import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
 
 class SpaceManagementPage extends StatefulWidget {
+  const SpaceManagementPage({super.key});
+
   @override
   SpaceManagementPageState createState() => SpaceManagementPageState();
 }
@@ -127,14 +129,14 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                     color: ColorsManager.shadowBlackColor, // Subtle shadow
                     spreadRadius: 0, // No spread
                     blurRadius: 8, // Softer shadow edges
-                    offset: Offset(0, 4), // Shadow only on the bottom
+                    offset: const Offset(0, 4), // Shadow only on the bottom
                   ),
                 ],
               ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(
+                  const Text(
                     'Community Structure',
                     style: TextStyle(
                       fontSize: 24,
@@ -144,7 +146,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                   if (selectedCommunity != null) ...[
                     Text(
                       selectedCommunity!.name, // Show community name
-                      style: TextStyle(
+                      style: const TextStyle(
                         fontSize: 16,
                         color: ColorsManager.blackColor, // Slightly muted color
                       ),
@@ -176,7 +178,7 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                             clipBehavior: Clip.none,
                             children: [
                               CustomPaint(
-                                size: Size(4000, 4000),
+                                size: const Size(4000, 4000),
                                 painter: CurvedLinePainter(connections),
                               ),
                               ...spaces.asMap().entries.map((entry) {

lib/pages/spaces_management/widgets/add_device_type_widget.dart

@@ -1,11 +1,14 @@
 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/device_managment/all_devices/models/device_type_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';
 
 class AddDeviceWidget extends StatefulWidget {
-  const AddDeviceWidget({Key? key}) : super(key: key);
+  const AddDeviceWidget({super.key});
 
   @override
   _AddDeviceWidgetState createState() => _AddDeviceWidgetState();
@@ -25,45 +28,68 @@ final List<DeviceTypeModel> staticDeviceTypes = [
 class _AddDeviceWidgetState extends State<AddDeviceWidget> {
   @override
   Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+
     return AlertDialog(
       title: const Text('Add Devices'),
       backgroundColor: ColorsManager.whiteColors,
       content: Container(
-        width: 800, // Set width for the dialog
+        width: size.width * 0.65, // Set width for the dialog
-        height: 600, // Set height for the dialog
+        height: size.height * 0.57, // Set height for the dialog
-        color: Color(0xFFF4F4F4),
+        color: ColorsManager.textFieldGreyColor,
         child: Column(
           children: [
             const SizedBox(height: 16.0),
             Expanded(
-              child: GridView.builder(
+              child: Padding(
-                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                padding: const EdgeInsets.symmetric(
-                  crossAxisCount: 3, // Adjust number of items per row
+                    horizontal: 20.0), // Add horizontal padding
-                  mainAxisSpacing: 10,
+                child: GridView.builder(
-                  crossAxisSpacing: 10,
+                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                  childAspectRatio: 1.5,
+                    crossAxisCount: 6, // Display 6 items in a row
+                    mainAxisSpacing: 10,
+                    crossAxisSpacing: 10,
+                    childAspectRatio: 0.7, // Adjust the aspect ratio
+                  ),
+                  itemCount: staticDeviceTypes.length,
+                  itemBuilder: (context, index) {
+                    final deviceType = staticDeviceTypes[index];
+                    return _buildDeviceTypeTile(deviceType);
+                  },
                 ),
-                itemCount: staticDeviceTypes.length,
-                itemBuilder: (context, index) {
-                  final deviceType = staticDeviceTypes[index];
-                  return _buildDeviceTypeTile(deviceType);
-                },
               ),
             ),
           ],
         ),
       ),
       actions: [
-        TextButton(
+        Row(
-          onPressed: () => Navigator.of(context).pop(),
+          mainAxisAlignment: MainAxisAlignment
-          child: const Text('Cancel'),
+              .spaceBetween, // Align cancel to the left and continue to the right
-        ),
+          children: [
-        TextButton(
+            SizedBox(
-          onPressed: () {
+              width: 200, // Define a specific width for the button
-            // Logic to save or confirm selected devices
+              child: DefaultButton(
-            Navigator.of(context).pop();
+                onPressed: () {
-          },
+                  Navigator.of(context).pop();
-          child: const Text('OK'),
+                },
+                backgroundColor: ColorsManager.boxColor,
+                foregroundColor: ColorsManager.blackColor,
+                child: const Text('Cancel'),
+              ),
+            ),
+            SizedBox(
+              width: 200, // Define a specific width for the button
+              child: DefaultButton(
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+                backgroundColor: ColorsManager.secondaryColor,
+                foregroundColor: Colors.white,
+                child: const Text('Continue'),
+              ),
+            ),
+          ],
         ),
       ],
     );
@@ -71,65 +97,52 @@ class _AddDeviceWidgetState extends State<AddDeviceWidget> {
 
   Widget _buildDeviceTypeTile(DeviceTypeModel deviceType) {
     return SizedBox(
-        width: 90, // Set desired width
+      width: 90,
-        height: 120, // Set desired height
+      height: 150, // Increase height if needed
-        child: Card(
+      child: Card(
-          elevation: 2,
+        elevation: 2,
-          color: ColorsManager.whiteColors,
+        color: ColorsManager.whiteColors,
-          shape: RoundedRectangleBorder(
+        shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(10),
+          borderRadius: BorderRadius.circular(10),
-          ),
+        ),
-          child: Padding(
+        child: Padding(
-            padding: const EdgeInsets.all(12.0),
+          padding: const EdgeInsets.all(8.0),
-            child: Column(
+          child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
-              children: [
+            children: [
-                Container(
+              // Fixed height container for the icon
-                  width: 60, // Width for the circular container
+              Container(
-                  height: 60, // Height for the circular container
+                height: 70, // Fixed height for the icon
-                  decoration: BoxDecoration(
+                child: Center(
-                    shape: BoxShape.circle,
+                  child: SvgPicture.asset(
-                    border: Border.all(
+                    deviceType.icon,
-                      color: ColorsManager.textFieldGreyColor, // Border color
+                    width: 40,
-                      width: 2, // Border width
+                    height: 40,
-                    ),
-                    color: ColorsManager.textFieldGreyColor,
-                  ),
-                  child: Center(
-                    child: SvgPicture.asset(
-                      deviceType.icon,
-                      width: 40,
-                      height: 40,
-                    ),
                   ),
                 ),
-                const SizedBox(height: 8),
+              ),
-                Text(
+              const SizedBox(height: 8),
+              // Fixed height container for the name
+              Container(
+                height: 35, // Fixed height for the text (adjust as needed)
+                child: Text(
                   deviceType.name,
                   style: const TextStyle(
-                    fontSize: 14,
+                    fontSize: 12,
                     fontWeight: FontWeight.w500,
                   ),
+                  textAlign: TextAlign.center,
+                  maxLines: 2, // Allow up to 2 lines for long names
+                  overflow: TextOverflow.ellipsis, // Handle overflow
                 ),
-                const SizedBox(height: 8),
+              ),
-                Row(
+              const SizedBox(height: 8),
-                  mainAxisAlignment: MainAxisAlignment.center,
+              // The custom counter widget aligned at the bottom
-                  children: [
+              CounterWidget(),
-                    IconButton(
+            ],
-                      onPressed: () {
-                        setState(() {});
-                      },
-                      icon: const Icon(Icons.remove_circle_outline),
-                    ),
-                    IconButton(
-                      onPressed: () {},
-                      icon: const Icon(Icons.add_circle_outline),
-                    ),
-                  ],
-                ),
-              ],
-            ),
           ),
-        ));
+        ),
+      ),
+    );
   }
 }

lib/pages/spaces_management/widgets/community_tile.dart

@@ -8,12 +8,12 @@ class CommunityTile extends StatefulWidget {
   final Function(String, bool) onExpansionChanged;
 
   const CommunityTile({
-    Key? key,
+    super.key,
     required this.title,
     required this.initiallyExpanded,
     required this.onExpansionChanged,
     this.children,
-  }) : super(key: key);
+  });
 
   @override
   _CommunityTileState createState() => _CommunityTileState();

lib/pages/spaces_management/widgets/counter_widget.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CounterWidget extends StatefulWidget {
+  @override
+  _CounterWidgetState createState() => _CounterWidgetState();
+}
+
+class _CounterWidgetState extends State<CounterWidget> {
+  int _counter = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+      decoration: BoxDecoration(
+        color: ColorsManager
+            .counterBackgroundColor, // Background color for the counter
+        borderRadius: BorderRadius.circular(20), // Rounded corners
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // Decrement button
+          GestureDetector(
+            onTap: () {
+              setState(() {
+                if (_counter > 0) {
+                  _counter--;
+                }
+              });
+            },
+            child: Icon(
+              Icons.remove,
+              color: ColorsManager.spaceColor, // Blue color
+              size: 18, // Icon size
+            ),
+          ),
+          const SizedBox(width: 8),
+          // Counter value display
+          Text(
+            '$_counter',
+            style: const TextStyle(
+              color: ColorsManager.spaceColor, // Blue color
+              fontSize: 16,
+            ),
+          ),
+          const SizedBox(width: 8),
+          // Increment button
+          GestureDetector(
+            onTap: () {
+              setState(() {
+                _counter++;
+              });
+            },
+            child: const Icon(
+              Icons.add,
+              color: ColorsManager.spaceColor, // Blue color
+              size: 18, // Icon size
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/spaces_management/widgets/gradient_canvas_border_widget.dart

@@ -8,12 +8,12 @@ class GradientCanvasBorderWidget extends StatelessWidget {
   final double width;
 
   const GradientCanvasBorderWidget({
-    Key? key,
+    super.key,
     this.top = 0,
     this.bottom = 0,
     this.left = 300,
     this.width = 8,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

lib/pages/spaces_management/widgets/plus_button_widget.dart

@@ -9,13 +9,13 @@ class PlusButtonWidget extends StatelessWidget {
   final Function(int index, Offset newPosition, String direction) onButtonTap;
 
   const PlusButtonWidget({
-    Key? key,
+    super.key,
     required this.index,
     required this.direction,
     required this.offset,
     required this.screenSize,
     required this.onButtonTap,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -27,13 +27,13 @@ class PlusButtonWidget extends StatelessWidget {
           Offset newPosition;
           switch (direction) {
             case 'left':
-              newPosition = Offset(-200, 0);
+              newPosition = const Offset(-200, 0);
               break;
             case 'right':
-              newPosition = Offset(200, 0);
+              newPosition = const Offset(200, 0);
               break;
             case 'down':
-              newPosition = Offset(0, 150);
+              newPosition = const Offset(0, 150);
               break;
             default:
               newPosition = Offset.zero;

lib/pages/spaces_management/widgets/sidebar_widget.dart

@@ -17,7 +17,7 @@ class SidebarWidget extends StatefulWidget {
   final Function(String)? onCommunitySelected;
   final List<CommunityModel> communities;
 
-  SidebarWidget({this.onCommunitySelected, required this.communities});
+  const SidebarWidget({super.key, this.onCommunitySelected, required this.communities});
 
   @override
   _SidebarWidgetState createState() => _SidebarWidgetState();

lib/pages/spaces_management/widgets/space_card_widget.dart

@@ -13,7 +13,7 @@ class SpaceCardWidget extends StatelessWidget {
   final Widget Function(int index) buildSpaceContainer;
 
   const SpaceCardWidget({
-    Key? key,
+    super.key,
     required this.index,
     required this.screenSize,
     required this.position,
@@ -22,7 +22,7 @@ class SpaceCardWidget extends StatelessWidget {
     required this.onHoverChanged,
     required this.onButtonTap,
     required this.buildSpaceContainer,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

lib/pages/spaces_management/widgets/space_container_widget.dart

@@ -9,11 +9,11 @@ class SpaceContainerWidget extends StatelessWidget {
   final String name;
 
   const SpaceContainerWidget({
-    Key? key,
+    super.key,
     required this.index,
     required this.icon,
     required this.name,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {

lib/pages/spaces_management/widgets/space_tile_widget.dart

@@ -8,12 +8,12 @@ class SpaceTile extends StatefulWidget {
   final List<Widget>? children;
 
   const SpaceTile({
-    Key? key,
+    super.key,
     required this.title,
     required this.initiallyExpanded,
     required this.onExpansionChanged,
     this.children,
-  }) : super(key: key);
+  });
 
   @override
   _SpaceTileState createState() => _SpaceTileState();

lib/services/space_mana_api.dart

@@ -16,15 +16,11 @@ class CommunitySpaceManagementApi {
           List<dynamic> jsonData = json['data'];
 
           // Check if jsonData is actually a List
-          if (jsonData is List) {
+          List<CommunityModel> communityList = jsonData.map((jsonItem) {
-            List<CommunityModel> communityList = jsonData.map((jsonItem) {
+            return CommunityModel.fromJson(jsonItem);
-              return CommunityModel.fromJson(jsonItem);
+          }).toList();
-            }).toList();
+          return communityList;
-            return communityList;
+                },
-          } else {
-            throw Exception('Expected a list but got something else.');
-          }
-        },
       );
       return response;
     } catch (e) {

lib/utils/color_manager.dart

@@ -12,7 +12,7 @@ abstract class ColorsManager {
   static const Color onSecondaryColor = Color(0xFF023DFE);
   static Color shadowBlackColor = Colors.black.withOpacity(0.2);
 
-  static Color dialogBlueTitle = Color(0xFF023DFE).withOpacity(0.6);
+  static Color dialogBlueTitle = const Color(0xFF023DFE).withOpacity(0.6);
 
   static const Color primaryTextColor = Colors.black;
 
@@ -50,5 +50,6 @@ abstract class ColorsManager {
   static const Color semiTransparentBlackColor = Color(0x3F000000);
   static const Color transparentColor = Color(0x00000000);
   static const Color spaceColor = Color(0xB2023DFE);
+  static const Color counterBackgroundColor = Color(0xCCF4F4F4);
 }
 //0036E6

lib/utils/style.dart

@@ -21,11 +21,11 @@ InputDecoration? textBoxDecoration({bool suffixIcon = false}) =>
         borderSide: BorderSide.none, // Remove the underline
       ),
       errorBorder: OutlineInputBorder(
-        borderSide: BorderSide(color: Colors.red, width: 2),
+        borderSide: const BorderSide(color: Colors.red, width: 2),
         borderRadius: BorderRadius.circular(8),
       ),
       focusedErrorBorder: OutlineInputBorder(
-        borderSide: BorderSide(color: Colors.red, width: 2),
+        borderSide: const BorderSide(color: Colors.red, width: 2),
         borderRadius: BorderRadius.circular(8),
       ),
     );