feat(admin-sems-accordion): add component, stories, and tests (#947)

* feat(date-utils): add `getDateTimeStatus` function

- Also use fn for existing dupe logic

* fix(vitest-config): use `UTC` as timezone during tests

* fix(biome): include `.config.ts` files

* feat(admin-semesters-table): add component, stories, and tests

* feat(game-session-schedule-card): add component, test, and stories

* fix(admin-sems): align text and change input props for delete actions

* feat(admin-sems-accordion): add component, stories, and tests

* fix(game-schedule-card): add missing `use client`

* fix(admin-semesters): parse capacities as numbers

Author: jji05

apps/backend/src/utils/date.test.ts

@@ -1,13 +1,16 @@
 import {
   formatDate,
   formatTime,
+  GameSessionStatus,
+  getDateTimeStatus,
   getDaysBetweenWeekdays,
   getGameSessionOpenDay,
   isSameDate,
   Weekday,
 } from "@repo/shared"
 import { semesterMock } from "@repo/shared/mocks"
 import type { Semester } from "@repo/shared/payload-types"
+import { vi } from "vitest"
 
 describe("getDaysBetweenWeekdays", () => {
   it("should return 0 when fromDay and toDay are the same", () => {
@@ -218,3 +221,55 @@ describe("formatDate", () => {
     expect(formatDate(new Date("2025-06-15T09:30:00Z"))).toBe("Sunday, 15/06/25")
   })
 })
+
+describe("getDateTimeStatus", () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it("should return UPCOMING when now is before startTime", () => {
+    const startTime = "2025-01-21T10:00:00Z" // Session starts at 10:00 AM UTC on Jan 21, 2025
+    const endTime = "2025-01-21T12:00:00Z" // Session ends at 12:00 PM UTC on Jan 21, 2025
+    vi.setSystemTime(new Date("2025-01-20T10:00:00Z")) // Set current time to 10:00 AM UTC on Jan 20, 2025 (before start time)
+    expect(getDateTimeStatus(startTime, endTime)).toBe(GameSessionStatus.UPCOMING)
+  })
+
+  it("should return ONGOING when now is between startTime and endTime", () => {
+    const startTime = "2025-01-21T10:00:00Z" // Session starts at 10:00 AM UTC on Jan 21, 2025
+    const endTime = "2025-01-21T12:00:00Z" // Session ends at 12:00 PM UTC on Jan 21, 2025
+    vi.setSystemTime(new Date("2025-01-21T11:00:00Z")) // Set current time to 11:00 AM UTC on Jan 21, 2025 (during session)
+    expect(getDateTimeStatus(startTime, endTime)).toBe(GameSessionStatus.ONGOING)
+  })
+
+  it("should return PAST when now is after endTime", () => {
+    const startTime = "2025-01-21T10:00:00Z" // Session starts at 10:00 AM UTC on Jan 21, 2025
+    const endTime = "2025-01-21T12:00:00Z" // Session ends at 12:00 PM UTC on Jan 21, 2025
+    vi.setSystemTime(new Date("2025-01-21T13:00:00Z")) // Set current time to 1:00 PM UTC on Jan 21, 2025 (after end time)
+    expect(getDateTimeStatus(startTime, endTime)).toBe(GameSessionStatus.PAST)
+  })
+
+  it("should return ONGOING when now is exactly at startTime", () => {
+    const startTime = "2025-01-21T10:00:00Z" // Session starts at 10:00 AM UTC on Jan 21, 2025
+    const endTime = "2025-01-21T12:00:00Z" // Session ends at 12:00 PM UTC on Jan 21, 2025
+    vi.setSystemTime(new Date("2025-01-21T10:00:00Z")) // Set current time to exactly 10:00 AM UTC on Jan 21, 2025 (start of session)
+    expect(getDateTimeStatus(startTime, endTime)).toBe(GameSessionStatus.ONGOING)
+  })
+
+  it("should return ONGOING when now is exactly at endTime", () => {
+    const startTime = "2025-01-21T10:00:00Z" // Session starts at 10:00 AM UTC on Jan 21, 2025
+    const endTime = "2025-01-21T12:00:00Z" // Session ends at 12:00 PM UTC on Jan 21, 2025
+    vi.setSystemTime(new Date("2025-01-21T12:00:00Z")) // Set current time to exactly 12:00 PM UTC on Jan 21, 2025 (end of session)
+    expect(getDateTimeStatus(startTime, endTime)).toBe(GameSessionStatus.ONGOING)
+  })
+
+  it("should handle startTime and endTime on different days", () => {
+    const startTime = "2025-01-20T22:00:00Z" // Session starts at 10:00 PM UTC on Jan 20, 2025
+    const endTime = "2025-01-21T02:00:00Z" // Session ends at 2:00 AM UTC on Jan 21, 2025
+    vi.setSystemTime(new Date("2025-01-21T01:00:00Z")) // Set current time to 1:00 AM UTC on Jan 21, 2025 (during multi-day session)
+    expect(getDateTimeStatus(startTime, endTime)).toBe(GameSessionStatus.ONGOING)
+  })
+})

apps/backend/vitest.config.ts

@@ -3,6 +3,9 @@ import { mergeConfig } from "vitest/config"
 
 export default mergeConfig(backendConfig, {
   test: {
+    env: {
+      TZ: "UTC",
+    },
     // You can add backend-specific overrides here
     setupFiles: ["./src/test-config/vitest.setup.ts"],
     coverage: {

apps/frontend/src/components/client/admin/tabs/admin-sessions/AdminSessions.tsx

@@ -1,9 +1,14 @@
 "use client"
 
 import type { AdminGameSession, GameSessionWithCounts } from "@repo/shared"
-import { dayjs, GameSessionStatus, type PlayLevel, Popup, Weekday } from "@repo/shared"
+import { dayjs, type GameSessionStatus, type PlayLevel, Popup, Weekday } from "@repo/shared"
 import type { Booking, User } from "@repo/shared/payload-types"
-import { formatDateToISOString, isSameDate, parseISOStringToDate } from "@repo/shared/utils/date"
+import {
+  formatDateToISOString,
+  getDateTimeStatus,
+  isSameDate,
+  parseISOStringToDate,
+} from "@repo/shared/utils/date"
 import {
   AdminGameSessionCard,
   AdminSessionsCalendar,
@@ -56,15 +61,7 @@ const transformToAdminGameSession = (session: GameSessionWithCounts): AdminGameS
   ]
 
   // Determine session status based on current time
-  const now = new Date()
-  let status: GameSessionStatus
-  if (now < new Date(session.openTime)) {
-    status = GameSessionStatus.UPCOMING
-  } else if (now > new Date(session.endTime)) {
-    status = GameSessionStatus.PAST
-  } else {
-    status = GameSessionStatus.ONGOING
-  }
+  const status: GameSessionStatus = getDateTimeStatus(session.openTime, session.endTime)
 
   return {
     ...session,

biome.json

@@ -3,6 +3,7 @@
   "files": {
     "includes": [
       "**",
+      "**/*.config.ts",
       "!**/src/payload-types.ts",
       "!pnpm-lock.yaml",
       "!**/*.md",

packages/shared/src/utils/date.ts

@@ -1,7 +1,7 @@
 import { format } from "date-fns"
 import { getWeekdayFromDayIndex } from "../constants"
 import type { Semester } from "../payload-types"
-import { Weekday } from "../types"
+import { GameSessionStatus, Weekday } from "../types"
 import { dayjs } from "./dayjs"
 
 /**
@@ -181,3 +181,26 @@ export function parseISOStringToDate(dateString: string): Date | undefined {
 export function formatDateToString(date: Date): string {
   return dayjs(date).format("YYYY-MM-DD")
 }
+
+/**
+ * Method used to get the status of a date
+ *
+ * @param startTime The start time to check the status for
+ * @param endTime The end time to check the status for
+ * @returns The date {@link GameSessionStatus}
+ */
+export function getDateTimeStatus(startTime: string, endTime: string): GameSessionStatus {
+  const now = new Date()
+
+  let status: GameSessionStatus
+
+  if (now < new Date(startTime)) {
+    status = GameSessionStatus.UPCOMING
+  } else if (now > new Date(endTime)) {
+    status = GameSessionStatus.PAST
+  } else {
+    status = GameSessionStatus.ONGOING
+  }
+
+  return status
+}

packages/ui/src/components/Composite/AdminSemestersAccordion/AdminSemestersAccordion.stories.tsx

@@ -0,0 +1,76 @@
+import { gameSessionScheduleMock, semesterMock } from "@repo/shared/mocks"
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ComponentProps } from "react"
+import { AdminSemestersAccordion } from "./AdminSemestersAccordion"
+
+type AdminSemestersAccordionArgs = ComponentProps<typeof AdminSemestersAccordion>
+
+const meta: Meta<AdminSemestersAccordionArgs> = {
+  title: "Composite Components / AdminSemestersAccordion",
+  component: AdminSemestersAccordion,
+  argTypes: {
+    onAddSchedule: { action: "add-schedule" },
+    onEditSchedule: { action: "edit-schedule" },
+    onDeleteSchedule: { action: "delete-schedule" },
+    onEditSemester: { action: "edit-semester" },
+    onDeleteSemester: { action: "delete-semester" },
+  },
+}
+
+export default meta
+type Story = StoryObj<AdminSemestersAccordionArgs>
+
+export const Default: Story = {
+  render: (args) => (
+    <AdminSemestersAccordion
+      onAddSchedule={args.onAddSchedule}
+      onDeleteSchedule={args.onDeleteSchedule}
+      onDeleteSemester={args.onDeleteSemester}
+      onEditSchedule={args.onEditSchedule}
+      onEditSemester={args.onEditSemester}
+      rows={[gameSessionScheduleMock, gameSessionScheduleMock, gameSessionScheduleMock]}
+      semester={semesterMock}
+    />
+  ),
+}
+
+export const Expanded: Story = {
+  render: (args) => (
+    <AdminSemestersAccordion
+      defaultExpanded
+      onAddSchedule={args.onAddSchedule}
+      onDeleteSchedule={args.onDeleteSchedule}
+      onDeleteSemester={args.onDeleteSemester}
+      onEditSchedule={args.onEditSchedule}
+      onEditSemester={args.onEditSemester}
+      rows={[gameSessionScheduleMock, gameSessionScheduleMock, gameSessionScheduleMock]}
+      semester={semesterMock}
+    />
+  ),
+}
+
+export const MultipleSemesters: Story = {
+  render: (args) => (
+    <>
+      <AdminSemestersAccordion
+        defaultExpanded
+        onAddSchedule={args.onAddSchedule}
+        onDeleteSchedule={args.onDeleteSchedule}
+        onDeleteSemester={args.onDeleteSemester}
+        onEditSchedule={args.onEditSchedule}
+        onEditSemester={args.onEditSemester}
+        rows={[gameSessionScheduleMock, gameSessionScheduleMock, gameSessionScheduleMock]}
+        semester={semesterMock}
+      />
+      <AdminSemestersAccordion
+        onAddSchedule={args.onAddSchedule}
+        onDeleteSchedule={args.onDeleteSchedule}
+        onDeleteSemester={args.onDeleteSemester}
+        onEditSchedule={args.onEditSchedule}
+        onEditSemester={args.onEditSemester}
+        rows={[gameSessionScheduleMock, gameSessionScheduleMock]}
+        semester={{ ...semesterMock, id: "semester-2", name: "Semester 2 2025" }}
+      />
+    </>
+  ),
+}