mirror of
https://dev.azure.com/globalhealthx/EMR/_git/helix-engage
synced 2026-04-12 02:38:15 +00:00
feat(onboarding/phase-6): setup wizard polish, seed script alignment, doctor visit slots
- Setup wizard: 3-pane layout with right-side live previews, resume banner, edit/copy icons on team step, AI prompt configuration - Forms: employee-create replaces invite-member (no email invites), clinic form with address/hours/payment, doctor form with visit slots - Seed script: aligned to current SDK schema — doctors created as workspace members (HelixEngage Manager role), visitingHours replaced by doctorVisitSlot entity, clinics seeded, portalUserId linked dynamically, SUB/ORIGIN/GQL configurable via env vars - Pages: clinics + doctors CRUD updated for new schema, team settings with temp password + role assignment - New components: time-picker, day-selector, wizard-right-panes, wizard-layout-context, resume-setup-banner - Removed: invite-member-form (replaced by employee-create-form per no-email-invites rule) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -9,25 +9,21 @@ 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 {
|
||||
InviteMemberForm,
|
||||
type InviteMemberFormValues,
|
||||
EmployeeCreateForm,
|
||||
emptyEmployeeCreateFormValues,
|
||||
type EmployeeCreateFormValues,
|
||||
type RoleOption,
|
||||
} from '@/components/forms/invite-member-form';
|
||||
} from '@/components/forms/employee-create-form';
|
||||
import { apiClient } from '@/lib/api-client';
|
||||
import { notify } from '@/lib/toast';
|
||||
import { getInitials } from '@/lib/format';
|
||||
import { markSetupStepComplete } from '@/lib/setup-state';
|
||||
|
||||
// /settings/team — Phase 3 rewrite. The Phase 2 version was read-only and
|
||||
// inferred roles from the email string; this version:
|
||||
// 1. Fetches real roles via getRoles (platform mutation).
|
||||
// 2. Fetches workspace members WITH their role assignments so the listing
|
||||
// shows actual roles.
|
||||
// 3. Lets admins invite via sendInvitations (multi-email).
|
||||
// 4. Lets admins change a member's role via updateWorkspaceMemberRole.
|
||||
//
|
||||
// Invitations mark the setup-state `team` step complete on first success so
|
||||
// the wizard can advance.
|
||||
// /settings/team — in-place employee management. Fetches real roles + SIP
|
||||
// seats from the platform and uses the sidecar's /api/team/members
|
||||
// endpoint to create workspace members directly with a temp password
|
||||
// that the admin hands out (no email invitations — see
|
||||
// feedback-no-invites in memory). Also lets admins change a member's
|
||||
// role via updateWorkspaceMemberRole.
|
||||
|
||||
type MemberRole = {
|
||||
id: string;
|
||||
@@ -39,10 +35,22 @@ type WorkspaceMember = {
|
||||
name: { firstName: string; lastName: string } | null;
|
||||
userEmail: string;
|
||||
avatarUrl: string | null;
|
||||
roles: MemberRole[];
|
||||
// Platform returns null (not []) for members with no role assigned —
|
||||
// optional-chain when reading.
|
||||
roles: MemberRole[] | null;
|
||||
};
|
||||
|
||||
const MEMBERS_QUERY = `{
|
||||
type CreatedMemberResponse = {
|
||||
id: string;
|
||||
userEmail: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
roleId: string;
|
||||
};
|
||||
|
||||
// Combined query — workspace members + assignable roles. Bundled to
|
||||
// save a round-trip and keep the table consistent across the join.
|
||||
const TEAM_QUERY = `{
|
||||
workspaceMembers(first: 100) {
|
||||
edges {
|
||||
node {
|
||||
@@ -54,9 +62,6 @@ const MEMBERS_QUERY = `{
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const ROLES_QUERY = `{
|
||||
getRoles {
|
||||
id
|
||||
label
|
||||
@@ -69,31 +74,32 @@ export const TeamSettingsPage = () => {
|
||||
const [members, setMembers] = useState<WorkspaceMember[]>([]);
|
||||
const [roles, setRoles] = useState<RoleOption[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [inviteOpen, setInviteOpen] = useState(false);
|
||||
const [inviteValues, setInviteValues] = useState<InviteMemberFormValues>({ emails: [], roleId: '' });
|
||||
const [isSending, setIsSending] = useState(false);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [createValues, setCreateValues] = useState<EmployeeCreateFormValues>(
|
||||
emptyEmployeeCreateFormValues,
|
||||
);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
const [memberData, roleData] = await Promise.all([
|
||||
apiClient.graphql<{ workspaceMembers: { edges: { node: WorkspaceMember }[] } }>(
|
||||
MEMBERS_QUERY,
|
||||
undefined,
|
||||
{ silent: true },
|
||||
),
|
||||
apiClient.graphql<{
|
||||
getRoles: { id: string; label: string; description: string | null; canBeAssignedToUsers: boolean }[];
|
||||
}>(ROLES_QUERY, undefined, { silent: true }),
|
||||
]);
|
||||
setMembers(memberData.workspaceMembers.edges.map((e) => e.node));
|
||||
const data = await apiClient.graphql<{
|
||||
workspaceMembers: { edges: { node: WorkspaceMember }[] };
|
||||
getRoles: {
|
||||
id: string;
|
||||
label: string;
|
||||
description: string | null;
|
||||
canBeAssignedToUsers: boolean;
|
||||
}[];
|
||||
}>(TEAM_QUERY, undefined, { silent: true });
|
||||
|
||||
setMembers(data.workspaceMembers.edges.map((e) => e.node));
|
||||
const assignable = data.getRoles.filter((r) => r.canBeAssignedToUsers);
|
||||
setRoles(
|
||||
roleData.getRoles
|
||||
.filter((r) => r.canBeAssignedToUsers)
|
||||
.map((r) => ({
|
||||
id: r.id,
|
||||
label: r.label,
|
||||
supportingText: r.description ?? undefined,
|
||||
})),
|
||||
assignable.map((r) => ({
|
||||
id: r.id,
|
||||
label: r.label,
|
||||
supportingText: r.description ?? undefined,
|
||||
})),
|
||||
);
|
||||
} catch {
|
||||
// silently fail
|
||||
@@ -150,38 +156,46 @@ export const TeamSettingsPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSendInvites = async (close: () => void) => {
|
||||
if (inviteValues.emails.length === 0) {
|
||||
notify.error('Add at least one email');
|
||||
const handleCreateMember = async (close: () => void) => {
|
||||
const firstName = createValues.firstName.trim();
|
||||
const email = createValues.email.trim();
|
||||
if (!firstName) {
|
||||
notify.error('First name is required');
|
||||
return;
|
||||
}
|
||||
setIsSending(true);
|
||||
if (!email) {
|
||||
notify.error('Email is required');
|
||||
return;
|
||||
}
|
||||
if (!createValues.password) {
|
||||
notify.error('Temporary password is required');
|
||||
return;
|
||||
}
|
||||
if (!createValues.roleId) {
|
||||
notify.error('Pick a role');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsCreating(true);
|
||||
try {
|
||||
await apiClient.graphql(
|
||||
`mutation SendInvitations($emails: [String!]!) {
|
||||
sendInvitations(emails: $emails) {
|
||||
success
|
||||
errors
|
||||
result {
|
||||
email
|
||||
id
|
||||
}
|
||||
}
|
||||
}`,
|
||||
{ emails: inviteValues.emails },
|
||||
);
|
||||
await apiClient.post<CreatedMemberResponse>('/api/team/members', {
|
||||
firstName,
|
||||
lastName: createValues.lastName.trim(),
|
||||
email,
|
||||
password: createValues.password,
|
||||
roleId: createValues.roleId,
|
||||
});
|
||||
notify.success(
|
||||
'Invitations sent',
|
||||
`${inviteValues.emails.length} invitation${inviteValues.emails.length === 1 ? '' : 's'} sent.`,
|
||||
'Employee created',
|
||||
`${firstName} ${createValues.lastName.trim()}`.trim() || email,
|
||||
);
|
||||
markSetupStepComplete('team').catch(() => {});
|
||||
setInviteValues({ emails: [], roleId: '' });
|
||||
setCreateValues(emptyEmployeeCreateFormValues);
|
||||
await fetchData();
|
||||
close();
|
||||
} catch (err) {
|
||||
console.error('[team] invite failed', err);
|
||||
console.error('[team] create failed', err);
|
||||
} finally {
|
||||
setIsSending(false);
|
||||
setIsCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -215,11 +229,11 @@ export const TeamSettingsPage = () => {
|
||||
<FontAwesomeIcon icon={faUserPlus} className={className} />
|
||||
)}
|
||||
onClick={() => {
|
||||
setInviteValues({ emails: [], roleId: '' });
|
||||
setInviteOpen(true);
|
||||
setCreateValues(emptyEmployeeCreateFormValues);
|
||||
setCreateOpen(true);
|
||||
}}
|
||||
>
|
||||
Invite members
|
||||
Add employee
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
@@ -244,7 +258,8 @@ export const TeamSettingsPage = () => {
|
||||
const lastName = member.name?.lastName ?? '';
|
||||
const fullName = `${firstName} ${lastName}`.trim() || 'Unnamed';
|
||||
const initials = getInitials(firstName || '?', lastName || '?');
|
||||
const currentRoleId = member.roles[0]?.id ?? null;
|
||||
const memberRoles = member.roles ?? [];
|
||||
const currentRoleId = memberRoles[0]?.id ?? null;
|
||||
|
||||
return (
|
||||
<Table.Row id={member.id}>
|
||||
@@ -284,9 +299,9 @@ export const TeamSettingsPage = () => {
|
||||
)}
|
||||
</Select>
|
||||
</div>
|
||||
) : member.roles.length > 0 ? (
|
||||
) : memberRoles.length > 0 ? (
|
||||
<Badge size="sm" color="gray">
|
||||
{member.roles[0].label}
|
||||
{memberRoles[0].label}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-xs text-quaternary">No role</span>
|
||||
@@ -344,7 +359,7 @@ export const TeamSettingsPage = () => {
|
||||
</TableCard.Root>
|
||||
</div>
|
||||
|
||||
<SlideoutMenu isOpen={inviteOpen} onOpenChange={setInviteOpen} isDismissable>
|
||||
<SlideoutMenu isOpen={createOpen} onOpenChange={setCreateOpen} isDismissable>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<SlideoutMenu.Header onClose={close}>
|
||||
@@ -353,19 +368,23 @@ export const TeamSettingsPage = () => {
|
||||
<FontAwesomeIcon icon={faUserPlus} className="size-5 text-fg-brand-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-primary">Invite members</h2>
|
||||
<h2 className="text-lg font-semibold text-primary">Add employee</h2>
|
||||
<p className="text-sm text-tertiary">
|
||||
Send invitations to supervisors, agents, and doctors
|
||||
Create supervisors, CC agents and admins in place
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</SlideoutMenu.Header>
|
||||
|
||||
<SlideoutMenu.Content>
|
||||
<InviteMemberForm value={inviteValues} onChange={setInviteValues} roles={roles} />
|
||||
<p className="text-xs text-tertiary">
|
||||
Invitees receive an email with a link to set their password. Role assignment can be changed
|
||||
from the employees table after they accept.
|
||||
<EmployeeCreateForm
|
||||
value={createValues}
|
||||
onChange={setCreateValues}
|
||||
roles={roles}
|
||||
/>
|
||||
<p className="mt-4 text-xs text-tertiary">
|
||||
The employee logs in with this email and the temporary password
|
||||
you set. Share both with them directly — no email is sent.
|
||||
</p>
|
||||
</SlideoutMenu.Content>
|
||||
|
||||
@@ -377,16 +396,11 @@ export const TeamSettingsPage = () => {
|
||||
<Button
|
||||
size="md"
|
||||
color="primary"
|
||||
isLoading={isSending}
|
||||
isLoading={isCreating}
|
||||
showTextWhileLoading
|
||||
onClick={() => handleSendInvites(close)}
|
||||
isDisabled={inviteValues.emails.length === 0}
|
||||
onClick={() => handleCreateMember(close)}
|
||||
>
|
||||
{isSending
|
||||
? 'Sending...'
|
||||
: `Send ${inviteValues.emails.length || ''} invitation${
|
||||
inviteValues.emails.length === 1 ? '' : 's'
|
||||
}`.trim()}
|
||||
{isCreating ? 'Creating…' : 'Create employee'}
|
||||
</Button>
|
||||
</div>
|
||||
</SlideoutMenu.Footer>
|
||||
|
||||
Reference in New Issue
Block a user