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:
331
src/pages/clinics.tsx
Normal file
331
src/pages/clinics.tsx
Normal file
@@ -0,0 +1,331 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faBuilding, faPlus, faPenToSquare } from '@fortawesome/pro-duotone-svg-icons';
|
||||
import { Button } from '@/components/base/buttons/button';
|
||||
import { Badge } from '@/components/base/badges/badges';
|
||||
import { Table, TableCard } from '@/components/application/table/table';
|
||||
import { SlideoutMenu } from '@/components/application/slideout-menus/slideout-menu';
|
||||
import { TopBar } from '@/components/layout/top-bar';
|
||||
import {
|
||||
ClinicForm,
|
||||
clinicFormToGraphQLInput,
|
||||
emptyClinicFormValues,
|
||||
type ClinicFormValues,
|
||||
type ClinicStatus,
|
||||
} from '@/components/forms/clinic-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { notify } from '@/lib/toast';
|
||||
import { markSetupStepComplete } from '@/lib/setup-state';
|
||||
|
||||
// /settings/clinics — list + add/edit slideout for the clinic entity. Uses the
|
||||
// platform GraphQL API directly; there's no wrapping hook because this is the
|
||||
// only consumer of clinics CRUD (the call desk uses a read-only doctors
|
||||
// query and bypasses clinics entirely).
|
||||
|
||||
type Clinic = {
|
||||
id: string;
|
||||
clinicName: string | null;
|
||||
status: ClinicStatus | null;
|
||||
addressCustom: {
|
||||
addressStreet1: string | null;
|
||||
addressStreet2: string | null;
|
||||
addressCity: string | null;
|
||||
addressState: string | null;
|
||||
addressPostcode: string | null;
|
||||
} | null;
|
||||
phone: { primaryPhoneNumber: string | null } | null;
|
||||
email: { primaryEmail: string | null } | null;
|
||||
weekdayHours: string | null;
|
||||
saturdayHours: string | null;
|
||||
sundayHours: string | null;
|
||||
walkInAllowed: boolean | null;
|
||||
onlineBooking: boolean | null;
|
||||
cancellationWindowHours: number | null;
|
||||
arriveEarlyMin: number | null;
|
||||
requiredDocuments: string | null;
|
||||
};
|
||||
|
||||
const CLINICS_QUERY = `{
|
||||
clinics(first: 100) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
clinicName
|
||||
status
|
||||
addressCustom {
|
||||
addressStreet1 addressStreet2 addressCity addressState addressPostcode
|
||||
}
|
||||
phone { primaryPhoneNumber }
|
||||
email { primaryEmail }
|
||||
weekdayHours saturdayHours sundayHours
|
||||
walkInAllowed onlineBooking
|
||||
cancellationWindowHours arriveEarlyMin
|
||||
requiredDocuments
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const toFormValues = (clinic: Clinic): ClinicFormValues => ({
|
||||
clinicName: clinic.clinicName ?? '',
|
||||
addressStreet1: clinic.addressCustom?.addressStreet1 ?? '',
|
||||
addressStreet2: clinic.addressCustom?.addressStreet2 ?? '',
|
||||
addressCity: clinic.addressCustom?.addressCity ?? '',
|
||||
addressState: clinic.addressCustom?.addressState ?? '',
|
||||
addressPostcode: clinic.addressCustom?.addressPostcode ?? '',
|
||||
phone: clinic.phone?.primaryPhoneNumber ?? '',
|
||||
email: clinic.email?.primaryEmail ?? '',
|
||||
weekdayHours: clinic.weekdayHours ?? '',
|
||||
saturdayHours: clinic.saturdayHours ?? '',
|
||||
sundayHours: clinic.sundayHours ?? '',
|
||||
status: clinic.status ?? 'ACTIVE',
|
||||
walkInAllowed: clinic.walkInAllowed ?? true,
|
||||
onlineBooking: clinic.onlineBooking ?? true,
|
||||
cancellationWindowHours: clinic.cancellationWindowHours != null ? String(clinic.cancellationWindowHours) : '',
|
||||
arriveEarlyMin: clinic.arriveEarlyMin != null ? String(clinic.arriveEarlyMin) : '',
|
||||
requiredDocuments: clinic.requiredDocuments ?? '',
|
||||
});
|
||||
|
||||
const statusLabel: Record<ClinicStatus, string> = {
|
||||
ACTIVE: 'Active',
|
||||
TEMPORARILY_CLOSED: 'Temporarily closed',
|
||||
PERMANENTLY_CLOSED: 'Permanently closed',
|
||||
};
|
||||
|
||||
const statusColor: Record<ClinicStatus, 'success' | 'warning' | 'gray'> = {
|
||||
ACTIVE: 'success',
|
||||
TEMPORARILY_CLOSED: 'warning',
|
||||
PERMANENTLY_CLOSED: 'gray',
|
||||
};
|
||||
|
||||
export const ClinicsPage = () => {
|
||||
const [clinics, setClinics] = useState<Clinic[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [slideoutOpen, setSlideoutOpen] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState<Clinic | null>(null);
|
||||
const [formValues, setFormValues] = useState<ClinicFormValues>(emptyClinicFormValues);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
const fetchClinics = useCallback(async () => {
|
||||
try {
|
||||
const data = await apiClient.graphql<{ clinics: { edges: { node: Clinic }[] } }>(CLINICS_QUERY);
|
||||
setClinics(data.clinics.edges.map((e) => e.node));
|
||||
} catch {
|
||||
// toast already shown by apiClient
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchClinics();
|
||||
}, [fetchClinics]);
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditTarget(null);
|
||||
setFormValues(emptyClinicFormValues());
|
||||
setSlideoutOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (clinic: Clinic) => {
|
||||
setEditTarget(clinic);
|
||||
setFormValues(toFormValues(clinic));
|
||||
setSlideoutOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async (close: () => void) => {
|
||||
if (!formValues.clinicName.trim()) {
|
||||
notify.error('Clinic name is required');
|
||||
return;
|
||||
}
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const input = clinicFormToGraphQLInput(formValues);
|
||||
if (editTarget) {
|
||||
await apiClient.graphql(
|
||||
`mutation UpdateClinic($id: UUID!, $data: ClinicUpdateInput!) {
|
||||
updateClinic(id: $id, data: $data) { id }
|
||||
}`,
|
||||
{ id: editTarget.id, data: input },
|
||||
);
|
||||
notify.success('Clinic updated', `${formValues.clinicName} has been updated.`);
|
||||
} else {
|
||||
await apiClient.graphql(
|
||||
`mutation CreateClinic($data: ClinicCreateInput!) {
|
||||
createClinic(data: $data) { id }
|
||||
}`,
|
||||
{ data: input },
|
||||
);
|
||||
notify.success('Clinic added', `${formValues.clinicName} has been added.`);
|
||||
// First clinic added unblocks the wizard's clinics step. Failures
|
||||
// here are silent — the badge will just be stale until next load.
|
||||
markSetupStepComplete('clinics').catch(() => {});
|
||||
}
|
||||
await fetchClinics();
|
||||
close();
|
||||
} catch (err) {
|
||||
console.error('[clinics] save failed', err);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const activeCount = useMemo(() => clinics.filter((c) => c.status === 'ACTIVE').length, [clinics]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<TopBar title="Clinics" subtitle="Manage hospital branches and visiting hours" />
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<TableCard.Root size="sm">
|
||||
<TableCard.Header
|
||||
title="Clinic branches"
|
||||
badge={clinics.length}
|
||||
description={`${activeCount} active`}
|
||||
contentTrailing={
|
||||
<Button
|
||||
size="sm"
|
||||
color="primary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faPlus} className={className} />
|
||||
)}
|
||||
onClick={handleAdd}
|
||||
>
|
||||
Add clinic
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<p className="text-sm text-tertiary">Loading clinics...</p>
|
||||
</div>
|
||||
) : clinics.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center gap-3 py-16">
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-brand-secondary">
|
||||
<FontAwesomeIcon icon={faBuilding} className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<p className="text-sm font-semibold text-primary">No clinics yet</p>
|
||||
<p className="max-w-xs text-center text-xs text-tertiary">
|
||||
Add your first clinic branch to start booking appointments and assigning doctors.
|
||||
</p>
|
||||
<Button size="sm" color="primary" onClick={handleAdd}>
|
||||
Add clinic
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<Table.Header>
|
||||
<Table.Head label="NAME" isRowHeader />
|
||||
<Table.Head label="ADDRESS" />
|
||||
<Table.Head label="CONTACT" />
|
||||
<Table.Head label="HOURS" />
|
||||
<Table.Head label="STATUS" />
|
||||
<Table.Head label="" />
|
||||
</Table.Header>
|
||||
<Table.Body items={clinics}>
|
||||
{(clinic) => {
|
||||
const addressLine = [
|
||||
clinic.addressCustom?.addressStreet1,
|
||||
clinic.addressCustom?.addressCity,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(', ');
|
||||
const status = clinic.status ?? 'ACTIVE';
|
||||
return (
|
||||
<Table.Row id={clinic.id}>
|
||||
<Table.Cell>
|
||||
<span className="text-sm font-medium text-primary">
|
||||
{clinic.clinicName ?? 'Unnamed clinic'}
|
||||
</span>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<span className="text-sm text-tertiary">{addressLine || '—'}</span>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm text-primary">
|
||||
{clinic.phone?.primaryPhoneNumber ?? '—'}
|
||||
</span>
|
||||
<span className="text-xs text-tertiary">
|
||||
{clinic.email?.primaryEmail ?? ''}
|
||||
</span>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<span className="text-xs text-tertiary">
|
||||
{clinic.weekdayHours ?? 'Not set'}
|
||||
</span>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Badge size="sm" color={statusColor[status]} type="pill-color">
|
||||
{statusLabel[status]}
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Button
|
||||
size="sm"
|
||||
color="secondary"
|
||||
iconLeading={({ className }: { className?: string }) => (
|
||||
<FontAwesomeIcon icon={faPenToSquare} className={className} />
|
||||
)}
|
||||
onClick={() => handleEdit(clinic)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
);
|
||||
}}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
)}
|
||||
</TableCard.Root>
|
||||
</div>
|
||||
|
||||
<SlideoutMenu isOpen={slideoutOpen} onOpenChange={setSlideoutOpen} isDismissable>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<SlideoutMenu.Header onClose={close}>
|
||||
<div className="flex items-center gap-3 pr-8">
|
||||
<div className="flex size-10 items-center justify-center rounded-lg bg-brand-secondary">
|
||||
<FontAwesomeIcon icon={faBuilding} className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-primary">
|
||||
{editTarget ? 'Edit clinic' : 'Add clinic'}
|
||||
</h2>
|
||||
<p className="text-sm text-tertiary">
|
||||
{editTarget
|
||||
? 'Update branch details, hours, and policy'
|
||||
: 'Add a new hospital branch'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SlideoutMenu.Header>
|
||||
|
||||
<SlideoutMenu.Content>
|
||||
<ClinicForm value={formValues} onChange={setFormValues} />
|
||||
</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(close)}
|
||||
>
|
||||
{isSaving ? 'Saving...' : editTarget ? 'Save changes' : 'Add clinic'}
|
||||
</Button>
|
||||
</div>
|
||||
</SlideoutMenu.Footer>
|
||||
</>
|
||||
)}
|
||||
</SlideoutMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user