{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "doctor-appointment-scheduler", "title": "Doctor Appointment Scheduler", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/doctor-appointment-scheduler/DoctorAppointmentScheduler.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n BadgeCheck,\n Building2,\n Calendar,\n CalendarCheck,\n CalendarDays,\n Check,\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n Clock,\n CreditCard,\n FileText,\n HeartPulse,\n Info,\n Lock,\n MapPin,\n Phone,\n RotateCcw,\n ShieldCheck,\n Star,\n Stethoscope,\n Sun,\n Sunset,\n User,\n Video,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface DoctorAppointmentSchedulerProps {\n doctorName?: string\n doctorTitle?: string\n doctorAvatar?: string\n specialty?: string\n clinicName?: string\n clinicAddress?: string\n rating?: number\n reviewCount?: number\n insurances?: string[]\n initialDate?: string\n initialTime?: string\n initialVisitType?: 'in-person' | 'telehealth'\n initialReason?: string\n className?: string\n}\n\n// Hardcoded week selector data\nconst weekDays = [\n { id: '2026-08-24', weekday: 'Mon', day: '24', month: 'Aug', fullDate: 'Monday, Aug 24, 2026', slotsCount: 6 },\n { id: '2026-08-25', weekday: 'Tue', day: '25', month: 'Aug', fullDate: 'Tuesday, Aug 25, 2026', slotsCount: 8 },\n { id: '2026-08-26', weekday: 'Wed', day: '26', month: 'Aug', fullDate: 'Wednesday, Aug 26, 2026', slotsCount: 5 },\n { id: '2026-08-27', weekday: 'Thu', day: '27', month: 'Aug', fullDate: 'Thursday, Aug 27, 2026', slotsCount: 8 },\n { id: '2026-08-28', weekday: 'Fri', day: '28', month: 'Aug', fullDate: 'Friday, Aug 28, 2026', slotsCount: 7 },\n { id: '2026-08-29', weekday: 'Sat', day: '29', month: 'Aug', fullDate: 'Saturday, Aug 29, 2026', slotsCount: 4 },\n]\n\n// Available Time Slots\nconst morningSlots = ['09:00 AM', '09:30 AM', '10:15 AM', '11:00 AM']\nconst afternoonSlots = ['02:00 PM', '02:45 PM', '03:30 PM', '04:15 PM']\n\n// Reasons for consultation\nconst visitReasons = [\n {\n value: 'annual-checkup',\n label: 'Annual Checkup',\n description: 'Routine wellness & cardiovascular health screening',\n copay: '$25.00',\n },\n {\n value: 'follow-up',\n label: 'Follow-up',\n description: 'Post-treatment evaluation & diagnostic review',\n copay: '$20.00',\n },\n {\n value: 'chest-pain',\n label: 'Chest Pain Consultation',\n description: 'Comprehensive symptom evaluation & urgent diagnostics',\n copay: '$30.00',\n },\n {\n value: 'medication-review',\n label: 'Medication Review',\n description: 'Prescription adjustment & therapeutic monitoring',\n copay: '$15.00',\n },\n {\n value: 'hypertension-evaluation',\n label: 'Hypertension Evaluation',\n description: 'Blood pressure assessment & ongoing care plan',\n copay: '$25.00',\n },\n]\n\nexport function DoctorAppointmentScheduler({\n doctorName = 'Dr. Marcus Thorne, MD, FACC',\n doctorTitle = 'Board-Certified Cardiologist · Cedars-Sinai Heart Institute',\n doctorAvatar = 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?q=80&w=320&auto=format&fit=crop',\n specialty = 'Cardiology & Internal Medicine',\n clinicName = 'Cedars-Sinai Medical Plaza',\n clinicAddress = 'Cedars-Sinai Medical Plaza, Suite 400, Los Angeles, CA',\n rating = 4.9,\n reviewCount = 240,\n insurances = ['BlueCross BlueShield', 'Aetna', 'UnitedHealthcare', 'Medicare', 'Cigna'],\n initialDate = '2026-08-27',\n initialTime = '10:15 AM',\n initialVisitType = 'in-person',\n initialReason = 'chest-pain',\n className,\n}: DoctorAppointmentSchedulerProps) {\n // State\n const [selectedDate, setSelectedDate] = React.useState(initialDate)\n const [selectedTime, setSelectedTime] = React.useState(initialTime)\n const [visitType, setVisitType] = React.useState<'in-person' | 'telehealth'>(initialVisitType)\n const [selectedReason, setSelectedReason] = React.useState(initialReason)\n const [patientName, setPatientName] = React.useState('Sarah Jenkins')\n const [patientPhone, setPatientPhone] = React.useState('+1 (555) 382-9104')\n const [insurancePolicy, setInsurancePolicy] = React.useState('BCBS-90481240')\n const [notes, setNotes] = React.useState('Occasional mild tightness after morning workouts; seeking ECG review.')\n const [isBooked, setIsBooked] = React.useState(false)\n const [calendarAdded, setCalendarAdded] = React.useState(false)\n const bookingReference = 'APT-84920'\n\n // Computed helpers\n const currentDateObj = React.useMemo(() => {\n return weekDays.find((d) => d.id === selectedDate) || weekDays[3]\n }, [selectedDate])\n\n const currentReasonObj = React.useMemo(() => {\n return visitReasons.find((r) => r.value === selectedReason) || visitReasons[2]\n }, [selectedReason])\n\n const selectedSlotFormatted = `${currentDateObj.weekday}, ${currentDateObj.month} ${currentDateObj.day} at ${selectedTime}`\n\n const locationText =\n visitType === 'in-person' ? 'In-Person · Room 402, Cedars-Sinai Plaza' : 'Video Telehealth · Secure HIPAA Link'\n\n function handleBook() {\n if (!patientName.trim() || !patientPhone.trim()) return\n setIsBooked(true)\n }\n\n function handleReset() {\n setIsBooked(false)\n setCalendarAdded(false)\n }\n\n function handleAddToCalendar() {\n setCalendarAdded(true)\n }\n\n return (\n
\n {/* 1. Doctor Profile Hero Card */}\n \n \n
\n {/* Left: Avatar + Core Bio */}\n
\n
\n \n \n \n MT\n \n \n
\n \n Available\n
\n
\n\n
\n
\n

{doctorName}

\n \n
\n\n

{doctorTitle}

\n\n
\n \n {specialty}\n \n \n 16+ Yrs Experience\n \n \n Cedars-Sinai Affiliated\n \n
\n
\n
\n\n {/* Right: Rating, Clinic & Insurance Highlights */}\n
\n
\n
\n \n {rating}\n ({reviewCount} reviews)\n
\n Top Rated\n
\n\n
\n \n {clinicAddress}\n
\n\n
\n \n \n Accepts BlueCross, Aetna, UnitedHealthcare, Medicare\n \n
\n
\n
\n \n \n\n {/* 2. Interactive Booking Flow (2-Column) */}\n
\n {/* Left Column: Calendar & Slot Picker (7 Cols) */}\n
\n {/* Step 1: Visit Type Selection */}\n
\n
\n
\n 1\n
\n

Select Visit Type

\n
\n\n setVisitType(val as 'in-person' | 'telehealth')}\n className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\"\n >\n \n \n
\n
\n \n In-Person Visit\n
\n

