Components

UI Components (/components/ui/)

26 reusable components built on shadcn/ui + Tailwind CSS 4:

Component	Purpose
button	Primary action buttons
calendar	Date picker calendar
confirm-dialog	Confirmation modals (danger variant for destructive)
date-range-picker	Date range selection
empty-state	Empty data placeholders
field	Form field wrapper with label + error
google-drive-picker	Drive file selection
input	Text input
kpi-card	Metric display cards
label	Form labels
markdown-editor	Rich text editor
markdown-preview	Markdown renderer
mood-selector	Student mood feedback
multi-select	Multi-value selection
popover	Floating content
price-input	Currency amount input
resource-picker	Resource selection dialog
sheet	Slide-over panels
skeleton	Loading placeholders
star-rating	1-5 star display/input
status-badge	Colored status indicators
tag-multi-select	Tag selection with search
template-picker	Template selection dialog
textarea	Multi-line text input
toggle-switch	Boolean toggle
emoji-picker	Emoji selection popover

Caution

Always use ConfirmDialog for confirmations. Never use window.confirm().

Feature Components

Calendar (/components/calendar/, 7 files)

• WeekCalendarGrid: Week view with draggable events
• AgendaListView: Chronological session list
• EventDetailPanel: Session detail sheet
• RescheduleSheet: Reschedule flow
• ScheduleSelector: Calendar/schedule picker
• ActionSheet: Quick actions menu
• AvailabilityEditor: Edit time off/extra availability

Materials (/components/materials/, 13 files)

Google Drive-style file browser:

• Breadcrumb navigation
• Folder tree sidebar
• List, grid, kanban views
• Template & resource editors
• Move-to-folder dialog
• DnD wrapper (dnd-kit)
• Toolbar with search + filters

Reviews (/components/reviews/, 6 files)

• Review card (rating, content, actions)
• Review form (student submission)
• Import form (external platforms)
• Response form (teacher reply)
• Settings panel
• Public reviews section

Widgets (/components/widgets/, 11 files)

• Booking/storefront/reviews config forms
• Preview panel with live rendering
• Embed code section
• Analytics badge
• Variant list
• Widget editor
• Dirty state hook

Storefront (/components/storefront/, 5 files)

• Service card
• Storefront grid
• Booking sheet
• Auth gate (magic link prompt)
• Student context bar

Kanban (/components/kanban/, 4 files)

dnd-kit powered board:

• Board container
• Column (droppable)
• Card (draggable)
• Layout wrapper

Command Palette (/components/command-palette/, 2 files)

• CommandPalette: Cmd+K dialog with student search via TanStack Query
• ShortcutHelp: Shift+? dialog showing all shortcuts in 2-column grid

Services (/components/services/, 1 file)

• ServiceWizard: 3-dimension picker (delivery x group x structure)