mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
feat: add appointment booking form slide-out during calls, wired to platform createAppointment mutation
This commit is contained in:
335
src/components/call-desk/appointment-form.tsx
Normal file
335
src/components/call-desk/appointment-form.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
import { useState } from 'react';
|
||||
import { CalendarPlus02 } from '@untitledui/icons';
|
||||
import { SlideoutMenu } from '@/components/application/slideout-menus/slideout-menu';
|
||||
import { Input } from '@/components/base/input/input';
|
||||
import { Select } from '@/components/base/select/select';
|
||||
import { TextArea } from '@/components/base/textarea/textarea';
|
||||
import { Checkbox } from '@/components/base/checkbox/checkbox';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
|
||||
type AppointmentFormProps = {
|
||||
isOpen: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
callerNumber?: string | null;
|
||||
leadName?: string | null;
|
||||
leadId?: string | null;
|
||||
onSaved?: () => void;
|
||||
};
|
||||
|
||||
const clinicItems = [
|
||||
{ id: 'koramangala', label: 'Global Hospital - Koramangala' },
|
||||
{ id: 'whitefield', label: 'Global Hospital - Whitefield' },
|
||||
{ id: 'indiranagar', label: 'Global Hospital - Indiranagar' },
|
||||
];
|
||||
|
||||
const departmentItems = [
|
||||
{ id: 'cardiology', label: 'Cardiology' },
|
||||
{ id: 'gynecology', label: 'Gynecology' },
|
||||
{ id: 'orthopedics', label: 'Orthopedics' },
|
||||
{ id: 'general-medicine', label: 'General Medicine' },
|
||||
{ id: 'ent', label: 'ENT' },
|
||||
{ id: 'dermatology', label: 'Dermatology' },
|
||||
{ id: 'pediatrics', label: 'Pediatrics' },
|
||||
{ id: 'oncology', label: 'Oncology' },
|
||||
];
|
||||
|
||||
const doctorItems = [
|
||||
{ id: 'dr-sharma', label: 'Dr. Sharma' },
|
||||
{ id: 'dr-patel', label: 'Dr. Patel' },
|
||||
{ id: 'dr-kumar', label: 'Dr. Kumar' },
|
||||
{ id: 'dr-reddy', label: 'Dr. Reddy' },
|
||||
{ id: 'dr-singh', label: 'Dr. Singh' },
|
||||
];
|
||||
|
||||
const genderItems = [
|
||||
{ id: 'male', label: 'Male' },
|
||||
{ id: 'female', label: 'Female' },
|
||||
{ id: 'other', label: 'Other' },
|
||||
];
|
||||
|
||||
const timeSlotItems = [
|
||||
{ id: '09:00', label: '9:00 AM' },
|
||||
{ id: '09:30', label: '9:30 AM' },
|
||||
{ id: '10:00', label: '10:00 AM' },
|
||||
{ id: '10:30', label: '10:30 AM' },
|
||||
{ id: '11:00', label: '11:00 AM' },
|
||||
{ id: '11:30', label: '11:30 AM' },
|
||||
{ id: '14:00', label: '2:00 PM' },
|
||||
{ id: '14:30', label: '2:30 PM' },
|
||||
{ id: '15:00', label: '3:00 PM' },
|
||||
{ id: '15:30', label: '3:30 PM' },
|
||||
{ id: '16:00', label: '4:00 PM' },
|
||||
];
|
||||
|
||||
export const AppointmentForm = ({
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
callerNumber,
|
||||
leadName,
|
||||
leadId,
|
||||
onSaved,
|
||||
}: AppointmentFormProps) => {
|
||||
const [patientName, setPatientName] = useState(leadName ?? '');
|
||||
const [patientPhone, setPatientPhone] = useState(callerNumber ?? '');
|
||||
const [age, setAge] = useState('');
|
||||
const [gender, setGender] = useState<string | null>(null);
|
||||
const [clinic, setClinic] = useState<string | null>(null);
|
||||
const [department, setDepartment] = useState<string | null>(null);
|
||||
const [doctor, setDoctor] = useState<string | null>(null);
|
||||
const [date, setDate] = useState('');
|
||||
const [timeSlot, setTimeSlot] = useState<string | null>(null);
|
||||
const [chiefComplaint, setChiefComplaint] = useState('');
|
||||
const [isReturning, setIsReturning] = useState(false);
|
||||
const [source, setSource] = useState('Inbound Call');
|
||||
const [agentNotes, setAgentNotes] = useState('');
|
||||
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!date || !timeSlot || !doctor || !department) {
|
||||
setError('Please fill in the required fields: date, time, doctor, and department.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const { apiClient } = await import('@/lib/api-client');
|
||||
|
||||
// Combine date + time slot into ISO datetime
|
||||
const scheduledAt = new Date(`${date}T${timeSlot}:00`).toISOString();
|
||||
|
||||
const doctorLabel = doctorItems.find((d) => d.id === doctor)?.label ?? doctor;
|
||||
const departmentLabel = departmentItems.find((d) => d.id === department)?.label ?? department;
|
||||
|
||||
// Create appointment on platform
|
||||
await apiClient.graphql(
|
||||
`mutation CreateAppointment($data: AppointmentCreateInput!) {
|
||||
createAppointment(data: $data) { id }
|
||||
}`,
|
||||
{
|
||||
data: {
|
||||
scheduledAt,
|
||||
durationMinutes: 30,
|
||||
appointmentType: 'CONSULTATION',
|
||||
appointmentStatus: 'SCHEDULED',
|
||||
doctorName: doctorLabel,
|
||||
department: departmentLabel,
|
||||
reasonForVisit: chiefComplaint || null,
|
||||
...(leadId ? { patientId: leadId } : {}),
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
// Update lead status if we have a matched lead
|
||||
if (leadId) {
|
||||
await apiClient
|
||||
.graphql(
|
||||
`mutation UpdateLead($id: ID!, $data: LeadUpdateInput!) {
|
||||
updateLead(id: $id, data: $data) { id }
|
||||
}`,
|
||||
{
|
||||
id: leadId,
|
||||
data: {
|
||||
leadStatus: 'APPOINTMENT_SET',
|
||||
lastContactedAt: new Date().toISOString(),
|
||||
},
|
||||
},
|
||||
)
|
||||
.catch((err: unknown) => console.warn('Failed to update lead:', err));
|
||||
}
|
||||
|
||||
onSaved?.();
|
||||
} catch (err) {
|
||||
console.error('Failed to create appointment:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to create appointment. Please try again.');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SlideoutMenu isOpen={isOpen} onOpenChange={onOpenChange} className="max-w-120">
|
||||
{({ close }) => (
|
||||
<>
|
||||
<SlideoutMenu.Header onClose={close}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
|
||||
<CalendarPlus02 className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-primary">Book Appointment</h2>
|
||||
<p className="text-sm text-tertiary">Schedule a new patient visit</p>
|
||||
</div>
|
||||
</div>
|
||||
</SlideoutMenu.Header>
|
||||
|
||||
<SlideoutMenu.Content>
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Patient Info */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-tertiary">
|
||||
Patient Information
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
label="Patient Name"
|
||||
placeholder="Full name"
|
||||
value={patientName}
|
||||
onChange={setPatientName}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Phone"
|
||||
placeholder="Phone number"
|
||||
value={patientPhone}
|
||||
onChange={setPatientPhone}
|
||||
/>
|
||||
<Input
|
||||
label="Age"
|
||||
placeholder="Age"
|
||||
type="number"
|
||||
value={age}
|
||||
onChange={setAge}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Gender"
|
||||
placeholder="Select gender"
|
||||
items={genderItems}
|
||||
selectedKey={gender}
|
||||
onSelectionChange={(key) => setGender(key as string)}
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-secondary" />
|
||||
|
||||
{/* Appointment Details */}
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs font-bold uppercase tracking-wider text-tertiary">
|
||||
Appointment Details
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Clinic / Branch"
|
||||
placeholder="Select clinic"
|
||||
items={clinicItems}
|
||||
selectedKey={clinic}
|
||||
onSelectionChange={(key) => setClinic(key as string)}
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
label="Department / Specialty"
|
||||
placeholder="Select department"
|
||||
items={departmentItems}
|
||||
selectedKey={department}
|
||||
onSelectionChange={(key) => setDepartment(key as string)}
|
||||
isRequired
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
label="Doctor"
|
||||
placeholder="Select doctor"
|
||||
items={doctorItems}
|
||||
selectedKey={doctor}
|
||||
onSelectionChange={(key) => setDoctor(key as string)}
|
||||
isRequired
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Date"
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
isRequired
|
||||
/>
|
||||
<Select
|
||||
label="Time Slot"
|
||||
placeholder="Select time"
|
||||
items={timeSlotItems}
|
||||
selectedKey={timeSlot}
|
||||
onSelectionChange={(key) => setTimeSlot(key as string)}
|
||||
isRequired
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
label="Chief Complaint"
|
||||
placeholder="Describe the reason for visit..."
|
||||
value={chiefComplaint}
|
||||
onChange={setChiefComplaint}
|
||||
rows={2}
|
||||
/>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-secondary" />
|
||||
|
||||
{/* Additional Info */}
|
||||
<Checkbox
|
||||
isSelected={isReturning}
|
||||
onChange={setIsReturning}
|
||||
label="Returning Patient"
|
||||
hint="Check if the patient has visited before"
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Source / Referral"
|
||||
placeholder="How did the patient reach us?"
|
||||
value={source}
|
||||
onChange={setSource}
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
label="Agent Notes"
|
||||
placeholder="Any additional notes..."
|
||||
value={agentNotes}
|
||||
onChange={setAgentNotes}
|
||||
rows={2}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg bg-error-primary p-3 text-sm text-error-primary">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SlideoutMenu.Content>
|
||||
|
||||
<SlideoutMenu.Footer>
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<Button size="md" color="secondary" onClick={close}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
size="md"
|
||||
color="primary"
|
||||
isLoading={isSaving}
|
||||
showTextWhileLoading
|
||||
onClick={handleSave}
|
||||
>
|
||||
{isSaving ? 'Booking...' : 'Book Appointment'}
|
||||
</Button>
|
||||
</div>
|
||||
</SlideoutMenu.Footer>
|
||||
</>
|
||||
)}
|
||||
</SlideoutMenu>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user