added icons for agreementstatus on consultants (#538)

Co-authored-by: md <[email protected]>

frontend/src/components/Staffing/DetailedBookingRows.tsx

@@ -14,11 +14,22 @@ import {
 } from "@/components/Staffing/helpers/utils";
 import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
 import { usePathname } from "next/navigation";
-import { Edit3, Minus, Plus, ThumbsDown, ThumbsUp } from "react-feather";
+import {
+  Edit3,
+  Minus,
+  Plus,
+  ThumbsDown,
+  ThumbsUp,
+  AlertCircle,
+  Loader,
+  CheckCircle,
+  Icon,
+} from "react-feather";
 import { updateBookingHoursBody, updateProjectStateBody } from "@/types";
 import { useOutsideClick } from "@/hooks/useOutsideClick";
 import { parseYearWeekFromString } from "@/data/urlUtils";
 import Link from "next/link";
+import { getAgreementsForProject } from "@/actions/agreementActions";
 
 async function updateProjectState(
   organisationName: string,
@@ -56,6 +67,11 @@ export function DetailedBookingRows(props: {
   openEngagementAndSetID: (id: number) => void;
   numWorkHours: number;
 }) {
+  const colors: { color: string; text: string; icon: Icon }[] = [
+    { color: "green", text: "Avtale aktiv", icon: CheckCircle },
+    { color: "red", text: "Ingen avtaler funnet", icon: AlertCircle },
+    { color: "orange", text: "Avtale utgått", icon: AlertCircle },
+  ];
   const { setConsultants } = useContext(FilteredContext);
 
   const { consultant, detailedBooking, openEngagementAndSetID, numWorkHours } =
@@ -69,6 +85,9 @@ export function DetailedBookingRows(props: {
   const [currentDragWeek, setCurrentDragWeek] = useState<number | undefined>(
     undefined,
   );
+  const [alert, setAlertColor] = useState<
+    { color: string; text: string; icon: Icon } | undefined
+  >(undefined);
 
   const [editOfferDropdownIsOpen, setEditOfferDropdownIsOpen] = useState(false);
   const menuRef = useRef(null);
@@ -88,12 +107,44 @@ export function DetailedBookingRows(props: {
     });
   }
 
+  useEffect(() => {
+    getColorIcon();
+  }, []);
+
+  async function getColorIcon() {
+    const agreements = await getAgreementsForProject(
+      detailedBooking.bookingDetails.projectId,
+      organisationName,
+    );
+    if (agreements) {
+      const endDate = Math.max(
+        ...agreements.map((p) => new Date(p.endDate).getTime()),
+      );
+      const today = new Date().getTime();
+      if (today > endDate) {
+        return setAlertColor(colors.find((c) => c.color == "orange"));
+      } else {
+        return setAlertColor(colors.find((c) => c.color == "green"));
+      }
+    } else {
+      return setAlertColor(colors.find((c) => c.color == "red"));
+    }
+  }
+
   return (
     <tr
       key={`${consultant.id}-details-${detailedBooking.bookingDetails.customerName}`}
       className="h-fit"
     >
-      <td className="border-l-secondary border-l-2"></td>
+      <td className=" border-l-secondary border-l-2 w-full">
+        <div className="relative flex justify-center group items-center">
+          {alert ? <alert.icon color={alert.color} /> : <Loader />}
+          <div className="absolute left-full ml-2 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2 w-max z-30">
+            {alert?.text}
+            <div className="absolute top-1/2 transform -translate-y-1/2 left-0 ml-[-8px] w-0 h-0 border-r-8 border-r-black border-y-8 border-y-transparent border-l-0"></div>
+          </div>
+        </div>
+      </td>
       <td className="flex flex-row gap-2 justify-start relative" ref={menuRef}>
         <Link
           href={`prosjekt/${detailedBooking.bookingDetails.projectId}`}