Create table and show hours booked

backend/Api/Consultants/ConsultantExtensions.cs

@@ -84,10 +84,13 @@ private static List<BookedHoursPerWeek> GetBookedHoursForWeeks(this Consultant c
             {
                 var year = DateTime.Today.AddDays(7 * offset).Year;
                 var week = DateService.GetWeekAhead(offset);
+                var datestring = DateService.GetDatesInWorkWeek(year, week)[0].ToString("dd.MM") + "-" + DateService
+                    .GetDatesInWorkWeek(year, week)[^1].ToString("dd.MM");
 
                 return new BookedHoursPerWeek(
                     year,
                     week,
+                    datestring,
                     GetBookingModelForWeek(consultant, year, week)
                 );
             })

backend/Api/Consultants/ConsultantReadModel.cs

@@ -7,7 +7,7 @@ public record ConsultantReadModel(int Id, string Name, string Email, List<string
     List<BookedHoursPerWeek> Bookings, bool IsOccupied);
 
 
-public record BookedHoursPerWeek(int Year, int WeekNumber, WeeklyBookingReadModel BookingModel);
+public record BookedHoursPerWeek(int Year, int WeekNumber, string DateString, WeeklyBookingReadModel BookingModel);
 
 public record WeeklyBookingReadModel(double TotalBillable, double TotalOffered, double TotalPlannedAbstences, double TotalSellableTime, double TotalHolidayHours, List<BookingReadModel> Bookings);
 

backend/Core/Services/DateService.cs

