feat: Admin UI: Add Mentee Profile Card to Reviewing Mentor Application page

admin-wcc-app/__tests__/pages/admin/mentor.test.tsx

@@ -49,6 +49,48 @@ const reviewingApp = {
   reviewed: false,
   matched: false,
   daysSinceApplied: 3,
+  mentee: {
+    id: 7,
+    fullName: 'Mentee #7',
+    position: 'Frontend Developer',
+    email: 'mentee7@example.com',
+    slackDisplayName: '@mentee7',
+    country: {
+      countryCode: 'GB',
+      countryName: 'United Kingdom',
+    },
+    city: 'London',
+    companyName: 'Test Company',
+    memberTypes: ['Mentee'],
+    images: [],
+    network: [
+      {
+        type: 'linkedin',
+        link: 'https://www.linkedin.com/in/test-mentee',
+      },
+    ],
+    isWomen: true,
+    profileStatus: 'ACTIVE',
+    skills: {
+      yearsExperience: 2,
+      areas: [
+        {
+          technicalArea: 'FRONTEND',
+          proficiencyLevel: 'INTERMEDIATE',
+        },
+      ],
+      languages: [
+        {
+          language: 'JAVASCRIPT',
+          proficiencyLevel: 'INTERMEDIATE',
+        },
+      ],
+      mentorshipFocus: ['GROW_BEGINNER_TO_MID'],
+    },
+    bio: 'Test mentee bio',
+    spokenLanguages: ['English'],
+    availableHsMonth: 4,
+  },
 };
 
 const pendingApp = {

admin-wcc-app/pages/admin/mentor.tsx

@@ -33,6 +33,7 @@ import {
 } from '@/services/menteeService';
 import { MenteeApplication } from '@/types/menteeApplication';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import MenteeCard from '@/components/mentorship/MenteeCard';
 
 interface MemberWithId {
   id: number;
@@ -313,9 +314,6 @@ export default function MentorDashboardPage() {
                       <TableCell>
                         <strong>Mentee</strong>
                       </TableCell>
-                      <TableCell>
-                        <strong>Bio</strong>
-                      </TableCell>
                       <TableCell>
                         <strong>Message</strong>
                       </TableCell>
@@ -329,87 +327,13 @@ export default function MentorDashboardPage() {
                   </TableHead>
                   <TableBody>
                     {pendingApplications.map((app) => {
-                      const name = app.menteeName || `Mentee #${app.menteeId}`;
                       return (
                         <TableRow key={app.applicationId} hover>
                           <TableCell>
                             <Stack direction="row" alignItems="center" spacing={1}>
-                              <Avatar
-                                sx={{
-                                  width: 32,
-                                  height: 32,
-                                  fontSize: 13,
-                                  bgcolor: 'secondary.main',
-                                }}
-                              >
-                                {getInitials(name)}
-                              </Avatar>
-                              <Typography variant="body2">{name}</Typography>
-                              {app.menteeLinkedIn && (
-                                <Button
-                                  href={app.menteeLinkedIn}
-                                  target="_blank"
-                                  rel="noopener noreferrer"
-                                  size="small"
-                                  sx={{ minWidth: 'auto', p: 0.5 }}
-                                >
-                                  <LinkedInIcon fontSize="small" sx={{ color: '#0077b5' }} />
-                                </Button>
-                              )}
+                              <MenteeCard mentee={app.mentee} />
                             </Stack>
                           </TableCell>
-                          <TableCell sx={{ maxWidth: 250 }}>
-                            {app.menteeBio ? (
-                              expandedBioId === app.applicationId ? (
-                                <Box>
-                                  <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
-                                    {app.menteeBio}
-                                  </Typography>
-                                  <Button
-                                    size="small"
-                                    onClick={() => setExpandedBioId(null)}
-                                    sx={{ p: 0, minWidth: 'auto', textTransform: 'none' }}
-                                  >
-                                    Show less
-                                  </Button>
-                                </Box>
-                              ) : (
-                                <Box>
-                                  <Typography
-                                    variant="body2"
-                                    ref={(el) => {
-                                      if (el) {
-                                        bioRefs.current.set(app.applicationId, el);
-                                      } else {
-                                        bioRefs.current.delete(app.applicationId);
-                                      }
-                                    }}
-                                    sx={{
-                                      display: '-webkit-box',
-                                      WebkitLineClamp: 2,
-                                      WebkitBoxOrient: 'vertical',
-                                      overflow: 'hidden',
-                                    }}
-                                  >
-                                    {app.menteeBio}
-                                  </Typography>
-                                  {overflowingBioIds.has(app.applicationId) && (
-                                    <Button
-                                      size="small"
-                                      onClick={() => setExpandedBioId(app.applicationId)}
-                                      sx={{ p: 0, minWidth: 'auto', textTransform: 'none' }}
-                                    >
-                                      Show more
-                                    </Button>
-                                  )}
-                                </Box>
-                              )
-                            ) : (
-                              <Typography variant="body2" color="text.secondary">
-                                -
-                              </Typography>
-                            )}
-                          </TableCell>
                           <TableCell sx={{ maxWidth: 300 }}>
                             {expandedMessageId === app.applicationId ? (
                               <Box>

admin-wcc-app/types/menteeApplication.ts

@@ -1,3 +1,6 @@
+import { MenteeItem } from '@/types/mentorship';
+import type { SocialNetwork } from '@/types/member';
+
 export type ApplicationStatus =
   | 'PENDING'
   | 'MENTOR_REVIEWING'
@@ -29,6 +32,7 @@ export interface MenteeApplication {
   menteeName?: string;
   menteeLinkedIn?: string;
   menteeBio?: string;
+  mentee: MenteeItem;
 }
 
 export interface MenteeSkillArea {
@@ -56,7 +60,6 @@ export interface MenteeImage {
 
 export { SocialNetworkType } from '@/types/member';
 export type { SocialNetwork, SocialNetworkTypeValue } from '@/types/member';
-import type { SocialNetwork } from '@/types/member';
 
 export interface DashboardMentee {
   id: number;

src/main/java/com/wcc/platform/domain/platform/mentorship/MenteeApplicationResponse.java

@@ -29,7 +29,24 @@ public record MenteeApplicationResponse(
     long daysSinceApplied,
     String menteeName,
     String menteeLinkedIn,
-    String menteeBio) {
+    String menteeBio,
+    Mentee mentee) {
+
+  /**
+   * Creates an enriched response from a MenteeApplication and full mentee profile.
+   *
+   * @param application the base application
+   * @param mentee the mentee profile
+   * @return enriched response with mentee information
+   */
+  public static MenteeApplicationResponse from(
+      final MenteeApplication application, final Mentee mentee) {
+    if (mentee == null) {
+      return from(application);
+    }
+
+    return from(application, mentee.getFullName(), mentee.getNetwork(), mentee.getBio(), mentee);
+  }
 
   /**
    * Creates an enriched response from a MenteeApplication and mentee details.
@@ -45,6 +62,15 @@ public static MenteeApplicationResponse from(
       final String menteeName,
       final List<SocialNetwork> networks,
       final String bio) {
+    return from(application, menteeName, networks, bio, null);
+  }
+
+  private static MenteeApplicationResponse from(
+      final MenteeApplication application,
+      final String menteeName,
+      final List<SocialNetwork> networks,
+      final String bio,
+      final Mentee mentee) {
 
     final String linkedIn = extractLinkedIn(networks);
 
@@ -68,7 +94,8 @@ public static MenteeApplicationResponse from(
         application.getDaysSinceApplied(),
         menteeName,
         linkedIn,
-        bio);
+        bio,
+        mentee);
   }
 
   /**
@@ -79,7 +106,7 @@ public static MenteeApplicationResponse from(
    * @return response without enriched mentee information
    */
   public static MenteeApplicationResponse from(final MenteeApplication application) {
-    return from(application, null, List.of(), null);
+    return from(application, null, List.of(), null, null);
   }
 
   private static String extractLinkedIn(final List<SocialNetwork> networks) {
@@ -92,4 +119,4 @@ private static String extractLinkedIn(final List<SocialNetwork> networks) {
         .findFirst()
         .orElse(null);
   }
-}
+}

src/main/java/com/wcc/platform/service/MenteeWorkflowService.java

@@ -298,8 +298,7 @@ private List<MenteeApplicationResponse> enrichApplications(
             app -> {
               final Mentee mentee = menteeMap.get(app.getMenteeId());
               if (mentee != null) {
-                return MenteeApplicationResponse.from(
-                    app, mentee.getFullName(), mentee.getNetwork(), mentee.getBio());
+                return MenteeApplicationResponse.from(app, mentee);
               }
               return MenteeApplicationResponse.from(app);
             })

src/test/java/com/wcc/platform/service/MenteeApplicationEnrichedTest.java

@@ -65,11 +65,18 @@ void shouldReturnEnrichedApplicationsWithMenteeInfo() {
     final List<MenteeApplicationResponse> result = service.getMentorApplications(MENTOR_ID);
 
     assertThat(result).hasSize(1);
-    assertThat(result.get(0).menteeName()).isEqualTo("Jane Doe");
-    assertThat(result.get(0).menteeLinkedIn()).isEqualTo("https://linkedin.com/in/janedoe");
-    assertThat(result.get(0).menteeBio()).isEqualTo("A passionate developer");
-    assertThat(result.get(0).applicationId()).isEqualTo(1L);
-    assertThat(result.get(0).menteeId()).isEqualTo(MENTEE_ID);
+    final MenteeApplicationResponse response = result.get(0);
+
+    assertThat(response.menteeName()).isEqualTo("Jane Doe");
+    assertThat(response.menteeLinkedIn()).isEqualTo("https://linkedin.com/in/janedoe");
+    assertThat(response.menteeBio()).isEqualTo("A passionate developer");
+    assertThat(response.applicationId()).isEqualTo(1L);
+    assertThat(response.menteeId()).isEqualTo(MENTEE_ID);
+
+    assertThat(response.mentee()).isNotNull();
+    assertThat(response.mentee().getId()).isEqualTo(MENTEE_ID);
+    assertThat(response.mentee().getFullName()).isEqualTo("Jane Doe");
+    assertThat(response.mentee().getBio()).isEqualTo("A passionate developer");
   }
 
   @Test
@@ -99,6 +106,7 @@ void shouldReturnNullEnrichedFieldsWhenMenteeNotFound() {
     assertThat(result.get(0).menteeName()).isNull();
     assertThat(result.get(0).menteeLinkedIn()).isNull();
     assertThat(result.get(0).menteeBio()).isNull();
+    assertThat(result.get(0).mentee()).isNull();
   }
 
   @Test