\n Cedars-Sinai Medical Plaza, Suite 400 · In-office diagnostics & exam\n

\n
\n \n\n \n \n
\n
\n
\n

\n HD video consultation · HIPAA link sent via SMS & email\n

\n
\n \n \n
\n\n {/* Step 2: Reason for Visit */}\n
\n
\n
\n 2\n
\n

Reason for Visit

\n
\n\n \n
\n\n {/* Step 3: Date Carousel / Week Selector */}\n
\n
\n
\n
\n 3\n
\n

Select Date

\n
\n\n
\n August 2026\n
\n \n \n \n \n \n \n
\n
\n
\n\n {/* 6-Day Carousel Strip */}\n
\n {weekDays.map((day) => {\n const isSelected = selectedDate === day.id\n return (\n setSelectedDate(day.id)}\n >\n \n {day.weekday}\n \n {day.day}\n \n {day.slotsCount} slots\n \n \n )\n })}\n
\n
\n\n {/* Step 4: Available Time Slots Grid */}\n
\n
\n
\n
\n 4\n
\n

Available Time Slots

\n
\n \n 8 slots on {currentDateObj.weekday}, {currentDateObj.month} {currentDateObj.day}\n \n
\n\n {/* Morning Section */}\n
\n
\n \n Morning Slots\n
\n
\n {morningSlots.map((slot) => {\n const isSelected = selectedTime === slot\n return (\n setSelectedTime(slot)}\n >\n {slot}\n \n )\n })}\n
\n
\n\n {/* Afternoon Section */}\n
\n
\n \n Afternoon Slots\n
\n
\n {afternoonSlots.map((slot) => {\n const isSelected = selectedTime === slot\n return (\n setSelectedTime(slot)}\n >\n {slot}\n \n )\n })}\n
\n
\n
\n
\n\n {/* Right Column: Appointment Summary Card (5 Cols) */}\n
\n
\n {/* State A: Active Booking Form Summary */}\n {!isBooked ? (\n \n \n
\n
\n Appointment Summary\n \n Live schedule & patient registration\n \n
\n \n \n Slot Held: 09:48\n \n
\n \n\n \n {/* Selected Slot Readout Banner */}\n
\n
\n \n
\n

Selected Slot

\n

{selectedSlotFormatted}

\n
\n
\n\n
\n {visitType === 'in-person' ? (\n \n ) : (\n
\n\n
\n \n
\n

Visit Type

\n

{currentReasonObj.label}

\n
\n
\n
\n\n {/* Estimated Copay Readout */}\n
\n
\n \n
\n

Estimated Copay

\n

BlueCross PPO In-Network

\n
\n
\n
\n {currentReasonObj.copay}\n

Covered at 90%

\n
\n
\n\n \n\n {/* Patient Details Form */}\n
\n

\n Patient Information\n

\n\n
\n \n setPatientName(e.target.value)}\n placeholder=\"e.g. Sarah Jenkins\"\n className=\"h-9 text-xs\"\n />\n
\n\n
\n
\n \n setPatientPhone(e.target.value)}\n placeholder=\"+1 (555) 382-9104\"\n className=\"h-9 text-xs tabular-nums\"\n />\n
\n\n
\n \n setInsurancePolicy(e.target.value)}\n placeholder=\"BCBS-90481240\"\n className=\"h-9 font-mono text-xs uppercase\"\n />\n
\n
\n\n
\n \n setNotes(v)}\n rows={2}\n placeholder=\"Briefly describe your symptoms or current medications...\"\n className=\"text-xs leading-relaxed\"\n />\n
\n
\n \n\n \n \n\n
\n \n 256-bit encrypted · HIPAA compliant · Free cancellation up to 24h\n
\n \n \n ) : (\n /* State B: Confirmed Appointment Screen */\n \n \n
\n \n
\n Appointment Confirmed!\n \n Confirmation #{bookingReference} dispatched to {patientPhone}\n \n \n\n \n
\n
\n Physician\n {doctorName}\n
\n
\n Date & Time\n {selectedSlotFormatted}\n
\n
\n Location\n {locationText}\n
\n
\n Visit Type\n {currentReasonObj.label}\n
\n
\n Patient\n {patientName}\n
\n
\n Est. Copay Due\n {currentReasonObj.copay}\n
\n
\n\n
\n

\n \n Pre-Appointment Instructions\n

\n

\n Please arrive 15 minutes early with your photo ID and active insurance card. For telehealth, join\n link activates 10 minutes prior to visit.\n

\n
\n \n\n \n \n {calendarAdded ? (\n \n ) : (\n \n )}\n {calendarAdded ? 'Added to Calendar' : 'Add to Google / Apple Calendar'}\n \n\n \n \n Schedule Another Appointment\n \n \n \n )}\n
\n
\n
\n
\n )\n}\n\nexport default DoctorAppointmentScheduler\n", "type": "registry:block", "target": "~/components/blocks/DoctorAppointmentScheduler.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/radio-group.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/textarea.json" ], "description": "Zocdoc and Epic style specialist doctor appointment booking scheduler: physician profile hero card with rating, clinic address, and insurance badges, interactive visit type selector, reason for visit dropdown, date carousel with daily availability indicators, morning and afternoon time slot picker, live appointment summary readout with copay estimate, patient registration inputs, and booking confirmation flow.", "categories": [ "healthcare", "app", "clinical", "forms" ] }