@@ -4,11 +4,12 @@ namespace Core.Services;
 
 public class DateService
 {
-   public static DateOnly GetFirstDayOfWeekContainingDate(DateTime time){
-    return DateOnly.FromDateTime(FirstWorkDayOfWeek(time.Year, GetWeekNumber(time)));
-   }
-
-   // This presumes that weeks start with Monday.
+    public static DateOnly GetFirstDayOfWeekContainingDate(DateTime time)
+    {
+        return DateOnly.FromDateTime(FirstWorkDayOfWeek(time.Year, GetWeekNumber(time)));
+    }
+
+    // This presumes that weeks start with Monday.
     // Week 1 is the 1st week of the year with a Thursday in it.
     public static int GetWeekNumber(DateTime time)
     {

frontend/mockdata/mockData.ts

@@ -1,4 +1,18 @@
-import { Consultant, Department, Organisation } from "@/types";
+import {
+  Consultant,
+  Department,
+  Organisation,
+  WeeklyBookingReadModel,
+} from "@/types";
+
+const MockWeeklyBookingReadModel: WeeklyBookingReadModel = {
+  totalBillable: 0,
+  totalOffered: 0,
+  totalPlannedAbstences: 0,
+  totalSellableTime: 0,
+  totalHolidayHours: 0,
+  bookings: [],
+};
 
 export const MockConsultants: Consultant[] = [
   {
@@ -7,7 +21,14 @@ export const MockConsultants: Consultant[] = [
     email: "[email protected]",
     competences: ["Frontend"],
     department: "My Department",
-    bookings: [{ year: 2023, weekNumber: 10, bookedHours: 10 }],
+    bookings: [
+      {
+        year: 2023,
+        weekNumber: 10,
+        dateString: "",
+        bookingModel: MockWeeklyBookingReadModel,
+      },
+    ],
     yearsOfExperience: 23,
   },
 ];

frontend/src/app/globals.css

@@ -105,6 +105,10 @@
     background-color: transparent;
   }
 
+  th {
+    font-weight: normal;
+  }
+
   .interaction-chip {
     font-size: 0.75rem;
     font-family: "Graphik-SemiBold";

frontend/src/components/ConsultantRows.tsx

@@ -0,0 +1,80 @@
+"use client";
+import { Consultant } from "@/types";
+import { useState } from "react";
+import { ChevronDown } from "react-feather";
+
+interface ConsultantListElementProps {
+  consultant: Consultant;
+}
+
+export default function ConsultantRows({
+  consultant,
+}: ConsultantListElementProps) {
+  const [isListElementVisible, setIsListElementVisible] = useState(false);
+  const [isButtonHovered, setIsButtonHovered] = useState(false);
+
+  function toggleListElementVisibility() {
+    setIsListElementVisible(!isListElementVisible);
+  }
+
+  return (
+    <>
+      <tr>
+        <td>
+          <div className="flex flex-row gap-2 ">
+            <div
+              className={`py-0 w-0.5 rounded-lg ${
+                isButtonHovered ? "bg-primary_default" : "bg-primary_l4"
+              } ${isListElementVisible && "bg-secondary_default"}`}
+            ></div>
+            <div
+              className="flex flex-row gap-2 items-center h-[52px]"
+              onMouseEnter={() => setIsButtonHovered(true)}
+              onMouseLeave={() => setIsButtonHovered(false)}
+            >
+              <button
+                className={`p-2 rounded-lg hover:bg-primary_default hover:bg-opacity-10 ${
+                  isListElementVisible && "rotate-180"
+                }`}
+                onClick={toggleListElementVisibility}
+              >
+                <ChevronDown className={`text-primary_default w-6 h-6`} />
+              </button>
+              <div className="flex flex-col gap-1">
+                <p
+                  className={`text-black text-start ${
+                    isListElementVisible ? "body-bold" : "body"
+                  }`}
+                >
+                  {consultant.name}
+                </p>
+                <p className="detail text-neutral_l1 text-start">
+                  {`${consultant.yearsOfExperience} års erfaring`}
+                </p>
+              </div>
+            </div>
+          </div>
+        </td>
+        {consultant.bookings?.map((b) => (
+          <td
+            key={b.weekNumber}
+            className={`px-2 py-1 rounded ${
+              b.bookingModel.totalSellableTime > 0
+                ? `bg-semantic_4_l1`
+                : `bg-primary_l5`
+            }`}
+          >
+            <p
+              className={`text-right ${
+                isListElementVisible ? "body-bold" : "body"
+              }`}
+            >
+              {b.bookingModel.totalBillable}
+            </p>
+          </td>
+        ))}
+      </tr>
+      <tr className={`${!isListElementVisible && "hidden"} h-[198px] `}></tr>
+    </>
+  );
+}

frontend/src/components/FilteredConsultantsList.tsx

@@ -1,29 +1,46 @@
 "use client";
-import ConsultantListElement from "./ConsultantListElement";
+import ConsultantRows from "./ConsultantRows";
 import ActiveFilters from "./ActiveFilters";
 import { useFilteredConsultants } from "@/hooks/useFilteredConsultants";
 
 export default function FilteredConsultantList() {
   const { filteredConsultants: consultants } = useFilteredConsultants();
+
   return (
     <div>
-      <div className="">
+      <div>
         <ActiveFilters />
       </div>
-      <div className="flex flex-row gap-3 pb-4 items-center">
-        <p className="body-large-bold ">Konsulenter</p>
+      <table className="w-full table-auto border-separate border-spacing-1">
+        <thead>
+          <tr>
+            <th className="flex flex-row gap-3 pb-4 items-center ">
+              <p className="body-large-bold ">Konsulenter</p>
 
-        <div className="rounded-full bg-primary_l3 px-2 py-1">
-          <p className="text-primary_default body-small-bold">
-            {consultants?.length}
-          </p>
-        </div>
-      </div>
-      <div className="flex flex-col gap-1">
-        {consultants?.map((consultant) => (
-          <ConsultantListElement key={consultant.id} consultant={consultant} />
-        ))}
-      </div>
+              <div className="rounded-full bg-primary_l3 px-2 py-1">
+                <p className="text-primary_default body-small-bold">
+                  {consultants?.length}
+                </p>
+              </div>
+            </th>
+            {consultants.at(0)?.bookings?.map((b) => (
+              <th key={b.weekNumber} className="px-2 py-1">
+                <div className="flex flex-col gap-1 justify-items-end">
+                  <p className=" body text-right">{b.weekNumber}</p>
+                </div>
+                <p className="detail text-neutral_l1 text-right">
+                  {b.dateString}
+                </p>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {consultants?.map((consultant) => (
+            <ConsultantRows key={consultant.id} consultant={consultant} />
+          ))}
+        </tbody>
+      </table>
     </div>
   );
 }

frontend/src/types.ts

@@ -1,17 +1,40 @@
+export interface BookedHoursPerWeek {
+  year: number;
+  weekNumber: number;
+  bookingModel: WeeklyBookingReadModel;
+  dateString: string;
+}
+
+export interface WeeklyBookingReadModel {
+  totalBillable: number;
+  totalOffered: number;
+  totalPlannedAbstences: number;
+  totalSellableTime: number;
+  totalHolidayHours: number;
+  bookings: BookingReadModel[] | null;
+}
+
+export interface BookingReadModel {
+  name: string | null;
+  hours: number;
+  type: BookingType;
+}
+
+export enum BookingType {
+  Offer = "Offer",
+  Booking = "Booking",
+  PlannedAbsence = "PlannedAbsence",
+  Vacation = "Vacation",
+}
+
 export type Consultant = {
   id: string;
   name: string;
   email: string;
   competences: string[];
   department: string;
-  bookings: [
-    {
-      year: number;
-      weekNumber: number;
-      bookedHours: number;
-    },
-  ];
   yearsOfExperience: number;
+  bookings?: BookedHoursPerWeek[] | null;
 };
 
 export type Department = {

frontend/tailwind.config.ts

@@ -12,7 +12,9 @@ export default {
       primary_l2: "#C6C5DC",
       primary_l3: "#ECECF3",
       primary_l4: "#F6F5F9",
+      primary_l5: "#F9F9FB",
       secondary_default: "#F076A6",
+      semantic_4_l1: "#FFE5B5",
       neutral_l1: "#858585",
       transparent: "transparent",
     },