+
+
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : error ? (
+
+ {error.message}
+
+ ) : view.totalRows === 0 ? (
+
+ No transactions are listed yet.
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+ {view.rows.length === 0 ? (
+
+ No transactions match the current filters.
+
+ ) : (
+
+
+
+ Date
+ Description
+ Recorded by
+ Type
+ Amount
+
+
+
+ {view.rows.map((transaction) => (
+
+
+ {transaction.date}
+
+ {transaction.description}
+
+ {transaction.creatorName}
+
+
+
+ {transaction.kind === 'payment' ? 'Payment' : 'Charge'}
+
+
+
+ {transaction.amountFormatted}
+
+
+ ))}
+
+
+ )}
+
+ )}
+
-
Payments
- {hello &&
{hello}
}
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ ))}
+
)
}
diff --git a/web-client/src/features/sport-events/api/queries.ts b/web-client/src/features/sport-events/api/queries.ts
index 97794bc..2e705c5 100644
--- a/web-client/src/features/sport-events/api/queries.ts
+++ b/web-client/src/features/sport-events/api/queries.ts
@@ -1,42 +1,69 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { getCurrentUser } from '@/features/auth/currentUser'
+import { eventDetailsById, eventSummaryFixtures } from '@/mocks/fixtures'
+import { mockOr } from '@/mocks/mockSwitch'
+import { scopeEvents } from '@/mocks/scope'
import { sportEventsClient } from './client'
import type { SportEvent, EventCreate, EventPartialUpdate, EventSummary } from '../types'
-export const sportEventsKeys = {
+export const eventKeys = {
hello: ['sport-events', 'hello'] as const,
all: ['sport-events'] as const,
- detail: (id: string) => ['sport-events', id] as const,
+ list: () => ['sport-events', 'list'] as const,
+ detail: (id: string | null | undefined) => ['sport-events', 'detail', id] as const,
}
+export const sportEventsKeys = eventKeys
+
export function useSportEventsHello() {
return useQuery
({
- queryKey: sportEventsKeys.hello,
+ queryKey: eventKeys.hello,
queryFn: () => sportEventsClient.get('/hello').then(r => r.data),
})
}
-export function useSportEvents() {
+export function useEventsList(enabled = true) {
return useQuery({
- queryKey: sportEventsKeys.all,
- queryFn: () => sportEventsClient.get('/').then(r => r.data),
+ queryKey: eventKeys.list(),
+ staleTime: 30_000,
+ enabled,
+ queryFn: () =>
+ mockOr(
+ () => Promise.resolve(scopeEvents(eventSummaryFixtures, getCurrentUser())),
+ () => sportEventsClient.get('').then(r => r.data),
+ ),
})
}
-export function useSportEvent(id: string) {
+export function useEvent(id: string | null | undefined) {
return useQuery({
- queryKey: sportEventsKeys.detail(id),
- queryFn: () => sportEventsClient.get(`/${id}`).then(r => r.data),
+ queryKey: eventKeys.detail(id),
+ queryFn: () =>
+ mockOr(
+ () => {
+ const found = id ? eventDetailsById[id] : undefined
+ const scoped = found ? scopeEvents([found], getCurrentUser()) : []
+ if (!scoped[0]) {
+ throw new Error('Event not found')
+ }
+ return Promise.resolve(scoped[0])
+ },
+ () => sportEventsClient.get(`/${id}`).then(r => r.data),
+ ),
enabled: !!id,
})
}
+export const useSportEvents = useEventsList
+export const useSportEvent = useEvent
+
export function useCreateSportEvent() {
const qc = useQueryClient()
return useMutation({
- mutationFn: data => sportEventsClient.post('/', data).then(r => r.data),
- onSuccess: () => qc.invalidateQueries({ queryKey: sportEventsKeys.all }),
+ mutationFn: data => sportEventsClient.post('', data).then(r => r.data),
+ onSuccess: () => qc.invalidateQueries({ queryKey: eventKeys.all }),
})
}
@@ -46,8 +73,8 @@ export function useUpdateSportEvent() {
return useMutation({
mutationFn: ({ id, ...data }) => sportEventsClient.patch(`/${id}`, data).then(r => r.data),
onSuccess: (_, { id }) => {
- qc.invalidateQueries({ queryKey: sportEventsKeys.all })
- qc.invalidateQueries({ queryKey: sportEventsKeys.detail(id) })
+ qc.invalidateQueries({ queryKey: eventKeys.all })
+ qc.invalidateQueries({ queryKey: eventKeys.detail(id) })
},
})
}
@@ -58,8 +85,8 @@ export function useDeleteSportEvent() {
return useMutation({
mutationFn: id => sportEventsClient.delete(`/${id}`).then(() => undefined),
onSuccess: (_, id) => {
- qc.invalidateQueries({ queryKey: sportEventsKeys.all })
- qc.removeQueries({ queryKey: sportEventsKeys.detail(id) })
+ qc.invalidateQueries({ queryKey: eventKeys.all })
+ qc.removeQueries({ queryKey: eventKeys.detail(id) })
},
})
}
diff --git a/web-client/src/features/sport-events/model/eventsUiStore.ts b/web-client/src/features/sport-events/model/eventsUiStore.ts
new file mode 100644
index 0000000..59f8854
--- /dev/null
+++ b/web-client/src/features/sport-events/model/eventsUiStore.ts
@@ -0,0 +1,47 @@
+import { create } from 'zustand'
+
+import type { EventStatus } from './useEventsViewModel'
+
+export type EventsStatusFilter = 'all' | Extract
+export type EventsSort = 'date-asc' | 'date-desc' | 'duration-asc' | 'duration-desc'
+
+export interface EventsFilters {
+ search: string
+ status: EventsStatusFilter
+ fromDate: string
+ toDate: string
+ sort: EventsSort
+}
+
+const defaultFilters: EventsFilters = {
+ search: '',
+ status: 'all',
+ fromDate: '',
+ toDate: '',
+ sort: 'date-asc',
+}
+
+interface EventsUiState {
+ openEventId: string | null
+ filters: EventsFilters
+ open: (id: string) => void
+ close: () => void
+ setSearch: (search: string) => void
+ setStatus: (status: EventsStatusFilter) => void
+ setDateRange: (range: Pick) => void
+ setSort: (sort: EventsSort) => void
+ resetFilters: () => void
+}
+
+export const useEventsUiStore = create((set) => ({
+ openEventId: null,
+ filters: defaultFilters,
+ open: (id) => set({ openEventId: id }),
+ close: () => set({ openEventId: null }),
+ setSearch: (search) => set((state) => ({ filters: { ...state.filters, search } })),
+ setStatus: (status) => set((state) => ({ filters: { ...state.filters, status } })),
+ setDateRange: (range) =>
+ set((state) => ({ filters: { ...state.filters, ...range } })),
+ setSort: (sort) => set((state) => ({ filters: { ...state.filters, sort } })),
+ resetFilters: () => set({ filters: defaultFilters }),
+}))
diff --git a/web-client/src/features/sport-events/model/useEventsViewModel.test.ts b/web-client/src/features/sport-events/model/useEventsViewModel.test.ts
new file mode 100644
index 0000000..2e6501a
--- /dev/null
+++ b/web-client/src/features/sport-events/model/useEventsViewModel.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest'
+
+import { eventSummaryFixtures, teamFixtures } from '@/mocks/fixtures'
+import { MOCK_PERSONAS } from '@/mocks/personas'
+import { scopeEvents } from '@/mocks/scope'
+import type { EventListItem } from '@/types'
+import { buildEventsView, eventAttendanceStatus, userTeamIds } from './useEventsViewModel'
+
+const now = new Date('2026-06-26T12:00:00.000Z')
+const memberId = 'member-1'
+const teamId = 'team-1'
+const user = {
+ id: memberId,
+ teamIds: new Set([teamId]),
+}
+
+function event(overrides: Partial): EventListItem {
+ return {
+ id: 'event-1',
+ name: 'Training',
+ start_time: '2026-06-20T10:00:00.000Z',
+ end_time: '2026-06-20T11:00:00.000Z',
+ ...overrides,
+ }
+}
+
+describe('eventAttendanceStatus', () => {
+ it('marks past events attended when the user is in attendees', () => {
+ expect(
+ eventAttendanceStatus(
+ event({
+ attendees: [{ id: memberId, name: 'Lena Roth' }],
+ teams_linked: [{ id: teamId, name: 'Juniors' }],
+ }),
+ user,
+ now,
+ ),
+ ).toBe('attended')
+ })
+
+ it('marks past enrolled events missed when the user is absent from attendees', () => {
+ expect(
+ eventAttendanceStatus(
+ event({
+ attendees: [],
+ teams_linked: [{ id: teamId, name: 'Juniors' }],
+ }),
+ user,
+ now,
+ ),
+ ).toBe('missed')
+ })
+
+ it('marks future events upcoming before considering attendance', () => {
+ expect(
+ eventAttendanceStatus(
+ event({
+ start_time: '2026-07-01T10:00:00.000Z',
+ end_time: '2026-07-01T11:00:00.000Z',
+ attendees: [],
+ teams_linked: [{ id: teamId, name: 'Juniors' }],
+ }),
+ user,
+ now,
+ ),
+ ).toBe('upcoming')
+ })
+
+ it('falls back to past when enrollment is unknown and the user did not attend', () => {
+ expect(
+ eventAttendanceStatus(
+ event({
+ attendees: [],
+ teams_linked: undefined,
+ }),
+ user,
+ now,
+ ),
+ ).toBe('past')
+ })
+
+ it('derives missed, attended and upcoming rows for the member persona fixtures', () => {
+ const member = MOCK_PERSONAS.member
+ const view = buildEventsView(scopeEvents(eventSummaryFixtures, member), now, {
+ id: member.id,
+ teamIds: userTeamIds(teamFixtures, member.id),
+ })
+
+ expect(view.rows.filter((row) => row.status === 'missed')).toHaveLength(2)
+ expect(view.rows.some((row) => row.status === 'attended')).toBe(true)
+ expect(view.rows.some((row) => row.status === 'upcoming')).toBe(true)
+ })
+})
diff --git a/web-client/src/features/sport-events/model/useEventsViewModel.ts b/web-client/src/features/sport-events/model/useEventsViewModel.ts
new file mode 100644
index 0000000..ef5fd05
--- /dev/null
+++ b/web-client/src/features/sport-events/model/useEventsViewModel.ts
@@ -0,0 +1,201 @@
+import { useMemo } from 'react'
+
+import { useAuth } from '@/features/auth'
+import { useSportsList, useTeamsList } from '@/features/organization/api/queries'
+import { formatDateTime, formatDuration } from '@/lib/format'
+import type { AuthUser, EventListItem, Team } from '@/types'
+import type { SportEvent } from '../types'
+import { useEvent, useEventsList } from '../api/queries'
+import type { EventsFilters } from './eventsUiStore'
+import { useEventsUiStore } from './eventsUiStore'
+
+export type EventStatus = 'attended' | 'missed' | 'upcoming' | 'past'
+type AttendanceUser = Pick & {
+ teamIds?: ReadonlySet
+}
+
+export interface EventRow extends EventListItem {
+ status: EventStatus
+ formattedWhen: string
+ duration: string
+}
+
+export interface EventsView {
+ rows: EventRow[]
+ totalRows: number
+ stats: {
+ upcoming: number
+ thisWeek: number
+ total: number
+ }
+ missedCount?: number
+}
+
+export interface EventDetailView {
+ detail: SportEvent | undefined
+ status: EventStatus | undefined
+ missed: boolean
+ // sports_linked resolved to display names for the detail view.
+ sportNames: string[]
+ isLoading: boolean
+ error: Error | null
+}
+
+export function eventAttendanceStatus(
+ event: EventListItem | SportEvent,
+ user: AttendanceUser,
+ now: Date,
+): EventStatus {
+ if (new Date(event.start_time) >= now) {
+ return 'upcoming'
+ }
+
+ if (event.attendees?.some((attendee) => attendee.id === user.id)) {
+ return 'attended'
+ }
+
+ const hasLinkedTeams = event.teams_linked !== undefined
+ const hasAttendees = event.attendees !== undefined
+ const isEnrolled =
+ hasLinkedTeams && event.teams_linked?.some((team) => user.teamIds?.has(team.id)) === true
+
+ if (isEnrolled && hasAttendees) {
+ return 'missed'
+ }
+
+ return 'past'
+}
+
+export function userTeamIds(teams: Team[], userId: string): ReadonlySet {
+ return new Set(
+ teams
+ .filter(
+ (team) =>
+ team.trainees.some((trainee) => trainee.id === userId) ||
+ team.trainers.some((trainer) => trainer.id === userId),
+ )
+ .map((team) => team.id),
+ )
+}
+
+export function buildEventsView(
+ summaries: EventListItem[],
+ now: Date,
+ user: AttendanceUser,
+ filters: EventsFilters = {
+ search: '',
+ status: 'all',
+ fromDate: '',
+ toDate: '',
+ sort: 'date-asc',
+ },
+): EventsView {
+ const weekEnd = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000)
+ const rows = summaries.map((event) => {
+ const status = eventAttendanceStatus(event, user, now)
+
+ return {
+ ...event,
+ status,
+ formattedWhen: formatDateTime(event.start_time),
+ duration: formatDuration(event.start_time, event.end_time),
+ }
+ })
+ const search = filters.search.trim().toLocaleLowerCase()
+ const fromTime = filters.fromDate ? new Date(`${filters.fromDate}T00:00:00`).getTime() : null
+ const toTime = filters.toDate ? new Date(`${filters.toDate}T23:59:59.999`).getTime() : null
+ const filteredRows = rows
+ .filter((event) => {
+ const eventTime = new Date(event.start_time).getTime()
+ const matchesText = search.length === 0 || event.name.toLocaleLowerCase().includes(search)
+ const matchesStatus = filters.status === 'all' || event.status === filters.status
+
+ return (
+ matchesText &&
+ matchesStatus &&
+ (fromTime === null || eventTime >= fromTime) &&
+ (toTime === null || eventTime <= toTime)
+ )
+ })
+ .toSorted((a, b) => {
+ if (filters.sort === 'duration-asc' || filters.sort === 'duration-desc') {
+ const aDuration = new Date(a.end_time).getTime() - new Date(a.start_time).getTime()
+ const bDuration = new Date(b.end_time).getTime() - new Date(b.start_time).getTime()
+
+ return filters.sort === 'duration-asc' ? aDuration - bDuration : bDuration - aDuration
+ }
+
+ const aStart = new Date(a.start_time).getTime()
+ const bStart = new Date(b.start_time).getTime()
+
+ return filters.sort === 'date-desc' ? bStart - aStart : aStart - bStart
+ })
+ const upcoming = rows.filter((event) => event.status === 'upcoming')
+ const thisWeek = upcoming.filter((event) => new Date(event.start_time) < weekEnd)
+
+ return {
+ rows: filteredRows,
+ totalRows: rows.length,
+ stats: {
+ upcoming: upcoming.length,
+ thisWeek: thisWeek.length,
+ total: summaries.length,
+ },
+ }
+}
+
+export function useEventsViewModel(now = new Date()) {
+ const { user } = useAuth()
+ const eventsQuery = useEventsList()
+ const teamsQuery = useTeamsList()
+ const filters = useEventsUiStore((state) => state.filters)
+ const nowTime = now.getTime()
+
+ const view = useMemo(
+ () =>
+ buildEventsView(eventsQuery.data ?? [], new Date(nowTime), {
+ id: user.id,
+ teamIds: userTeamIds(teamsQuery.data ?? [], user.id),
+ }, filters),
+ [eventsQuery.data, nowTime, teamsQuery.data, user.id, filters],
+ )
+
+ return {
+ view,
+ isLoading: eventsQuery.isLoading || teamsQuery.isLoading,
+ error: eventsQuery.error ?? teamsQuery.error,
+ }
+}
+
+export function useEventDetailView(id: string | null, now = new Date()): EventDetailView {
+ const { user } = useAuth()
+ const eventQuery = useEvent(id)
+ const teamsQuery = useTeamsList()
+ const sportsQuery = useSportsList()
+ const detail = eventQuery.data
+ const status = detail
+ ? eventAttendanceStatus(
+ detail,
+ {
+ id: user.id,
+ teamIds: userTeamIds(teamsQuery.data ?? [], user.id),
+ },
+ now,
+ )
+ : undefined
+ const missed = status === 'missed'
+ // sports_linked are resolved refs { id, name }; fall back to the sports list if a name is missing.
+ const sportNamesById = new Map((sportsQuery.data ?? []).map((sport) => [sport.id, sport.name]))
+ const sportNames = (detail?.sports_linked ?? []).map(
+ (sport) => sport.name || sportNamesById.get(sport.id) || sport.id,
+ )
+
+ return {
+ detail,
+ status,
+ missed,
+ sportNames,
+ isLoading: eventQuery.isLoading || teamsQuery.isLoading,
+ error: eventQuery.error ?? teamsQuery.error,
+ }
+}
diff --git a/web-client/src/features/sport-events/pages/SportEventsPage.tsx b/web-client/src/features/sport-events/pages/SportEventsPage.tsx
index 52b70cf..af09517 100644
--- a/web-client/src/features/sport-events/pages/SportEventsPage.tsx
+++ b/web-client/src/features/sport-events/pages/SportEventsPage.tsx
@@ -1,12 +1,292 @@
-import { useSportEventsHello } from '../api'
+import { useEffect } from 'react'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { DataTable, TCell, THead, TRow } from '@/components/ui/data-table'
+import { DateRangeFilter } from '@/components/ui/date-range-filter'
+import { PageHeader } from '@/components/ui/page-header'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+import { Separator } from '@/components/ui/separator'
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+} from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import { StatCard } from '@/components/ui/stat-card'
+import { TableToolbar } from '@/components/ui/table-toolbar'
+import { formatDateShort, formatTime } from '@/lib/format'
+import { creatorName, memberRefName } from '@/types'
+import { useEventsUiStore } from '../model/eventsUiStore'
+import {
+ type EventStatus,
+ useEventDetailView,
+ useEventsViewModel,
+} from '../model/useEventsViewModel'
+
+const statusLabel: Record = {
+ attended: 'Attended',
+ missed: 'Missed',
+ upcoming: 'Upcoming',
+ past: 'Past',
+}
+
+const statusTone: Record['tone']> = {
+ attended: 'positive',
+ missed: 'negative',
+ upcoming: 'accent',
+ past: 'default',
+}
export function SportEventsPage() {
- const { data: hello } = useSportEventsHello()
+ const { view, isLoading, error } = useEventsViewModel()
+ const filters = useEventsUiStore((state) => state.filters)
+ const setSearch = useEventsUiStore((state) => state.setSearch)
+ const setStatus = useEventsUiStore((state) => state.setStatus)
+ const setDateRange = useEventsUiStore((state) => state.setDateRange)
+ const setSort = useEventsUiStore((state) => state.setSort)
+ const resetFilters = useEventsUiStore((state) => state.resetFilters)
+ const openEventId = useEventsUiStore((state) => state.openEventId)
+ const openEvent = useEventsUiStore((state) => state.open)
+ const closeEvent = useEventsUiStore((state) => state.close)
+ const detailView = useEventDetailView(openEventId)
+
+ useEffect(() => resetFilters, [resetFilters])
+
+ return (
+
+
+
+
+
+
+
+
+
+ {isLoading ? (
+
+ ) : error ? (
+
+ {error.message}
+
+ ) : view.totalRows === 0 ? (
+
+ No events are listed yet.
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+ {view.rows.length === 0 ? (
+
+ No events match the current filters.
+
+ ) : (
+
+
+
+ When
+ Event
+ Status
+ Duration
+ Details
+
+
+
+ {view.rows.map((event) => (
+
+
+ {event.formattedWhen}
+
+ {event.name}
+
+
+ {statusLabel[event.status]}
+
+
+ {event.duration}
+
+
+
+
+ ))}
+
+
+ )}
+
+ )}
+
+
+ Sport, description and attendees load when you open an event.
+
+
+
!open && closeEvent()}>
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ if (error) {
+ return (
+
+ {error.message}
+
+ )
+ }
+
+ if (!detail) {
+ return (
+
+ Select an event to view details.
+
+ )
+ }
+
+ return (
+ <>
+
+
+ Event details
+
+
+ {detail.name}
+
+ {detail.description}
+
+
+
+
+
+
+
+
+
+
+
Sports
+
+ {sportNames.map((sport) => (
+
+ {sport}
+
+ ))}
+
+
+
+
+
Attendees ({detail.attendees?.length ?? 0})
+
+ {detail.attendees?.map((member) => (
+ {memberRefName(member)}
+ ))}
+
+
+
+ {missed && (
+ <>
+
+
+ You missed this session.
+
+
+ )}
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ ))}
+
+
{children}
+ )
+}
+function Field({ label, value }: { label: string; value: string }) {
return (
-
Events
- {hello &&
{hello}
}
+
{label}
+
{value}