Data for detailed booking and booking transformed for forecast rows

frontend/mockdata/mockData.ts

@@ -1,4 +1,5 @@
 import {
+  BookingType,
   CompetenceReadModel,
   ConsultantReadModel,
   Degree,
@@ -101,6 +102,163 @@ export const MockConsultants: ConsultantReadModel[] = [
   },
 ];
 
+export const MockConsultantsForForecast: ConsultantReadModel[] = [
+  {
+    id: 1,
+    name: "Test Consultant",
+    email: "[email protected]",
+    competences: [{ id: "development", name: "Utvikling" }],
+    department: { id: "mydepartment", name: "My Department" },
+    bookings: [
+      {
+        year: 2023,
+        weekNumber: 10,
+        dateString: "",
+        bookingModel: MockWeeklyBookingReadModel,
+        sortableWeek: 202310,
+      },
+    ],
+    yearsOfExperience: 23,
+    detailedBooking: [],
+    isOccupied: true,
+    graduationYear: 2010,
+    degree: Degree.Bachelor,
+    forecasts: [
+      mockForecast1,
+      mockForecast2,
+      mockForecast3,
+      mockForecast4,
+      mockForecast5,
+      mockForecast6,
+    ],
+  },
+  {
+    id: 2,
+    name: "2test Consultant",
+    email: "[email protected]",
+    competences: [{ id: "development", name: "Utvikling" }],
+    department: { id: "mydepartment", name: "My Department" },
+    bookings: [
+      {
+        year: 2025,
+        weekNumber: 3,
+        sortableWeek: 202503,
+        dateString: "13.01 - 17.01",
+        bookingModel: {
+          totalBillable: 0,
+          totalOffered: 7.5,
+          totalPlannedAbsences: 0,
+          totalExcludableAbsence: 0,
+          totalSellableTime: 7.5,
+          totalHolidayHours: 0,
+          totalVacationHours: 0,
+          totalOverbooking: 0,
+          totalNotStartedOrQuit: 0,
+        },
+      },
+      {
+        year: 2025,
+        weekNumber: 4,
+        sortableWeek: 202504,
+        dateString: "20.01 - 24.01",
+        bookingModel: {
+          totalBillable: 20,
+          totalOffered: 0,
+          totalPlannedAbsences: 0,
+          totalExcludableAbsence: 0,
+          totalSellableTime: 0,
+          totalHolidayHours: 0,
+          totalVacationHours: 0,
+          totalOverbooking: 0,
+          totalNotStartedOrQuit: 0,
+        },
+      },
+      {
+        year: 2025,
+        weekNumber: 5,
+        sortableWeek: 202505,
+        dateString: "27.01 - 31.01",
+        bookingModel: {
+          totalBillable: 20,
+          totalOffered: 0,
+          totalPlannedAbsences: 0,
+          totalExcludableAbsence: 0,
+          totalSellableTime: 0,
+          totalHolidayHours: 0,
+          totalVacationHours: 0,
+          totalOverbooking: 0,
+          totalNotStartedOrQuit: 0,
+        },
+      },
+      {
+        year: 2025,
+        weekNumber: 6,
+        sortableWeek: 202506,
+        dateString: "03.02 - 07.02",
+        bookingModel: {
+          totalBillable: 20,
+          totalOffered: 0,
+          totalPlannedAbsences: 0,
+          totalExcludableAbsence: 0,
+          totalSellableTime: 37.5,
+          totalHolidayHours: 0,
+          totalVacationHours: 0,
+          totalOverbooking: 0,
+          totalNotStartedOrQuit: 0,
+        },
+      },
+    ],
+    yearsOfExperience: 23,
+    detailedBooking: [
+      {
+        bookingDetails: {
+          projectName: "Design",
+          type: BookingType.Booking,
+          customerName: "Aion",
+          projectId: 185,
+          isBillable: true,
+          endDateAgreement: null,
+        },
+        hours: [
+          { week: 202503, hours: 10 },
+          { week: 202504, hours: 5 },
+          { week: 202505, hours: 15 },
+          { week: 202506, hours: 37 },
+        ],
+      },
+      {
+        bookingDetails: {
+          projectName: "Nye nettsider",
+          type: BookingType.Booking,
+          customerName: "Åkerblå",
+          projectId: 208,
+          isBillable: true,
+          endDateAgreement: "2024-11-29T00:00:00",
+        },
+        hours: [
+          { week: 202503, hours: 10 },
+          { week: 202504, hours: 5 },
+          { week: 202505, hours: 15 },
+          { week: 202506, hours: 37 },
+          { week: 202507, hours: 37 },
+          { week: 202514, hours: 37 },
+        ],
+      },
+    ],
+    isOccupied: true,
+    graduationYear: 2010,
+    degree: Degree.Bachelor,
+    forecasts: [
+      mockForecast1,
+      mockForecast2,
+      mockForecast3,
+      mockForecast4,
+      mockForecast5,
+      mockForecast6,
+    ],
+  },
+];
+
 export const MockDepartments: DepartmentReadModel[] = [
   {
     id: "myDepartment",

frontend/src/api-types.ts

@@ -20,7 +20,11 @@ export interface BookedHoursPerWeek {
   dateString: string;
   bookingModel: WeeklyBookingReadModel;
 }
-
+export interface BookedHoursPerMonth {
+  month: number;
+  year: number;
+  bookingModel: WeeklyBookingReadModel;
+}
 export interface BookingDetails {
   /** @minLength 1 */
   projectName: string;
@@ -133,6 +137,11 @@ export interface DetailedBooking {
   hours: WeeklyHours[];
 }
 
+export interface MonthlyDetailedBooking {
+  bookingDetails: BookingDetails;
+  hours: MonthlyHours[];
+}
+
 export interface EngagementPerCustomerReadModel {
   /** @format int32 */
   customerId: number;
@@ -299,6 +308,11 @@ export interface WeeklyHours {
   hours: number;
 }
 
+export interface MonthlyHours {
+  month: number;
+  hours: number;
+}
+
 export interface CustomersWithProjectsReadModel {
   customerId: number;
   customerName: string;

frontend/src/components/Forecast/ForecastRows.tsx

@@ -1,5 +1,10 @@
 "use client";
-import { ConsultantReadModel, ProjectWithCustomerModel } from "@/api-types";
+import {
+  BookedHoursPerWeek,
+  ConsultantReadModel,
+  ProjectWithCustomerModel,
+  WeeklyBookingReadModel,
+} from "@/api-types";
 import React, { useContext, useEffect, useState } from "react";
 import { AlertCircle, CheckCircle, ChevronDown, Plus } from "react-feather";
 import { DetailedBookingRows } from "@/components/Staffing/DetailedBookingRows";
@@ -17,6 +22,16 @@ import { DateTime } from "luxon";
 import Image from "next/image";
 import { INTERNAL_CUSTOMER_NAME } from "../Staffing/helpers/utils";
 import { MonthCell } from "./MonthCell";
+import {
+  getMonthOfWeek,
+  MonthDistributionOfWeek,
+  weekToWeekType,
+} from "./WeekToMonthConverter";
+import { Month } from "date-fns";
+import {
+  bookingForMonth,
+  transformToMonthlyData,
+} from "./TransformWeekDataToMonth";
 
 export default function ForecastRows({
   consultant,
@@ -68,6 +83,7 @@ export default function ForecastRows({
   } = useModal({
     closeOnBackdropClick: false,
   });
+  const bookingsPerMonth = transformToMonthlyData(consultant.bookings);
 
   const [selectedProjectId, setSelectedProjectId] = useState<
     number | undefined
@@ -211,6 +227,11 @@ export default function ForecastRows({
         </td>
         {currentConsultant.forecasts?.map((b, index) => (
           <MonthCell
+            bookedHoursPerMonth={bookingForMonth(
+              bookingsPerMonth,
+              b.month,
+              b.year,
+            )}
             key={index}
             hasBeenEdited={b.hasBeenChanged}
             forecastValue={b.forecastValue + b.valueAddedManually}

frontend/src/components/Forecast/ForecastTable.tsx

@@ -7,7 +7,7 @@ import { Calendar } from "react-feather";
 import React, { useContext } from "react";
 import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
 import ForecastRows from "./ForecastRows";
-import { MockConsultants } from "../../../mockdata/mockData";
+import { MockConsultantsForForecast } from "../../../mockdata/mockData";
 
 const months = [
   "Januar",
@@ -127,7 +127,7 @@ export default function ForecastTable() {
         </tr>
       </thead>
       <tbody>
-        {MockConsultants.map((consultant) => (
+        {MockConsultantsForForecast.map((consultant) => (
           <ForecastRows
             key={consultant.id}
             consultant={consultant}