shadcn.io is not affiliated with official shadcn/ui
Transaction History Timeline Block for Ark UI
A week of bank transactions on a rail under day heads, each with a signed amount and the balance after it, the lowest balance marked and named, an Everyday or Savings account select and a CSV statement download.
Installation
Overview
See where the money went with this transaction-history timeline for React with Ark UI. It is written for Cashmark, a fictional personal-finance app. A hairline frame with a plus mark on each corner holds the opening balance, the closing balance and the low point of the week, then a vertical rail under day heads, newest first. Each day head carries the day's net; each row has a name, a category, a signed amount ("Money out" or "Money in" for a screen reader) and the balance after it, worked out from the opening balance and every row before it. The lowest balance is marked on the rail with a diamond and named above it: "Low point: €214.00, Tue 13 Oct". A select in the header swaps between the Everyday and Savings accounts, both drawn in the same place so the panel keeps its height. "Download statement" saves the shown account as a CSV file made in the browser. It is built from NativeSelect, Button and Guides. Money is shown with a sign and a word, never with green and red. The accounts are example data.
FAQ
How do I change the transactions?
Edit ACCOUNTS at the top of the file: for each account an opening balance in integer cents and its rows, oldest first, each with signed cents, a name, a category and an ISO day. Balances, day nets, the low point and the CSV are derived from them.
How is the low point found?
balancesOf() adds each row to the balance before it, starting from the opening balance, and the low point is the smallest balance after any row. The opening balance itself does not count. The row where it happens gets the diamond node and the words "Low point of the week".
What stays in the page, and what does the download do?
The chosen account stays in the page. The button builds the CSV from the typed rows, makes a Blob and clicks a temporary link, so the file is real but nothing is sent anywhere. To wire it to a bank, replace ACCOUNTS with your API's response.
Is it accessible?
Direction is written, not coloured: a minus or plus sign, and "Money out" or "Money in" for assistive technology. The select has a visible label, the hidden account is removed from the tab order and from assistive technology, and the foot is a polite status line.