From 76190c29c0e82adcc04cc7e67d248bf5971218d7 Mon Sep 17 00:00:00 2001
From: Julian Ammouche Ottosen <julian.ammouche@gmail.com>
Date: Sun, 18 Jan 2026 14:11:39 +0100
Subject: [PATCH 1/2] Add RoomBookingCalendar-component

---
 components/committee/RoomBookingCalendar.tsx | 257 +++++++++++++++++++
 package-lock.json                            |  10 +
 package.json                                 |   1 +
 3 files changed, 268 insertions(+)
 create mode 100644 components/committee/RoomBookingCalendar.tsx

diff --git a/components/committee/RoomBookingCalendar.tsx b/components/committee/RoomBookingCalendar.tsx
new file mode 100644
index 00000000..c92598dc
--- /dev/null
+++ b/components/committee/RoomBookingCalendar.tsx
@@ -0,0 +1,257 @@
+import clsx from "clsx";
+import { useState } from "react";
+
+type RoomTime = {
+  date: string;
+  rooms: Room[];
+}
+
+type Room = {
+  room: string;
+  times: Time[];
+}
+
+type Time = {
+  time: string;
+  committee: string | undefined;
+}
+
+const initialRoomTimes: RoomTime[] = [
+  {
+    date: "29.03",
+    rooms: [
+      {
+        room: "S9",
+        times: [
+          { time: "8:00", committee: "appkom" },
+          { time: "9:00", committee: "appkom" },
+          { time: "10:00", committee: "appkom" },
+          { time: "11:00", committee: "appkom" },
+          { time: "12:00", committee: undefined },
+          { time: "13:00", committee: undefined },
+          { time: "14:00", committee: "prokom" },
+          { time: "15:00", committee: "eeeeeeeeeeeee" },
+          { time: "16:00", committee: "prokom" },
+          { time: "17:00", committee: "prokom" },
+          { time: "18:00", committee: undefined }
+        ]
+      },
+      {
+        room: "R3",
+        times: [
+          { time: "8:00", committee: "dotkom" },
+          { time: "9:00", committee: "dotkom" },
+          { time: "10:00", committee: "dotkom" },
+          { time: "11:00", committee: "dotkom" },
+          { time: "12:00", committee: undefined },
+          { time: "13:00", committee: "arrkom" },
+          { time: "14:00", committee: "arrkom" },
+          { time: "15:00", committee: "arrkom" },
+          { time: "16:00", committee: "arrkom" },
+          { time: "17:00", committee: undefined },
+          { time: "18:00", committee: undefined }
+        ]
+      },
+      {
+        room: "A4-108",
+        times: [
+          { time: "8:00", committee: "fagkom" },
+          { time: "9:00", committee: "fagkom" },
+          { time: "10:00", committee: undefined },
+          { time: "11:00", committee: undefined },
+          { time: "12:00", committee: "trikom" },
+          { time: "13:00", committee: "trikom" },
+          { time: "14:00", committee: "trikom" },
+          { time: "15:00", committee: "appkom" },
+          { time: "16:00", committee: "appkom" },
+          { time: "17:00", committee: "appkom" },
+          { time: "18:00", committee: undefined }
+        ]
+      }
+    ]
+  },
+  {
+    date: "30.03",
+    rooms: [
+      {
+        room: "S9",
+        times: [
+          { time: "8:00", committee: "prokom" },
+          { time: "9:00", committee: "prokom" },
+          { time: "10:00", committee: "prokom" },
+          { time: "11:00", committee: "prokom" },
+          { time: "12:00", committee: undefined },
+          { time: "13:00", committee: "dotkom" },
+          { time: "14:00", committee: "dotkom" },
+          { time: "15:00", committee: undefined },
+          { time: "16:00", committee: "arrkom" },
+          { time: "17:00", committee: "arrkom" },
+          { time: "18:00", committee: undefined }
+        ]
+      },
+      {
+        room: "R3",
+        times: [
+          { time: "8:00", committee: "fagkom" },
+          { time: "9:00", committee: undefined },
+          { time: "10:00", committee: undefined },
+          { time: "11:00", committee: "trikom" },
+          { time: "12:00", committee: "trikom" },
+          { time: "13:00", committee: "trikom" },
+          { time: "14:00", committee: "appkom" },
+          { time: "15:00", committee: "appkom" },
+          { time: "16:00", committee: undefined },
+          { time: "17:00", committee: "prokom" },
+          { time: "18:00", committee: undefined }
+        ]
+      },
+      {
+        room: "A4-108",
+        times: [
+          { time: "8:00", committee: "arrkom" },
+          { time: "9:00", committee: "arrkom" },
+          { time: "10:00", committee: "arrkom" },
+          { time: "11:00", committee: "arrkom" },
+          { time: "12:00", committee: "dotkom" },
+          { time: "13:00", committee: "dotkom" },
+          { time: "14:00", committee: "fagkom" },
+          { time: "15:00", committee: "fagkom" },
+          { time: "16:00", committee: undefined },
+          { time: "17:00", committee: undefined },
+          { time: "18:00", committee: undefined }
+        ]
+      }
+    ]
+  },
+  {
+    date: "31.03",
+    rooms: [
+      {
+        room: "S9",
+        times: [
+          { time: "8:00", committee: "trikom" },
+          { time: "9:00", committee: "trikom" },
+          { time: "10:00", committee: "trikom" },
+          { time: "11:00", committee: undefined },
+          { time: "12:00", committee: "fagkom" },
+          { time: "13:00", committee: "fagkom" },
+          { time: "14:00", committee: undefined },
+          { time: "15:00", committee: "dotkom" },
+          { time: "16:00", committee: "dotkom" },
+          { time: "17:00", committee: "dotkom" },
+          { time: "18:00", committee: undefined }
+        ]
+      },
+      {
+        room: "R3",
+        times: [
+          { time: "8:00", committee: "appkom" },
+          { time: "9:00", committee: "appkom" },
+          { time: "10:00", committee: "appkom" },
+          { time: "11:00", committee: undefined },
+          { time: "12:00", committee: "arrkom" },
+          { time: "13:00", committee: "arrkom" },
+          { time: "14:00", committee: "arrkom" },
+          { time: "15:00", committee: undefined },
+          { time: "16:00", committee: "prokom" },
+          { time: "17:00", committee: "prokom" },
+          { time: "18:00", committee: undefined }
+        ]
+      },
+      {
+        room: "A4-108",
+        times: [
+          { time: "8:00", committee: "dotkom" },
+          { time: "9:00", committee: undefined },
+          { time: "10:00", committee: undefined },
+          { time: "11:00", committee: "trikom" },
+          { time: "12:00", committee: "trikom" },
+          { time: "13:00", committee: "appkom" },
+          { time: "14:00", committee: "appkom" },
+          { time: "15:00", committee: undefined },
+          { time: "16:00", committee: "fagkom" },
+          { time: "17:00", committee: "fagkom" },
+          { time: "18:00", committee: undefined }
+        ]
+      }
+    ]
+  }
+];
+
+const currentCommittee = "appkom";
+
+export const RoomBookingCalendar = () => {
+  const [ roomTimes, setRoomTimes ] = useState<RoomTime[]>(initialRoomTimes);
+
+
+  return (
+    <div className="p-4">
+      <div className="flex gap-10 justify-center my-10">
+        <AvailabilityIndicator colorClass="" text="Ledig"/>
+        <AvailabilityIndicator colorClass="bg-red-300" text="Valgt av en annen komité" />
+        <AvailabilityIndicator colorClass="bg-green-300" text="Valgt av din komité" />
+      </div>
+
+      <div className="flex mb-4">
+        <div className="w-20 font-bold">Dato</div>
+        <div className="w-20 font-bold">Rom</div>
+        {roomTimes[0].rooms[0].times.map((time, index) => (
+          <div key={index} className="w-14 text-center font-semibold">{time.time}</div>
+        ))}
+      </div>
+
+      <div className="mb-4">
+        {
+          roomTimes.map((roomTime, index) => (
+            <div key={index} className="mb-4">
+              {
+                roomTime.rooms.map((room, index) => (
+                  <div key={index} className="flex">
+                    <div className="w-20">{index === 0 && roomTime.date}</div>
+                    <div className="w-20">{room.room}</div>
+                    {
+                      room.times.map((time, index) => (
+                        <Cell key={index} committee={time.committee} />
+                      ))
+                    }
+                  </div>
+                ))
+              }
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
+const Cell = ({committee}: {committee: string | undefined }) => {
+  const colorClass = committee === undefined ? "" : committee === currentCommittee ? "bg-green-300" : "bg-red-300";
+  const cursorHoverClass = committee === undefined ||  committee === currentCommittee ? "cursor-pointer hover:bg-gray-100" : "";
+
+  return (
+    <div
+      className={clsx(
+        "w-14 h-8 border border-gray-300 text-[12px] flex justify-center items-center overflow-hidden transition",
+        colorClass,
+        cursorHoverClass,
+      )}
+      title={committee}
+    >
+      {committee}
+    </div>
+  );
+}
+
+const AvailabilityIndicator = ({ colorClass, text }: { colorClass: string, text: string }) => {
+  return (
+    <div className="flex items-center gap-2 text-gray-700 dark:text-white">
+      <div
+        className={clsx("w-16 h-8 border border-gray-300 rounded-sm dark:border-gray-700", colorClass)}
+      />
+      <div>
+        {text}
+      </div>
+    </div>
+  );
+};
diff --git a/package-lock.json b/package-lock.json
index c99b5b06..f094948b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@tanstack/react-query": "^5.51.11",
         "@types/mongodb": "^4.0.7",
         "@vercel/analytics": "^1.1.2",
+        "clsx": "^2.1.1",
         "lucide-react": "^0.441.0",
         "mongodb": "^6.1.0",
         "next": "^14.2.16",
@@ -2477,6 +2478,15 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
diff --git a/package.json b/package.json
index 336c3ed5..2aef0ccf 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@tanstack/react-query": "^5.51.11",
     "@types/mongodb": "^4.0.7",
     "@vercel/analytics": "^1.1.2",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.441.0",
     "mongodb": "^6.1.0",
     "next": "^14.2.16",

From c6190b58d552a18ab614bdbdf2c2d7e0f4755239 Mon Sep 17 00:00:00 2001
From: Julian Ammouche Ottosen <julian.ammouche@gmail.com>
Date: Sun, 18 Jan 2026 14:18:15 +0100
Subject: [PATCH 2/2] Don't know if this works, but I found this code in my
 branch, so just pushing it

---
 .../committee/CommitteeInterviewTimes.tsx     | 151 ++----------------
 .../[period-id]/[committee]/index.tsx         |   2 +-
 2 files changed, 16 insertions(+), 137 deletions(-)

diff --git a/components/committee/CommitteeInterviewTimes.tsx b/components/committee/CommitteeInterviewTimes.tsx
index 88a98947..0e9f9a4f 100644
--- a/components/committee/CommitteeInterviewTimes.tsx
+++ b/components/committee/CommitteeInterviewTimes.tsx
@@ -2,8 +2,6 @@ import { BaseSyntheticEvent, useEffect, useRef } from "react";
 import { useState } from "react";
 import { useSession } from "next-auth/react";
 import FullCalendar from "@fullcalendar/react";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin from "@fullcalendar/interaction";
 import { periodType, committeeInterviewType } from "../../lib/types/types";
 import toast from "react-hot-toast";
 import NotFound from "../../pages/404";
@@ -13,8 +11,7 @@ import useUnsavedChangesWarning from "../../lib/utils/unSavedChangesWarning";
 import { SimpleTitle } from "../Typography";
 import { useQuery } from "@tanstack/react-query";
 import { fetchApplicantsByPeriodIdAndCommittee } from "../../lib/api/applicantApi";
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { XMarkIcon } from "@heroicons/react/24/solid";
+import { RoomBookingCalendar } from "./RoomBookingCalendar";
 
 interface Interview {
   id: string;
@@ -150,11 +147,15 @@ const CommitteeInterviewTimes = ({
     }
   }, [calendarEvents, selectedTimeslot]);
 
-  const handleDateSelect = (selectionInfo: any) => {
-    setCurrentSelection(selectionInfo);
-    setIsModalOpen(true);
-    setUnsavedChanges(true);
-  };
+  useEffect(() => {
+    if (period) {
+      setCountdown(getSubmissionDeadline());
+      const intervalId = setInterval(() => {
+        setCountdown(getSubmissionDeadline());
+      }, 1000);
+      return () => clearInterval(intervalId);
+    }
+  }, [period]);
 
   const handleRoomSubmit = () => {
     if (!roomInput) {
@@ -217,51 +218,11 @@ const CommitteeInterviewTimes = ({
     }
   };
 
-  const removeCell = (event: Interview) => {
-    setCalendarEvents((prevEvents) =>
-      prevEvents.filter((evt) => evt.id !== event.id)
-    );
-
-    setUnsavedChanges(true);
-  };
-
   const updateInterviewInterval = (e: BaseSyntheticEvent) => {
     setInterviewInterval(parseInt(e.target.value));
     setUnsavedChanges(true);
   };
 
-  const calendarEventStyle = (eventContent: { event: Interview }) => {
-    return (
-      <div className="relative flex flex-col p-4">
-        {!hasAlreadySubmitted && (
-          <button
-            className="absolute top-0 right-0 m-2"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-
-              removeCell({
-                id: eventContent.event.id,
-                start: eventContent.event.start,
-                end: eventContent.event.end,
-                title: eventContent.event.title,
-              });
-            }}
-          >
-            <img
-              src="/close.svg"
-              alt="close icon"
-              style={{ width: "20px", height: "20px" }}
-            />
-          </button>
-        )}
-        <h1 className="text-sm sm:text-xl md:text-2xl lg:text-3xl break-words">
-          {eventContent.event.title}
-        </h1>
-      </div>
-    );
-  };
-
   const formatEventsForExport = (events: Interview[]) => {
     return events.map((event) => {
       const startDateTime = new Date(event.start);
@@ -306,16 +267,6 @@ const CommitteeInterviewTimes = ({
     }
   };
 
-  useEffect(() => {
-    if (period) {
-      setCountdown(getSubmissionDeadline());
-      const intervalId = setInterval(() => {
-        setCountdown(getSubmissionDeadline());
-      }, 1000);
-      return () => clearInterval(intervalId);
-    }
-  }, [period]);
-
   const getSubmissionDeadline = (): string => {
     const deadlineIso = period!.applicationPeriod.end;
 
@@ -373,7 +324,7 @@ const CommitteeInterviewTimes = ({
   if (deadLineHasPassed)
     return (
       <SimpleTitle
-        title="Det er ikke lenger mulig å legge inn tider"
+        title="Det er ikke lenger mulig å booke rom for intervjuer"
         size="medium"
       />
     );
@@ -381,11 +332,11 @@ const CommitteeInterviewTimes = ({
   return (
     <div className="flex flex-col items-center">
       <div className="flex flex-row gap-2 px-5 mt-5 mb-6 text-2xl font-semibold text-center">
-        Legg inn ledige tider for intervjuer
+        Book rom for intervjuer
       </div>
       <ImportantNote
         prefix="NB"
-        text={`Fristen for å legge inn tider er ${countdown}`}
+        text={`Fristen for å booke rom til intervjuer er ${countdown}`}
       />
 
       <p className="px-5 my-5 text-lg text-center">
@@ -418,49 +369,8 @@ const CommitteeInterviewTimes = ({
             </select>
           </div>
         )}
-        <p className="py-5 text-lg">{`${interviewsPlanned} / ${numberOfApplications} intervjuer planlagt`}</p>
-        <div className="mx-4 sm:mx-20">
-          <FullCalendar
-            ref={calendarRef}
-            eventClassNames={"dark:bg-online-darkBlue"}
-            plugins={[timeGridPlugin, interactionPlugin]}
-            initialView="timeGridWeek"
-            headerToolbar={{
-              start: "today prev,next",
-              center: "",
-              end: "",
-            }}
-            events={calendarEvents}
-            selectable={!hasAlreadySubmitted}
-            selectMirror={true}
-            height="auto"
-            select={handleDateSelect}
-            slotDuration={`00:${interviewInterval}`}
-            businessHours={{ startTime: "08:00", endTime: "18:00" }}
-            weekends={false}
-            slotMinTime="08:00"
-            slotMaxTime="18:00"
-            allDaySlot={false}
-            validRange={visibleRange}
-            eventContent={calendarEventStyle}
-            eventConstraint={{ startTime: "08:00", endTime: "18:00" }}
-            selectAllow={(selectInfo) => {
-              const start = selectInfo.start;
-              const end = selectInfo.end;
-              const startHour = start.getHours();
-              const endHour = end.getHours();
-              const isSameDay = start.toDateString() === end.toDateString();
-              return isSameDay && startHour >= 8 && endHour <= 18;
-            }}
-            slotLabelFormat={{
-              hour: "2-digit",
-              minute: "2-digit",
-              hour12: false,
-            }}
-            handleWindowResize={true}
-            longPressDelay={0}
-          />
-        </div>
+
+        <RoomBookingCalendar />
 
         {!hasAlreadySubmitted && (
           <label className="block mt-5 mb-2 font-medium text-m">
@@ -481,37 +391,6 @@ const CommitteeInterviewTimes = ({
           />
         </div>
       </form>
-
-      {isModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="flex flex-col bg-gray-100 dark:bg-gray-800 p-5 rounded shadow-lg">
-            <h2 className="mb-4 text-xl font-semibold">
-              Skriv inn navn på rom:
-            </h2>
-            <input
-              ref={inputRef}
-              type="text"
-              className="my-2 p-2 w-full rounded-lg dark:bg-gray-900  border-gray-900 dark:border-white transition-none outline-none"
-              value={roomInput}
-              onChange={(e) => setRoomInput(e.target.value)}
-            />
-            <div className="flex flex-row justify-center gap-2 mt-4">
-              <button
-                className="px-8 py-2 text-white bg-red-700 rounded-lg hover:bg-red-800"
-                onClick={() => setIsModalOpen(false)}
-              >
-                <XMarkIcon className="w-6 h-6 " />
-              </button>
-              <button
-                className="px-8 py-2 text-white bg-green-700 hover:bg-green-800 rounded-lg"
-                onClick={handleRoomSubmit}
-              >
-                <CheckIcon className="w-6 h-6" />
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/pages/committee/[period-id]/[committee]/index.tsx b/pages/committee/[period-id]/[committee]/index.tsx
index b5f51989..bc22703c 100644
--- a/pages/committee/[period-id]/[committee]/index.tsx
+++ b/pages/committee/[period-id]/[committee]/index.tsx
@@ -143,7 +143,7 @@ const CommitteeApplicantOverview: NextPage = () => {
         }}
         content={[
           {
-            title: "Intervjutider",
+            title: "Rombooking",
             icon: <CalendarIcon className="w-5 h-5" />,
             content: (
               <CommitteeInterviewTimes