562 create forecast page (#566)

Co-authored-by: Maria Katrin Bonde <[email protected]>

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

@@ -0,0 +1,7 @@
+export default function BemanningLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

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

@@ -0,0 +1,64 @@
+import {
+  CompetenceReadModel,
+  DepartmentReadModel,
+  EngagementPerCustomerReadModel,
+} from "@/api-types";
+import { ConsultantFilterProvider } from "@/hooks/ConsultantFilterProvider";
+import { parseYearWeekFromUrlString } from "@/data/urlUtils";
+import React from "react";
+import { StaffingContent } from "@/pagecontent/StaffingContent";
+import {
+  fetchEmployeesWithImageAndToken,
+  fetchWithToken,
+} from "@/data/apiCallsWithToken";
+import { Metadata } from "next";
+import { ForecastContent } from "@/pagecontent/ForecastContent";
+export const metadata: Metadata = {
+  title: "Prognose | VIBES",
+};
+
+export default async function Prognose({
+  params,
+  searchParams,
+}: {
+  params: { organisation: string };
+  searchParams: { selectedWeek?: string; weekSpan?: string };
+}) {
+  const selectedWeek = parseYearWeekFromUrlString(
+    searchParams.selectedWeek || undefined,
+  );
+  const weekSpan = searchParams.weekSpan || undefined;
+
+  const consultants =
+    (await fetchEmployeesWithImageAndToken(
+      `${params.organisation}/staffings${
+        selectedWeek
+          ? `?Year=${selectedWeek.year}&Week=${selectedWeek.weekNumber}`
+          : ""
+      }${weekSpan ? `${selectedWeek ? "&" : "?"}WeekSpan=${weekSpan}` : ""}`,
+    )) ?? [];
+
+  const departments =
+    (await fetchWithToken<DepartmentReadModel[]>(
+      `organisations/${params.organisation}/departments`,
+    )) ?? [];
+
+  const competences =
+    (await fetchWithToken<CompetenceReadModel[]>(`competences`)) ?? [];
+
+  const customers =
+    (await fetchWithToken<EngagementPerCustomerReadModel[]>(
+      `${params.organisation}/projects`,
+    )) ?? [];
+
+  return (
+    <ConsultantFilterProvider
+      consultants={consultants}
+      departments={departments}
+      competences={competences}
+      customers={customers}
+    >
+      <ForecastContent />
+    </ConsultantFilterProvider>
+  );
+}

frontend/src/components/FilteredConsultantsList.tsx

@@ -18,7 +18,6 @@ export default function StaffingTable() {
   } = useConsultantsFilter();
 
   const { weekSpan } = useContext(FilteredContext).activeFilters;
-  console.log(filteredConsultants);
 
   return (
     <table

frontend/src/components/NavBar/NavBar.tsx

@@ -26,6 +26,7 @@ export default async function NavBar() {
     { text: "Konsulenter", path: "konsulenter" },
     { text: "Rapporter", path: "rapport" },
     { text: "Ferie", path: "ferie" },
+    { text: "Prognose", path: "prognose" },
   ];
 
   return (

frontend/src/pagecontent/ForecastContent.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import StaffingSidebar from "@/components/StaffingSidebar";
+import FilteredConsultantsList from "@/components/FilteredConsultantsList";
+import InfoPillDescriptions from "@/components/Staffing/InfoPillDescriptions";
+import { useState } from "react";
+import IconActionButton from "@/components/Buttons/IconActionButton";
+import { Filter } from "react-feather";
+import ActiveFilters from "@/components/ActiveFilters";
+import WeekSelection from "@/components/WeekSelection";
+
+export function ForecastContent() {
+  const [isSideBarOpen, setIsSidebarOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <StaffingSidebar
+        isSidebarOpen={isSideBarOpen}
+        closeSidebar={() => setIsSidebarOpen(false)}
+      />
+
+      <div className="main p-4 pt-5 w-full flex flex-col gap-8">
+        <h1>Prognose</h1>
+
+        <div className="flex flex-row justify-between items-center pt-[12px]">
+          <div className="flex flex-row items-center gap-3">
+            <IconActionButton
+              variant={"secondary"}
+              icon={<Filter />}
+              onClick={() => setIsSidebarOpen((wasOpen) => !wasOpen)}
+            />
+            <ActiveFilters />
+          </div>
+
+          <WeekSelection />
+        </div>
+        <InfoPillDescriptions />
+      </div>
+    </>
+  );
+}