Holiday pill in week (#332)

varianter · Nov 29, 2023 · edf385c · edf385c
1 parent b6390d7
commit edf385c
Showing 1 changed file with 41 additions and 17 deletions.
diff --git a/frontend/src/components/FilteredConsultantsList.tsx b/frontend/src/components/FilteredConsultantsList.tsx
@@ -5,6 +5,8 @@ import WeekSelection from "@/components/WeekSelection";
 import { isCurrentWeek } from "@/hooks/staffing/dateTools";
 import { useConsultantsFilter } from "@/hooks/staffing/useConsultantsFilter";
 import { useUrlRouteFilter } from "@/hooks/staffing/useUrlRouteFilter";
+import InfoPill from "./InfoPill";
+import { Calendar } from "react-feather";
 import StaffingSums from "./StaffingSums";
 
 export default function FilteredConsultantList() {
@@ -50,24 +52,46 @@ export default function FilteredConsultantList() {
               </div>
             </th>
             {filteredConsultants.at(0)?.bookings?.map((booking) => (
-              <th
-                key={booking.weekNumber}
-                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">
-                    <div className="h-2 w-2 rounded-full bg-primary" />
-                    <p className="normal-medium text-right">
-                      {booking.weekNumber}
-                    </p>
-                  </div>
-                ) : (
-                  <p className="normal text-right">{booking.weekNumber}</p>
-                )}
+              <th key={booking.weekNumber} className=" px-2 py-1 pt-3 ">
+                <div className="flex flex-col gap-1">
+                  {isCurrentWeek(booking.weekNumber, booking.year) ? (
+                    <div className="flex flex-row gap-2 items-center justify-end">
+                      {booking.bookingModel.totalHolidayHours > 0 && (
+                        <InfoPill
+                          text={booking.bookingModel.totalHolidayHours.toFixed(
+                            1,
+                          )}
+                          icon={<Calendar size="12" />}
+                          colors={"bg-holiday text-holiday_darker w-fit"}
+                          variant={weekSpan < 24 ? "wide" : "medium"}
+                        />
+                      )}
+                      <div className="h-2 w-2 rounded-full bg-primary" />
 
-                <p className="xsmall text-black/75 text-right">
-                  {booking.dateString}
-                </p>
+                      <p className="normal-medium text-right">
+                        {booking.weekNumber}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="flex flex-row gap-2 justify-end">
+                      {booking.bookingModel.totalHolidayHours > 0 && (
+                        <InfoPill
+                          text={booking.bookingModel.totalHolidayHours.toFixed(
+                            1,
+                          )}
+                          icon={<Calendar size="12" />}
+                          colors={"bg-holiday text-holiday_darker w-fit"}
+                          variant={weekSpan < 24 ? "wide" : "medium"}
+                        />
+                      )}
+                      <p className="normal text-right">{booking.weekNumber}</p>
+                    </div>
+                  )}
+
+                  <p className="xsmall text-black/75 text-right">
+                    {booking.dateString}
+                  </p>
+                </div>
               </th>
             ))}
           </tr>