Account

Your profile, editable contact details and a read-only case summary.

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

Purpose & Business Context

The Account screen is the patient's identity hub: who they are on the platform, how the team reaches them, and a snapshot of their case. Keeping contact details and the travel attendant current matters in medical travel, where a missed call or wrong language preference can delay care.

It also serves as a quiet trust surface, confirming the patient is verified, their data is protected, and pointing them to Settings for alerts and security. That reassurance supports retention at the account level.

Screen Overview

A profile header card (avatar, name, origin, case id and status badges, with Settings and Sign out buttons), then two cards side by side: editable Contact details and a read-only Your case summary. A footer card reassures that data is protected and links to Settings.

For the demo patient this shows Yusuf Al-Rashid, Muscat, Oman, case GC-20418, Cardiac Surgery, with a verified-patient badge.

Controls & Components

• Profile header: avatar, name, flag and origin, case id, specialty and verified-patient badges, plus Settings and Sign out buttons.
• Contact details card: Email, Phone, Travel attendant and Preferred language, with an Edit / Save toggle that turns fields into inputs.
• Your case card: read-only Treatment, Hospital, Surgeon, Surgery date and Corridor, with a View care plan link.
• Data-protection footer: a reassurance that records and payments are encrypted and audit-logged, linking to Settings.

Field Definitions

• Email / Phone: The patient's contact details, editable in place when Edit is active.
• Travel attendant: The accompanying person (e.g. Fatima Al-Rashid, spouse); editable.
• Preferred language: The language driving interpreters (e.g. Arabic); editable.
• Case id: The case / file number surfaced throughout the app (GC-20418).
• Your case fields: Read-only Treatment, Hospital, Surgeon, Surgery date and Corridor, mirroring the care record.

User Actions & Workflows

1. Review your profile header to confirm your identity and case number.
2. Press Edit on Contact details to make the fields editable.
3. Update your email, phone, travel attendant or preferred language.
4. Press Save to confirm; a toast acknowledges 'Profile updated'.
5. Use View care plan to jump to your clinical plan, or Settings / Sign out from the header.

Navigation & Relationships

Reached from: the Account item in the top-bar account menu.

Leads to: Settings (/portal/settings) from the header and footer, the Care Plan (/portal/care) from View care plan, and the sign-in screen on Sign out.

Mirrors: the patient and case data used across the portal (the same patient record powers the Journey, Care Plan and Visa screens).

Business Rules & Constraints

• Contact details are editable; the case summary is strictly read-only on this screen.
• Edits are held in local state and confirmed with a toast in this prototype (no server write).
• Sign out clears the session and routes to the sign-in screen.
• Records and payments are described as encrypted and audit-logged.
• Patient-only screen within the portal.

Data Dependencies

Reads the patient record from lib/data for the header and case summary, and useAuth().signOut for the sign-out action. The contact form seeds from the patient's attendant and language plus demo email and phone values.

• patient: name, origin, case id, treatment, hospital, surgeon, surgery date, corridor
• useAuth(): sign-out handling
• local form state: editable contact details

Error Handling & Edge Cases

• Saving always succeeds in the prototype and shows a confirmation toast.
• Cancelling is implicit: leaving edit mode without Save keeps the last saved values on the next render.
• The case summary cannot be edited here, preventing accidental changes to clinical facts.
• Mobile: the header wraps and the two cards stack into a single column.

User Roles & Permissions

• Patient: Can edit their own contact details, view their case summary, reach Settings and the Care Plan, and sign out.
• Care team (out of scope here): Maintains the clinical case facts shown read-only here.

Related Features & Functionalities

Settings (alerts and security), the Care Plan (clinical detail), and the shared patient record that powers the Journey, Visa and Payments screens. The data-protection note echoes the security messaging across the app.

Flow & Screenshots

flowchart LR
  Account[Account] --> Header[Profile header]
  Account --> Contact[Contact details]
  Contact -->|Edit then Save| Saved[Profile updated]
  Account --> Case[Your case summary]
  Case -->|View care plan| Care[Care Plan]
  Header -->|Settings| Settings[Settings]
  Header -->|Sign out| SignIn[Sign in]

Guided Walkthrough Steps

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

1. Your account ([data-tour="topbar.account"])

Your avatar sits in the top-right of every screen. Open it for a quick menu: Account, Settings and Log out.

1. Your profile ([data-tour="account.header"])

Your name, origin and case number, with your verified-patient status. Quick links to Settings and Sign out sit on the right.

1. Contact details ([data-tour="account.contact"])

Press Edit to update your email, phone, travel attendant and preferred language, then Save. Keeping these current helps your team reach you.

1. Your case ([data-tour="account.case"])

A read-only summary of your treatment, hospital, surgeon, date and corridor. Use View care plan to see the full clinical detail.

1. Need a hand? ([data-tour="topbar.help"])

Open Help on any screen for documentation, or replay a walkthrough like this one.