shadcn.io is not affiliated with official shadcn/ui
Referral Program Dashboard Block for Vue
A payout board of nine referrers in Pending, Approved and Carried over lanes, a minimum payout field that carries small earnings over, and a button that approves the ticked payouts.
Installation
Overview
Decide who gets paid this cycle, with this referral payout board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three lanes on shared hairlines: Pending, Approved and Carried over, each with its count and total. Every referrer is a card with their initials, a referral code, how many of their referrals signed up and what they earned at a typed reward for each sign-up. A Number Input for the minimum payout sits in the first band: anyone under it moves to Carried over by rule, and changing the number moves cards at once. Pending cards have a Checkbox; the foot's Shine Button "Approve 3 payouts" moves the ticked ones to Approved and says that no money moved. The sentence gives the referrals and the conversion rate. Each lane scrolls inside a fixed height, so moving cards never shifts the page, and below the medium breakpoint the lanes scroll sideways with the next one showing. It's built from Number Input, Checkbox, Avatar, Empty, Shine Button and Guides. For growth teams running referral rewards.
FAQ
How do I load my own referrers?
Edit REFERRERS. Each has an id, initials, a referral code, how many people they referred and how many signed up. Earnings are the sign-ups times REWARD, in cents, and the lanes, totals, the sentence and the conversion rate are all worked out from those rows.
How does the minimum payout work?
Anyone not yet approved whose earnings are under the minimum is in Carried over; everyone else not approved is Pending. Lowering the minimum brings carried-over cards back to Pending, and raising it sends pending cards over, dropping their tick. The field takes whole dollars from 0 to 500.
What does Approve do?
It moves the ticked pending referrers to Approved in this page and says how many and how much, "no money moved". With nothing ticked it says to tick one first. In your app approving would queue the payouts with your payment provider and record who approved them.