enhansed ui

lib/view/service_project/service_project_details_screen.dart

@@ -478,25 +478,48 @@ class _ServiceProjectDetailsScreenState
 
     if (controller.teamErrorMessage.value.isNotEmpty &&
         controller.teamList.isEmpty) {
-        return Center(
-            child: MyText.bodyMedium(controller.teamErrorMessage.value));
+      return Center(child: MyText.bodyMedium(controller.teamErrorMessage.value));
     }
 
     if (controller.teamList.isEmpty) {
       return Center(child: MyText.bodyMedium("No team members found"));
     }
 
+    // Group team members by their role ID
+    final Map<String, List> roleGroups = {};
+    for (var team in controller.teamList) {
+      roleGroups.putIfAbsent(team.teamRole.id, () => []).add(team);
+    }
+
     return ListView.separated(
       padding: const EdgeInsets.all(12),
-        itemCount: controller.teamList.length,
+      itemCount: roleGroups.keys.length,
       separatorBuilder: (_, __) => const SizedBox(height: 12),
       itemBuilder: (context, index) {
-          final team = controller.teamList[index];
+        final roleId = roleGroups.keys.elementAt(index);
+        final teamMembers = roleGroups[roleId]!;
+        final roleName = teamMembers.first.teamRole.name;
+
         return Card(
-            shape:
-                RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+          elevation: 3,
+          shadowColor: Colors.black26,
           child: Padding(
             padding: const EdgeInsets.all(16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Role header
+                MyText.bodyLarge(
+                  roleName,
+                  fontWeight: 700,
+                  color: Colors.black87,
+                ),
+                const Divider(height: 20, thickness: 1),
+                // List of team members inside this role card
+                ...teamMembers.map((team) {
+                  return Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 8),
                     child: Row(
                       children: [
                         Avatar(
@@ -514,17 +537,21 @@ class _ServiceProjectDetailsScreenState
                             children: [
                               MyText.titleMedium(
                                 "${team.employee.firstName} ${team.employee.lastName}",
-                            fontWeight: 700),
-                        MyText.bodySmall(team.teamRole.name,
-                            color: Colors.grey[700]),
+                                fontWeight: 600,
+                              ),
                               MyText.bodySmall(
                                 "Status: ${team.isActive ? 'Active' : 'Inactive'}",
-                            color: Colors.grey[700]),
+                                color: Colors.grey[700],
+                              ),
                             ],
                           ),
                         ),
                       ],
                     ),
+                  );
+                }).toList(),
+              ],
+            ),
           ),
         );
       },
@@ -532,6 +559,7 @@ class _ServiceProjectDetailsScreenState
   });
 }
 
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(