REC Platform — Flat UI Revamp (2026)

New wireframe reference for the core application revamp (Task 28). Same REC blue & white identity, completely new layout language: navy sidebar app shell, flat surfaces (1px borders, no shadows), one list pattern, one status-chip system, designed empty/loading states, dialogs reserved for confirmations. No login screens — authentication is handled by Auth0.

Flat UIExisting palette onlySidebar app shellSuperAdmin flowOrg Admin flowAuth0 (no login UI)

Design tokens (kept from theme.ts)

Navy #0F1A4A — shell, primary Blue #0088D9 — accent, links Light blue #6B7FE3 Teal #4ECDC4 — success Amber #FFAB00 — warning Red #EF4444 — error White / #F8F9FA grounds

SuperAdmin flow

SA-01

Platform Dashboard

Org-status & credential-activity KPI tiles, integration health, credentials by organization, recent orgs list.

SA-02

Organizations

Filterable org list — status / KYB / tenant chips, retry tenant creation, suspend dialog.

SA-03

Organization Detail

Profile, KYB records, admins, tenant status; KYB update, Enable Issuer and Create Org Admin dialogs.

SA-04

Audit Logs

Event / date-range filters, colour-coded event chips, CSV export, designed empty state.

SA-05

New Organization Wizard

3-step creation flow — org & admin details (DID + keys.json), KYB document upload, setup-complete panel with admin credentials.

Org Admin flow

OA-01

Org Dashboard

User KPI tiles, user & credential management action cards, recent users with self-lockout guard.

OA-02

Users

Role/status filtered user list, invite-user dialog, self-guarded suspend/delete, delete confirm.

OA-03

Employees

The canonical list pattern — filters, bulk select, End Employment dialog, empty state, skeleton.

OA-04

Add / Edit Employee

Sectioned form cards (25+ fields), inline validation, skills chip input, sticky action bar.

OA-05

Employee Detail

Profile header with chips, credential offers, employment / contact / compensation panels.

OA-06

Candidates

Search-first candidate list with offer/claim counts, designed empty & no-results states.

OA-07

Candidate Record

Candidate profile, offer/claim KPI tiles, credential offer history across all statuses.

OA-08

Credentials Dashboard

Credential KPI tiles, list with deep-link copy & QR, QR dialog, revoke-with-reason dialog. FAB dropped.

OA-09

Issue Credential

Org DID banner, 3-step layout (employee → details → custom fields), live preview, success panel.

OA-10

Credential Detail

Summary & payload, claim link with QR, event timeline, resend / revoke actions.

OA-11

Settings

Tabbed settings — Branding (logo, colours, T&Cs) and Email Templates manager.

OA-12

KYB Verification

KYB KPI tiles, submissions list with review actions, review-decision dialog.

Candidate & shared screens

SH-01

Candidate Claim Page

Org-branded, mobile-first claim flow — QR, wallet deep link, claim-via-web; confirm / claimed / expired / loading states.

SH-02

My Sessions

Signed-in devices with current-session badge, terminate per row + terminate-all with confirm dialog.

SH-03

Landing Page

Public hero + feature cards; Sign in triggers Auth0 Universal Login — no in-app login form.

SH-04

Unauthorized

Role-gate message with dashboard / sign-out actions.

How to review: every page is a static wireframe with realistic sample data. Dialog / drawer / empty / loading states are rendered inline at the bottom of each page under a dashed note like this one. Once the direction is confirmed, the core application (Next.js + MUI) will be revamped against these references — see docs/requirements/tasks/POC/28-ui-revamp-inventory.md.