shadcn.io is not affiliated with official shadcn/ui
Payment Transactions Table Block for Solid
A payments table with a status filter whose rows open a refund side sheet showing the payment's timeline and a refund form (amount up to what is left, a reason, one Shine Button), shown open in place.
Installation
Overview
Refund part of a payment without leaving the list, with this payment transactions table for Solid with Ark UI. A small shop's payments sit in a native table with a Segment Group filter (All, Paid, Refunded, Failed, each with its count). Pressing a payment's number opens a side Sheet with who paid and how, a typed timeline of what happened, how much has been refunded and how much can still be, and a refund form: an amount in a Number Input that cannot go past what is left, a reason in a Select and one Shine Button whose label follows the amount, "Refund $40.00". A refund adds a timeline event, turns the row into "Partially refunded" or "Refunded", updates the amounts, closes the sheet and returns focus to the payment's number. A failed payment and a fully refunded one keep the form, switched off, and say there is nothing to refund. On load the sheet is drawn open in place over the table; pressing a payment opens the real, modal one. It's built from Sheet, Segment Group, Number Input, Select, Shine Button, Badge and Guides, with a CSS entrance only. For payment dashboards, order desks and support tools.
FAQ
What can be refunded?
Up to what is left of a paid payment: its amount minus what has been refunded so far. A failed payment has nothing to refund. The amount must be a whole number of dollars from 1 to what is left, and the reason is one of four. A refusal names the limit in a line under the field and keeps the sheet open.
How does a row's status change?
It is worked out from the amount and the refunded total, never typed: Paid at none, Partially refunded between none and the amount, Refunded when the whole amount is back. The filter counts follow, so a payment that becomes Refunded moves from the Paid count to the Refunded count.
What is the sheet doing open on load?
That is the preview's part. On load the sheet is drawn in place as a native non-modal dialog over the table, which waits unseen and unfocusable until you close it with Cancel, the close button or Escape. Pressing a payment's number opens the real sheet with the library's focus trap, Escape and focus return, from the end edge in either reading direction, and it shares the same state. In your app keep only the real Sheet.
What changes on a phone?
The Paid with and Date columns fold into the payment's cell, and the sheet docks to the foot of the stage in place and is full width when opened for real, with the actions pinned under a scrolling body.
Is it accessible?
The table has a caption, heads and row heads; each payment's button is named "Open payment TB-2041 for Maribel Okafor"; the sheet is named and described, the timeline is an ordered list, the refund fields are in a fieldset with a legend, and one polite status line says what was refunded.
What stays local, and how do I wire it for real?
Everything: the eight payments and their events are typed in START, and a refund only changes this page's state. Nothing is charged or sent. To wire it up, call your payments provider's refund endpoint from refund with the amount and reason, append the event it returns, and let the status derive from the totals it reports.