Page Template

---
title: "Feature Name"
description: "One sentence explaining the feature."
---

# Feature Name

## Real-World Example

Use a concrete story. Include who is using the portal, what changes, and what the system should do next.

## Visual Flow

```mermaid placement="top-right" actions={true}
flowchart TD
    A["Actor starts action"] --> B["System processes request"]
    B --> C{"Rule check"}
    C -->|Pass| D["Successful outcome"]
    C -->|Fail| E["Blocked or failed outcome"]
    classDef default fill:#F8FAFC,stroke:#64748B,stroke-width:1.5px,color:#0F172A;
    classDef actor fill:#E0F2FE,stroke:#0284C7,stroke-width:2px,color:#0C4A6E;
    classDef system fill:#F8FAFC,stroke:#64748B,stroke-width:1.5px,color:#0F172A;
    classDef decision fill:#FEF3C7,stroke:#D97706,stroke-width:2px,color:#78350F;
    classDef risk fill:#FEE2E2,stroke:#DC2626,stroke-width:2px,color:#7F1D1D;
    classDef outcome fill:#DCFCE7,stroke:#16A34A,stroke-width:2px,color:#14532D;
    class A actor;
    class B system;
    class C decision;
    class D outcome;
    class E risk;
    linkStyle default stroke:#94A3B8,stroke-width:2px;
```

## How It Should Work

- Add the expected behavior.
- Keep bullets concrete.
- Mention role, account, payment, status, or communication effects when relevant.

## How It Should Not Work

- Add unsafe behavior.
- Add data leakage risks.
- Add payment, duplicate, or wrong-status risks when relevant.

## Developer Notes

- Optional. Use only when implementation behavior needs extra warning.

## Related App Areas

- Optional. Add source hints, not deep technical explanation.