@calcom/atoms 2.8.0 → 2.8.1

package/src/calendar-view/scheduler/components/event/all-day-events.test.tsx

@@ -1,799 +0,0 @@
-import { render, renderHook, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-
-import dayjs from "../../../../vendor/dayjs";
-import { CalendarStoreContext, createCalendarStore } from "../../state/store";
-import type { CalendarEvent } from "../../types/events";
-
-import {
-  type AllDayEventSpan,
-  AllDayEvents,
-  assignLanes,
-  isInAllDayBar,
-  isOverlapping,
-  useAllDayEventBar,
-  useAllDayEventSpans,
-} from "./all-day-events";
-
-function renderWithStore(events: CalendarEvent[], days: dayjs.Dayjs[], timezone = "UTC") {
-  const store = createCalendarStore({ events });
-  return render(
-    <CalendarStoreContext.Provider value={store}>
-      <AllDayEvents days={days} showBorder={true} borderColor="default" timezone={timezone} />
-    </CalendarStoreContext.Provider>
-  );
-}
-
-describe("AllDayEvents", () => {
-  const monday = dayjs("2026-04-27");
-  const weekDays = Array.from({ length: 7 }, (_, i) => monday.add(i, "day"));
-
-  it("should render nothing when there are no all-day events", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Regular event",
-        start: new Date("2026-04-27T10:00:00"),
-        end: new Date("2026-04-27T11:00:00"),
-      },
-    ];
-
-    const { container } = renderWithStore(events, weekDays);
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("should render a full-day busy event spanning a single day", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Full day busy",
-        start: new Date("2026-04-28T00:00:00"),
-        end: new Date("2026-04-28T23:59:59"),
-        options: { allDay: true, color: "#ef4444", "data-test-id": "allday-single" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-single");
-    expect(bar).toBeInTheDocument();
-    expect(bar).toHaveTextContent("Full day busy");
-
-    // Tuesday is index 1 in the week (Mon=0, Tue=1, ...)
-    // left should be (1/7)*100 %, width should be (1/7)*100 %
-    const style = bar.style;
-    const expectedLeft = ((1 / 7) * 100).toFixed(4);
-    const expectedWidth = ((1 / 7) * 100).toFixed(4);
-    expect(style.left).toContain(expectedLeft.substring(0, 5));
-    expect(style.width).toContain(expectedWidth.substring(0, 5));
-  });
-
-  it("should render a multi-day busy event spanning multiple columns", () => {
-    // Event spans from Tuesday Apr 28 through Saturday May 2 (5 days within the week view)
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Multi-day busy",
-        start: new Date("2026-04-28T07:30:00"),
-        end: new Date("2026-05-02T08:29:59"),
-        options: { allDay: true, color: "#ef4444", "data-test-id": "allday-multi" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-multi");
-    expect(bar).toBeInTheDocument();
-    expect(bar).toHaveTextContent("Multi-day busy");
-
-    // Event starts at 07:30 of Tue (col 1, offset 7.5/24) and ends at 08:29:59 of Sat (col 5).
-    // Bar is shifted into the start column by 7.5/24 of a day-width.
-    const style = bar.style;
-    const expectedLeft = (((1 + 7.5 / 24) / 7) * 100).toFixed(4);
-    const expectedWidth = (((5 + 8.5 / 24 - (1 + 7.5 / 24)) / 7) * 100).toFixed(4);
-    expect(style.left).toContain(expectedLeft.substring(0, 5));
-    expect(style.width).toContain(expectedWidth.substring(0, 4));
-  });
-
-  it("should render a multi-day event that extends beyond the visible week", () => {
-    // Event starts before the visible week and ends after it
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Overflowing busy",
-        start: new Date("2026-04-25T00:00:00"),
-        end: new Date("2026-05-05T23:59:59"),
-        options: { allDay: true, color: "#3b82f6", "data-test-id": "allday-overflow" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-overflow");
-    expect(bar).toBeInTheDocument();
-
-    // Should span all 7 columns (startCol=0, endCol=6)
-    const style = bar.style;
-    expect(style.left).toContain("0%");
-    expect(style.width).toContain("100%");
-  });
-
-  it("should not render events that are completely outside the visible week", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Outside event",
-        start: new Date("2026-05-10T00:00:00"),
-        end: new Date("2026-05-12T23:59:59"),
-        options: { allDay: true, "data-test-id": "allday-outside" },
-      },
-    ];
-
-    const { container } = renderWithStore(events, weekDays);
-    // Component returns null when no spans are within the visible range
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("should not render events without allDay flag in the all-day row", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Regular booking",
-        start: new Date("2026-04-28T10:00:00"),
-        end: new Date("2026-04-28T11:00:00"),
-        options: { "data-test-id": "regular-event" },
-      },
-    ];
-
-    const { container } = renderWithStore(events, weekDays);
-    expect(container.innerHTML).toBe("");
-  });
-
-  it("should render multiple all-day events", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Busy block 1",
-        start: new Date("2026-04-27T00:00:00"),
-        end: new Date("2026-04-29T23:59:59"),
-        options: { allDay: true, color: "#ef4444", "data-test-id": "allday-1" },
-      },
-      {
-        id: 2,
-        title: "Busy block 2",
-        start: new Date("2026-05-01T00:00:00"),
-        end: new Date("2026-05-03T23:59:59"),
-        options: { allDay: true, color: "#3b82f6", "data-test-id": "allday-2" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar1 = screen.getByTestId("allday-1");
-    const bar2 = screen.getByTestId("allday-2");
-    expect(bar1).toBeInTheDocument();
-    expect(bar2).toBeInTheDocument();
-    expect(bar1).toHaveTextContent("Busy block 1");
-    expect(bar2).toHaveTextContent("Busy block 2");
-  });
-
-  it("renders an explicit options.color as a colored left strip", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Colored busy",
-        start: new Date("2026-04-28T00:00:00"),
-        end: new Date("2026-04-30T23:59:59"),
-        options: { allDay: true, color: "#22c55e", "data-test-id": "allday-colored" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-colored");
-    const strip = bar.querySelector('[data-testid="allday-color-strip"]') as HTMLElement | null;
-    expect(strip).not.toBeNull();
-    expect(strip!.style.backgroundColor).toBe("rgb(34, 197, 94)");
-    // The bar itself uses bg-subtle (no inline backgroundColor) — matches regular Event.tsx style
-    expect(bar.style.backgroundColor).toBe("");
-  });
-
-  it("falls back to the booking-status color class when no explicit color is set", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "No color busy",
-        start: new Date("2026-04-28T00:00:00"),
-        end: new Date("2026-04-28T23:59:59"),
-        // status: ACCEPTED is what LargeCalendar sets for troubleshooter busy events,
-        // and Event.tsx maps it to bg-green-500. AllDayEvents should reuse the same class.
-        options: { allDay: true, status: "ACCEPTED", "data-test-id": "allday-default-color" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-default-color");
-    const strip = bar.querySelector('[data-testid="allday-color-strip"]') as HTMLElement | null;
-    expect(strip).not.toBeNull();
-    expect(strip!.className).toContain("bg-green-500");
-    // No hardcoded #ef4444 fallback on the bar itself anymore
-    expect(bar.style.backgroundColor).toBe("");
-  });
-
-  it("should handle a recurring multi-day pattern like the Google Calendar bug", () => {
-    // Simulates the real-world pattern: weekly recurring 8-day blocks
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Recurring block",
-        start: new Date("2026-04-28T07:30:00"),
-        end: new Date("2026-05-06T08:29:59"),
-        source: "google-calendar",
-        options: { allDay: true, color: "#ef4444", "data-test-id": "allday-recurring" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-recurring");
-    expect(bar).toBeInTheDocument();
-    expect(bar).toHaveTextContent("Recurring block");
-
-    // Starts at 07:30 of Tue (col 1, offset 7.5/24) and is clipped at the end of Sun
-    // (col 6, endOffsetInDay clamped to 1) since the real event extends past the week.
-    const style = bar.style;
-    const expectedLeft = (((1 + 7.5 / 24) / 7) * 100).toFixed(4);
-    const expectedWidth = (((6 + 1 - (1 + 7.5 / 24)) / 7) * 100).toFixed(4);
-    expect(style.left).toContain(expectedLeft.substring(0, 5));
-    expect(style.width).toContain(expectedWidth.substring(0, 4));
-  });
-
-  it("shows date prefix in the label for truly multi-day events", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Multi-day with date",
-        start: new Date("2026-04-28T07:30:00Z"),
-        end: new Date("2026-05-02T08:29:59Z"),
-        options: { allDay: true, "data-test-id": "allday-multi-date" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-multi-date");
-    expect(bar).toHaveTextContent("Apr 28, 07:30 – May 2, 08:29");
-  });
-
-  it("shows time-only label for single-day all-day events", () => {
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Single day",
-        start: new Date("2026-04-28T00:00:00Z"),
-        end: new Date("2026-04-28T23:59:59Z"),
-        options: { allDay: true, "data-test-id": "allday-single-date" },
-      },
-    ];
-
-    renderWithStore(events, weekDays);
-
-    const bar = screen.getByTestId("allday-single-date");
-    expect(bar).toHaveTextContent("00:00 – 23:59");
-    expect(bar.textContent).not.toMatch(/Apr|May/);
-  });
-});
-
-const allDay = (
-  id: number,
-  startIso: string,
-  endIso: string,
-  options: CalendarEvent["options"] = {}
-): CalendarEvent => ({
-  id,
-  title: `Event ${id}`,
-  start: new Date(startIso),
-  end: new Date(endIso),
-  options: { allDay: true, ...options },
-});
-
-const utcWeek = (mondayIso: string) =>
-  Array.from({ length: 7 }, (_, i) => dayjs.utc(mondayIso).add(i, "day"));
-
-// IST offset = +5h30m → 5.5/24 of a day.
-const IST_FRACTION = 5.5 / 24;
-
-describe("useAllDayEventSpans", () => {
-  it("returns empty when there are no events", () => {
-    const days = utcWeek("2026-04-27");
-    const { result } = renderHook(() => useAllDayEventSpans({ events: [], days, timezone: "UTC" }));
-    expect(result.current).toEqual([]);
-  });
-
-  it("ignores events without an allDay flag", () => {
-    const days = utcWeek("2026-04-27");
-    const events: CalendarEvent[] = [
-      {
-        id: 1,
-        title: "Regular",
-        start: new Date("2026-04-28T10:00:00Z"),
-        end: new Date("2026-04-28T11:00:00Z"),
-      },
-    ];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([]);
-  });
-
-  it("returns empty when days array is empty", () => {
-    const events = [allDay(1, "2026-04-28T00:00:00Z", "2026-04-29T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days: [], timezone: "UTC" }));
-    expect(result.current).toEqual([]);
-  });
-
-  it("computes a single-day span for a 24h event aligned to UTC midnight", () => {
-    const days = utcWeek("2026-04-27"); // Mon Apr 27 (col 0) ... Sun May 3 (col 6)
-    const events = [allDay(1, "2026-04-28T00:00:00Z", "2026-04-29T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([
-      { event: events[0], startCol: 1, endCol: 1, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-    ]);
-  });
-
-  it("computes a multi-day span covering the full visible week", () => {
-    const days = utcWeek("2026-04-27");
-    const events = [allDay(1, "2026-04-27T00:00:00Z", "2026-05-04T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([
-      { event: events[0], startCol: 0, endCol: 6, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-    ]);
-  });
-
-  it("clips a span that starts before the visible week (offset pinned to 0)", () => {
-    const days = utcWeek("2026-04-27");
-    const events = [allDay(1, "2026-04-20T00:00:00Z", "2026-04-29T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([
-      { event: events[0], startCol: 0, endCol: 1, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-    ]);
-  });
-
-  it("clips a span that ends after the visible week (offset pinned to 1)", () => {
-    const days = utcWeek("2026-04-27");
-    const events = [allDay(1, "2026-05-01T00:00:00Z", "2026-05-10T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([
-      { event: events[0], startCol: 4, endCol: 6, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-    ]);
-  });
-
-  it("excludes events entirely before the visible week", () => {
-    const days = utcWeek("2026-04-27");
-    const events = [allDay(1, "2026-04-20T00:00:00Z", "2026-04-25T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([]);
-  });
-
-  it("excludes events entirely after the visible week", () => {
-    const days = utcWeek("2026-04-27");
-    const events = [allDay(1, "2026-05-10T00:00:00Z", "2026-05-15T00:00:00Z")];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([]);
-  });
-
-  it("returns one span per concurrent all-day event in input order", () => {
-    const days = utcWeek("2026-04-27");
-    const events = [
-      allDay(1, "2026-04-27T00:00:00Z", "2026-04-30T00:00:00Z"),
-      allDay(2, "2026-05-01T00:00:00Z", "2026-05-04T00:00:00Z"),
-    ];
-    const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-    expect(result.current).toEqual([
-      { event: events[0], startCol: 0, endCol: 2, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-      { event: events[1], startCol: 4, endCol: 6, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-    ]);
-  });
-
-  describe("intra-day offsets shift the bar to match real time-of-day", () => {
-    it("a 7:30–8:30 UTC event spanning multiple days carries its sub-day offsets", () => {
-      // Event 2026-04-28 07:30Z → 2026-05-02 08:30Z (≈ 4 days 1 hour, intra-day starts/ends).
-      const days = utcWeek("2026-04-27");
-      const events = [allDay(1, "2026-04-28T07:30:00Z", "2026-05-02T08:30:00Z")];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-      expect(result.current).toEqual([
-        {
-          event: events[0],
-          startCol: 1,
-          endCol: 5,
-          startOffsetInDay: 7.5 / 24,
-          endOffsetInDay: 8.5 / 24,
-          lane: 0,
-        },
-      ]);
-    });
-  });
-
-  describe("lane assignment for overlapping spans", () => {
-    it("assigns lane 0 to non-overlapping spans", () => {
-      const days = utcWeek("2026-04-27");
-      const events = [
-        allDay(1, "2026-04-27T00:00:00Z", "2026-04-29T00:00:00Z"),
-        allDay(2, "2026-05-01T00:00:00Z", "2026-05-03T00:00:00Z"),
-      ];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-      expect(result.current.map((s) => s.lane)).toEqual([0, 0]);
-    });
-
-    it("places an exact replica on lane 1", () => {
-      const days = utcWeek("2026-04-27");
-      const events = [
-        allDay(1, "2026-04-27T07:30:00Z", "2026-05-01T08:30:00Z"),
-        allDay(2, "2026-04-27T07:30:00Z", "2026-05-01T08:30:00Z"),
-      ];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-      expect(result.current.map((s) => s.lane).sort()).toEqual([0, 1]);
-    });
-
-    it("places a partial overlap on lane 1 and reuses lane 0 once the lane is free", () => {
-      const days = utcWeek("2026-04-27");
-      const events = [
-        allDay(1, "2026-04-27T00:00:00Z", "2026-04-30T00:00:00Z"), // Mon–Wed (cols 0–2)
-        allDay(2, "2026-04-29T00:00:00Z", "2026-05-02T00:00:00Z"), // Wed–Fri (cols 2–4) — overlaps #1
-        allDay(3, "2026-05-02T00:00:00Z", "2026-05-04T00:00:00Z"), // Fri–Sun (cols 4–6) — fits lane 0 again
-      ];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-      const lanesById = new Map(result.current.map((s) => [s.event.id, s.lane]));
-      expect(lanesById.get(1)).toBe(0);
-      expect(lanesById.get(2)).toBe(1);
-      expect(lanesById.get(3)).toBe(0);
-    });
-  });
-
-  describe("timezone normalization", () => {
-    it("a UTC-midnight end time straddles two IST days when viewed in IST", () => {
-      // Event runs 2026-04-29T00:00Z → 2026-04-30T00:00Z (24h in UTC).
-      // In IST (UTC+5:30) the same range is 2026-04-29T05:30 → 2026-04-30T05:30 IST,
-      // so it must occupy BOTH Apr 29 (col 2) AND Apr 30 (col 3) of the IST week.
-      // The bar is shifted right by 5.5/24 of one day in BOTH the start and end columns
-      // — net visual width = exactly one day (1/7 of the week).
-      const days = Array.from({ length: 7 }, (_, i) => dayjs.tz("2026-04-27", "Asia/Kolkata").add(i, "day"));
-      const events = [allDay(1, "2026-04-29T00:00:00Z", "2026-04-30T00:00:00Z")];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "Asia/Kolkata" }));
-      expect(result.current).toEqual([
-        {
-          event: events[0],
-          startCol: 2,
-          endCol: 3,
-          startOffsetInDay: IST_FRACTION,
-          endOffsetInDay: IST_FRACTION,
-          lane: 0,
-        },
-      ]);
-    });
-
-    it("a UTC-midnight end time stays a single column when viewed in UTC", () => {
-      // Same event, but in UTC view it occupies only Apr 29 (col 2) — its end
-      // sits exactly at the start of Apr 30, so it does not overlap that column.
-      const days = utcWeek("2026-04-27");
-      const events = [allDay(1, "2026-04-29T00:00:00Z", "2026-04-30T00:00:00Z")];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "UTC" }));
-      expect(result.current).toEqual([
-        { event: events[0], startCol: 2, endCol: 2, startOffsetInDay: 0, endOffsetInDay: 1, lane: 0 },
-      ]);
-    });
-
-    it("Apr 24 UTC 00:00 → Apr 25 UTC 00:00 full-day event shifts ~23% into Apr 24 + Apr 25 columns in IST", () => {
-      // Plan feedback case. UTC full-day event becomes IST 05:30 → 05:30 next day.
-      // Bar must (a) span Apr 24 (col 4) AND Apr 25 (col 5) AND (b) be shifted right
-      // by 5.5/24 ≈ 22.9% within both columns — net width = exactly one day.
-      const days = Array.from({ length: 7 }, (_, i) => dayjs.tz("2026-04-20", "Asia/Kolkata").add(i, "day"));
-      const events = [allDay(1, "2026-04-24T00:00:00Z", "2026-04-25T00:00:00Z")];
-      const { result } = renderHook(() => useAllDayEventSpans({ events, days, timezone: "Asia/Kolkata" }));
-      expect(result.current).toEqual([
-        {
-          event: events[0],
-          startCol: 4,
-          endCol: 5,
-          startOffsetInDay: IST_FRACTION,
-          endOffsetInDay: IST_FRACTION,
-          lane: 0,
-        },
-      ]);
-    });
-  });
-});
-
-describe("isInAllDayBar", () => {
-  const baseEvent = (overrides: Partial<CalendarEvent> = {}): CalendarEvent => ({
-    id: 1,
-    title: "Test",
-    start: new Date("2026-04-28T10:00:00Z"),
-    end: new Date("2026-04-28T11:00:00Z"),
-    ...overrides,
-  });
-
-  it("returns true when options.allDay is set", () => {
-    expect(isInAllDayBar(baseEvent({ options: { allDay: true } }))).toBe(true);
-  });
-
-  it("returns true when options.allDay is set, even on a single-day event with non-midnight bounds", () => {
-    // Mirrors how LargeCalendar tags its busy events on the troubleshooter — single-day
-    // bookings flagged allDay should still go to the all-day bar.
-    expect(
-      isInAllDayBar(
-        baseEvent({
-          start: new Date("2026-04-28T07:00:00Z"),
-          end: new Date("2026-04-28T18:00:00Z"),
-          options: { allDay: true },
-        })
-      )
-    ).toBe(true);
-  });
-
-  it("returns true for a multi-day event with no allDay flag", () => {
-    expect(
-      isInAllDayBar(
-        baseEvent({
-          start: new Date("2026-04-28T07:00:00Z"),
-          end: new Date("2026-05-02T09:00:00Z"),
-        })
-      )
-    ).toBe(true);
-  });
-
-  it("returns false for a single-day event with no allDay flag", () => {
-    expect(
-      isInAllDayBar(
-        baseEvent({
-          start: new Date("2026-04-28T10:00:00Z"),
-          end: new Date("2026-04-28T11:00:00Z"),
-        })
-      )
-    ).toBe(false);
-  });
-
-  it("uses the supplied timezone when deciding multi-day", () => {
-    // Apr 29 16:00Z → Apr 29 20:00Z is single-day in UTC but in IST runs
-    // 21:30 Apr 29 → 01:30 Apr 30, crossing midnight.
-    const event = baseEvent({
-      start: new Date("2026-04-29T16:00:00Z"),
-      end: new Date("2026-04-29T20:00:00Z"),
-    });
-    expect(isInAllDayBar(event, "UTC")).toBe(false);
-    expect(isInAllDayBar(event, "Asia/Kolkata")).toBe(true);
-  });
-});
-
-describe("isOverlapping", () => {
-  const a = dayjs("2026-04-27T10:00:00Z");
-  const b = dayjs("2026-04-27T12:00:00Z");
-
-  it("returns true when ranges partially overlap", () => {
-    expect(isOverlapping(a, b, dayjs("2026-04-27T11:00:00Z"), dayjs("2026-04-27T13:00:00Z"))).toBe(true);
-  });
-
-  it("returns true when one range fully contains the other", () => {
-    expect(isOverlapping(a, b, dayjs("2026-04-27T10:30:00Z"), dayjs("2026-04-27T11:30:00Z"))).toBe(true);
-  });
-
-  it("returns false when ranges only touch at the boundary", () => {
-    expect(isOverlapping(a, b, b, dayjs("2026-04-27T13:00:00Z"))).toBe(false);
-    expect(isOverlapping(a, b, dayjs("2026-04-27T08:00:00Z"), a)).toBe(false);
-  });
-
-  it("returns false when ranges are disjoint", () => {
-    expect(isOverlapping(a, b, dayjs("2026-04-27T13:00:00Z"), dayjs("2026-04-27T14:00:00Z"))).toBe(false);
-  });
-});
-
-describe("assignLanes", () => {
-  it("returns an empty array for no intervals", () => {
-    expect(assignLanes([])).toEqual([]);
-  });
-
-  it("places a single interval in lane 0", () => {
-    expect(assignLanes([{ start: 0, end: 2 }])).toEqual([0]);
-  });
-
-  it("keeps non-overlapping intervals on the same lane", () => {
-    expect(
-      assignLanes([
-        { start: 0, end: 2 },
-        { start: 3, end: 5 },
-      ])
-    ).toEqual([0, 0]);
-  });
-
-  it("treats touching boundaries as non-overlapping (lane reuse)", () => {
-    expect(
-      assignLanes([
-        { start: 0, end: 2 },
-        { start: 2, end: 4 },
-      ])
-    ).toEqual([0, 0]);
-  });
-
-  it("stacks overlapping intervals onto separate lanes", () => {
-    expect(
-      assignLanes([
-        { start: 0, end: 3 },
-        { start: 1, end: 4 },
-        { start: 2, end: 5 },
-      ])
-    ).toEqual([0, 1, 2]);
-  });
-
-  it("reuses an earlier lane once its previous occupant ends", () => {
-    // A: [0,2], B: [1,4], C: [3,5] — C should reuse A's lane (0) after A ends.
-    expect(
-      assignLanes([
-        { start: 0, end: 2 },
-        { start: 1, end: 4 },
-        { start: 3, end: 5 },
-      ])
-    ).toEqual([0, 1, 0]);
-  });
-
-  it("returns lane assignments aligned to the original input order, not sorted order", () => {
-    // Input is intentionally out of start-order; result indices must match input positions.
-    const lanes = assignLanes([
-      { start: 3, end: 5 }, // index 0 — placed second (lane 0 reused after index 1)
-      { start: 0, end: 2 }, // index 1 — placed first (lane 0)
-      { start: 1, end: 4 }, // index 2 — overlaps both, lane 1
-    ]);
-    expect(lanes).toEqual([0, 0, 1]);
-  });
-});
-
-describe("useAllDayEventBar", () => {
-  const buildSpan = (overrides: Partial<AllDayEventSpan> = {}): AllDayEventSpan => ({
-    event: {
-      id: 1,
-      title: "Test event",
-      start: new Date("2026-04-28T00:00:00Z"),
-      end: new Date("2026-04-28T23:59:59Z"),
-      options: { allDay: true },
-    },
-    startCol: 1,
-    endCol: 1,
-    startOffsetInDay: 0,
-    endOffsetInDay: 1,
-    lane: 0,
-    ...overrides,
-  });
-
-  it("computes top from the lane index using ROW_HEIGHT_PX (32) + ROW_GAP_PX (2) + ROW_PADDING_PX (4)", () => {
-    const lane0 = renderHook(() =>
-      useAllDayEventBar({ span: buildSpan({ lane: 0 }), colCount: 7, timezone: "UTC" })
-    );
-    const lane1 = renderHook(() =>
-      useAllDayEventBar({ span: buildSpan({ lane: 1 }), colCount: 7, timezone: "UTC" })
-    );
-    const lane2 = renderHook(() =>
-      useAllDayEventBar({ span: buildSpan({ lane: 2 }), colCount: 7, timezone: "UTC" })
-    );
-
-    expect(lane0.result.current.containerStyle.top).toBe(4); // ROW_PADDING_PX
-    expect(lane1.result.current.containerStyle.top).toBe(38); // 4 + 1 * (32 + 2)
-    expect(lane2.result.current.containerStyle.top).toBe(72); // 4 + 2 * (32 + 2)
-  });
-
-  it("returns a constant height equal to ROW_HEIGHT_PX (32) regardless of lane", () => {
-    const lane0 = renderHook(() =>
-      useAllDayEventBar({ span: buildSpan({ lane: 0 }), colCount: 7, timezone: "UTC" })
-    );
-    const lane5 = renderHook(() =>
-      useAllDayEventBar({ span: buildSpan({ lane: 5 }), colCount: 7, timezone: "UTC" })
-    );
-    expect(lane0.result.current.containerStyle.height).toBe(32);
-    expect(lane5.result.current.containerStyle.height).toBe(32);
-  });
-
-  it("derives left and width from startCol/endCol/offsets and colCount", () => {
-    const span = buildSpan({ startCol: 1, endCol: 2, startOffsetInDay: 0, endOffsetInDay: 1 });
-
-    const week = renderHook(() => useAllDayEventBar({ span, colCount: 7, timezone: "UTC" }));
-    // startPos = 1, endPos = 3 → 1/7 left, 2/7 width
-    expect(week.result.current.containerStyle.left).toBe(`calc(${(1 / 7) * 100}% + 2px)`);
-    expect(week.result.current.containerStyle.width).toBe(`calc(${(2 / 7) * 100}% - 4px)`);
-
-    // Same span on a 3-col view (e.g. day-of-3 layout) — verifies colCount is honored.
-    const threeCol = renderHook(() => useAllDayEventBar({ span, colCount: 3, timezone: "UTC" }));
-    expect(threeCol.result.current.containerStyle.left).toBe(`calc(${(1 / 3) * 100}% + 2px)`);
-    expect(threeCol.result.current.containerStyle.width).toBe(`calc(${(2 / 3) * 100}% - 4px)`);
-  });
-
-  it("returns strip = null when the event has neither an explicit color nor a recognized status", () => {
-    const span = buildSpan({
-      event: {
-        id: 1,
-        title: "Plain",
-        start: new Date("2026-04-28T00:00:00Z"),
-        end: new Date("2026-04-28T23:59:59Z"),
-        options: { allDay: true },
-      },
-    });
-    const { result } = renderHook(() => useAllDayEventBar({ span, colCount: 7, timezone: "UTC" }));
-    expect(result.current.strip).toBeNull();
-  });
-
-  it("uses options.color verbatim as the strip backgroundColor (no colorClass) when set", () => {
-    const span = buildSpan({
-      event: {
-        id: 1,
-        title: "Colored",
-        start: new Date("2026-04-28T00:00:00Z"),
-        end: new Date("2026-04-28T23:59:59Z"),
-        options: { allDay: true, color: "#ef4444", status: "ACCEPTED" },
-      },
-    });
-    const { result } = renderHook(() => useAllDayEventBar({ span, colCount: 7, timezone: "UTC" }));
-    // Explicit color wins over status → backgroundColor set, colorClass undefined
-    expect(result.current.strip).toEqual({ backgroundColor: "#ef4444", colorClass: undefined });
-  });
-
-  it("derives strip colorClass from booking status when no explicit color is set", () => {
-    const span = buildSpan({
-      event: {
-        id: 1,
-        title: "Status only",
-        start: new Date("2026-04-28T00:00:00Z"),
-        end: new Date("2026-04-28T23:59:59Z"),
-        options: { allDay: true, status: "ACCEPTED" },
-      },
-    });
-    const { result } = renderHook(() => useAllDayEventBar({ span, colCount: 7, timezone: "UTC" }));
-    expect(result.current.strip?.backgroundColor).toBeUndefined();
-    expect(result.current.strip?.colorClass).toContain("bg-green-500");
-  });
-
-  it("formats timeRange as time-only for single-day events and includes a date prefix for multi-day", () => {
-    const single = buildSpan({
-      startCol: 1,
-      endCol: 1,
-      event: {
-        id: 1,
-        title: "Single",
-        start: new Date("2026-04-28T07:30:00Z"),
-        end: new Date("2026-04-28T18:45:00Z"),
-        options: { allDay: true },
-      },
-    });
-    const singleResult = renderHook(() => useAllDayEventBar({ span: single, colCount: 7, timezone: "UTC" }));
-    expect(singleResult.result.current.timeRange).toBe("07:30 – 18:45");
-
-    const multi = buildSpan({
-      startCol: 1,
-      endCol: 4,
-      event: {
-        id: 2,
-        title: "Multi",
-        start: new Date("2026-04-28T07:30:00Z"),
-        end: new Date("2026-05-01T18:45:00Z"),
-        options: { allDay: true },
-      },
-    });
-    const multiResult = renderHook(() => useAllDayEventBar({ span: multi, colCount: 7, timezone: "UTC" }));
-    expect(multiResult.result.current.timeRange).toBe("Apr 28, 07:30 – May 1, 18:45");
-  });
-
-  it("passes options['data-test-id'] through as dataTestId, undefined when missing", () => {
-    const withId = buildSpan({
-      event: {
-        id: 1,
-        title: "With id",
-        start: new Date("2026-04-28T00:00:00Z"),
-        end: new Date("2026-04-28T23:59:59Z"),
-        options: { allDay: true, "data-test-id": "my-bar" },
-      },
-    });
-    const withIdResult = renderHook(() => useAllDayEventBar({ span: withId, colCount: 7, timezone: "UTC" }));
-    expect(withIdResult.result.current.dataTestId).toBe("my-bar");
-
-    const withoutId = buildSpan();
-    const withoutIdResult = renderHook(() =>
-      useAllDayEventBar({ span: withoutId, colCount: 7, timezone: "UTC" })
-    );
-    expect(withoutIdResult.result.current.dataTestId).toBeUndefined();
-  });
-});