added community list view

lib/pages/spaces_management/view/community_list_view.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/spaces_management/model/community_model.dart';
+
+class CommunityListViewWidget extends StatelessWidget {
+  final List<CommunityModel> communities;
+
+  const CommunityListViewWidget({
+    Key? key,
+    required this.communities,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Size size = MediaQuery.of(context).size;
+
+    // Increase the item count by 1 to include the blank community
+    return Expanded(
+      child: Container(
+        color: Colors.white,
+        child: GridView.builder(
+          padding: const EdgeInsets.all(16.0),
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 3, // Three containers per row
+            crossAxisSpacing: size.height * 0.041,
+            mainAxisSpacing: size.width * 0.015,
+            childAspectRatio: 361 / 239, // Aspect ratio based on container size
+          ),
+          itemCount: communities.length + 1, // One additional item for the blank community
+          itemBuilder: (context, index) {
+            // If the index is 0, display the blank community, otherwise display the normal ones
+            if (index == 0) {
+              return _buildBlankCommunityCard(size);
+            } else {
+              return _buildCommunityCard(communities[index - 1], size);
+            }
+          },
+        ),
+      ),
+    );
+  }
+
+  // Build the blank community container
+  Widget _buildBlankCommunityCard(Size size) {
+    return Container(
+      width: size.width * .18,
+      height: size.height * .22,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // Inner blank container with white background and border
+          Container(
+            width: size.width * .18,
+            height: size.height * .16,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(5),
+              border: Border.all(
+                color: Color(0xFFE5E5E5),
+                width: 5,
+              ),
+            ),
+          ),
+          SizedBox(height: size.height * 0.02), // Add spacing between container and text
+          // Text saying "Blank" for the blank community
+          Text(
+            'Blank',
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              color: Colors.black,
+              fontSize: 18,
+              fontFamily: 'Aftika',
+              fontWeight: FontWeight.w400,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // Build a single community container based on the format provided
+  Widget _buildCommunityCard(CommunityModel community, Size size) {
+    return Container(
+      width: size.width * .18,
+      height: size.height * .22,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          // Inner container with white background and border
+          Container(
+            width: size.width * .18,
+            height: size.height * .16,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(5),
+              border: Border.all(
+                color: Color(0xFFE5E5E5),
+                width: 5,
+              ),
+            ),
+          ),
+          SizedBox(height: size.height * 0.02), // Add spacing between container and text
+          // Community name text
+          Text(
+            community.name ?? 'Blank', // Display community name
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              color: Colors.black,
+              fontSize: 18,
+              fontFamily: 'Aftika',
+              fontWeight: FontWeight.w400,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/spaces_management/view/spaces_management_page.dart

@@ -6,6 +6,7 @@ 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/space_model.dart';
+import 'package:syncrow_web/pages/spaces_management/view/community_list_view.dart';
 import 'package:syncrow_web/pages/spaces_management/view/curved_line_painter.dart';
 import 'package:syncrow_web/pages/spaces_management/view/dialogs/create_space_dialog.dart';
 import 'package:syncrow_web/pages/spaces_management/widgets/sidebar_widget.dart';
@@ -25,6 +26,9 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
   List<SpaceData> spaces = [];
   List<Connection> connections = [];
 
+  // Track whether to show the community list view or community structure
+  bool showCommunityStructure = false;
+
   // API instance
   final CommunitySpaceManagementApi _api = CommunitySpaceManagementApi();
 
@@ -80,7 +84,12 @@ class SpaceManagementPageState extends State<SpaceManagementPage> {
                     );
               },
             ),
-            _buildCommunityStructureArea(context, screenSize),
+            SizedBox(width: 45),
+            showCommunityStructure
+                ? _buildCommunityStructureArea(context, screenSize)
+                : CommunityListViewWidget(
+                    communities: communities,
+                  ),
           ],
         ),
         _buildGradientBorder(),