pictures displayed in forecast rows (#639)

frontend/src/api-types.ts

@@ -210,6 +210,8 @@ export interface SingleConsultantReadModel {
   /** @format int32 */
   yearsOfExperience: number;
   degree: Degree;
+  imageUrl?: string;
+  imageThumbUrl?: string;
 }
 
 export interface StaffingWriteModel {

frontend/src/app/[organisation]/prognose/page.tsx

@@ -4,7 +4,10 @@ import {
   ConsultantWithForecast,
 } from "@/api-types";
 import React from "react";
-import { fetchWithToken } from "@/data/apiCallsWithToken";
+import {
+  fetchForecastWithToken,
+  fetchWithToken,
+} from "@/data/apiCallsWithToken";
 import { Metadata } from "next";
 import { ForecastContent } from "@/pagecontent/ForecastContent";
 import { ForecastFilterProvider } from "@/hooks/ForecastFilter/ForecastFilterProvider";
@@ -20,9 +23,7 @@ export default async function Prognose({
   searchParams: { selectedWeek?: string; weekSpan?: string };
 }) {
   const consultantsWithForecasts =
-    (await fetchWithToken<ConsultantWithForecast[]>(
-      `${params.organisation}/forecasts`,
-    )) ?? [];
+    (await fetchForecastWithToken(`${params.organisation}/forecasts`)) ?? [];
 
   const departments =
     (await fetchWithToken<DepartmentReadModel[]>(

frontend/src/components/Forecast/ForecastRows.tsx

@@ -2,6 +2,7 @@
 import { BookedHoursInMonth, ConsultantWithForecast } from "@/api-types";
 import React, { useState } from "react";
 import { MonthCell } from "./MonthCell";
+import Image from "next/image";
 
 function bookingForMonth(bookings: BookedHoursInMonth[], month: string) {
   const date = new Date(month);
@@ -30,7 +31,17 @@ export default function ForecastRows({
         <td colSpan={1} className="w-[15%]">
           <div className="flex justify-start gap-1 items-center">
             <div className="flex flex-row justify-center self-center gap-2 w-3/12">
-              <div className="w-10 h-10 rounded-md bg-primary"></div>
+              {consultant.consultant.imageThumbUrl ? (
+                <Image
+                  src={consultant.consultant.imageThumbUrl}
+                  alt={consultant.consultant.name}
+                  className="w-10 h-10 rounded-md self-center object-contain"
+                  width={32}
+                  height={32}
+                />
+              ) : (
+                <div className="w-10 h-10 rounded-md bg-primary"></div>
+              )}
             </div>
             <div className="flex flex-col gap-1 w-7/12 ">
               <p

frontend/src/data/apiCallsWithToken.ts

@@ -9,7 +9,11 @@ import {
   MockEngagements,
   MockOrganisations,
 } from "../../mockdata/mockData";
-import { ConsultantReadModel, EmployeeItemChewbacca } from "@/api-types";
+import {
+  ConsultantReadModel,
+  ConsultantWithForecast,
+  EmployeeItemChewbacca,
+} from "@/api-types";
 
 type HttpMethod = "GET" | "PUT" | "POST" | "DELETE";
 
@@ -91,6 +95,12 @@ export async function fetchWithToken<ReturnType>(
   return callApi<ReturnType, undefined>(path, "GET");
 }
 
+export async function fetchForecastWithToken(
+  path: string,
+): Promise<ConsultantWithForecast[] | undefined> {
+  return callForecastEmployee(path);
+}
+
 export async function fetchEmployeesWithImageAndToken(
   path: string,
 ): Promise<ConsultantReadModel[] | undefined> {
@@ -128,6 +138,60 @@ async function fetchWithTimeoutOrNull<T>(
     return null;
   }
 }
+export async function callForecastEmployee(path: string) {
+  if (process.env.NEXT_PUBLIC_NO_AUTH) {
+    return mockedCall<undefined>(path);
+  }
+
+  const session = await getCustomServerSession(authOptions);
+
+  if (!session || !session.access_token) return;
+
+  const apiBackendUrl = process.env.BACKEND_URL ?? "http://localhost:7172/v0";
+
+  const headers = new Headers();
+  const bearer = `Bearer ${session.access_token}`;
+
+  headers.append("Authorization", bearer);
+
+  const options = {
+    method: "GET",
+    headers: headers,
+  };
+
+  const completeUrl = `${apiBackendUrl}/${path}`;
+
+  try {
+    const [response, employeeResponse] = await Promise.all([
+      fetch(completeUrl, options),
+      fetchWithTimeoutOrNull<{ employees: EmployeeItemChewbacca[] }>(
+        `https://chewie-webapp-ld2ijhpvmb34c.azurewebsites.net/employees`,
+      ),
+    ]);
+
+    const consultantsRes: ConsultantWithForecast[] = await response.json();
+    const employees = employeeResponse?.employees || [];
+
+    const consultants = consultantsRes?.map((consultant) => {
+      const imageCons = employees.find(
+        (imageConsultant) =>
+          imageConsultant.email === consultant.consultant.email,
+      );
+      return {
+        ...consultant,
+        consultant: {
+          ...consultant.consultant,
+          imageThumbUrl: imageCons?.imageThumbUrl,
+        },
+      };
+    });
+
+    return consultants;
+  } catch (e) {
+    console.error(e);
+    throw new Error(`${options.method} ${completeUrl} failed`);
+  }
+}
 
 export async function callEmployee(path: string) {
   if (process.env.NEXT_PUBLIC_NO_AUTH) {