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"