feat: Add embeddable FHIR scheduler widget with slot hold system#5
Open
feat: Add embeddable FHIR scheduler widget with slot hold system#5
Conversation
## 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
Member
Author
|
📸 *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:
|
…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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
🔒 Slot Hold API (prevents double-booking)
/Slot/:id/$hold/Slot/:id/$hold/Slot/:id/$hold/:token🧪 Test Infrastructure
📊 Data Generation
Usage
Demo
Run both servers and visit http://localhost:5174:
Checklist