feat: Opportunities table, green "matched" badge and matched volunteer name

package.json

@@ -21,7 +21,7 @@
     "date-fns": "^4.1.0",
     "email-validator": "^2.0.4",
     "i18next": "^25.3.2",
-    "need4deed-sdk": "0.0.103",
+    "need4deed-sdk": "0.0.107",
     "next": "15.3.8",
     "react": "^19.0.0",
     "react-day-picker": "^9.13.0",

src/components/Dashboard/Opportunities/OpportunityTableRow.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import type { ApiVolunteerOpportunityGetList, OptionItem } from "need4deed-sdk";
-import { LangPurpose, ProfileVolunteeringType } from "need4deed-sdk";
+import { LangPurpose, OpportunityMatchStatusType, ProfileVolunteeringType } from "need4deed-sdk";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "react-i18next";
 import { ClickableRow, TableCell, TruncatedText, WrappedText } from "@/components/core/common/Table";
 import { OPPORTUNITY_COL_WIDTHS } from "./opportunitiesTableColumns";
 import { formatAccompanyingDate, formatSchedule, getLanguagesByPurpose } from "./helpers";
+import { MatchedBadge } from "./styles";
 
 interface TableRowProps {
   opportunity: ApiVolunteerOpportunityGetList;
@@ -29,6 +30,7 @@ export function OpportunityTableRow({ opportunity, isLast, districtsList }: Tabl
     district,
     agentTitle,
     numberOfVolunteers,
+    volunteerNames,
   } = opportunity;
   const districtTitle = district?.id ? (districtsList?.find((d) => d.id === district.id)?.title ?? null) : null;
 
@@ -40,6 +42,11 @@ export function OpportunityTableRow({ opportunity, isLast, districtsList }: Tabl
       : null;
 
   const mainCommunication = getLanguagesByPurpose(languages, LangPurpose.GENERAL);
+  const isMatched = statusMatch === OpportunityMatchStatusType.MATCHED;
+  const firstNames = (volunteerNames ?? []).map((name) => name.split(" ")[0]).filter(Boolean);
+  const matchedNames = firstNames.length > 1 ? `${firstNames[0]} +${firstNames.length - 1}` : (firstNames[0] ?? "");
+  const statusLabel = t(`dashboard.opportunities.matchStatus.${statusMatch}`);
+
   const handleGoToProfile = () => {
     if (!id) return;
     router.push(`/${i18n.language}/dashboard/opportunities/${id}`);
@@ -54,7 +61,7 @@ export function OpportunityTableRow({ opportunity, isLast, districtsList }: Tabl
         <WrappedText>{scheduleText || "—"}</WrappedText>
       </TableCell>
       <TableCell $noWrap $width={OPPORTUNITY_COL_WIDTHS.statusMatch} data-testid={`opportunity-status-match-${id}`}>
-        <TruncatedText>{t(`dashboard.opportunities.matchStatus.${statusMatch}`)}</TruncatedText>
+        {isMatched ? <MatchedBadge>{statusLabel}</MatchedBadge> : <TruncatedText>{statusLabel}</TruncatedText>}
       </TableCell>
       <TableCell $noWrap $width={OPPORTUNITY_COL_WIDTHS.languages} data-testid={`opportunity-languages-${id}`}>
         <TruncatedText>{mainCommunication || "—"}</TruncatedText>
@@ -63,11 +70,10 @@ export function OpportunityTableRow({ opportunity, isLast, districtsList }: Tabl
         <TruncatedText>{districtTitle || "—"}</TruncatedText>
       </TableCell>
       <TableCell
-        $noWrap
         $width={OPPORTUNITY_COL_WIDTHS.numberOfVolunteers}
         data-testid={`opportunity-number-of-volunteers-${id}`}
       >
-        {numberOfVolunteers ?? "—"}
+        <WrappedText>{isMatched ? matchedNames : (numberOfVolunteers ?? "—")}</WrappedText>
       </TableCell>
       <TableCell $noWrap $width={OPPORTUNITY_COL_WIDTHS.agentTitle} data-testid={`opportunity-agent-${id}`}>
         <TruncatedText>{agentTitle || "—"}</TruncatedText>

src/components/Dashboard/Opportunities/opportunitiesTableColumns.ts

@@ -5,10 +5,10 @@ import { COLUMN_WIDTH } from "../common/EntityTableList/columnWidths";
 export const OPPORTUNITY_COL_WIDTHS = {
   title: COLUMN_WIDTH.LG,
   schedule: COLUMN_WIDTH.LG,
-  statusMatch: COLUMN_WIDTH.MD,
+  statusMatch: COLUMN_WIDTH.SM,
   languages: COLUMN_WIDTH.MD,
   district: COLUMN_WIDTH.XL,
-  numberOfVolunteers: COLUMN_WIDTH.XXS,
+  numberOfVolunteers: COLUMN_WIDTH.XS,
   agentTitle: COLUMN_WIDTH.XL,
 };
 

src/components/Dashboard/Opportunities/styles.ts

@@ -86,3 +86,12 @@ export const LanguageRow = styled.div`
   flex-direction: row;
   gap: var(--dashboard-volunteers-card-detail-gap);
 `;
+
+export const MatchedBadge = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  background: var(--color-green-100);
+  border-radius: var(--border-radius-xs);
+  padding: var(--spacing-12);
+`;

yarn.lock

@@ -2412,10 +2412,10 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-need4deed-sdk@0.0.103:
-  version "0.0.103"
-  resolved "https://registry.yarnpkg.com/need4deed-sdk/-/need4deed-sdk-0.0.103.tgz#836fa46e8cfe03288c7536f4e7b9c0b6a2f7a713"
-  integrity sha512-MdYk9AMWD0X5sOVYShQSRgwkbZm+GvoGi37O7xuwFkY+BQ6MbkuNK77wgFKm1x53sr62O4MWZQr6W+zrTDgr/Q==
+need4deed-sdk@0.0.107:
+  version "0.0.107"
+  resolved "https://registry.yarnpkg.com/need4deed-sdk/-/need4deed-sdk-0.0.107.tgz#3b9e0b42970a9ef6a21045cf522bbca1cdeee902"
+  integrity sha512-UrHmAnlCg2jfBdM6oVYMESfg5H/U9dAAvIN14zWJBHP82NNtScFEqvojdZD9GlCgUxtDqW1chcWsRY/Zzm7Jvg==
 
 next@15.3.8:
   version "15.3.8"