Frontend Overview

The @hfu.digital/coursekit-react package provides React hooks and pre-styled components for building timetable and scheduling interfaces.

Philosophy

CourseKit follows a headless-first approach:

Hooks expose all state and actions — use them for fully custom UIs
Components are optional pre-styled wrappers — use them for rapid prototyping

Every component can be replaced by your own implementation using the underlying hooks.

Hook	Purpose
`useTimetable`	Fetch schedule for entity + date range
`useAvailability`	Fetch free/busy slots for an entity
`useConflictCheck`	Real-time conflict preview for proposed events
`useMutation`	Create, update, and delete events and exceptions
`useRoomSearch`	Search rooms by capacity, building, and availability

Component	Description
`TimetableGrid`	Week/day grid view with configurable time axis
`EventCard`	Single event display with exception styling
`ConflictBadge`	Visual conflict indicator (error/warning)
`AvailabilityOverlay`	Free/busy overlay on the timetable grid

{
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
}