JS JEMA UI · v0.1 · 2026-05-22

The design system.

Foundation for the new JEMA SSOT app. Every component you'll find in the new product, in one place to evaluate. Toggle the theme top-right.

1 · Buttons
Primary brand action, gold (rare), ghost, danger, soft. Three sizes plus icon-only.
2 · KPI Cards
Top-of-page metrics. Accent stripe, delta indicator, optional sparkline.
Active projects
194
↑ 7 vs last quarter
Delivered
17
↑ 3 this month
Outstanding
GHS 1.28M
Across 45 invoices
Collected (USA YTD)
$129,036
↓ 2.1% vs last quarter
3 · Badges + Chips
Project stages, tier badges, status, and removable filter chips.
Lead Booked Pre-Production Production Ready Production Day Post-Production Delivered Closed
Tier A Tier B Tier C Fully Paid Part Payment Overdue Diaspora pmt
Region: USA Stage: Booked Owner: Ibrahim Yakubu
4 · Tables
Sortable headers, hover states, density toggle, sticky first column for wide tables.
Project ID Client Region Event Date Stage Owner Contract
JEMA-26-0323Kayode + PatriciaUSAJun 28, 2026BookedIbrahim YakubuUSD 9,000.00
JEMA-26-0310Jesse + JemimaUSAMar 12, 2026DeliveredIbrahim YakubuUSD 9,500.00
JEMA-26-0377Itoro + WhitneyCanadaApr 24, 2026Post-ProductionEric BoamahCAD 8,000.00
JEMA-26-0411Michael + JadaGhanaDec 5, 2026BookedIbrahim YakubuGHS 55,000.00
JEMA-26-0325Priscilla + JeffersonEurope / UK—BookedAlex KamkamGBP 1,500.00
5 · Payment History Strip (per locked design)
Three things per row: date · method · gross amount. Click a row for the detail panel.
Kayode + Patricia · Fully Paid
Empty state
6 · Forms
Inputs, selects, textareas, checkboxes, switches. All keyboard-friendly.
First name + partner first name, plus surname if used.
USD
7 · Tabs + Pill Tabs
Project Hub-style tabs and segmented pill controls.

Project Hub content goes here.

8 · Modals + Confirms
Layered backdrop, smooth open/close, Escape closes, click outside dismisses.
9 · Toasts
Stacking notifications. Auto-dismiss + optional action.
10 · Loading + Empty States
Skeleton loaders shape-matched to the final UI. Empty states with clear CTA.
Skeleton (list)
Empty state
Spinner inline
Loading payments…
11 · Banners
Top-of-app announcements for governance & alerts.
12 · Progress + Status
SOP completion, SLA timers, QC gates, KPI donuts, stacked payment bars.
Production SOP — Project Setup
5 mandatory steps · Kayode + Patricia
4 / 5
QC Gate — Kayode wedding film
5 mandatory checks before delivery release
Studio KPI snapshot — this quarter
Delivery on-time
Q1 target 85%
Quota progress
Ghana — 22 of 40 weddings
Client NPS
Last 30 reviews
QC pass-rate
First-attempt approvals
Payment status — Kayode + Patricia
Contract value vs. collected
Payment status — Jesse + Jemima
Deposit received · balance outstanding
Partial
13 · Smart Insight Preview (rule-based)
Warm + mildly witty. What you'll see at the top of every Project Hub.
Project insight

Kayode + Patricia · USA · Wedding · 35 days out. $9K paid in full — these two are sorted. Production is at 14% though — Bernard, you have a list. Last comm 11 days ago (Maame sent the questionnaire), no client concerns logged. Three to-dos: assign your second shooter, send the pre-event check-in, and confirm the Cincinnati hotel.

14 · Keyboard shortcuts
Power-user navigation. Try them.
Command palette⌘K
Focus search/
Dashboardg d
Projectsg p
New projectn
Help?
build v2026-05-24.17:50