Skip to content

feat: Add embeddable FHIR scheduler widget with slot hold system#5

Open
horner wants to merge 6 commits intomainfrom
embed-sched-component
Open

feat: Add embeddable FHIR scheduler widget with slot hold system#5
horner wants to merge 6 commits intomainfrom
embed-sched-component

Conversation

@horner
Copy link
Copy Markdown
Member

@horner horner commented Dec 11, 2025

Summary

Adds an embeddable React scheduling widget (@mieweb/fhir-scheduler) that can be dropped into any application to provide appointment booking functionality against a FHIR-compliant server.

New Features

🗓️ Embeddable Scheduler Widget

  • Provider List - Browse and select from available providers
  • Slot Calendar - View available dates with slot counts, select time slots
  • Booking Form - Capture patient info with hold countdown timer
  • Confirmation - Display booking success/failure

🔒 Slot Hold API (prevents double-booking)

Method Endpoint Description
POST /Slot/:id/$hold Acquire temporary hold
GET /Slot/:id/$hold Check hold status
DELETE /Slot/:id/$hold/:token Release hold

🧪 Test Infrastructure

  • Playwright E2E test scaffolding (7 test cases)
  • Auto-starts both servers during test runs

📊 Data Generation

  • Extended from 30 → 180 days of test data
  • 50% fill rate (was 75%) for realistic availability

Usage

import { SchedulerWidget } from '@mieweb/fhir-scheduler';

<SchedulerWidget
  fhirBaseUrl="http://localhost:4010"
  onComplete={(appointment) => console.log('Booked:', appointment)}
/>

Demo

Run both servers and visit http://localhost:5174:

npm run dev                    # Backend on :4010
cd packages/fhir-scheduler && npm run dev  # Widget on :5174

Checklist

  • Slot hold system implemented
  • All phases 1-3 complete
  • Playwright test scaffolding added
  • QuestionnaireRenderer integration (placeholder)
  • Comprehensive test coverage
  • npm publish

## New Features

### Embeddable Scheduler Widget (@mieweb/fhir-scheduler)
- React component for browsing provider schedules and booking appointments
- Zustand-based state management with FHIR API client
- Provider list, slot calendar, booking form, and confirmation components
- Standalone Web Component bundle for non-React apps
- Hold countdown timer during checkout to prevent double-booking

### Slot Hold API
- POST /Slot/:id/$hold - Acquire temporary hold on a slot
- GET /Slot/:id/$hold - Check if slot is held
- DELETE /Slot/:id/$hold/:token - Release a hold
- Automatic cleanup of expired holds
- Same-session hold extension support

### Test Infrastructure
- Playwright E2E test scaffolding with 7 test cases
- Auto-start both servers (backend + Vite) during tests

### Data Generation Improvements
- Extended test data from 30 to 180 days (6 months)
- Reduced fill rate from 75% to 50% for more availability
- Random slot shuffling for even distribution across dates

## Files Changed
- New: packages/fhir-scheduler/* (widget package)
- Modified: src/routes/slotRoutes.ts (hold endpoints)
- Modified: src/store/sqliteStore.ts (slot_holds table)
- Modified: src/types/fhir.ts (SlotHold interface)
- Modified: src/examples/generateBusyOffice.ts
- Modified: Embeddable_FHIR_Scheduler.md (updated phases)
- Add screenshots.spec.ts for generating documentation images
- Capture all booking flow steps: provider list, dates, slots, form, confirmation
- Include mobile responsive screenshots
- Update README.md with screenshot gallery
- Add npm run screenshots command for easy regeneration
@horner
Copy link
Copy Markdown
Member Author

horner commented Dec 11, 2025

📸 *Documentation screenshots addedpush

See the full README with screenshots: https://github.com/mieweb/FHIRTogether/blob/embed-sched-component/packages/fhir-scheduler/README.md

Screenshots show the complete booking flow:

  • Provider selection
  • Date/calendar views
  • Time slot selection
  • Booking form with hold timer
  • Confirmation
  • Mobile responsive views

…pport

- Add visit type selector (new patient vs follow-up flow)
- Add intake questionnaire component for new patients
- Implement browser history integration (back button works)
- Add deep linking with provider ID (#calendar/providerId)
- Add seed data system with date shifting for consistent tests
- Add global-setup.ts for automatic test data import
- Fix TypeScript types in web-component.ts
- Use single Playwright worker to avoid slot hold conflicts
- Update screenshots for new booking flow
Improves UX on mobile/small screens by scrolling the time slots
section into view after a date is selected.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant