React island · seeded data · inline SVG
Transaction explorer
A merchant dashboard over an invented ledger: filter it, sort it, watch payments arrive and settle. Every figure on it comes from a pure function with tests over it, and the charts are rectangles this repo measured rather than a library’s idea of a bar.
This is the piece closest to what I do for a living. The interesting part of a payments screen is never the chart — it is holding money as integers, refusing to net a refund against a sale, and knowing that a settled transaction does not go backwards.
The dashboard
New payments arrive every 2.5 seconds.
Showing 60 of 60 transactions.
- Payments
- 60
- Gross
- R 16 919,16
- Refunded
- R 1 004,23
- Success rate
- 80%
| Interval | Payments |
|---|---|
| 09:59 | 5 |
| 10:19 | 5 |
| 10:39 | 5 |
| 10:59 | 4 |
| 11:19 | 6 |
| 11:39 | 5 |
| 11:59 | 4 |
| 12:19 | 5 |
| 12:39 | 6 |
| 12:59 | 5 |
| 13:19 | 5 |
| 13:39 | 5 |
| Status | Payments |
|---|---|
| Authorised | 12 |
| Settled | 36 |
| Refunded | 3 |
| Failed | 6 |
| Reversed | 3 |
| Reference | Method | ||||
|---|---|---|---|---|---|
| 13:59 | INV-4100 | Kloof Street Roastery | EFT | R 329,00 | Settled |
| 13:55 | INV-4101 | Table Bay Cycles | Instant EFT | R 432,35 | Settled |
| 13:51 | INV-4102 | Sandton Dental | EFT | R 472,45 | Settled |
| 13:46 | INV-4103 | Halyard Studio | Card | R 302,41 | Settled |
| 13:43 | INV-4104 | Umhlanga Yoga | Card | R 35,37 | Authorised |
| 13:38 | INV-4105 | Halyard Studio | Instant EFT | R 231,64 | Settled |
| 13:35 | INV-4106 | Muizenberg Surf Co | EFT | R 31,61 | Settled |
| 13:31 | INV-4107 | Kloof Street Roastery | Capitec Pay | R 229,56 | Refunded |
| 13:26 | INV-4108 | Kloof Street Roastery | Card | R 1 808,07 | Settled |
| 13:23 | INV-4109 | Ubuntu Books | EFT | R 267,58 | Authorised |
| 13:18 | INV-4110 | Kloof Street Roastery | Card | R 313,79 | Settled |
| 13:14 | INV-4111 | Muizenberg Surf Co | Card | R 361,34 | Authorised |
| 13:11 | INV-4112 | Sandton Dental | Capitec Pay | R 376,97 | Failed — Issuer declined |
| 13:07 | INV-4113 | Sandton Dental | Card | R 307,31 | Failed — Insufficient funds |
| 13:03 | INV-4114 | Sandton Dental | Instant EFT | R 243,28 | Settled |
| 12:58 | INV-4115 | Kloof Street Roastery | Instant EFT | R 1 126,50 | Settled |
| 12:55 | INV-4116 | Sandton Dental | Capitec Pay | R 469,01 | Authorised |
| 12:51 | INV-4117 | Halyard Studio | EFT | R 119,96 | Settled |
| 12:46 | INV-4118 | Karoo Provisions | EFT | R 116,33 | Failed — 3-D Secure abandoned |
| 12:43 | INV-4119 | Muizenberg Surf Co | Card | R 235,71 | Settled |
| 12:39 | INV-4120 | Sandton Dental | Card | R 116,65 | Authorised |
| 12:34 | INV-4121 | Sandton Dental | EFT | R 378,07 | Settled |
| 12:31 | INV-4122 | Halyard Studio | Capitec Pay | R 468,21 | Settled |
| 12:26 | INV-4123 | Sandton Dental | EFT | R 148,04 | Settled |
| 12:23 | INV-4124 | Table Bay Cycles | Card | R 382,40 | Reversed — Issuer declined |
| 12:19 | INV-4125 | Ubuntu Books | Card | R 151,59 | Settled |
| 12:14 | INV-4126 | Sandton Dental | Card | R 117,51 | Settled |
| 12:11 | INV-4127 | Sandton Dental | EFT | R 402,74 | Authorised |
| 12:06 | INV-4128 | Kloof Street Roastery | Capitec Pay | R 395,17 | Refunded |
| 12:03 | INV-4129 | Halyard Studio | Card | R 1 521,76 | Settled |
| 11:58 | INV-4130 | Table Bay Cycles | EFT | R 218,48 | Settled |
| 11:55 | INV-4131 | Kloof Street Roastery | Card | R 102,86 | Settled |
| 11:51 | INV-4132 | Muizenberg Surf Co | Capitec Pay | R 106,75 | Settled |
| 11:46 | INV-4133 | Table Bay Cycles | Capitec Pay | R 379,50 | Refunded |
| 11:42 | INV-4134 | Umhlanga Yoga | Card | R 96,16 | Settled |
| 11:38 | INV-4135 | Karoo Provisions | Capitec Pay | R 477,78 | Settled |
| 11:34 | INV-4136 | Umhlanga Yoga | EFT | R 44,59 | Failed — Timed out at the bank |
| 11:31 | INV-4137 | Table Bay Cycles | EFT | R 181,63 | Reversed — 3-D Secure abandoned |
| 11:27 | INV-4138 | Table Bay Cycles | Instant EFT | R 314,23 | Settled |
| 11:22 | INV-4139 | Sandton Dental | Capitec Pay | R 184,31 | Settled |
| 11:19 | INV-4140 | Karoo Provisions | Instant EFT | R 214,02 | Settled |
| 11:14 | INV-4141 | Halyard Studio | EFT | R 338,00 | Settled |
| 11:11 | INV-4142 | Umhlanga Yoga | Card | R 275,56 | Settled |
| 11:06 | INV-4143 | Muizenberg Surf Co | Instant EFT | R 400,86 | Authorised |
| 11:02 | INV-4144 | Sandton Dental | Card | R 355,68 | Settled |
| 10:58 | INV-4145 | Kloof Street Roastery | EFT | R 220,50 | Authorised |
| 10:55 | INV-4146 | Halyard Studio | Instant EFT | R 272,61 | Failed — Timed out at the bank |
| 10:50 | INV-4147 | Halyard Studio | Capitec Pay | R 82,96 | Failed — Issuer declined |
| 10:47 | INV-4148 | Muizenberg Surf Co | Capitec Pay | R 429,83 | Authorised |
| 10:42 | INV-4149 | Halyard Studio | Instant EFT | R 1 676,07 | Settled |
| 10:38 | INV-4150 | Ubuntu Books | EFT | R 24,54 | Settled |
| 10:34 | INV-4151 | Muizenberg Surf Co | Capitec Pay | R 53,92 | Settled |
| 10:30 | INV-4152 | Table Bay Cycles | Card | R 58,41 | Settled |
| 10:26 | INV-4153 | Sandton Dental | EFT | R 90,63 | Authorised |
| 10:23 | INV-4154 | Table Bay Cycles | Card | R 334,02 | Settled |
| 10:19 | INV-4155 | Umhlanga Yoga | Instant EFT | R 269,78 | Settled |
| 10:14 | INV-4156 | Ubuntu Books | EFT | R 190,64 | Authorised |
| 10:10 | INV-4157 | Muizenberg Surf Co | EFT | R 92,99 | Authorised |
| 10:07 | INV-4158 | Sandton Dental | Capitec Pay | R 245,58 | Reversed — Insufficient funds |
| 10:02 | INV-4159 | Umhlanga Yoga | Card | R 308,50 | Settled |
How it is built
Money is an integer number of cents everywhere, divided by a hundred once, at the edge, when it is formatted. A dashboard whose totals are out by a cent because 0.1 + 0.2 is the one domain error somebody who works in payments spots instantly — and they spot it in the summary rather than in the row that caused it.
Refunds and reversals are not netted off the gross. One combined figure hides the difference between a quiet day and a day with a lot of both, which is the entire thing a merchant opens this screen to find out.
A settled payment does not move. Onlyauthorised transitions, and only to settled or reversed. The feed is a lookup table rather than a random walk, because a dashboard showing something no acquirer does would be wrong about the thing this piece exists to be right about.
There is no chart library. A module turns a series into rectangles with coordinates and the component draws them, which means the claims worth making about a chart — a zero bar has no height, the tallest fills the plot, an empty series does not divide by zero, the axis starts at zero — are assertions over plain numbers. Each chart also ships the same figures as a real table, hidden visually. A chart whose only accessible form is “bar chart” is an image with no alt text.
Sorting is total, not merely stable. Several rows share a merchant, so the comparison falls back to the transaction id. Otherwise their order is whatever the engine’s sort does — stable in every current engine, which means the bug that produces would never appear here and would appear somewhere.
Reduced motion does not slow the feed down. It does not start it. A table that rewrites itself every two and a half seconds is exactly the unrequested movement the setting asks to be spared, and a slower version of it is still it. What replaces it isAdvance one — the same answerthe flow field gives, where reduced motion composes a still and hands you a Step button. Pause and Play are there for everybody regardless: auto-updating content needs a stop whoever is reading it.
Nothing here fetches. The site sendsconnect-src 'none', so a feed that polled would be refused by the browser. Live means a deterministic state transition on an interval — which is also why the same seed always produces the same ledger, and why the tests can make claims about tick 40.
The merchants, amounts and status mix are invented. The proportions are plausible rather than measured — an even split across five statuses would put the failure rate at twenty per cent, which is not a business.