shadcn.io is not affiliated with official shadcn/ui
Audit Scorecard Success Block for React Aria
A confirmation page for a finished control review: a ring of the checks that passed worked out from six control families, each family as a row of cells (filled for a pass, hollow for a check that did not), a short list of findings and dates, and a real one-page PDF summary to download.
Installation
Overview
Show how a review went, family by family, with this confirmation page for React with React Aria. It is the page Proofbarrow, a compliance-automation tool, shows when a review of a company's controls is finished: the page's side rails and one band, split in two with the scorecard first on screen and second in the page. The message has a success mark, the heading, a short list (the report number with a Copy Button, the day, the critical findings, the open ones, the next review), the one Shine Button, Open the full report, and a button that downloads a PDF summary. The scorecard is a Circular Progress ring of the checks that passed beside one row per control family, each with "19 of 20" and its checks as cells. For compliance tools, security reviews and any report with a score. It is sample data and certifies nothing.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was scanned and nothing is certified. The six families, their checks and the findings are typed in FAMILIES and FINDINGS, and no standard is named. To wire it, build those from your review (each family's passed and total checks, and a finding for each check that did not pass), set the report number and the dates, and point the primary at the full report.
Where do the numbers come from?
From the rows. The ring's 94 and the "94 of 100" are the sums of the six families' passed and total checks, each row's percentage is rounded from its own two numbers, and the critical, low and medium counts come from the findings list, so the heading, the list, the ring and the PDF all say the same figures.
How is each family drawn, and is it readable without color?
As one cell per check, filled for a pass and hollow for a check that did not pass, and every row also says it in words ("19 of 20, 95%"). The ring is a drawing hidden from assistive technology, and the same score is written beside it in text.
Does Download summary really work?
Yes. The page builds a small one-page PDF in the browser from the same figures (the families, the counts and each open finding) and saves it through a Download Trigger. It is plain text in one font, named as a sample, and says in its second line that it certifies nothing. In your app, return the real document from your server instead. There is no print button.
Does it claim a certification?
No. The words say a sample review passed its own checklist and give the date of the next review; they name no standard, no auditor and no certificate.