Part A, working. The web app pieces are built shell-less — each is a self-contained component that drops into your existing routes, with its own mobile layout. The admin Growth section follows the portal's shell, drawer, filter and typed-confirmation patterns exactly. Every control below is live: copy, share, edit the share text, switch reward types, run the fraud queue.
WHAT PEOPLE SEE IN THE WEB APP
{{ j.tag }}{{ j.label }}
WHAT ADMINS SEE IN THE ADMIN PORTAL
{{ j.tag }}{{ j.label }}
SEMANTIC STATES
{{ l.label }}
None of them borrow the orange. Orange is reserved for the one action that matters on a screen.
LOCATION RULE
Shared content carries area and city, both from the listing record. Street address, owner name and contact never leave the platform. The share preview shows the sharer exactly that, so nobody has to trust a promise.
PROGRAMME IN THIS DEMO
Qualifying event is a verified account. Reward type is switchable on A3 — the referrer's screens re-read from it without changing layout.
A1Refer and earnSame component for every persona · web app
One primary action — Share — with copy and QR as quiet siblings. The reward is never hardcoded: whatever the programme pays out arrives as data and renders in the same chip.
YOUR REFERRAL LINK
Invite someone who needs a home or has one to let.
They get a verified start. You get {{ rewardShort }} once their account is verified.
CODE
{{ code }}
{{ copyCodeLabel }}
Copy the code only
{{ link }}{{ copyLinkLabel }}
Share invite
Show a QR code
Your progressSINCE {{ joinedMonth }}
{{ fm.value }}
{{ fm.label }}
{{ milestoneHead }}{{ milestoneCount }}
{{ milestoneNote }}
Earned so far
{{ rewardIcon }}
{{ earnedHead }}
{{ earnedNote }}
{{ t.label }}
Names are shown as the person shared them. Nothing else about them is visible to you.
PERSONSTATEWHAT HAPPENEDWHEN
{{ h.initial }}
{{ h.name }}
{{ h.role }}
{{ h.state }}{{ h.detail }}{{ h.when }}
{{ historyNote }}
REWARDEARNED FORWHERE IT WENTDATE
{{ lg.icon }}
{{ lg.title }}
{{ lg.ref }}
{{ lg.reason }}{{ lg.dest }}{{ lg.date }}
{{ ledgerFoot }}
ENTRY POINT · DASHBOARD
Refer and earn
{{ entryDashboard }}
NUDGE · AFTER PUBLISHING
Your listing is live
Know another landlord with a place to let? Invite them and earn {{ rewardShort }}.
InviteNot now
SLOT · AFTER RENT CONFIRMED
Paid₦708,333
Renting again next year? Refer a friend looking now — you both start verified.
Share my link
A1 ON A PHONE · ONE THUMB
Refer and earn
09:41
Invite someone. Earn {{ rewardShort }}.
CODE
{{ code }}
{{ fm.value }}
{{ fm.short }}
{{ milestoneNote }}
{{ rewardIcon }}
{{ earnedHead }}
{{ earnedNote }}
RECENT
{{ h.initial }}
{{ h.name }}
{{ h.detail }}
{{ h.state }}
Share invite
QR sheet
Let them scan this
Works in person — at an inspection, an agency office, anywhere.
{{ code }}
{{ link }}
Save image
Share instead
Empty — nobody invited yet
09:41
Invite someone. Earn {{ rewardShort }}.
CODE
{{ code }}
Nobody invited yet
Your first invite takes one tap. You earn once their account is verified — not before, so nobody games it.
HOW IT WORKS
1Share your link or let them scan your code.
2They sign up and verify their account.
3{{ rewardStep3 }}
Send your first invite
A2Sharing a listingListing detail page · web app
The sheet leads with what the recipient will see, so the sharer can confirm the street address is not on it before sending. Text is per-platform and editable. Pick a platform on the left to watch the draft change.
Share this listing
{{ shareListingRef }}
Your phone's share sheet
First option on mobile · the list below is the fallback
{{ p.icon }}
{{ p.name }}
{{ p.note }}
What they will see
ADDRESS HIDDEN
share image · 1200×630
{{ listing.title }}
{{ listing.areaLine }}
{{ listing.price }}
Area and city, from the listing record — {{ listing.areaLine }}
Street address — never on shared content
Owner name and contact — stay on the platform
Share image
QR for print
Both download at print resolution — for a signboard, a flyer, or an agency window.
Your message{{ shareTargetLabel }}{{ shareCount }}
Reset to suggested{{ shareCta }}
A2 ON A PHONE · NATIVE SHEET FIRST
Share sheet on the listing
{{ shareListingRef }}
Share this listing
{{ listing.title }}
{{ listing.areaLine }}
NO STREET ADDRESS
Share…
Opens your phone's own sheet
OR PICK ONE
{{ p.icon }}{{ p.name }}
Editing the message
{{ waIcon }}
Send on WhatsApp
Edit before it goes
{{ waText }}
LINK ADDED AUTOMATICALLY{{ waCount }}
The preview card travels with the link. The recipient sees the area, not the street.
CancelOpen WhatsApp
A3GrowthNew admin portal section · Super and Platform admins
Shown inside the portal shell it will live in. Switch the reward type on Programme and every referrer-facing screen above re-reads from it. Void a flagged referral on Review to see the typed confirmation and the audit entry.
ADMIN
WORK
{{ r.icon }}{{ r.label }}{{ r.badgeText }}
INSIGHT & CONTROL
{{ r.icon }}{{ r.label }}{{ r.badgeText }}
AO
Adaeze Okonkwo
SUPER ADMIN
Growth
Search referrals, codes, people…⌘K
PRE-PRODSuper Admin
{{ t.label }}{{ t.countText }}
Reward programme
One reward type is active at a time. Changing it does not rewrite history — referrals already earned keep the rule that was live on the day they qualified.
LIVE SINCE {{ programmeSince }}
{{ ro.icon }}ACTIVE
{{ ro.name }}
{{ ro.blurb }}
{{ ro.chip }}
{{ paramTitle }}
{{ paramNote }}
{{ pm.label }}
{{ pm.prefixText }}{{ pm.suffixText }}
Referrers will see this as “{{ rewardShort }}”. That string is generated from these parameters, so the wording never drifts from the payout.
Milestones
How many qualified referrals earn one reward, and where it stops.
Per reward
qualified
Cap per person
rewards
{{ milestoneMath }}
Qualifying event
The moment a referral counts. Everything before it is a sign-up, not a qualification.
{{ qo.label }}
{{ qo.note }}
Programme historyEach rule still governs the referrals that qualified under it
{{ saveProgrammeLabel }}Saving dates this change and starts a new row in the history. Referrals that already qualified are untouched.No unsaved changes.
Try a code, a person's name, or a reference like REF-2044.
Clear filters
{{ adminRefsCount }}
{{ reviewHead }}
Flagged automatically by the guards. A reward is held, not paid, until someone decides. Both actions need a reason — it goes to the referrer in plain words and into the audit log.
{{ fl.guard }}
{{ fl.ref }}HELD {{ fl.held }}
REFERRER
{{ fl.referrer }}
{{ fl.referrerMeta }}
REFERRED
{{ fl.referred }}
{{ fl.referredMeta }}
WHY IT WAS FLAGGED
{{ fl.why }}
{{ fl.stake }}
Approve…
Void…
Nothing held for review
The guards are running. Anything they catch lands here with the reason attached, and the reward is held until you decide.
{{ g }}
Decisions in this sectionWritten to the portal's audit log