Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Fraud Detection Dashboard Block for React

A queue of ten held card payments by risk score; the chosen one lists the rules that fired as weighted bars adding up to the score, its signal timeline, and Hold, Approve and Decline in the foot, with a table of the rules and how often they fire.

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

Answer why a payment was flagged before you let it through, with this fraud review panel for React with Base UI. A hairline frame with a plus mark on each corner lists ten held payments at the start, worst score first, each with its status. The chosen payment shows the rules that fired, each with its weight as a bar and a number, and the sum under them that makes the score (capped at 100), then a timeline of the signals before the order. A table of the eight rules gives each weight, how often it fired in seven days and how many payments in this queue it holds. The foot holds a Toggle Group with Hold, Approve and Decline; the queue marks the payment and the counts in the header follow. On a phone a Native Select replaces the queue. For payment dashboards and risk tools.

FAQ

How do I fill it with my payments?

Edit PAYMENTS and RULES. A payment has an id, a shop, an amount, the ids of the rules that fired and its signals. A rule has a name, a weight and a seven-day fired count. The score, the queue order, the sums and the table's in-queue column are all worked out from them.

How is the score worked out?

It is the sum of the weights of the rules that fired, never more than 100. The line under the reasons prints the sum ("28 + 24 + 22 + 20 = 94") so the number can be checked. The queue is sorted by that score once, and deciding a payment does not reorder it.

What do Hold, Approve and Decline do?

Every payment starts on Hold, as a real engine would hold it. Choosing Approve or Decline marks it in the queue and moves the counts above; choosing Hold again puts it back. Nothing is sent to a payment processor. To make it real, call your processor from the handler and mark the row from its answer.

Why is the decision in the foot?

It is the last thing you do after reading the reasons and the rules, and on a phone the foot stays pinned to the bottom of the screen so the choice is always in reach. The status line beside it says what changed.

How does it look on a phone?

The queue becomes a select above the reasons, the reasons and the timeline keep their height so nothing jumps when you pick another payment, and the rules table drops its seven-day column.

All 200 dashboard blocks