Admin portal

The owner's control room. Manage your plan, staff, sign-ins, and apps you connect to — from your phone or your desk. Mobile-first, dark by default.

Portal 1 shells 5 pages Production Internal only /portals/admin

Interactive demo

The whole owner app, in one file

Every page lives in one self-contained demo.html — sign in with an extra code, switch between businesses, bottom-sheet menus, and full state across 14 areas. Designed phone-first, opens great on a tablet or laptop too.

Open the demo Open fullscreen

01 · DashboardKey numbers, system health, recent activity, business summary 02 · UsersFilter, sort, change many at once, invite people 03 · Roles & what they can doPick what each role can see and change, copy a role, set the default for new invites 04 · Activity historyWho did what list, exact before/after, download, warnings 05 · BillingCompare plans, see invoices, pay with EcoCash or NMB 06 · Connections16 apps to link with, settings panel, test the connection 07 · BranchesAdd, edit, pick a main one, settings per shop 08 · Feature switchesTurn new features on or off · live changes ask for confirmation 09 · AlertsRules that send you an email, Slack message, or SMS 10 · BackupsSchedule, restore, download your data 11 · System statusWhat's working right now, problems, planned downtime 12 · API keysSecret passwords for other apps, what they can do, automatic notifications 13 · SettingsDark mode, your branding, extra security code, sign-out timer, email address 14 · Help & supportGuides, chat, raise a request with a reply time

Examples

Code alongside the demo

A KPI tile and a user table row from the admin portal, built from system components — alongside the React you would write against @corelith/design-system.

Shells

Device shells

Each portal adapts to the device the audience is using. The primary device is highlighted; the others reflow without losing functionality.

Phone

375 px+ · bottom-tab nav

Primary

Designed for the SMB owner who runs the business from their phone — single-column stacks, 44 px tap targets, bottom-sheet menus, dark by default. Reflows up to tablet and desktop without losing anything.

Pages

Designed surfaces in this portal

Each page is a real, rendered mockup at the right device width. Click any to open.

01 · DESKTOP Dashboard Key numbers, system health, business summary, last 10 activity entries. Open → 02 · DESKTOP Users & roles Staff list, filter buttons, change many at once, invite panel. Open → 03 · DESKTOP Activity history Serious-issue banner, filter row, activity list, before/after side panel. Open → 04 · DESKTOP Billing Your plan, how many staff slots you're using, next bill estimate, how you pay, list of invoices. Open → 05 · DESKTOP Connections Apps you can link with — EcoCash, NMB, OneLogin SSO, Slack, Zoho, S3, Datadog, ZIMRA. Open →

Used in this kit

Primitives, blocks & patterns

The portal composes from the same system everything else uses.

PT Data table Tight, dark version — the view across all your businesses. Docs →

Built from these recipes

Demos illustrate recipes — here are the ones this kit uses

Every flow in the admin demo is built from a Huchu cookbook recipe. Open a recipe to see the React, state machine, and edge cases behind what you just saw.

AUTHSign in with 2FAEmail + password, 6-digit OTP, resend countdown, trust-this-device.Open recipe → AUTHForgot password flowFour-stage reset — email → check inbox → set new password → success.Open recipe → SHELLSApp shell with sidebarDesktop chrome — sidebar, top bar, command palette, content area.Open recipe → SHELLSMobile bottom-tab shellFour bottom tabs, brand-pill active state, badge counts, safe-area aware.Open recipe → FORMSAutosave drawer formUser edit drawer that debounce-saves each field with a quiet "Saved" indicator.Open recipe → FORMSInline edit on rowTap-cell-to-edit on the users table — Enter saves, Esc reverts, Tab moves on.Open recipe → LISTSFilterable data tableThe users table — sortable, chip-filtered, server-side search, bulk actions.Open recipe → LISTSMaster–detail pageThe audit log — list on the left, drilldown on the right; bottom sheet on phones.Open recipe → STATESEmpty, loading, errorOne reusable shell for empty, loading, error and offline states across every screen.Open recipe →

Need a new admin screen?

Every screen in this portal is built from the same set of pieces. Start a new one by copying an existing template.

All portal shells