feat: rework new opportunity page to match profile edit layout

package.json

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

src/components/Dashboard/Home/AgentOpportunityCards.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { apiPathAgent, apiPathOption, cacheTTL } from "@/config/constants";
+import { useGetCurrentAgent } from "@/hooks/useGetCurrentAgent";
+import { useGetQuery } from "@/hooks";
+import { ApiOptionLists, ApiOpportunityGetList, ApiVolunteerOpportunityGetList } from "need4deed-sdk";
+import { OpportunityCard } from "../Opportunities/OpportunityCard";
+import { useTranslation } from "react-i18next";
+import { Heading4 } from "@/components/styled/text";
+import { DashboardCardContainer } from "./styles";
+
+export function AgentOpportunityCards() {
+  const { t } = useTranslation();
+  const { agentId } = useGetCurrentAgent();
+
+  const { data: apiFilterOptions } = useGetQuery<ApiOptionLists>({ queryKey: ["options"], apiPath: apiPathOption });
+  const { data: opportunities, isLoading } = useGetQuery<ApiOpportunityGetList[]>({
+    queryKey: ["agent-opportunities", String(agentId)],
+    apiPath: `${apiPathAgent}/${agentId}/opportunity-linked`,
+    staleTime: cacheTTL,
+    enabled: !!agentId,
+    addLang: false,
+  });
+
+  const activitiesList = apiFilterOptions?.activity ?? undefined;
+  const districtsList = apiFilterOptions?.district ?? undefined;
+
+  if (isLoading) return <Heading4>{t("dashboard.home.content.loading")}</Heading4>;
+
+  return (
+    <DashboardCardContainer>
+      {opportunities?.map((opp) => (
+        <OpportunityCard
+          key={String(opp.id)}
+          opportunity={opp as ApiVolunteerOpportunityGetList}
+          volunteerId={undefined}
+          activitiesList={activitiesList}
+          districtsList={districtsList}
+        />
+      ))}
+    </DashboardCardContainer>
+  );
+}

src/components/Dashboard/Home/HomeContent.tsx

@@ -1,7 +1,10 @@
 "use client";
 import { Heading2, Heading3 } from "@/components/styled/text";
+import { useCurrentUser } from "@/hooks/useCurrentUser";
+import { UserRole } from "need4deed-sdk";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { AgentOpportunityCards } from "./AgentOpportunityCards";
 import { CreateOpportunityButton } from "./CreateOpportunityButton";
 import { NewestOpportunities } from "./NewestOpportunities";
 import { NewestVolunteers } from "./NewestVolunteers";
@@ -10,6 +13,19 @@ import { NewestTaggedComments } from "./NewestTaggedComments";
 
 export default function DashboardHomeContent() {
   const { t } = useTranslation();
+  const user = useCurrentUser(true);
+  const isAgent = user?.role === UserRole.AGENT;
+
+  if (isAgent) {
+    return (
+      <DashboardContentContainer>
+        <Heading2>{t("dashboard.home.content.header")}</Heading2>
+        <CreateOpportunityButton />
+        <AgentOpportunityCards />
+      </DashboardContentContainer>
+    );
+  }
+
   return (
     <DashboardContentContainer>
       <Heading2>{t("dashboard.home.content.header")}</Heading2>