mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-05-18 20:08:19 +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:
263
src/components/forms/clinic-form.tsx
Normal file
263
src/components/forms/clinic-form.tsx
Normal file
@@ -0,0 +1,263 @@
|
||||
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 clinic form used by both the /settings/clinics slideout and the
|
||||
// /setup wizard step. The parent owns the form state so it can also own the
|
||||
// submit button and the loading/error UI.
|
||||
//
|
||||
// Field shapes mirror the platform's ClinicCreateInput (which uses
|
||||
// `addressCustom`, not `address`, and `onlineBooking`, not
|
||||
// `onlineBookingEnabled` as the SDK field). See
|
||||
// FortyTwoApps/helix-engage/src/objects/clinic.object.ts for the SDK source of
|
||||
// truth; GraphQL-level differences are normalised in clinicFormToGraphQLInput.
|
||||
|
||||
export type ClinicStatus = 'ACTIVE' | 'TEMPORARILY_CLOSED' | 'PERMANENTLY_CLOSED';
|
||||
|
||||
export type ClinicFormValues = {
|
||||
clinicName: string;
|
||||
addressStreet1: string;
|
||||
addressStreet2: string;
|
||||
addressCity: string;
|
||||
addressState: string;
|
||||
addressPostcode: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
weekdayHours: string;
|
||||
saturdayHours: string;
|
||||
sundayHours: string;
|
||||
status: ClinicStatus;
|
||||
walkInAllowed: boolean;
|
||||
onlineBooking: boolean;
|
||||
cancellationWindowHours: string;
|
||||
arriveEarlyMin: string;
|
||||
requiredDocuments: string;
|
||||
};
|
||||
|
||||
export const emptyClinicFormValues = (): ClinicFormValues => ({
|
||||
clinicName: '',
|
||||
addressStreet1: '',
|
||||
addressStreet2: '',
|
||||
addressCity: '',
|
||||
addressState: '',
|
||||
addressPostcode: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
weekdayHours: '9:00 AM - 6:00 PM',
|
||||
saturdayHours: '9:00 AM - 2:00 PM',
|
||||
sundayHours: 'Closed',
|
||||
status: 'ACTIVE',
|
||||
walkInAllowed: true,
|
||||
onlineBooking: true,
|
||||
cancellationWindowHours: '24',
|
||||
arriveEarlyMin: '15',
|
||||
requiredDocuments: '',
|
||||
});
|
||||
|
||||
const STATUS_ITEMS = [
|
||||
{ id: 'ACTIVE', label: 'Active' },
|
||||
{ id: 'TEMPORARILY_CLOSED', label: 'Temporarily closed' },
|
||||
{ id: 'PERMANENTLY_CLOSED', label: 'Permanently closed' },
|
||||
];
|
||||
|
||||
// Convert form state into the shape the platform's createClinic / updateClinic
|
||||
// mutations expect. Only non-empty fields are included so the platform can
|
||||
// apply its own defaults for the rest.
|
||||
export const clinicFormToGraphQLInput = (v: ClinicFormValues): Record<string, unknown> => {
|
||||
const input: Record<string, unknown> = {
|
||||
clinicName: v.clinicName.trim(),
|
||||
status: v.status,
|
||||
walkInAllowed: v.walkInAllowed,
|
||||
onlineBooking: v.onlineBooking,
|
||||
};
|
||||
|
||||
const hasAddress = v.addressStreet1 || v.addressCity || v.addressState || v.addressPostcode;
|
||||
if (hasAddress) {
|
||||
input.addressCustom = {
|
||||
addressStreet1: v.addressStreet1 || null,
|
||||
addressStreet2: v.addressStreet2 || null,
|
||||
addressCity: v.addressCity || null,
|
||||
addressState: v.addressState || null,
|
||||
addressPostcode: v.addressPostcode || null,
|
||||
addressCountry: 'India',
|
||||
};
|
||||
}
|
||||
|
||||
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.weekdayHours.trim()) input.weekdayHours = v.weekdayHours.trim();
|
||||
if (v.saturdayHours.trim()) input.saturdayHours = v.saturdayHours.trim();
|
||||
if (v.sundayHours.trim()) input.sundayHours = v.sundayHours.trim();
|
||||
if (v.cancellationWindowHours.trim()) {
|
||||
const n = Number(v.cancellationWindowHours);
|
||||
if (!Number.isNaN(n)) input.cancellationWindowHours = n;
|
||||
}
|
||||
if (v.arriveEarlyMin.trim()) {
|
||||
const n = Number(v.arriveEarlyMin);
|
||||
if (!Number.isNaN(n)) input.arriveEarlyMin = n;
|
||||
}
|
||||
if (v.requiredDocuments.trim()) input.requiredDocuments = v.requiredDocuments.trim();
|
||||
|
||||
return input;
|
||||
};
|
||||
|
||||
type ClinicFormProps = {
|
||||
value: ClinicFormValues;
|
||||
onChange: (value: ClinicFormValues) => void;
|
||||
};
|
||||
|
||||
export const ClinicForm = ({ value, onChange }: ClinicFormProps) => {
|
||||
const patch = (updates: Partial<ClinicFormValues>) => onChange({ ...value, ...updates });
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<Input
|
||||
label="Clinic name"
|
||||
isRequired
|
||||
placeholder="e.g. Main Hospital Campus"
|
||||
value={value.clinicName}
|
||||
onChange={(v) => patch({ clinicName: v })}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="Status"
|
||||
placeholder="Select status"
|
||||
items={STATUS_ITEMS}
|
||||
selectedKey={value.status}
|
||||
onSelectionChange={(key) => patch({ status: key as ClinicStatus })}
|
||||
>
|
||||
{(item) => <Select.Item id={item.id} label={item.label} />}
|
||||
</Select>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Address</p>
|
||||
<Input
|
||||
label="Street address"
|
||||
placeholder="Street / building / landmark"
|
||||
value={value.addressStreet1}
|
||||
onChange={(v) => patch({ addressStreet1: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Area / locality (optional)"
|
||||
placeholder="Area, neighbourhood"
|
||||
value={value.addressStreet2}
|
||||
onChange={(v) => patch({ addressStreet2: v })}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="City"
|
||||
placeholder="Bengaluru"
|
||||
value={value.addressCity}
|
||||
onChange={(v) => patch({ addressCity: v })}
|
||||
/>
|
||||
<Input
|
||||
label="State"
|
||||
placeholder="Karnataka"
|
||||
value={value.addressState}
|
||||
onChange={(v) => patch({ addressState: v })}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label="Postcode"
|
||||
placeholder="560034"
|
||||
value={value.addressPostcode}
|
||||
onChange={(v) => patch({ addressPostcode: 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="branch@hospital.com"
|
||||
value={value.email}
|
||||
onChange={(v) => patch({ email: v })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Visiting hours</p>
|
||||
<Input
|
||||
label="Weekdays"
|
||||
placeholder="9:00 AM - 6:00 PM"
|
||||
value={value.weekdayHours}
|
||||
onChange={(v) => patch({ weekdayHours: v })}
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Saturday"
|
||||
placeholder="9:00 AM - 2:00 PM"
|
||||
value={value.saturdayHours}
|
||||
onChange={(v) => patch({ saturdayHours: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Sunday"
|
||||
placeholder="Closed"
|
||||
value={value.sundayHours}
|
||||
onChange={(v) => patch({ sundayHours: v })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-quaternary">Booking policy</p>
|
||||
<div className="flex flex-col gap-3 rounded-lg border border-secondary bg-secondary p-4">
|
||||
<Toggle
|
||||
label="Walk-ins allowed"
|
||||
isSelected={value.walkInAllowed}
|
||||
onChange={(checked) => patch({ walkInAllowed: checked })}
|
||||
/>
|
||||
<Toggle
|
||||
label="Accept online bookings"
|
||||
isSelected={value.onlineBooking}
|
||||
onChange={(checked) => patch({ onlineBooking: checked })}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Input
|
||||
label="Cancel window (hours)"
|
||||
type="number"
|
||||
value={value.cancellationWindowHours}
|
||||
onChange={(v) => patch({ cancellationWindowHours: v })}
|
||||
/>
|
||||
<Input
|
||||
label="Arrive early (min)"
|
||||
type="number"
|
||||
value={value.arriveEarlyMin}
|
||||
onChange={(v) => patch({ arriveEarlyMin: v })}
|
||||
/>
|
||||
</div>
|
||||
<TextArea
|
||||
label="Required documents"
|
||||
placeholder="ID proof, referral letter, previous reports..."
|
||||
value={value.requiredDocuments}
|
||||
onChange={(v) => patch({ requiredDocuments: v })}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user