Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Fraud Detection Score Monitoring Block for Svelte

Today's transaction scores as a 20-bin histogram with Review and Block policy lines, a count for each zone, and five sample transactions for the score range you choose.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

See how today's transactions score and where your policy cuts them, with this fraud score panel for Svelte with Ark UI. It is Riskharbor, a fraud scoring service (made up). A histogram of 20 bins from 0 to 100, with counts on a log scale, has two typed policy lines: Review from 30 and Block from 70. Three figures under it count each zone, for example Approve 98.2%. The bins are a native radio group: choosing one lists five sample transactions in that score range with their amount, merchant category, score and top reason. The header sentence is worked out from the counts. Guides draw the frame and its bands; the entrance is CSS only. For risk teams tuning a threshold and for any score that has a review zone. Transactions are invented samples.

FAQ

How do I use my own scores?

Edit BINS (20 counts, one per 5 score points) and the two policy lines REVIEW_FROM and BLOCK_FROM. The zone counts, their shares (to one decimal, adding up to exactly 100), the average risk and the number blocked are derived. The sample transactions are generated at the top of the file from a small hash; replace sampleAt with a lookup from your own data.

Why is the scale logarithmic?

Most transactions score low and very few score high, so a linear scale would flatten every bar past 30. On a log scale the gridlines are 10, 100, 1k and 10k, and a bar twice as tall is not twice as many. Every bin also has its exact count in its accessible name.

How do I pick a bin?

Click or tap a bar, or Tab into the group and use the arrow keys. The chosen bar turns solid, the samples below change and a polite status line says the range, the count and the zone. On a phone the bars are narrow, so use the arrow keys or tap carefully.

What is real here and what stays local?

Nothing is scored: the counts, ids and reasons are examples and no card or account exists. In your app feed the same shapes from your scoring pipeline and the policy lines from your rules.

Can I read it without colour?

Yes. The Review zone has a light fill, the Block zone is hatched, the policy lines are labelled in words, and the three zone figures carry the same facts.

How does it look on a phone?

The plot keeps 20 narrow bars, the three zone figures stay in a row, and the sample table keeps the id, amount and score, with the reason under the id.

All 100 monitoring blocks