From cf5855b6433940af63d48e2980bab727fb96e58d Mon Sep 17 00:00:00 2001
From: Sigrid Elnan <sge@variant.no>
Date: Thu, 9 Nov 2023 09:55:18 +0100
Subject: [PATCH 1/3] make them equal

---
 frontend/src/components/ConsultantRow.tsx           | 2 +-
 frontend/src/components/FilteredConsultantsList.tsx | 2 +-
 frontend/src/components/InfoPill.tsx                | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index e275f8f4..64442ec5 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -67,7 +67,7 @@ export default function ConsultantRows({
           </div>
         </td>
         {consultant.bookings?.map((b) => (
-          <td key={b.weekNumber} className="h-[52px] p-0.5 min-w-fit">
+          <td key={b.weekNumber} className="h-[52px] p-0.5">
             <div
               className={`flex flex-col gap-1 p-2 justify-end rounded w-full h-full relative ${
                 b.bookingModel.totalOverbooking > 0
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index 37376003..00e60c31 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -19,7 +19,7 @@ export default function FilteredConsultantList() {
         <ActiveFilters />
         <WeekSelection />
       </div>
-      <table className="min-w-full table-fixed">
+      <table className="w-full min-w-[1000px] table-fixed">
         <colgroup>
           <col span={1} className="w-14" />
           <col span={1} className="w-[190px]" />
diff --git a/frontend/src/components/InfoPill.tsx b/frontend/src/components/InfoPill.tsx
index b96dbf5f..f13120a6 100644
--- a/frontend/src/components/InfoPill.tsx
+++ b/frontend/src/components/InfoPill.tsx
@@ -22,7 +22,9 @@ export default function InfoPill({
       className={`flex flex-row gap-0.5 detail-pill-text p-0.5 items-center w-fit h-4 rounded-sm ${colors}`}
     >
       {(variant == "wide" || variant == "narrow") && icon}
-      {(variant == "wide" || variant == "medium") && <p>{text}</p>}
+      {(variant == "wide" || variant == "medium") && (
+        <p className="hidden lg:flex">{text}</p>
+      )}
     </div>
   );
 }

From e36faf8fa4748c966d06ac55a127f7debe0bdf2f Mon Sep 17 00:00:00 2001
From: Sigrid Elnan <sge@variant.no>
Date: Fri, 10 Nov 2023 12:22:53 +0100
Subject: [PATCH 2/3] Make thead sticky

---
 frontend/src/components/ConsultantRow.tsx        | 16 ++++++++++++++++
 .../src/components/FilteredConsultantsList.tsx   |  6 +++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 64442ec5..a0ba883f 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -295,3 +295,19 @@ function getInfopillVariantByColumnCount(count: number): InfoPillVariant {
       return "wide";
   }
 }
+
+function getInfopillVariantByColumnAndPillCount(
+  count: number,
+  pills: number,
+): InfoPillVariant {
+  switch (true) {
+    case 26 <= count:
+      return "narrow";
+    case 12 <= count && count < 26:
+      return "medium";
+    case count < 12 && pills < 3:
+      return "wide";
+    default:
+      return "narrow";
+  }
+}
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index 54a796e6..2e1f11c6 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -23,8 +23,8 @@ export default function FilteredConsultantList() {
             ?.bookings?.map((booking, index) => <col key={index} span={1} />)}
         </colgroup>
         <thead>
-          <tr>
-            <th colSpan={2}>
+          <tr className="sticky -top-6 bg-white z-50">
+            <th colSpan={2} className="pt-3 pl-2 -left-2 relative bg-white">
               <div className="flex flex-row gap-3 pb-4 items-center">
                 <p className="body-large-bold ">Konsulenter</p>
                 <p className="text-primary_default body-small-bold rounded-full bg-primary_l3 px-2 py-1">
@@ -35,7 +35,7 @@ export default function FilteredConsultantList() {
             {filteredConsultants.at(0)?.bookings?.map((booking) => (
               <th
                 key={booking.weekNumber}
-                className="m-2 px-2 py-1 gap-1 justify-items-end"
+                className="m-2 px-2 py-1 pt-3 gap-1 justify-items-end"
               >
                 {isCurrentWeek(booking.weekNumber, booking.year) ? (
                   <div className="flex flex-row gap-2 items-center justify-end">

From ebce71dfe2412b3c162a4401c1eb6bf1611b722a Mon Sep 17 00:00:00 2001
From: Sigrid Elnan <sge@variant.no>
Date: Mon, 13 Nov 2023 10:24:12 +0100
Subject: [PATCH 3/3] Change min-width on table based on number of cells

---
 frontend/src/components/ConsultantRow.tsx     | 44 ++++++++++---------
 .../components/FilteredConsultantsList.tsx    | 15 ++++++-
 frontend/src/components/InfoPill.tsx          | 27 ++++++++----
 3 files changed, 54 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx
index 8e4da060..4819914b 100644
--- a/frontend/src/components/ConsultantRow.tsx
+++ b/frontend/src/components/ConsultantRow.tsx
@@ -158,6 +158,24 @@ function WeekCell(props: {
     columnCount,
   } = props;
 
+  let pillNumber = 0;
+
+  if (bookedHoursPerWeek.bookingModel.totalOffered > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalOverbooking > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalPlannedAbstences > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalVacationHours > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalSellableTime > 0) {
+    pillNumber++;
+  }
+
   return (
     <td key={bookedHoursPerWeek.weekNumber} className="h-[52px] p-0.5">
       <div
@@ -180,7 +198,7 @@ function WeekCell(props: {
           {bookedHoursPerWeek.bookingModel.totalOffered > 0 && (
             <InfoPill
               text={bookedHoursPerWeek.bookingModel.totalOffered.toFixed(1)}
-              colors="bg-offer_light text-offer_dark"
+              colors="bg-offer_light text-offer_dark border-offer_dark"
               icon={<FileText size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
@@ -191,7 +209,7 @@ function WeekCell(props: {
                 text={bookedHoursPerWeek.bookingModel.totalSellableTime.toFixed(
                   1,
                 )}
-                colors="bg-free_light text-free_dark"
+                colors="bg-free_light text-free_dark border-free_dark"
                 icon={<Coffee size="12" />}
                 variant={getInfopillVariantByColumnCount(columnCount)}
               />
@@ -201,7 +219,7 @@ function WeekCell(props: {
               text={bookedHoursPerWeek.bookingModel.totalVacationHours.toFixed(
                 1,
               )}
-              colors="bg-vacation_light text-vacation_dark"
+              colors="bg-vacation_light text-vacation_dark border-vacation_dark"
               icon={<Sun size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
@@ -209,7 +227,7 @@ function WeekCell(props: {
           {bookedHoursPerWeek.bookingModel.totalOverbooking > 0 && (
             <InfoPill
               text={bookedHoursPerWeek.bookingModel.totalOverbooking.toFixed(1)}
-              colors="bg-overbooking_dark text-overbooking_light"
+              colors="bg-overbooking_dark text-overbooking_light border-overbooking_light"
               icon={<AlertTriangle size="12" />}
               variant={getInfopillVariantByColumnCount(columnCount)}
             />
@@ -235,7 +253,7 @@ function HoveredWeek(props: {
   const { hoveredRowWeek, bookedHoursPerWeek, consultant } = props;
   return (
     <div
-      className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center ${
+      className={`absolute bottom-full left-1/2 -translate-x-1/2 flex flex-col items-center z-20 ${
         (hoveredRowWeek != bookedHoursPerWeek.weekNumber ||
           consultant.detailedBooking
             .map((d) =>
@@ -364,19 +382,3 @@ function getInfopillVariantByColumnCount(count: number): InfoPillVariant {
       return "wide";
   }
 }
-
-function getInfopillVariantByColumnAndPillCount(
-  count: number,
-  pills: number,
-): InfoPillVariant {
-  switch (true) {
-    case 26 <= count:
-      return "narrow";
-    case 12 <= count && count < 26:
-      return "medium";
-    case count < 12 && pills < 3:
-      return "wide";
-    default:
-      return "narrow";
-  }
-}
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
index 2e1f11c6..c594fd53 100644
--- a/frontend/src/components/FilteredConsultantsList.tsx
+++ b/frontend/src/components/FilteredConsultantsList.tsx
@@ -4,17 +4,28 @@ import ActiveFilters from "./ActiveFilters";
 import WeekSelection from "@/components/WeekSelection";
 import { isCurrentWeek } from "@/hooks/staffing/dateTools";
 import { useConsultantsFilter } from "@/hooks/staffing/useConsultantsFilter";
+import { useUrlRouteFilter } from "@/hooks/staffing/useUrlRouteFilter";
 
 export default function FilteredConsultantList() {
   const { filteredConsultants } = useConsultantsFilter();
 
+  const { weekSpan } = useUrlRouteFilter();
+
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-4">
         <ActiveFilters />
         <WeekSelection />
       </div>
-      <table className="w-full min-w-[1000px] table-fixed">
+      <table
+        className={`w-full ${
+          weekSpan > 23
+            ? "min-w-[1400px]"
+            : weekSpan > 11
+            ? "min-w-[850px]"
+            : "min-w-[700px]"
+        } table-fixed`}
+      >
         <colgroup>
           <col span={1} className="w-14" />
           <col span={1} className="w-[190px]" />
@@ -23,7 +34,7 @@ export default function FilteredConsultantList() {
             ?.bookings?.map((booking, index) => <col key={index} span={1} />)}
         </colgroup>
         <thead>
-          <tr className="sticky -top-6 bg-white z-50">
+          <tr className="sticky -top-6 bg-white z-10">
             <th colSpan={2} className="pt-3 pl-2 -left-2 relative bg-white">
               <div className="flex flex-row gap-3 pb-4 items-center">
                 <p className="body-large-bold ">Konsulenter</p>
diff --git a/frontend/src/components/InfoPill.tsx b/frontend/src/components/InfoPill.tsx
index f13120a6..f9c0df77 100644
--- a/frontend/src/components/InfoPill.tsx
+++ b/frontend/src/components/InfoPill.tsx
@@ -7,7 +7,7 @@ export type InfoPillProps = {
   variant: InfoPillVariant;
 };
 
-export type InfoPillVariant = "wide" | "medium" | "narrow" | "none";
+export type InfoPillVariant = "wide" | "medium" | "narrow" | "circle" | "none";
 
 export default function InfoPill({
   text,
@@ -18,13 +18,22 @@ export default function InfoPill({
   return variant == "none" ? (
     <></>
   ) : (
-    <div
-      className={`flex flex-row gap-0.5 detail-pill-text p-0.5 items-center w-fit h-4 rounded-sm ${colors}`}
-    >
-      {(variant == "wide" || variant == "narrow") && icon}
-      {(variant == "wide" || variant == "medium") && (
-        <p className="hidden lg:flex">{text}</p>
-      )}
-    </div>
+    <>
+      <div
+        className={`h-2 w-2 rounded-full border mb-1 ${colors} ${
+          variant != "circle" && "hidden"
+        }`}
+      />
+      <div
+        className={`flex flex-row gap-0.5 detail-pill-text p-0.5 items-center h-4 rounded-sm ${colors} ${
+          variant == "circle" && "hidden"
+        }`}
+      >
+        {(variant == "wide" || variant == "narrow") && icon}
+        {(variant == "wide" || variant == "medium") && (
+          <p className="hidden lg:flex">{text}</p>
+        )}
+      </div>
+    </>
   );
 }