diff --git a/package.json b/package.json
index 87da9e5c..617389d0 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Dashboard/Opportunities/OpportunityTableRow.tsx b/src/components/Dashboard/Opportunities/OpportunityTableRow.tsx
index eaa28f34..31052665 100644
--- a/src/components/Dashboard/Opportunities/OpportunityTableRow.tsx
+++ b/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
{scheduleText || "—"}
- {t(`dashboard.opportunities.matchStatus.${statusMatch}`)}
+ {isMatched ? {statusLabel} : {statusLabel}}
{mainCommunication || "—"}
@@ -63,11 +70,10 @@ export function OpportunityTableRow({ opportunity, isLast, districtsList }: Tabl
{districtTitle || "—"}
- {numberOfVolunteers ?? "—"}
+ {isMatched ? matchedNames : (numberOfVolunteers ?? "—")}
{agentTitle || "—"}
diff --git a/src/components/Dashboard/Opportunities/opportunitiesTableColumns.ts b/src/components/Dashboard/Opportunities/opportunitiesTableColumns.ts
index 41de3a14..e1c859bd 100644
--- a/src/components/Dashboard/Opportunities/opportunitiesTableColumns.ts
+++ b/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,
};
diff --git a/src/components/Dashboard/Opportunities/styles.ts b/src/components/Dashboard/Opportunities/styles.ts
index 2192afae..cf268bba 100644
--- a/src/components/Dashboard/Opportunities/styles.ts
+++ b/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);
+`;
diff --git a/yarn.lock b/yarn.lock
index 20e6e918..221f917b 100644
--- a/yarn.lock
+++ b/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"