fix: wire real data into agent profile Volunteers section

src/components/Dashboard/Profile/sections/VolunteerAgents/AccordionVolunteer.tsx

@@ -32,7 +32,7 @@ export const AccordionVolunteer = ({
   const router = useRouter();
 
   const handleGoToProfile = () => {
-    router.push(`/${i18n.language}/dashboard/volunteers/${volunteer.id}`);
+    router.push(`/${i18n.language}/dashboard/volunteers/${volunteer.volunteerId}`);
   };
 
   const engagementStatusLabels = createEngagementStatusLabelMap(t);
@@ -44,19 +44,16 @@ export const AccordionVolunteer = ({
       <Heading4 margin={0} color="var(--color-midnight)">
         {volunteer?.name}
       </Heading4>
-      <ProfileStatusBadge
-        status={volunteer?.statusEngagement}
-        label={engagementStatusLabels[volunteer?.statusEngagement]}
-      />
-      <ProfileStatusBadge status={volunteer?.statusType} label={statusLabels[volunteer?.statusType]} />
+      <ProfileStatusBadge status={volunteer?.engagement} label={engagementStatusLabels[volunteer?.engagement]} />
+      <ProfileStatusBadge status={volunteer?.volunteeringType} label={statusLabels[volunteer?.volunteeringType]} />
     </>
   );
 
   return (
     <Accordion
       data-testid="volunteer-accordion"
       headerLeft={headerLeft}
-      subtitle={`${t(getDatePrefixKey(currentStatus))} 12.02.2025`}
+      subtitle={`${t(getDatePrefixKey(currentStatus))} ${new Date(volunteer.updatedAt).toLocaleDateString("de-DE")}`}
       onGoToProfile={handleGoToProfile}
     >
       <VolunteerDetail

src/components/Dashboard/Profile/sections/VolunteerAgents/VolunteerAgents.tsx

@@ -1,24 +1,88 @@
+import { apiPathAgent, cacheTTL } from "@/config/constants";
+import { useGetQuery } from "@/hooks/useGetQuery";
+import {
+  useDeleteOpportunityVolunteer,
+  useUpdateOpportunityVolunteerStatus,
+} from "@/hooks/useUpdateOpportunityVolunteerStatus";
+import { Id, OpportunityVolunteerStatusType } from "need4deed-sdk";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { SectionEmptyState } from "../shared/styles";
 import { Tabs } from "../shared/Tabs";
-import { TAB_STATUS_ORDER, useTabTransitions } from "../shared/useTabTransitions";
+import { ITEM_STATUS_REMOVED, TAB_STATUS_ORDER, useTabTransitions } from "../shared/useTabTransitions";
+import { AccordionVolunteer } from "./AccordionVolunteer";
 import { VolunteerOpportunitiesContainer } from "./styles";
 import { MappedVolunteerAgent } from "./types";
 
-export const VolunteerAgents = () => {
+type Props = { agentId: Id };
+
+export const VolunteerAgents = ({ agentId }: Props) => {
   const { t } = useTranslation();
 
-  const { selectedTabIndex, setSelectedTabIndex, tabCounts } = useTabTransitions<MappedVolunteerAgent>([]);
+  const queryKey = ["agent-volunteers", String(agentId)];
+
+  const { data, isLoading } = useGetQuery<MappedVolunteerAgent[]>({
+    queryKey,
+    apiPath: `${apiPathAgent}/${agentId}/volunteer-linked`,
+    staleTime: cacheTTL,
+    enabled: !!agentId,
+  });
+
+  const volunteers = useMemo(() => data ?? [], [data]);
+
+  const { mutate: updateStatus } = useUpdateOpportunityVolunteerStatus(queryKey);
+  const { mutate: deleteLink } = useDeleteOpportunityVolunteer(queryKey);
+
+  const { selectedTabIndex, setSelectedTabIndex, currentTabStatus, tabCounts, visibleItems, setItemStatus } =
+    useTabTransitions(volunteers);
 
   const tabs = TAB_STATUS_ORDER.map((key, index) => ({
     label: t(`dashboard.volunteerProfile.opportunitiesSec.tabs.${key}`),
     count: tabCounts[index],
   }));
 
+  const handleMatch = (m2mId: number) => {
+    setItemStatus(m2mId, OpportunityVolunteerStatusType.MATCHED);
+    updateStatus({ m2mId, status: OpportunityVolunteerStatusType.MATCHED });
+  };
+
+  const handleNotAMatch = (m2mId: number) => {
+    setItemStatus(m2mId, ITEM_STATUS_REMOVED);
+    deleteLink({ m2mId });
+  };
+
+  const handleMarkAsActive = (m2mId: number) => {
+    setItemStatus(m2mId, OpportunityVolunteerStatusType.ACTIVE);
+    updateStatus({ m2mId, status: OpportunityVolunteerStatusType.ACTIVE });
+  };
+
+  const handleMarkAsPast = (m2mId: number) => {
+    setItemStatus(m2mId, OpportunityVolunteerStatusType.PAST);
+    updateStatus({ m2mId, status: OpportunityVolunteerStatusType.PAST });
+  };
+
+  if (isLoading) {
+    return <VolunteerOpportunitiesContainer data-testid="agent-volunteers" />;
+  }
+
   return (
-    <VolunteerOpportunitiesContainer>
+    <VolunteerOpportunitiesContainer data-testid="agent-volunteers">
       <Tabs tabs={tabs} selectedTabIndex={selectedTabIndex} setSelectedTabIndex={setSelectedTabIndex} />
-      <SectionEmptyState>{t("dashboard.volunteerProfile.opportunitiesSec.emptyState")}</SectionEmptyState>
+      {visibleItems.length === 0 ? (
+        <SectionEmptyState>{t("dashboard.volunteerProfile.opportunitiesSec.emptyState")}</SectionEmptyState>
+      ) : (
+        visibleItems.map((volunteer) => (
+          <AccordionVolunteer
+            key={volunteer.id}
+            volunteer={volunteer}
+            currentStatus={currentTabStatus}
+            onMatch={() => handleMatch(volunteer.id)}
+            onNotAMatch={() => handleNotAMatch(volunteer.id)}
+            onMarkAsActive={() => handleMarkAsActive(volunteer.id)}
+            onMarkAsPast={() => handleMarkAsPast(volunteer.id)}
+          />
+        ))
+      )}
     </VolunteerOpportunitiesContainer>
   );
 };

src/components/Dashboard/Profile/sections/VolunteerAgents/types.ts

@@ -1,16 +1,13 @@
 import {
-  ApiVolunteerGetList,
-  OpportunityVolunteerStatusType,
+  ApiVolunteerOpportunityGet,
   VolunteerStateEngagementType,
   VolunteerStateMatchType,
   VolunteerStateTypeType,
 } from "need4deed-sdk";
 
 import { TFunction } from "i18next";
 
-export type MappedVolunteerAgent = ApiVolunteerGetList & {
-  status: OpportunityVolunteerStatusType;
-};
+export type MappedVolunteerAgent = ApiVolunteerOpportunityGet;
 
 export const createEngagementStatusLabelMap = (t: TFunction): Record<VolunteerStateEngagementType, string> => ({
   [VolunteerStateEngagementType.NEW]: t("dashboard.volunteers.filters.engagement.new"),

src/hooks/useAgentProfileSections.tsx

@@ -60,7 +60,7 @@ export const useAgentProfileSections = (agent: ApiAgentProfileGet | undefined) =
     {
       iconName: IconName.UserCheck,
       title: t("dashboard.volunteers.volunteers"),
-      subComponent: <VolunteerAgents />,
+      subComponent: <VolunteerAgents agentId={agent.id} />,
     },
     {
       iconName: IconName.ShootingStar,