mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 10:23:27 +00:00
saridsa2
4598740efe
- Appointment/enquiry forms reverted to inline rendering (not modals) - Forms: flat scrollable section with pinned footer, no card wrapper - Appointment form: DatePicker component, date prefilled, removed Returning Patient checkbox - Enquiry form: removed disposition dropdown, lead status defaults to CONTACTED - Transfer dialog: agent picker with live status, doctor list with department, select-then-connect flow - Transfer: removed external number input, moved Cancel/Connect to pinned header row - Button mutual exclusivity: Book Appt / Enquiry / Transfer close each other - Patient name write-back: appointment + enquiry forms update patient fullName after save - Caller cache invalidation: POST /api/caller/invalidate after name update - Follow-up fix (#513): assignedAgent, patientId, date validation in createFollowUp - Patients page: removed status filters + column, added pagination (15/page) - Pending badge removed from call desk header - Table resize handles visible (bg-tertiary pill) - Sim call button: dev-only (import.meta.env.DEV) - CallControlStrip component (reusable, not currently mounted) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
518 lines
21 KiB
TypeScript
518 lines
21 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { Input } from '@/components/base/input/input';
|
|
import { Select } from '@/components/base/select/select';
|
|
import { TextArea } from '@/components/base/textarea/textarea';
|
|
import { Button } from '@/components/base/buttons/button';
|
|
import { DatePicker } from '@/components/application/date-picker/date-picker';
|
|
import { parseDate } from '@internationalized/date';
|
|
import { apiClient } from '@/lib/api-client';
|
|
import { cx } from '@/utils/cx';
|
|
import { notify } from '@/lib/toast';
|
|
|
|
type ExistingAppointment = {
|
|
id: string;
|
|
scheduledAt: string;
|
|
doctorName: string;
|
|
doctorId?: string;
|
|
department: string;
|
|
reasonForVisit?: string;
|
|
status: string;
|
|
};
|
|
|
|
type AppointmentFormProps = {
|
|
isOpen: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
callerNumber?: string | null;
|
|
leadName?: string | null;
|
|
leadId?: string | null;
|
|
patientId?: string | null;
|
|
onSaved?: () => void;
|
|
existingAppointment?: ExistingAppointment | null;
|
|
};
|
|
|
|
type DoctorRecord = { id: string; name: string; department: string; clinic: string };
|
|
|
|
const clinicItems = [
|
|
{ id: 'koramangala', label: 'Global Hospital - Koramangala' },
|
|
{ id: 'whitefield', label: 'Global Hospital - Whitefield' },
|
|
{ id: 'indiranagar', label: 'Global Hospital - Indiranagar' },
|
|
];
|
|
|
|
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' },
|
|
];
|
|
|
|
const formatDeptLabel = (dept: string) =>
|
|
dept.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
|
|
|
|
export const AppointmentForm = ({
|
|
isOpen,
|
|
onOpenChange,
|
|
callerNumber,
|
|
leadName,
|
|
leadId,
|
|
patientId,
|
|
onSaved,
|
|
existingAppointment,
|
|
}: AppointmentFormProps) => {
|
|
const isEditMode = !!existingAppointment;
|
|
|
|
// Doctor data from platform
|
|
const [doctors, setDoctors] = useState<DoctorRecord[]>([]);
|
|
|
|
// Form state — initialized from existing appointment in edit mode
|
|
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>(existingAppointment?.department ?? null);
|
|
const [doctor, setDoctor] = useState<string | null>(existingAppointment?.doctorId ?? null);
|
|
const [date, setDate] = useState(() => {
|
|
if (existingAppointment?.scheduledAt) return existingAppointment.scheduledAt.split('T')[0];
|
|
return new Date().toISOString().split('T')[0];
|
|
});
|
|
const [timeSlot, setTimeSlot] = useState<string | null>(() => {
|
|
if (existingAppointment?.scheduledAt) {
|
|
const dt = new Date(existingAppointment.scheduledAt);
|
|
return `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}`;
|
|
}
|
|
return null;
|
|
});
|
|
const [chiefComplaint, setChiefComplaint] = useState(existingAppointment?.reasonForVisit ?? '');
|
|
const [source, setSource] = useState('Inbound Call');
|
|
const [agentNotes, setAgentNotes] = useState('');
|
|
|
|
// Availability state
|
|
const [bookedSlots, setBookedSlots] = useState<string[]>([]);
|
|
const [loadingSlots, setLoadingSlots] = useState(false);
|
|
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Fetch doctors on mount
|
|
useEffect(() => {
|
|
if (!isOpen) return;
|
|
apiClient.graphql<{ doctors: { edges: Array<{ node: any }> } }>(
|
|
`{ doctors(first: 50) { edges { node {
|
|
id name fullName { firstName lastName } department clinic { id name clinicName }
|
|
} } } }`,
|
|
).then(data => {
|
|
const docs = data.doctors.edges.map(e => ({
|
|
id: e.node.id,
|
|
name: e.node.fullName
|
|
? `Dr. ${e.node.fullName.firstName} ${e.node.fullName.lastName}`.trim()
|
|
: e.node.name,
|
|
department: e.node.department ?? '',
|
|
clinic: e.node.clinic?.clinicName ?? e.node.clinic?.name ?? '',
|
|
}));
|
|
setDoctors(docs);
|
|
}).catch(() => {});
|
|
}, [isOpen]);
|
|
|
|
// Fetch booked slots when doctor + date selected
|
|
useEffect(() => {
|
|
if (!doctor || !date) {
|
|
setBookedSlots([]);
|
|
return;
|
|
}
|
|
|
|
setLoadingSlots(true);
|
|
apiClient.graphql<{ appointments: { edges: Array<{ node: any }> } }>(
|
|
`{ appointments(filter: {
|
|
doctorId: { eq: "${doctor}" },
|
|
scheduledAt: { gte: "${date}T00:00:00", lte: "${date}T23:59:59" }
|
|
}) { edges { node { id scheduledAt durationMin status } } } }`,
|
|
).then(data => {
|
|
// Filter out cancelled/completed appointments client-side
|
|
const activeAppointments = data.appointments.edges.filter(e => {
|
|
const status = e.node.status;
|
|
return status !== 'CANCELLED' && status !== 'COMPLETED' && status !== 'NO_SHOW';
|
|
});
|
|
const slots = activeAppointments.map(e => {
|
|
const dt = new Date(e.node.scheduledAt);
|
|
return `${dt.getHours().toString().padStart(2, '0')}:${dt.getMinutes().toString().padStart(2, '0')}`;
|
|
});
|
|
// In edit mode, don't block the current appointment's slot
|
|
if (isEditMode && existingAppointment) {
|
|
const currentDt = new Date(existingAppointment.scheduledAt);
|
|
const currentSlot = `${currentDt.getHours().toString().padStart(2, '0')}:${currentDt.getMinutes().toString().padStart(2, '0')}`;
|
|
setBookedSlots(slots.filter(s => s !== currentSlot));
|
|
} else {
|
|
setBookedSlots(slots);
|
|
}
|
|
}).catch(() => setBookedSlots([]))
|
|
.finally(() => setLoadingSlots(false));
|
|
}, [doctor, date, isEditMode, existingAppointment]);
|
|
|
|
// Reset doctor when department changes
|
|
useEffect(() => {
|
|
setDoctor(null);
|
|
setTimeSlot(null);
|
|
}, [department]);
|
|
|
|
// Reset time slot when doctor or date changes
|
|
useEffect(() => {
|
|
setTimeSlot(null);
|
|
}, [doctor, date]);
|
|
|
|
// Derive department and doctor lists from fetched data
|
|
const departmentItems = [...new Set(doctors.map(d => d.department).filter(Boolean))]
|
|
.map(dept => ({ id: dept, label: formatDeptLabel(dept) }));
|
|
|
|
const filteredDoctors = department
|
|
? doctors.filter(d => d.department === department)
|
|
: doctors;
|
|
const doctorSelectItems = filteredDoctors.map(d => ({ id: d.id, label: d.name }));
|
|
|
|
const timeSlotSelectItems = timeSlotItems.map(slot => ({
|
|
...slot,
|
|
isDisabled: bookedSlots.includes(slot.id),
|
|
label: bookedSlots.includes(slot.id) ? `${slot.label} (Booked)` : slot.label,
|
|
}));
|
|
|
|
const handleSave = async () => {
|
|
if (!date || !timeSlot || !doctor || !department) {
|
|
setError('Please fill in the required fields: date, time, doctor, and department.');
|
|
return;
|
|
}
|
|
|
|
const today = new Date().toISOString().split('T')[0];
|
|
if (!isEditMode && date < today) {
|
|
setError('Appointment date cannot be in the past.');
|
|
return;
|
|
}
|
|
|
|
setIsSaving(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const scheduledAt = new Date(`${date}T${timeSlot}:00`).toISOString();
|
|
const selectedDoctor = doctors.find(d => d.id === doctor);
|
|
|
|
if (isEditMode && existingAppointment) {
|
|
// Update existing appointment
|
|
await apiClient.graphql(
|
|
`mutation UpdateAppointment($id: UUID!, $data: AppointmentUpdateInput!) {
|
|
updateAppointment(id: $id, data: $data) { id }
|
|
}`,
|
|
{
|
|
id: existingAppointment.id,
|
|
data: {
|
|
scheduledAt,
|
|
doctorName: selectedDoctor?.name ?? '',
|
|
department: selectedDoctor?.department ?? '',
|
|
doctorId: doctor,
|
|
reasonForVisit: chiefComplaint || null,
|
|
},
|
|
},
|
|
);
|
|
notify.success('Appointment Updated');
|
|
} else {
|
|
// Create appointment
|
|
await apiClient.graphql(
|
|
`mutation CreateAppointment($data: AppointmentCreateInput!) {
|
|
createAppointment(data: $data) { id }
|
|
}`,
|
|
{
|
|
data: {
|
|
scheduledAt,
|
|
durationMin: 30,
|
|
appointmentType: 'CONSULTATION',
|
|
status: 'SCHEDULED',
|
|
doctorName: selectedDoctor?.name ?? '',
|
|
department: selectedDoctor?.department ?? '',
|
|
doctorId: doctor,
|
|
reasonForVisit: chiefComplaint || null,
|
|
...(patientId ? { patientId } : {}),
|
|
},
|
|
},
|
|
);
|
|
|
|
// Update patient name if we have a name and a linked patient
|
|
if (patientId && patientName.trim()) {
|
|
await apiClient.graphql(
|
|
`mutation UpdatePatient($id: UUID!, $data: PatientUpdateInput!) {
|
|
updatePatient(id: $id, data: $data) { id }
|
|
}`,
|
|
{
|
|
id: patientId,
|
|
data: {
|
|
fullName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' },
|
|
},
|
|
},
|
|
).catch((err: unknown) => console.warn('Failed to update patient name:', err));
|
|
}
|
|
|
|
// Update lead status + name if we have a matched lead
|
|
if (leadId) {
|
|
await apiClient.graphql(
|
|
`mutation UpdateLead($id: UUID!, $data: LeadUpdateInput!) {
|
|
updateLead(id: $id, data: $data) { id }
|
|
}`,
|
|
{
|
|
id: leadId,
|
|
data: {
|
|
leadStatus: 'APPOINTMENT_SET',
|
|
lastContactedAt: new Date().toISOString(),
|
|
...(patientName.trim() ? { contactName: { firstName: patientName.split(' ')[0], lastName: patientName.split(' ').slice(1).join(' ') || '' } } : {}),
|
|
},
|
|
},
|
|
).catch((err: unknown) => console.warn('Failed to update lead:', err));
|
|
}
|
|
|
|
// Invalidate caller cache so next lookup gets the real name
|
|
if (callerNumber) {
|
|
apiClient.post('/api/caller/invalidate', { phone: callerNumber }, { silent: true }).catch(() => {});
|
|
}
|
|
}
|
|
|
|
onSaved?.();
|
|
} catch (err) {
|
|
console.error('Failed to save appointment:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to save appointment. Please try again.');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = async () => {
|
|
if (!existingAppointment) return;
|
|
setIsSaving(true);
|
|
try {
|
|
await apiClient.graphql(
|
|
`mutation CancelAppointment($id: UUID!, $data: AppointmentUpdateInput!) {
|
|
updateAppointment(id: $id, data: $data) { id }
|
|
}`,
|
|
{
|
|
id: existingAppointment.id,
|
|
data: { status: 'CANCELLED' },
|
|
},
|
|
);
|
|
notify.success('Appointment Cancelled');
|
|
onSaved?.();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Failed to cancel appointment');
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 min-h-0">
|
|
{/* Form fields — scrollable */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
<div className="flex flex-col gap-3">
|
|
{/* Patient Info — only for new appointments */}
|
|
{!isEditMode && (
|
|
<>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
{!isEditMode && (
|
|
<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={doctors.length === 0 ? 'Loading...' : 'Select department'}
|
|
items={departmentItems}
|
|
selectedKey={department}
|
|
onSelectionChange={(key) => setDepartment(key as string)}
|
|
isRequired
|
|
isDisabled={doctors.length === 0}
|
|
>
|
|
{(item) => <Select.Item id={item.id} label={item.label} />}
|
|
</Select>
|
|
|
|
<Select
|
|
label="Doctor"
|
|
placeholder={!department ? 'Select department first' : 'Select doctor'}
|
|
items={doctorSelectItems}
|
|
selectedKey={doctor}
|
|
onSelectionChange={(key) => setDoctor(key as string)}
|
|
isRequired
|
|
isDisabled={!department}
|
|
>
|
|
{(item) => <Select.Item id={item.id} label={item.label} />}
|
|
</Select>
|
|
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-xs font-medium text-secondary">Date <span className="text-error-primary">*</span></span>
|
|
<DatePicker
|
|
value={date ? parseDate(date) : null}
|
|
onChange={(val) => setDate(val ? val.toString() : '')}
|
|
granularity="day"
|
|
/>
|
|
</div>
|
|
|
|
{/* Time slot grid */}
|
|
{doctor && date && (
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-xs font-semibold text-secondary">
|
|
{loadingSlots ? 'Checking availability...' : 'Available Slots'}
|
|
</span>
|
|
<div className="grid grid-cols-4 gap-1.5">
|
|
{timeSlotSelectItems.map(slot => {
|
|
const isBooked = slot.isDisabled;
|
|
const isSelected = timeSlot === slot.id;
|
|
return (
|
|
<button
|
|
key={slot.id}
|
|
type="button"
|
|
disabled={isBooked}
|
|
onClick={() => setTimeSlot(slot.id)}
|
|
className={cx(
|
|
'rounded-lg py-2 px-1 text-xs font-medium transition duration-100 ease-linear',
|
|
isBooked
|
|
? 'cursor-not-allowed bg-disabled text-disabled line-through'
|
|
: isSelected
|
|
? 'bg-brand-solid text-white ring-2 ring-brand'
|
|
: 'cursor-pointer bg-secondary text-secondary hover:bg-secondary_hover hover:text-secondary_hover',
|
|
)}
|
|
>
|
|
{timeSlotItems.find(t => t.id === slot.id)?.label ?? slot.id}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!doctor || !date ? (
|
|
<p className="text-xs text-tertiary">Select a doctor and date to see available time slots</p>
|
|
) : null}
|
|
|
|
<TextArea
|
|
label="Chief Complaint"
|
|
placeholder="Describe the reason for visit..."
|
|
value={chiefComplaint}
|
|
onChange={setChiefComplaint}
|
|
rows={2}
|
|
/>
|
|
|
|
{/* Additional Info — only for new appointments */}
|
|
{!isEditMode && (
|
|
<>
|
|
<div className="border-t border-secondary" />
|
|
|
|
<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>
|
|
</div>
|
|
|
|
{/* Footer — pinned */}
|
|
<div className="shrink-0 flex items-center justify-between pt-4 border-t border-secondary">
|
|
<div>
|
|
{isEditMode && (
|
|
<Button size="sm" color="primary-destructive" isLoading={isSaving} onClick={handleCancel}>
|
|
Cancel Appointment
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Button size="sm" color="secondary" onClick={() => onOpenChange(false)}>
|
|
Close
|
|
</Button>
|
|
<Button size="sm" color="primary" isLoading={isSaving} showTextWhileLoading onClick={handleSave}>
|
|
{isSaving ? 'Saving...' : isEditMode ? 'Update Appointment' : 'Book Appointment'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|