diff --git a/lib/pages/spaces_management/view/spaces_management_page.dart b/lib/pages/spaces_management/view/spaces_management_page.dart index a1a211b9..8b992a0c 100644 --- a/lib/pages/spaces_management/view/spaces_management_page.dart +++ b/lib/pages/spaces_management/view/spaces_management_page.dart @@ -19,45 +19,278 @@ class SpaceManagementPageState extends State { Size screenSize = MediaQuery.of(context).size; return Scaffold( - backgroundColor: ColorsManager.whiteColors, - appBar: AppBar( - title: const Text('Space Management'), - ), - body: InteractiveViewer( - boundaryMargin: const EdgeInsets.all( - double.infinity), // Allow panning to any side - minScale: 0.5, // Minimum zoom scale - maxScale: 2.5, // Maximum zoom scale - panEnabled: true, // Enable panning (move left/right) - scaleEnabled: true, // Enable zooming - child: MouseRegion( - cursor: SystemMouseCursors.grab, - child: Stack( - children: [ - // Draw lines using a CustomPaint widget - CustomPaint( - size: Size.infinite, - painter: CurvedLinePainter(connections), - ), - Center( - child: spaces.isEmpty - ? AddSpaceButton( - onTap: () { - _showCreateSpaceDialog(screenSize); - }, - ) - : Stack( - children: spaces - .asMap() - .entries - .map((entry) => - _buildSpaceCard(entry.key, screenSize)) - .toList(), + backgroundColor: ColorsManager.whiteColors, + appBar: AppBar( + title: const Text('Space Management'), + ), + body: Stack( + clipBehavior: Clip.none, + + children: [ + Row( + children: [ + // Sidebar for navigation and community list + Container( + width: 250, // Fixed width for sidebar + decoration: BoxDecoration( + color: Colors.white, // No gradient inside + ), + + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // "Communities" title with the add button + Container( + decoration: BoxDecoration( + color: Colors.white, // Background color + + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), + blurRadius: 10, + spreadRadius: 1, + offset: Offset(0, 2), // Adjust the shadow position ), - ), - ], + ], + ), + padding: const EdgeInsets.all( + 16.0), // Apply padding inside the container + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + 'Communities', + style: TextStyle( + fontSize: 22, + fontWeight: FontWeight.bold, + ), + ), + // Plus Button (+) + GestureDetector( + onTap: () { + // Handle the button tap action + }, + child: Container( + width: 30, + height: 30, + decoration: BoxDecoration( + color: Colors.white, + shape: BoxShape.circle, + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), + blurRadius: 10, + spreadRadius: 1, + ), + ], + ), + child: Center( + child: Icon(Icons.add, + color: Colors.blue, size: 18), + ), + ), + ), + ], + ), + ), + // Search bar + SizedBox(height: 16), + Container( + decoration: BoxDecoration( + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), + blurRadius: 10, + spreadRadius: 1, + offset: Offset(0, 2), // Slight shadow offset + ), + ], + ), + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 16.0), // Padding around the search bar + child: Container( + decoration: BoxDecoration( + color: Colors.grey[ + 200], // Light background for the search bar + borderRadius: BorderRadius.circular(10), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.05), + blurRadius: + 8, // Softer shadow for the search box + ), + ], + ), + child: TextField( + decoration: InputDecoration( + hintText: 'Search', + prefixIcon: + Icon(Icons.search, color: Colors.grey), + border: InputBorder.none, // No visible border + ), + ), + ), + ), + ), + SizedBox(height: 16), + // Example of community list + Expanded( + child: ListView( + children: [ + ListTile( + title: Text( + 'Downtown Dubai', + style: TextStyle( + color: Colors.black87, + fontWeight: FontWeight.w500, + ), + ), + ), + ListTile( + title: Text( + 'Dubai Creek Harbour', + style: TextStyle( + color: Colors.black87, + fontWeight: FontWeight.w500, + ), + ), + ), + ExpansionTile( + title: Text( + 'Dubai Hills Estate', + style: TextStyle( + color: Colors.black87, + fontWeight: FontWeight.w500, + ), + ), + children: [ + ListTile( + title: Text( + 'South Side', + style: TextStyle( + color: Colors + .black54, // Lighter text for nested + ), + ), + ), + ], + ), + ], + ), + ), + ], + ), ), - ))); + + // Right Side: Community Structure Area + Expanded( + child: Container( + decoration: BoxDecoration( + color: ColorsManager.whiteColors, + border: Border( + left: BorderSide( + color: Colors.white!, + width: 1.0), // Light left border to match + ), + ), + // Background color for canvas + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + padding: const EdgeInsets.all(16.0), + width: double.infinity, + decoration: BoxDecoration( + color: ColorsManager.whiteColors, + boxShadow: [ + BoxShadow( + color: Colors.black + .withOpacity(0.2), // Subtle shadow + spreadRadius: 0, // No spread + blurRadius: 8, // Softer shadow edges + offset: Offset(0, 4), // Shadow only on the bottom + ), + ], + ), + child: Text( + 'Community Structure', + style: TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + ), + ), + ), + // Use Expanded to ensure InteractiveViewer takes the available space + Expanded( + child: InteractiveViewer( + boundaryMargin: + const EdgeInsets.all(500), // Adjusted to 500 + minScale: 0.5, // Minimum zoom scale + maxScale: 2.5, // Maximum zoom scale + panEnabled: true, // Enable panning + scaleEnabled: true, // Enable zooming + child: Container( + width: 2000, // Large canvas + height: 2000, // Large canvas + color: Colors.transparent, // Transparent background + child: Stack( + clipBehavior: Clip.none, + children: [ + // Draw lines using a CustomPaint widget + CustomPaint( + size: + Size(2000, 2000), // Explicit canvas size + painter: CurvedLinePainter(connections), + ), + Center( + child: spaces.isEmpty + ? AddSpaceButton( + onTap: () { + _showCreateSpaceDialog(screenSize); + }, + ) + : Stack( + children: spaces + .asMap() + .entries + .map((entry) => _buildSpaceCard( + entry.key, screenSize)) + .toList(), + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ], + ), + Positioned( + top: 0, + bottom: 0, + left: 250, // Align with the sidebar's width + width: 6, // Width of the gradient border + child: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [ + Color(0x3F000000).withOpacity(0.2), // Light gray + Colors.transparent, // Transparent fade + ], + ), + ), + ), + ), + ], + ), + ); } // Function to open the Create Space dialog @@ -272,13 +505,23 @@ class CurvedLinePainter extends CustomPainter { ..strokeWidth = 2 ..style = PaintingStyle.stroke; + // Ensure connections exist before painting + if (connections.isEmpty) { + return; // Nothing to paint if there are no connections + } + for (var connection in connections) { + // Ensure positions are valid before drawing lines + if (connection.startSpace.position == null || + connection.endSpace.position == null) { + continue; + } + Offset start = connection.startSpace.position + Offset(75, 60); // Center bottom of start space Offset end = connection.endSpace.position + Offset(75, 0); // Center top of end space - // Draw straight line for left/right connections and curved line for down connections if (connection.direction == 'down') { // Curved line for down connections final controlPoint = Offset((start.dx + end.dx) / 2, start.dy + 50); @@ -286,32 +529,16 @@ class CurvedLinePainter extends CustomPainter { ..moveTo(start.dx, start.dy) ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, end.dx, end.dy); canvas.drawPath(path, paint); - } - if (connection.direction == 'right') { - start = Offset( - connection.startSpace.position.dx + 150, - connection.startSpace.position.dy + - 30); // Right center of the first space - end = Offset( - connection.endSpace.position.dx, - connection.endSpace.position.dy + - 30); // Left center of the new space + } else if (connection.direction == 'right') { + // Straight line for right connections canvas.drawLine(start, end, paint); } else if (connection.direction == 'left') { - // Straight line for left/right connections - start = Offset( - connection.startSpace.position.dx, - connection.startSpace.position.dy + - 30); // Left center of the first space - end = Offset( - connection.endSpace.position.dx + 150, - connection.endSpace.position.dy + - 30); // Right center of the new space + // Straight line for left connections canvas.drawLine(start, end, paint); } // Draw small connection dots at the start and end points - final dotPaint = Paint()..color = ColorsManager.blackColor; + final dotPaint = Paint()..color = Colors.black; canvas.drawCircle(start, 5, dotPaint); // Start dot canvas.drawCircle(end, 5, dotPaint); // End dot }