Staff portal

Your work account: check payslips, request leave, mark time, find a workmate. Built for office computers, with a phone app for when you're on the move.

Portal 2 shells 5 pages Beta /portals/staff

Full-app demo

Run the complete Staff portal

All 18 screens connected and working. Sign in with an extra security code, request leave and approve your team's leave, see your payslip, clock in on your phone with location check, find workmates, claim back money you spent, see your performance review. Demo password: staff2026.

Open the live Staff app Chipo Mutasa · HR coordinator · Mukamba Group head office. Request leave, see your payslip, clock in, claim money you spent. Launch Open in fullscreen preview

Examples

Code alongside the demo

A payslip tile and a leave-request row from the staff 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.

Desktop

1280 px+

Primary

Same menu as the main dashboard, but lighter and friendlier — staff aren't running the business here, they're checking on themselves.

Mobile

360–414 px

Phone app. Just the essentials — payslip, leave days left, clock in and out.

Pages

Designed surfaces in this portal

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

01 · DESKTOP Home Your home screen — quick stats, what's been happening, public holidays coming up. Open → 02 · DESKTOP My pay Your latest payslip, what you've earned this year, what was taken off, download as PDF. Open → 03 · DESKTOP Leave Ask for time off, see how many days you have left, your manager approves it. Open → 04 · MOBILE Time clock Clock in and out, hours worked today, hours so far this pay period. Open → 05 · DESKTOP Directory Find workmates by department or branch. See their phone, email, and where they sit. Open →

Used in this kit

Primitives, blocks & patterns

The portal composes from the same system everything else uses.

BL Stat card Tiles for pay, leave days left, and hours. Docs → P Status indicator Shows where your request is — approved, waiting, or turned down. Docs →

Built from these recipes

Demos illustrate recipes — here are the ones this kit uses

Every flow in the staff demo is built from a Huchu cookbook recipe. Open one to see the React, state machine, and edge cases behind it.

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 for the staff console — sidebar, top bar, content area.Open recipe → SHELLSMobile bottom-tab shellFour bottom tabs, brand-pill active state, badge counts, safe-area aware.Open recipe → FORMSMulti-step wizard formThe leave-request wizard — per-step validation, progress bar, save-and-resume.Open recipe → LISTSFilterable data tableThe staff directory — sortable, chip-filtered, server-side search, bulk actions.Open recipe → DASHBOARDSOperator overviewThe staff dashboard — KPIs, today's tasks, flagged anomalies, recent activity.Open recipe → APPROVALSLeave-request workflowThe manager inbox — filter chips, drawer, approve / reject / escalate.Open recipe → STATESEmpty, loading, errorOne reusable shell for empty, loading, error and offline states across every screen.Open recipe →

Need a new staff portal surface?

Every screen in this portal composes from the documented system. Start a new one by copying an existing template.

All portal shells