mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-11 18:28:15 +00:00
feat(onboarding/phase-3): clinics, doctors, team invite/role CRUD
Replaces Phase 2 placeholder routes for /settings/clinics and /settings/doctors with real list + add/edit slideouts backed directly by the platform's ClinicCreateInput / DoctorCreateInput mutations. Rewrites /settings/team to fetch roles via getRoles and let admins invite members (sendInvitations) and change roles (updateWorkspaceMemberRole). - src/components/forms/clinic-form.tsx — reusable form + GraphQL input transformer, handles address/phone/email composite types - src/components/forms/doctor-form.tsx — reusable form with clinic dropdown and currency conversion for consultation fees - src/components/forms/invite-member-form.tsx — multi-email chip input with comma-to-commit UX (AriaTextField doesn't expose onKeyDown) - src/pages/clinics.tsx — list + slideout using ClinicForm, marks the clinics setup step complete on first successful add - src/pages/doctors.tsx — list + slideout with parallel clinic fetch, disabled-state when no clinics exist, marks doctors step complete - src/pages/team-settings.tsx — replaces email-pattern role inference with real getRoles + in-row role Select, adds invite slideout, marks team step complete on successful invitation - src/main.tsx — routes /settings/clinics and /settings/doctors to real pages instead of SettingsPlaceholder stubs Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
260
src/components/forms/doctor-form.tsx
Normal file
260
src/components/forms/doctor-form.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
import { Input } from '@/components/base/input/input';
|
||||
import { Select } from '@/components/base/select/select';
|
||||
import { TextArea } from '@/components/base/textarea/textarea';
|
||||
import { Toggle } from '@/components/base/toggle/toggle';
|
||||
|
||||
// Reusable doctor form used by /settings/doctors and the /setup wizard. The
|
||||
// parent owns both the form state and the list of clinics to populate the
|
||||
// clinic dropdown (since the list page will already have it loaded).
|
||||
//
|
||||
// Field names mirror the platform's DoctorCreateInput — notably `active`, not
|
||||
// `isActive`, and `clinicId` for the relation.
|
||||
|
||||
export type DoctorDepartment =
|
||||
| 'CARDIOLOGY'
|
||||
| 'GYNECOLOGY'
|
||||
| 'ORTHOPEDICS'
|
||||
| 'GENERAL_MEDICINE'
|
||||
| 'ENT'
|
||||
| 'DERMATOLOGY'
|
||||
| 'PEDIATRICS'
|
||||
| 'ONCOLOGY';
|
||||
|
||||
export type DoctorFormValues = {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
department: DoctorDepartment | '';
|
||||
specialty: string;
|
||||
qualifications: string;
|
||||
yearsOfExperience: string;
|
||||
clinicId: string;
|
||||
visitingHours: string;
|
||||
consultationFeeNew: string;
|
||||
consultationFeeFollowUp: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
registrationNumber: string;
|
||||
active: boolean;
|
||||
};
|
||||
|
||||
export const emptyDoctorFormValues = (): DoctorFormValues => ({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
department: '',
|
||||
specialty: '',
|
||||
qualifications: '',
|
||||
yearsOfExperience: '',
|
||||
clinicId: '',
|
||||
visitingHours: '',
|
||||
consultationFeeNew: '',
|
||||
consultationFeeFollowUp: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
registrationNumber: '',
|
||||
active: true,
|
||||
});
|
||||
|
||||
const DEPARTMENT_ITEMS: { id: DoctorDepartment; label: string }[] = [
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
// Convert form state into the shape createDoctor/updateDoctor mutations
|
||||
// expect. yearsOfExperience and consultation fees are text fields in the UI
|
||||
// but typed in GraphQL, so we parse + validate here.
|
||||
export const doctorFormToGraphQLInput = (v: DoctorFormValues): Record<string, unknown> => {
|
||||
const input: Record<string, unknown> = {
|
||||
fullName: {
|
||||
firstName: v.firstName.trim(),
|
||||
lastName: v.lastName.trim(),
|
||||
},
|
||||
active: v.active,
|
||||
};
|
||||
|
||||
if (v.department) input.department = v.department;
|
||||
if (v.specialty.trim()) input.specialty = v.specialty.trim();
|
||||
if (v.qualifications.trim()) input.qualifications = v.qualifications.trim();
|
||||
if (v.yearsOfExperience.trim()) {
|
||||
const n = Number(v.yearsOfExperience);
|
||||
if (!Number.isNaN(n)) input.yearsOfExperience = n;
|
||||
}
|
||||
if (v.clinicId) input.clinicId = v.clinicId;
|
||||
if (v.visitingHours.trim()) input.visitingHours = v.visitingHours.trim();
|
||||
if (v.consultationFeeNew.trim()) {
|
||||
const n = Number(v.consultationFeeNew);
|
||||
if (!Number.isNaN(n)) {
|
||||
input.consultationFeeNew = {
|
||||
amountMicros: Math.round(n * 1_000_000),
|
||||
currencyCode: 'INR',
|
||||
};
|
||||
}
|
||||
}
|
||||
if (v.consultationFeeFollowUp.trim()) {
|
||||
const n = Number(v.consultationFeeFollowUp);
|
||||
if (!Number.isNaN(n)) {
|
||||
input.consultationFeeFollowUp = {
|
||||
amountMicros: Math.round(n * 1_000_000),
|
||||
currencyCode: 'INR',
|
||||
};
|
||||
}
|
||||
}
|
||||
if (v.phone.trim()) {
|
||||
input.phone = {
|
||||
primaryPhoneNumber: v.phone.trim(),
|
||||
primaryPhoneCountryCode: 'IN',
|
||||
primaryPhoneCallingCode: '+91',
|
||||
additionalPhones: null,
|
||||
};
|
||||
}
|
||||
if (v.email.trim()) {
|
||||
input.email = {
|
||||
primaryEmail: v.email.trim(),
|
||||
additionalEmails: null,
|
||||
};
|
||||
}
|
||||
if (v.registrationNumber.trim()) input.registrationNumber = v.registrationNumber.trim();
|
||||
|
||||
return input;
|
||||
};
|
||||
|
||||
type ClinicOption = { id: string; label: string };
|
||||
|
||||
type DoctorFormProps = {
|
||||
value: DoctorFormValues;
|
||||
onChange: (value: DoctorFormValues) => void;
|
||||
clinics: ClinicOption[];
|
||||
};
|
||||
|
||||
export const DoctorForm = ({ value, onChange, clinics }: DoctorFormProps) => {
|
||||
const patch = (updates: Partial<DoctorFormValues>) => onChange({ ...value, ...updates });
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="First name"
|
||||
isRequired
|
||||
placeholder="Ananya"
|
||||
value={value.firstName}
|
||||
onChange={(v) => patch({ firstName: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Last name"
|
||||
isRequired
|
||||
placeholder="Rao"
|
||||
value={value.lastName}
|
||||
onChange={(v) => patch({ lastName: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Department"
|
||||
placeholder="Select department"
|
||||
items={DEPARTMENT_ITEMS}
|
||||
selectedKey={value.department || null}
|
||||
onSelectionChange={(key) => patch({ department: (key as DoctorDepartment) || '' })}
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
label="Specialty"
|
||||
placeholder="e.g. Interventional cardiology"
|
||||
value={value.specialty}
|
||||
onChange={(v) => patch({ specialty: v })}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Qualifications"
|
||||
placeholder="MBBS, MD"
|
||||
value={value.qualifications}
|
||||
onChange={(v) => patch({ qualifications: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Experience (years)"
|
||||
type="number"
|
||||
value={value.yearsOfExperience}
|
||||
onChange={(v) => patch({ yearsOfExperience: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Select
|
||||
label="Clinic"
|
||||
placeholder={clinics.length === 0 ? 'Add a clinic first' : 'Assign to a clinic'}
|
||||
isDisabled={clinics.length === 0}
|
||||
items={clinics}
|
||||
selectedKey={value.clinicId || null}
|
||||
onSelectionChange={(key) => patch({ clinicId: (key as string) || '' })}
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<TextArea
|
||||
label="Visiting hours"
|
||||
placeholder="Mon–Fri 10 AM – 2 PM, Sat 10 AM – 12 PM"
|
||||
value={value.visitingHours}
|
||||
onChange={(v) => patch({ visitingHours: v })}
|
||||
rows={2}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="New consult fee (₹)"
|
||||
type="number"
|
||||
placeholder="800"
|
||||
value={value.consultationFeeNew}
|
||||
onChange={(v) => patch({ consultationFeeNew: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Follow-up fee (₹)"
|
||||
type="number"
|
||||
placeholder="500"
|
||||
value={value.consultationFeeFollowUp}
|
||||
onChange={(v) => patch({ consultationFeeFollowUp: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Contact</p>
|
||||
<Input
|
||||
label="Phone"
|
||||
type="tel"
|
||||
placeholder="9876543210"
|
||||
value={value.phone}
|
||||
onChange={(v) => patch({ phone: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="doctor@hospital.com"
|
||||
value={value.email}
|
||||
onChange={(v) => patch({ email: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Registration number"
|
||||
placeholder="Medical council reg no."
|
||||
value={value.registrationNumber}
|
||||
onChange={(v) => patch({ registrationNumber: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-secondary bg-secondary p-4">
|
||||
<Toggle
|
||||
label="Accepting appointments"
|
||||
isSelected={value.active}
|
||||
onChange={(checked) => patch({ active: checked })}
|
||||
/>
|
||||
<p className="text-xs text-tertiary">
|
||||
Inactive doctors are hidden from appointment booking and call-desk transfer lists.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user