saturation/uiApp Illustration: Saturation Pay
Browser-chrome mockup of the Saturation Pay funds management app with dual sidebars, balance panel, sparkline chart, project allocations, and transaction history.
next.saturation.io/york-workspace/funds/
Y
FL
FL
16 Apr23 Apr24 AprMay
Features
- Dual sidebars — Icon-only sidebar plus text navigation sidebar with active state
- Funds panel — Balance figure, Move Money and Deposit buttons, masked bank details
- Sparkline chart — Indigo area chart with gentle upward trend and tooltip dot
- Project allocations — 4-column grid of project cards with color-coded spend bars
- Transaction history — 22-row transaction feed with status badges and project color chips
- Customizable branding — Workspace logo, name, and user avatar all configurable via props
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| workspaceName | string | - | Workspace name shown in the sidebar and URL bar |
| workspaceLogoSrc | string | null | - | URL for the workspace logo image |
| firstName | string | - | User first name (used for avatar initials fallback) |
| lastName | string | - | User last name (used for avatar initials fallback) |
| avatarSrc | string | null | - | URL for the user avatar image |