Prime Steel CRM
Every tonne, every quote, one pipeline.
- Prime Steel
- Product design, Engineering
- Web
- Next.js 16 · Prisma · Auth.js
Prime Steel sells rebar, wire rod and structural sections to hardware stores, contractors and developers across Kenya. Sales ran on WhatsApp threads and spreadsheets — no single view of the pipeline, no visibility into which deals needed attention.
A CRM built for a steel mill: a pipeline in KES and tonnes, credit and balance tiles on every customer, five role-specific dashboards, and Gmail and Google Calendar pulled in so reps work from one tab instead of bouncing between apps.
- roles, each with its own view
- 5
- of deal history in the demo
- 3.5 yrs
- workspace apps: Gmail & Calendar
- 2
- money and tonnes on every screen
- KES · t
Mail & calendar
The deal, the inbox and the diary on one screen.
Reps live in Gmail and Google Calendar. Instead of asking them to copy notes across, the CRM brings both in — customer threads land on the dashboard, visits are booked from the customer page against the rep's real free/busy time.
Ink action bar
Email, Schedule meeting, Call and WhatsApp sit in a black pill at the top of every customer, used consistently across the whole app.
Logged automatically
Mail and meetings write to the customer's activity timeline, so the next rep picks up exactly where the last one stopped.
Status in the sidebar
A Connected group shows each app's sync state, so a rep can see at a glance whether their inbox and diary are live.
Status: the mail and calendar experience is fully designed and clickable. Google OAuth account connection is the next build step — every send or booking shows a Preview notice and nothing leaves the CRM.
Roles
One workspace, five points of view.
Permissions are enforced on the server with Zod, not just hidden in the UI. Reps see their own book; finance and dispatch each get the queue they act on first.
On the road
Reps sell from their phones.
Most site visits happen away from a desk, so every screen works at phone width with a bottom tab bar, 44px touch targets and swipe-down sheets.
Decisions
Why it works this way.
Warm canvas, pastel tiles
A warm parchment background replaces clinical grey. Headline numbers sit on lavender, peach, sky and mint tiles — each colour distinct enough to tell apart at a glance without coding data.
Ink pill controls
Tabs, filters and the customer action bar all use a black pill with a white active state. One control type for one kind of action — the eye learns it once and reads the whole interface.
One gradient, one place
The 12-month tonnage chart is the only gradient in the app — indigo from the Prime Steel mark, warming through violet to coral. Bars are white pills. Every other chart uses a flat palette.
Editorial type
Urbanist at weight 500 for page titles, tight letter-spacing, a small monospace eyebrow above. Tabular figures so KES and tonnes line up in columns without needing spacers.
127.2M KES · 565 t
Visual design
Type
Interface & display — Urbanist
Pipeline
Qualified · Proposal · Credit Review · Won
34 open deals · 127.2 M KES · 565 t
Labels & metadata — IBM Plex Mono
KES 4,320,000.00
120 t · Q2 2026
CREDIT · QUALIFIED · DISPATCH
Under the hood
Built to be trusted with customer data.
Stack
Next.js 16 App Router with server actions, Prisma 7 on PostgreSQL, Auth.js with five roles, Tailwind v4 tokens, Framer Motion, dnd-kit for the pipeline and Recharts for the tonnage chart.
Kenya Data Protection Act
Only what sales needs is stored. Admins can export or delete a contact's data on request, and both actions are audit-logged without copying the personal data into the log.
Server-side rules
Every action is validated with Zod and checked by role on the server — reps cannot edit prices or approve credit, whatever the UI shows. The frontend only reflects what the server enforces.
Nuru
Donor reports from field data, without the spreadsheet in between.
Tell us what you’re building.
A 30-minute call is the quickest way to see if we’re the right fit. Or send us a message, whichever suits you.