Booking

Drop-in slot booking system with calendar picker, server-enforced availability, conflict detection, and cancellation — pure Prisma and Server Actions, no external scheduling service.

@prisma/client@prisma/adapter-pgpgdotenvzustandzoddate-fns@date-fns/tzprisma@types/pg

shadcn/uicalendarbuttonbadgecardskeletontabsauto-installed by CLI

Preview

Environment Variables

Add these to your .env before installing. The CLI runs Prisma generate and migrate using these values during install — add them first, or the install will fail partway through.

DATABASE_URLrequired
PostgreSQL connection string.
e.g. postgresql://user:pass@localhost:5432/mydb

Install via CLI

npx feature101@latest add booking

Usage

import { BookingWidget, BookingList } from '@/features/booking'

<BookingWidget resourceId="room-42" resourceName="Conference Room" availableFrom="09:00" availableTo="17:00" slotDurationMinutes={60} />

<BookingList onCancelConfirmed={(id) => console.log(id)} />

Postinstall Guides

01availableFrom / availableTo are UTC — adjust generateSlots in BookingWidget.tsx if your app needs local timezone support
02resourceId is opaque — the primitive doesn't model what a resource is, pass any ID from your app
03BookingList also accepts className and onCancelConfirmed?: (bookingId: string) => void, fired on confirm only
04Visit /booking after install to see both components composed on a real page — delete app/booking/page.tsx once you're done evaluating

Props

Prop	Type	Default	Description
`resourceId`*	`string`	—	Opaque ID for the thing being booked — a userId, roomId, serviceId, or any stable string from your app.
`resourceName`*	`string`	—	Display name shown in the booking card header.
`availableFrom`*	`string`	—	Start of bookable window in "HH:mm" UTC format (e.g. "09:00"). Enforced server-side — not just a UI hint.
`availableTo`*	`string`	—	End of bookable window in "HH:mm" UTC format (e.g. "17:00"). Enforced server-side — not just a UI hint.
`slotDurationMinutes`*	`number`	—	Slot length in minutes (e.g. 30, 60). Server validates that booked slots match this duration exactly.
`onBookingConfirmed`	`(booking: Booking) => void`	—	Callback fired with real server result on confirm only. Never fires optimistically.
`className`	`string`	—	Custom CSS classes for the card wrapper (BookingWidget).

Upload Auth

Postinstall Guides

01availableFrom / availableTo are UTC — adjust generateSlots in BookingWidget.tsx if your app needs local timezone support

02resourceId is opaque — the primitive doesn't model what a resource is, pass any ID from your app

03BookingList also accepts className and onCancelConfirmed?: (bookingId: string) => void, fired on confirm only

04Visit /booking after install to see both components composed on a real page — delete app/booking/page.tsx once you're done evaluating

Props

Prop	Type	Default	Description
`resourceId`*	`string`	—	Opaque ID for the thing being booked — a userId, roomId, serviceId, or any stable string from your app.
`resourceName`*	`string`	—	Display name shown in the booking card header.
`availableFrom`*	`string`	—	Start of bookable window in "HH:mm" UTC format (e.g. "09:00"). Enforced server-side — not just a UI hint.
`availableTo`*	`string`	—	End of bookable window in "HH:mm" UTC format (e.g. "17:00"). Enforced server-side — not just a UI hint.
`slotDurationMinutes`*	`number`	—	Slot length in minutes (e.g. 30, 60). Server validates that booked slots match this duration exactly.
`onBookingConfirmed`	`(booking: Booking) => void`	—	Callback fired with real server result on confirm only. Never fires optimistically.
`className`	`string`	—	Custom CSS classes for the card wrapper (BookingWidget).

Booking

Command Palette

Booking