Documents Wallet

A secure wallet for your identity, medical, visa, financial and travel documents.

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

Purpose & Business Context

The Documents Wallet is the single secure place a patient gathers everything a cross-border case needs: passport, medical reports, visa paperwork, bank statements and travel tickets. It removes the email-attachment chaos that usually surrounds medical travel and gives the patient a clear sense of what is verified and what still needs action.

Operationally it is the keystone that unlocks downstream steps. Verifying a pending document mutates shared state, which is exactly what unlocks the Submit application gate on the Visa screen, so this wallet is where stalled cases get moving again.

Screen Overview

Three summary stat tiles sit at the top (Total documents, Verified, Action needed). Below them, a single card holds a row of type filters, an Upload button, and the document list. Each row shows the document, its type badge, size and date, and either a Verified state with download, or an Upload action when pending.

Uploading opens a modal that simulates a tap-to-choose, an encrypted upload, and a verified confirmation, then closes itself.

Controls & Components

• Stat tiles (×3): Total documents, Verified, and Action needed, computed live from the wallet.
• Type filters: All, Identity, Medical, Visa, Financial, Travel; the active chip is filled teal.
• Upload button: opens the upload modal to add a new document to the wallet.
• Document rows: name, a colour-coded type badge, size and date; verified rows show a Verified label and a download icon, pending rows show an amber Upload button.
• Upload modal: a three-phase flow (pick, uploading, done) with an 'Encrypted end-to-end' note and an auto-close on success.

Field Definitions

• Total documents: The count of all documents in the wallet.
• Verified: Documents whose status is verified.
• Action needed: Documents still pending upload or verification (total minus verified).
• Type: The document category, each with its own badge tone: Identity (blue), Medical (rose), Visa (amber), Financial (teal), Travel (green).
• Status: Either verified (Verified label plus download) or pending (Upload action; dashed amber tile).
• Size / Date: The file size label and the upload or due date, e.g. a real size and date once uploaded, or a due hint while pending.

User Actions & Workflows

1. Scan the three stat tiles to see how many documents still need action.
2. Filter by type (for example Financial) to find a specific document quickly.
3. Press the row's Upload button for a pending document, or the top Upload button to add a new one.
4. In the modal, tap to choose a file; watch the encrypted upload and the Verified confirmation, then the modal closes itself.
5. For verified documents, use the download icon to retrieve a copy.

Navigation & Relationships

Reached from: the sidebar Docs item, the Journey 'Documents' status tile, and every pending item's Upload button on the Visa screen.

Unlocks: the Visa Submit application gate. Verifying a document here updates the shared docs state that the Visa checklist reads.

Mirrored by: the Journey dashboard, whose documents tile summarises verified over required counts.

Business Rules & Constraints

• Uploads are accepted as PDF, JPG or PNG up to 10 MB (stated in the modal).
• Uploading a required document also verifies it in this prototype, immediately updating the stat tiles and any linked visa checklist item.
• Documents are described as encrypted end-to-end during upload.
• The Action needed count is derived (total minus verified) and is not directly editable.
• Patient-only screen within the portal.

Data Dependencies

Reads and mutates the live docs state from PortalProvider (seeded from documents in lib/data). The upload modal calls uploadDoc(id) to flip a document to verified, which is the same state the Visa checklist consumes.

• docs (PortalProvider): the live wallet, seeded from documents
• uploadDoc(id): verifies a document on upload
• Document type and status: drive badges, counts and the row state

Error Handling & Edge Cases

• Empty filter: selecting a type with no documents simply shows an empty list under that chip.
• Upload feedback: each upload confirms with a toast and an in-modal Verified state before auto-closing.
• Closing mid-upload: clicking the scrim or the X dismisses the modal; a completed verify persists.
• Mobile: the stat tiles and filter chips wrap; the document rows remain full width.

User Roles & Permissions

• Patient: Can view, filter, upload and download their own documents. Verification happens as part of upload in this prototype.
• Coordinator / reviewer (out of scope here): Would verify or reject documents server-side in production; the patient sees the resulting status.

Related Features & Functionalities

The Visa screen (which depends on this wallet's state), the Journey documents tile, the Care Plan (where medical opinions and estimates originate), and the security messaging echoed in Account and Settings. The shared state model ties uploads to downstream gates.

Flow & Screenshots

flowchart LR
  Docs[Documents Wallet] --> Stats[Stat tiles]
  Docs --> Filters[Type filters]
  Docs --> List[Document list]
  List -->|Upload| Modal[Upload modal]
  Modal -->|verified| List
  List -->|verified doc| Visa[Unlocks Visa submit]

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. Documents Wallet ([data-tour="nav.docs"])

Your secure home for every document your case needs. You are on the Docs tab now.

1. At a glance ([data-tour="docs.stats"])

Total documents, how many are verified, and how many still need action, all computed live.

1. Filter by type ([data-tour="docs.filters"])

Jump straight to Identity, Medical, Visa, Financial or Travel documents. All is selected by default.

1. Add a document ([data-tour="docs.upload"])

Upload a new file to your wallet. The modal walks you through choosing a file and verifying it, all encrypted end to end.

1. Your documents ([data-tour="docs.list"])

Each row shows the type, size and date. Verified files offer a download; pending ones show an Upload button. Verifying a required document here can unlock your visa submission.