diff --git a/frontend/src/components/ConsultantRow.tsx b/frontend/src/components/ConsultantRow.tsx index 99ffc709..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 (
0 && ( } 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={} 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={} variant={getInfopillVariantByColumnCount(columnCount)} /> @@ -209,7 +227,7 @@ function WeekCell(props: { {bookedHoursPerWeek.bookingModel.totalOverbooking > 0 && ( } variant={getInfopillVariantByColumnCount(columnCount)} /> @@ -235,7 +253,7 @@ function HoveredWeek(props: { const { hoveredRowWeek, bookedHoursPerWeek, consultant } = props; return (
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx index 219d548e..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 (
- +
23 + ? "min-w-[1400px]" + : weekSpan > 11 + ? "min-w-[850px]" + : "min-w-[700px]" + } table-fixed`} + > @@ -23,8 +34,8 @@ export default function FilteredConsultantList() { ?.bookings?.map((booking, index) => )} - - +
+

Konsulenter

@@ -35,7 +46,7 @@ export default function FilteredConsultantList() { {filteredConsultants.at(0)?.bookings?.map((booking) => (

{isCurrentWeek(booking.weekNumber, booking.year) ? (
diff --git a/frontend/src/components/InfoPill.tsx b/frontend/src/components/InfoPill.tsx index b96dbf5f..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,11 +18,22 @@ export default function InfoPill({ return variant == "none" ? ( <> ) : ( -
- {(variant == "wide" || variant == "narrow") && icon} - {(variant == "wide" || variant == "medium") &&

{text}

} -
+ <> +
+
+ {(variant == "wide" || variant == "narrow") && icon} + {(variant == "wide" || variant == "medium") && ( +

{text}

+ )} +
+ ); }