shadcn.io is not affiliated with official shadcn/ui
Affiliate Commission Summary Billing Block for Solid
A partner's eight commissions waiting out a 30 day hold, each with the day it releases and the hold served so far, four figures that add up from the rows and one request for whatever is payable now.
Installation
Overview
Show a partner what they have earned and when it can be paid, with this affiliate commission summary for Solid with Ark UI. A hairline frame with a plus mark on each corner opens with four figures on shared hairlines: earned, payable now, in payout and on hold, each worked out from the commission rows below so they always add up. Under them, a native table lists each referred purchase: the customer by initials in an Avatar and the item bought, the day it was bought, the commission and a Badge that says Payable, Requested or On hold, with the day it releases ("Releases Oct 24, in 6 days") and, while it waits, a thin bar of the 30 day hold already served. A commission releases 30 days after its purchase, counted from a typed date, so moving that date moves every figure. The action foot holds the only Shine Button: "Request payout of $450.00" is the sum of the released rows, and it stays unavailable under the $50.00 minimum, with the reason in the status line. On a phone each commission is a card and the foot pins to the bottom of the screen. For partner, referral and reseller programmes that pay after a refund window.
FAQ
How do I use my own commissions and hold?
Edit COMMISSIONS (the customer's initials, the item, the purchase day and the commission in cents), HOLD_DAYS and MIN_PAYOUT_CENTS, and move AS_OF, the date the page treats as today. The release day of every row is its purchase day plus the hold, and each state, bar and figure is worked out from that: a row is on hold while its release day is after today, payable once it has passed, and requested after you request. Nothing is typed twice, so the four figures always add up to the earned total.
What does the button do, and what stops it?
It marks every released row as requested: Payable now falls to $0.00, In payout takes the amount and the label becomes "Payout requested". It is not a disabled button. Under the minimum or after a request it stays focusable and says why in the status line when you press it, so a keyboard or screen reader user hears the reason instead of finding a dead control.
What stays local, and how do I wire it for real?
Everything. Requesting a payout changes this page's state and says "Requested in this demo."; a quiet line above the foot adds that nothing is paid out, and reloading starts over. To make it real, load the partner's commissions with their purchase days from your affiliate ledger, ask the server to create the payout for the released rows and show its result, and keep the hold rule on the server so a clock on the page can never release money early.
Why are the dates fixed in the file?
So the example reads the same on every load and in server rendering. Every "in 6 days" is a difference between two typed ISO dates computed with Date.UTC, never the clock. In your app pass the real current day instead of AS_OF.
Is it accessible?
The figures are a description list, the table has a caption and column and row headers, and each customer reads as "Customer KT" with the initials tile hidden from assistive technology. Status is always in words, with a filled dot for released rows and a hollow one for rows on hold, never colour alone. One polite status line speaks each result, and amounts, dates and counts are isolated so they read right in a right-to-left layout.