Team & Surgeons

Your clinical staff and lead surgeons, with invitations and member management.

<!-- GENERATED FILE. Do not edit by hand. Source: components/help/content/. Run npm run gen:docs. -->

Purpose & Business Context

Team & Surgeons is the clinic's roster. The named surgeon is one of the most reassuring things a cross-border patient can see, so this screen lets the clinic showcase its lead surgeons and clinical staff, invite new members, and keep the roster current.

Commercially the team is part of the clinic's credibility. Experienced, specialised surgeons with strong volumes (for example 1,200+ CABG per year) directly support the trust a patient needs before booking surgery abroad.

Screen Overview

A header shows active and invited counts and an Invite member button. Below sits a responsive grid of member cards, each with an avatar, name, role, specialty, experience, a highlight and a status Badge. Inviting opens a small modal; members can be removed with a trash button.

The demo roster includes Dr. Anand Menon (Sr. Cardiothoracic Surgeon), Dr. Suresh Rao and Dr. Lakshmi Iyer as active, and Dr. Priya Menon as invited.

Controls & Components

• Status counts: an 'active' Badge and an 'invited' Badge summarising the roster.
• Invite member button: opens a modal to add a new member.
• Member cards: avatar, name, role, an optional specialty Badge, experience with a clock icon, a highlight with an award icon, and a status Badge (Active green, Invited amber).
• Remove (trash) button: removes a member from the roster (with a toast).
• Invite modal: Full name, Email and Role fields; Send invitation is disabled until name and email are filled and adds the person as Invited.

Field Definitions

• Name / Role: The member and their title, for example Dr. Anand Menon, Sr. Cardiothoracic Surgeon.
• Specialty: The member's clinical area (for example Cardiac Surgery), shown as a Badge when present.
• Experience: Years of practice, for example '22 yrs', shown with a clock icon.
• Highlight: A standout fact such as volume ('1,200+ CABG / yr') or focus; newly invited members read 'Invitation pending'.
• Status: Active (green) for confirmed members, or Invited (amber) for those who have not yet accepted.

User Actions & Workflows

1. Review the roster grid and the active/invited counts at the top.
2. Press Invite member to open the modal.
3. Enter the person's full name, email and role; Send invitation becomes available once name and email are present.
4. Submit to add them as an Invited member (a toast confirms) until they accept.
5. Remove a member who has left with the trash button on their card.

Navigation & Relationships

Reached from: the sidebar Team item and the dashboard's Manage team quick link.

Supports: the Cases board and Profile, since the surgeons listed here are the staff delivering the clinic's active cases and underpinning its public credibility.

Mirrors: the Onboarding wizard's team step, which collects lead surgeons and key staff when the clinic first joins.

Business Rules & Constraints

• Clinic-only screen; gated by RequireAuth with role "clinic".
• Send invitation is disabled until both a name and an email are entered.
• A newly invited member is added with status Invited and a 'Invitation pending' highlight; initials are derived from the name.
• The roster lives in local state in the prototype: invites and removals persist for the session and reset on reload.
• Removing a member is immediate and confirmed by a toast (no undo in the prototype).

Data Dependencies

Seeds from clinicTeam in lib/data (backed by data/clinicTeam.json). Invites append a locally generated member; the active and invited counts are derived from the current roster.

• clinicTeam: the seeded roster (name, role, specialty, experience, highlight, status)
• local members state: the per-session roster after invites and removals
• useToast: invite and removal confirmations

Error Handling & Edge Cases

• Invalid invite: the Send invitation button stays disabled until name and email are both non-empty.
• Missing details: invited members have placeholder specialty and experience (a dash), so those Badges are hidden until filled.
• Initials fallback: if a name yields no initials, a '?' avatar is used.
• Closing the invite modal via the scrim or X cancels without adding anyone.
• Mobile: the member grid reflows to a single column.

User Roles & Permissions

• Clinic admin: Manages the roster: invite new members, remove members and curate how surgeons are presented.
• Clinic staff: Can view the roster. In this prototype the invite and remove controls are present for all; in production, membership changes are typically restricted to admins.
• Patient / other roles: No access to the console roster. Patients see individual surgeon credentials in the patient app's Care Plan, not the clinic's team list.

Related Features & Functionalities

The Cases board (the surgeons here deliver those cases), the Profile screen (team credibility supports the public listing), the patient app's Care Plan (which surfaces the operating surgeon), and the Onboarding wizard's team step.

Flow & Screenshots

flowchart LR
  Team[Team & Surgeons] --> Grid[Member grid]
  Team -->|Invite member| Modal[Invite modal]
  Modal -->|Send invitation| Invited[New member: Invited]
  Grid -->|trash| Remove[Member removed]

Guided Walkthrough Steps

The in-app walkthrough for this screen has 6 steps (auto-advances every 5 seconds; Prev / Pause / Next; click outside to exit):

1. Team & Surgeons ([data-tour="nav.team"])

Your clinical staff and lead surgeons. You are on the Team tab now.

1. Invite a member ([data-tour="team.invite"])

Add a surgeon or staff member by name, email and role. They join as Invited until they accept.

1. Your roster ([data-tour="team.grid"])

Each card shows a member's role, specialty, experience and a highlight, with an Active or Invited badge. Remove a member with the trash icon.

1. The team delivers cases ([data-tour="nav.cases"])

The surgeons listed here are the people treating the patients on your Cases board.

1. Team builds credibility ([data-tour="nav.profile"])

A strong, experienced team supports the trust patients look for on your public profile.

1. Help is always here ([data-tour="topbar.help"])

Open Help on any console screen for documentation, or press Play to replay this walkthrough.