Feature 411: adds newest opportunities and volunteers to dashboard home page

public/locales/de/translations.json

@@ -399,6 +399,12 @@
       }
     },
     "home": {
+      "content": {
+        "header": "Dashboard Startseite",
+        "newOpportunities": "Neueste Möglichkeiten",
+        "newVolunteers": "Neueste Freiwillige",
+        "loading": "Wird geladen..."
+      },
       "sidebar": {
         "home": "Startseite",
         "volunteers": "Freiwillige",

public/locales/en/translations.json

@@ -399,6 +399,12 @@
       }
     },
     "home": {
+      "content": {
+        "header": "Dashboard Home",
+        "newOpportunities": "Newest Opportunities",
+        "newVolunteers": "Newest Volunteers",
+        "loading": "Loading..."
+      },
       "sidebar": {
         "home": "Home",
         "volunteers": "Volunteers",

src/app/[lang]/globals.css

@@ -1305,6 +1305,7 @@ html {
 
     --dashboard-home-container-padding: 40px 120px 100px 132px;
     --dashboard-home-container-gap: 20px;
+    --dashboard-home-container-min-height: 300px;
 
     --search-container-height: 64px;
     --search-container-border-radius: 160px;

src/components/Dashboard/Home/Home.tsx

@@ -1,15 +1,8 @@
 "use client";
 
-import styled from "styled-components";
 import DashboardHomeContent from "./HomeContent";
 import { DashboardLayout } from "@/components/Layout";
-
-const HomeContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding: var(--dashboard-home-container-padding);
-  gap: var(--dashboard-home-container-gap);
-`;
+import { HomeContainer } from "./styles";
 
 export function DashboardHome() {
   return (

src/components/Dashboard/Home/HomeContent.tsx

@@ -1,16 +1,23 @@
-import { Heading2 } from "@/components/styled/text";
+import { Heading2, Heading3 } from "@/components/styled/text";
 import React from "react";
-import styled from "styled-components";
-
-const DashboardContentContainer = styled.div`
-  display: flex;
-  height: 300px;
-`;
+import { NewestOpportunities } from "./NewestOpportunities";
+import { NewestVolunteers } from "./NewestVolunteers";
+import { DashboardCardContainer, DashboardContentContainer } from "./styles";
+import { useTranslation } from "react-i18next";
 
 export default function DashboardHomeContent() {
+  const { t } = useTranslation();
   return (
     <DashboardContentContainer>
-      <Heading2>Dashboard Content...</Heading2>
+      <Heading2>{t("dashboard.home.content.header")}</Heading2>
+      <Heading3>{t("dashboard.home.content.newOpportunities")}</Heading3>
+      <DashboardCardContainer>
+        <NewestOpportunities />
+      </DashboardCardContainer>
+      <Heading3>{t("dashboard.home.content.newVolunteers")}</Heading3>
+      <DashboardCardContainer>
+        <NewestVolunteers />
+      </DashboardCardContainer>
     </DashboardContentContainer>
   );
 }

src/components/Dashboard/Home/NewestOpportunities.tsx

@@ -0,0 +1,31 @@
+import { apiPathOpportunity, apiPathOption, cacheTTL } from "@/config/constants";
+import { useGetQuery } from "@/hooks";
+import { ApiOptionLists, ApiVolunteerOpportunityGetList, OpportunityStatusType, SortOrder } from "need4deed-sdk";
+import { OpportunityCard } from "../Opportunities/OpportunityCard";
+import { useTranslation } from "react-i18next";
+import { Heading4 } from "@/components/styled/text";
+
+export function NewestOpportunities() {
+  const { t } = useTranslation();
+  const { data: apiFilterOptions } = useGetQuery<ApiOptionLists>({ queryKey: ["options"], apiPath: apiPathOption });
+  const { data: opportunities, isLoading } = useGetQuery<ApiVolunteerOpportunityGetList[]>({
+    queryKey: ["opportunities", "newest"],
+    apiPath: `${apiPathOpportunity}/`,
+    params: {
+      limit: 2,
+      page: 1,
+      sortOrder: SortOrder.NewToOld,
+      filter: { status: OpportunityStatusType.NEW },
+    },
+    staleTime: cacheTTL,
+  });
+  const activitiesList = apiFilterOptions?.activity;
+
+  if (isLoading) {
+    return <Heading4>{t("dashboard.home.content.loading")}</Heading4>;
+  }
+
+  return opportunities?.map((opp) => (
+    <OpportunityCard key={opp.id} opportunity={opp} volunteerId={undefined} activitiesList={activitiesList} />
+  ));
+}

src/components/Dashboard/Home/NewestVolunteers.tsx

@@ -0,0 +1,27 @@
+import { apiPathVolunteer, cacheTTL } from "@/config/constants";
+import { useGetQuery } from "@/hooks";
+import { ApiVolunteerGetList, SortOrder, VolunteerStateEngagementType } from "need4deed-sdk";
+import VolunteerCard from "../Volunteers/VolunteerCard";
+import { Heading4 } from "@/components/styled/text";
+import { useTranslation } from "react-i18next";
+
+export function NewestVolunteers() {
+  const { t } = useTranslation();
+  const { data: volunteers, isLoading } = useGetQuery<ApiVolunteerGetList[]>({
+    queryKey: ["volunteers", "newest"],
+    apiPath: `${apiPathVolunteer}/`,
+    params: {
+      limit: 2,
+      page: 1,
+      sortOrder: SortOrder.NewToOld,
+      filter: { status: VolunteerStateEngagementType.NEW },
+    },
+    staleTime: cacheTTL,
+  });
+
+  if (isLoading) {
+    return <Heading4>{t("dashboard.home.content.loading")}</Heading4>;
+  }
+
+  return volunteers?.map((vol) => <VolunteerCard key={vol.id} volunteer={vol} />);
+}

src/components/Dashboard/Home/styles.ts

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const HomeContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: var(--dashboard-home-container-padding);
+  gap: var(--dashboard-home-container-gap);
+`;
+
+export const DashboardContentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--dashboard-home-container-gap);
+  min-height: var(--dashboard-home-container-min-height);
+`;
+
+export const DashboardCardContainer = styled.div`
+  display: flex;
+  gap: var(--dashboard-home-container-gap);
+`;