shadcn.io is not affiliated with official shadcn/ui
Payment Analytics Dashboard Block for Svelte
A week of fourteen payments filtered by status, a list of the chosen status beside the picked payment's reference and decline reason, and a Retry payment button that settles a failed one.
Installation
Overview
Follow your payments and fix the failed ones, with this payments ledger for Svelte with Ark UI. A Toggle Group in the header switches between Completed, Failed, Refunded and Pending, each with its count; a hairline frame with a plus mark on each corner holds a start list of that status (what it was for, the amount, the method as an outline Badge and the day) beside the picked payment: its amount, reference, method, time and, for a failed one, why it was declined. The foot's Shine Button retries a failed payment, which settles as Completed and moves the filter there, so the success rate and the failed count in the sentence above move with it. The rate is the payments that went through, completed or later refunded, over everything that has settled, worked out from the typed rows. The list sits in a scroll region of fixed height, so changing the filter moves nothing, and a status with nothing in it shows an empty message. Below the small breakpoint the toggles become a Native Select and the detail stacks under the list. It's built from Toggle Group, Native Select, Badge, Empty, Shine Button and Guides. For payment operations and finance teams.
FAQ
How do I load my own payments?
Edit PAYMENTS. Each has an id, a description, an amount in cents, a method, an ISO time in UTC, a status of completed, failed, refunded or pending, a reference and, for a failed one, the decline reason. The counts, the success rate and the failed total are worked out from those rows, so nothing else needs editing.
How is the success rate worked out?
It is the payments that went through (completed, or completed and later refunded) divided by every payment that has settled, which leaves out the pending ones. A failed payment that you retry counts as completed from then on, so the rate and the failed amount in the sentence change when you press the button.
What does Retry payment do?
It marks the picked failed payment as Completed in this page, moves the status filter to Completed so you can see it there, and says so in the status line. Nothing is charged. In your app call your payment provider with the original payment, then update the row from the result and keep the decline reason if it fails again.
What stays local, and how do I wire it for real?
Everything: the payments are typed and a retry lives in component state, so a reload puts them back. To wire it up, load payments from your processor, send the retry to a server action that charges once with an idempotency key, and replace the local list with the result.
Can I use it with a keyboard?
Yes. The status toggles take the arrow keys, each payment is a button in a list with the picked one marked as current, and the list region can be focused and scrolled. Retry payment is a button that stays focusable when there is nothing to retry and says why in the status line.