updated profile card

Author: ebwu95

frontend/src/components/dashboard/Badge.tsx

@@ -13,8 +13,8 @@ const Badge: React.FC<BadgeProps> = ({
   icon,
   iconSrc,
   children,
-  bgColor = "#F5F5F5",
-  textColor = "#6B7280"
+  bgColor = "rgba(179, 206, 209, 0.3)",
+  textColor = "#056067"
 }) => {
   return (
     <Box

frontend/src/components/dashboard/ProfileCard.tsx

@@ -19,6 +19,7 @@ interface ProfileCardProps {
     timezone: string;
     diagnosis: string;
     treatments: string[];
+    experiences?: string[];
     initials: string;
   };
   time?: Date;
@@ -56,10 +57,10 @@ const ProfileCard: React.FC<ProfileCardProps> = ({
           >
             {formatTime(time)}
           </Text>
-          <Box 
-            w="4px" 
-            h="314px" 
-            bg="#5F989D" 
+          <Box
+            w="4px"
+            h="371px"
+            bg="#5F989D"
             borderRadius="11px"
           />
         </HStack>
@@ -89,9 +90,9 @@ const ProfileCardContent: React.FC<{
   onViewContact?: () => void;
 }> = ({ participant, onScheduleCall, onViewContact }) => {
   return (
-    <Box 
+    <Box
       w="675px"
-      h="314px"
+      h="371px"
       border="1px solid #D5D7DA"
       borderRadius="8px"
       bg="white"
@@ -153,7 +154,7 @@ const ProfileCardContent: React.FC<{
 
         {/* Treatment Information - Left aligned to the box */}
         <Box mt={4}>
-          <Text 
+          <Text
             fontSize="1.125rem"
             fontWeight={600}
             color="#1D3448"
@@ -164,22 +165,46 @@ const ProfileCardContent: React.FC<{
           >
             Treatment Information
           </Text>
-          <HStack gap={4} wrap="wrap">
+          <HStack gap={2} wrap="wrap">
             {participant.treatments.map((treatment: string, index: number) => (
-              <Text 
+              <Badge
                 key={index}
-                fontSize="1rem"
-                fontWeight={400}
-                color="#495D6C"
-                fontFamily="'Open Sans', sans-serif"
-                lineHeight="100%"
-                letterSpacing="0%"
+                bgColor="#EEF4FF"
+                textColor="#3538CD"
               >
-                • {treatment}
-              </Text>
+                {treatment}
+              </Badge>
             ))}
           </HStack>
         </Box>
+
+        {/* Experience Information */}
+        {participant.experiences && participant.experiences.length > 0 && (
+          <Box mt={4}>
+            <Text
+              fontSize="1.125rem"
+              fontWeight={600}
+              color="#1D3448"
+              fontFamily="'Open Sans', sans-serif"
+              lineHeight="1.875rem"
+              letterSpacing="0%"
+              mb="16px"
+            >
+              Experience Information
+            </Text>
+            <HStack gap={2} wrap="wrap">
+              {participant.experiences.map((experience: string, index: number) => (
+                <Badge
+                  key={index}
+                  bgColor="#FDF2FA"
+                  textColor="#C11574"
+                >
+                  {experience}
+                </Badge>
+              ))}
+            </HStack>
+          </Box>
+        )}
       </VStack>
 
       {/* Action Button - Positioned at bottom */}

frontend/src/pages/volunteer/dashboard.tsx

@@ -8,10 +8,24 @@ import {
 import { VolunteerDashboardLayout } from '@/components/dashboard/VolunteerDashboardLayout';
 import ProfileCard from '@/components/dashboard/ProfileCard';
 import { getCurrentUser } from '@/APIClients/authAPIClient';
+import baseAPIClient from '@/APIClients/baseAPIClient';
+
+interface MatchedParticipant {
+  id: number;
+  name: string;
+  pronouns: string;
+  age: number;
+  timezone: string;
+  diagnosis: string;
+  treatments: string[];
+  experiences: string[];
+  initials: string;
+}
 
 const VolunteerDashboardPage: React.FC = () => {
   const [userName, setUserName] = useState('');
-  const [matchedParticipants, setMatchedParticipants] = useState([]);
+  const [matchedParticipants, setMatchedParticipants] = useState<MatchedParticipant[]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const loadData = async () => {
@@ -22,26 +36,72 @@ const VolunteerDashboardPage: React.FC = () => {
         setUserName(firstName);
       }
 
-      // TODO: Fetch matched participants from API
-      // const fetchMatches = async () => {
-      //   try {
-      //     const response = await baseAPIClient.get('/matching/my-matches');
-      //     setMatchedParticipants(response.data.matches);
-      //   } catch (error) {
-      //     console.error('Error fetching matches:', error);
-      //   }
-      // };
-      // fetchMatches();
+      // Fetch matched participants from API
+      try {
+        const response = await baseAPIClient.get('/matches/volunteer/me');
+        const matches = response.data.matches || [];
+
+        // Filter matches that need to be scheduled (pending or awaiting_volunteer_acceptance)
+        const matchesNeedingScheduling = matches.filter((match: any) => {
+          const status = match.matchStatus?.toLowerCase() || '';
+          return status === 'pending' || status === 'awaiting_volunteer_acceptance';
+        });
+
+        // Transform API response to match ProfileCard format
+        const transformedMatches = matchesNeedingScheduling.map((match: any) => {
+          const participant = match.participant;
+          const firstName = participant.firstName || '';
+          const lastName = participant.lastName || '';
+          const fullName = `${firstName} ${lastName}`.trim();
+
+          return {
+            id: match.id, // Use match ID instead of participant UUID
+            name: fullName || participant.email,
+            pronouns: participant.pronouns?.join('/') || '',
+            age: participant.age || 0,
+            timezone: participant.timezone || 'N/A',
+            diagnosis: participant.diagnosis || 'N/A',
+            treatments: participant.treatments || [],
+            experiences: participant.experiences || [],
+            initials: `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase() || '?'
+          };
+        });
+
+        setMatchedParticipants(transformedMatches);
+      } catch (error) {
+        console.error('Error fetching matches:', error);
+      } finally {
+        setLoading(false);
+      }
     };
 
     loadData();
   }, []);
 
+  if (loading) {
+    return (
+      <VolunteerDashboardLayout>
+        <Box display="flex" justifyContent="center" w="100%">
+          <Box w="711px">
+            <Text
+              fontSize="16px"
+              color="#6B7280"
+              fontFamily="'Open Sans', sans-serif"
+              textAlign="left"
+            >
+              Loading matches...
+            </Text>
+          </Box>
+        </Box>
+      </VolunteerDashboardLayout>
+    );
+  }
+
   return (
     <VolunteerDashboardLayout>
       <Box display="flex" justifyContent="center" w="100%">
         <Box w="711px">
-          <Heading 
+          <Heading
             fontSize="2.25rem"
             fontWeight={600}
             lineHeight="100%"
@@ -51,29 +111,29 @@ const VolunteerDashboardPage: React.FC = () => {
             textAlign="left"
             mb={2}
           >
-            {matchedParticipants.length > 0 
+            {matchedParticipants.length > 0
               ? `Participants have matched with you, ${userName}!`
               : `No New Matches${userName ? `, ${userName}` : ''}`
             }
           </Heading>
-          
-          <Text 
-            fontSize="16px" 
-            color="#6B7280" 
+
+          <Text
+            fontSize="16px"
+            color="#6B7280"
             fontFamily="'Open Sans', sans-serif"
             textAlign="left"
             mb={8}
           >
-            {matchedParticipants.length > 0 
+            {matchedParticipants.length > 0
               ? "Please schedule calls with your matches."
               : "Keep an eye out on your inbox! We'll notify you when we match you with a participant."
             }
           </Text>
 
           {matchedParticipants.length > 0 && (
             <VStack gap={6} align="flex-start">
-              {matchedParticipants.map((participant: any) => (
-                <ProfileCard 
+              {matchedParticipants.map((participant) => (
+                <ProfileCard
                   key={participant.id}
                   participant={participant}
                   onScheduleCall={() => {