Fixing type errors for the frontend.

Signed-off-by: Cliff Hill <xlorep@darkhelm.org>

frontend/.storybook/main.js

@@ -4,7 +4,6 @@ export default {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
   ],
   framework: {
     name: "@storybook/react-webpack5",

frontend/src/__tests__/components/BookingForm.test.tsx

@@ -113,7 +113,7 @@ describe("BookingForm", () => {
 
   it("sets initial room and title based on editBooking", () => {
     const editBooking = {
-      id: "123",
+      id: 123,
       room_id: 2,
       title: "Team Sync",
       start_time: futureIso(24), // 24 hours in future
@@ -132,7 +132,7 @@ describe("BookingForm", () => {
 
   it("updates invitees when editBooking changes", () => {
     const booking1 = {
-      id: "1",
+      id: 1,
       room_id: 1,
       title: "Test",
       start_time: futureIso(26),
@@ -140,7 +140,7 @@ describe("BookingForm", () => {
       invitees: ["bob@example.com"],
     };
     const booking2 = {
-      id: "1",
+      id: 1,
       room_id: 1,
       title: "Test",
       start_time: futureIso(26),
@@ -176,7 +176,7 @@ describe("BookingForm", () => {
 
   it("validates room, start/end time, overlaps, and invitees", async () => {
     const booking = {
-      id: "1",
+      id: 1,
       room_id: 1,
       title: "Test",
       start_time: futureIso(29),
@@ -270,7 +270,7 @@ describe("BookingForm", () => {
 
   it("edits an existing booking and calls updateBooking", async () => {
     const editBooking = {
-      id: "123",
+      id: 123,
       room_id: 1,
       title: "Old Title",
       start_time: futureIso(36),
@@ -312,7 +312,7 @@ describe("BookingForm", () => {
 
   it("handles edge case: submitting in view mode closes dialog", () => {
     const editBooking = {
-      id: "123",
+      id: 123,
       room_id: 1,
       title: "Old Title",
       start_time: pastIso(24), // 24 hours in past
@@ -331,7 +331,7 @@ describe("BookingForm", () => {
 
   it("shows error when invitees exceed room capacity", () => {
     const editBooking = {
-      id: "123",
+      id: 123,
       room_id: 1,
       title: "Capacity Test",
       start_time: futureIso(40),
@@ -358,7 +358,7 @@ describe("BookingForm", () => {
 
   it("shows error when invitees exceed custom room capacity (fully mocked context)", () => {
     const editBooking = {
-      id: "cap-test",
+      id: 999,
       room_id: 99,
       title: "Capacity Custom Test",
       start_time: futureIso(42),

frontend/src/__tests__/components/BookingList.test.tsx

@@ -9,7 +9,7 @@ describe("BookingList", () => {
   it("renders bookings in chronological order", () => {
     const bookings = [
       {
-        id: "2",
+        id: 2,
         room_id: 1,
         start_time: rollingIso(3),
         end_time: rollingIso(4),
@@ -17,7 +17,7 @@ describe("BookingList", () => {
         invitees: ["user@example.com"],
       },
       {
-        id: "1",
+        id: 1,
         room_id: 1,
         start_time: rollingIso(1),
         end_time: rollingIso(2),
@@ -60,7 +60,7 @@ describe("BookingList", () => {
   it("maps invitee emails to user names and falls back to email", () => {
     const bookings = [
       {
-        id: "1",
+        id: 1,
         room_id: 1,
         start_time: rollingIso(1),
         end_time: rollingIso(2),
@@ -82,7 +82,7 @@ describe("BookingList", () => {
   it("shows 'No invitees' when invitees array is empty or missing", () => {
     const bookings = [
       {
-        id: "1",
+        id: 1,
         room_id: 1,
         start_time: rollingIso(1),
         end_time: rollingIso(2),
@@ -90,7 +90,7 @@ describe("BookingList", () => {
         invitees: [],
       },
       {
-        id: "2",
+        id: 2,
         room_id: 1,
         start_time: rollingIso(3),
         end_time: rollingIso(4),
@@ -111,7 +111,7 @@ describe("BookingList", () => {
   it("shows 'Time not set' for missing or invalid times", () => {
     const bookings = [
       {
-        id: "1",
+        id: 1,
         room_id: 1,
         start_time: "",
         end_time: "",
@@ -119,7 +119,7 @@ describe("BookingList", () => {
         invitees: ["user@example.com"],
       },
       {
-        id: "2",
+        id: 2,
         room_id: 1,
         start_time: "invalid-date",
         end_time: "invalid-date",
@@ -143,7 +143,7 @@ describe("BookingList", () => {
   it("renders booking list items", () => {
     const bookings = [
       {
-        id: "1",
+        id: 1,
         room_id: 1,
         start_time: rollingIso(1),
         end_time: rollingIso(2),
@@ -183,7 +183,7 @@ describe("BookingList", () => {
   it("calls onSelect when booking item is clicked", () => {
     const bookings = [
       {
-        id: "2",
+        id: 2,
         room_id: 2,
         start_time: rollingIso(3),
         end_time: rollingIso(4),
@@ -213,9 +213,7 @@ describe("BookingList", () => {
     expect(item).toBeTruthy();
     if (item) {
       (item as globalThis.HTMLElement).click();
-      expect(onSelect).toHaveBeenCalledWith(
-        expect.objectContaining({ id: "2" })
-      );
+      expect(onSelect).toHaveBeenCalledWith(expect.objectContaining({ id: 2 }));
     }
   });
 });

frontend/src/__tests__/helpers/booking.test.ts

@@ -9,12 +9,12 @@ describe("booking helpers", () => {
   it("extracts room id from booking", () => {
     expect(
       getEditBookingRoomId({
-        id: "b1",
-        room_id: "42",
+        id: 1,
+        room_id: 42,
         start_time: rollingIso(1),
         end_time: rollingIso(2),
       })
-    ).toBe("42");
+    ).toBe(42);
     expect(getEditBookingRoomId(null)).toBe("");
   });
 

frontend/src/__tests__/pages/ConfirmationPage.test.tsx

@@ -48,7 +48,7 @@ describe("ConfirmationPage", () => {
     // Setup required mocks and context
     jest.spyOn(roomsApi, "getRooms").mockResolvedValue([
       {
-        id: "1",
+        id: 1,
         name: "Test Room",
         capacity: 2,
         amenities: [],
@@ -57,8 +57,8 @@ describe("ConfirmationPage", () => {
     ]);
     const queryClient = new QueryClient();
     const mockBooking = {
-      id: "b1",
-      roomId: "1",
+      id: 1,
+      roomId: 1,
       guestName: "Test Guest",
       date: "2025-09-19",
       start_time: "10:00",
@@ -68,7 +68,11 @@ describe("ConfirmationPage", () => {
     render(
       <QueryClientProvider client={queryClient}>
         <BookingContext.Provider
-          value={{ bookings: [mockBooking], fetchMonth: jest.fn() }}
+          value={{
+            bookings: [mockBooking],
+            fetchMonth: jest.fn(),
+            refreshBookings: jest.fn(),
+          }}
         >
           <MemoryRouter
             initialEntries={[