Home/Patterns/Settings

Settings

A two-column shell inside the app shell: a 240 px section rail on the left, content column on the right. Five compositions for the most common settings surfaces.

Stable 5 compositions
COMPOSITION 01

Workspace general

Workspace name, time zone, branding, default site. Simple row-style controls.

Use whenFirst-touch setting — admins land here to confirm their workspace identity.

General

Workspace name
The name everyone sees in the org switcher.
Time zone
All timestamps render in this zone.
Default site
Where new sessions land.
Fiscal year start
Used by accounting and payroll.
COMPOSITION 02

Members & roles

List-style settings page. A toolbar with an Invite action, then a table of members. The role is the only thing the admin edits inline.

Use whenManaging who has access to what. Adding new operators, changing roles, removing departed staff.

Members

MemberRoleSitesLast active
RMRobert Mukamba
robert@mukamba.co
Owner5 sitesToday
MNMai Ndlovu
mai@trinity.co.zw
BursarTrinity College2 h ago
FMFaith Moyo
faith@mukamba.co
CashierPark CentreNow
SKStanford Kuda
stanford@mazowe.com
Plant managerMazoweYesterday
COMPOSITION 03

Billing & plan

Card-based layout for plan info, payment method, invoice history. Dense numerical right column.

Use whenSelf-serve billing — admins managing their subscription, payment method, and invoice receipts.

Billing

Operator plan
$ 129 / month · 5 sites
Next charge 1 July 2026

Invoices

JUN 2026$ 129.00● PaidDownload PDF
MAY 2026$ 129.00● PaidDownload PDF
APR 2026$ 129.00● PaidDownload PDF
MAR 2026$ 87.00● Paid · proratedDownload PDF
COMPOSITION 04

API keys

A list of credentials with an inline create flow. The new-key dialog reveals the key once; thereafter it stays masked.

Use whenIntegrations panel — connecting external systems, granting scoped access, rotating credentials.

API keys

Use these to authorise external integrations. Rotate at least every 90 days.

Live · POS sync
huchu_live_sk_••••8b4f
Created 14 Mar · last used 2 m ago
Active
Live · Analytics
huchu_live_sk_••••cf21
Created 28 Feb · last used yesterday
Active
Test · CI/CD
huchu_test_sk_••••7d33
Created 10 Apr · last used 14 d ago
Idle
COMPOSITION 05

Branding & appearance

Logo upload, brand color, default theme. Heavy on previews — each row shows what the change looks like.

Use whenCustomising the workspace identity. Less frequent than other settings, but high-stakes when used.

Branding

Workspace logo
Appears in the org switcher and on printed receipts. PNG or SVG, square.
Mukamba Group
Brand color
Used for the org-switcher tile and accent tones in reports.

Shared rules

What every composition obeys.

Do

Break long settings into multiple pages. The rail is the map; content is one page deep.

Don't

Hide destructive actions inside a normal row. Put them on their own page with a confirmation.

Do

Save changes inline — settings should never need a sticky "Unsaved" bar.

Don't

Show every setting to every role. Filter by what their role can edit.