shadcn.io is not affiliated with official shadcn/ui
Vulnerability Scan Monitoring Block for Solid
Open findings in four severity bands, each with an age bar against its fix-by window, an Overdue only switch, and the library, installed version and fixed version of the finding you choose.
Installation
Overview
See which security findings are past the time you allow to fix them, with this vulnerability scan panel for Solid with Ark UI. It is Flawlight, a vulnerability scanner (made up), with 11 open findings in four bands: Critical, High, Medium and Low. Each finding is a row with its id, its title and an age bar drawn against that severity's fix-by window, with a tick at the SLA (7, 30, 90 and 180 days); the bar runs past the tick when the finding is overdue, and the words say "Overdue by 3 days" or "Due in 3 days". A Switch in the header keeps only the overdue findings, and the others stay in place, unseen, so the panel never changes height. Choosing a finding reads its library, the installed version and the version that fixes it. Guides draw the frame and its bands; the entrance is CSS only. For security teams, patch reviews and any scanner that reports by severity.
FAQ
How do I use my own findings?
Edit FINDINGS at the top of the file: each has an id, a title, a severity, the day it was found (an ISO date), the library, the installed version and the version that fixed it (empty when there is none yet). BANDS holds each severity's SLA in days, and AS_OF is the day the page counts from. Ages, overdue counts, the header sentence and every bar are derived; nothing is typed twice. The ids are made up and never real CVE numbers.
How is an age bar read?
The bar is scaled to one and a half times the severity's SLA, and the tick marks the SLA itself. A bar that stops before the tick is within its window; one that passes it is overdue, and the words beside it say by how many days. Because each band has its own SLA, a 10-day-old Critical finding is overdue while a 30-day-old Medium one is not.
What does Overdue only do?
It keeps the overdue findings at the top of each band and hides the rest without removing them from the layout, so nothing moves. The band counts change to "1 of 2 overdue". If the finding you had chosen is not overdue, the choice moves to the most overdue one, and a polite status line says what is shown.
What is real here and what stays local?
Everything is typed: the findings, versions and dates are examples, and nothing is scanned or looked up. Choosing a finding only changes the panel. In your app, feed the same shape from your scanner's report; no other part of the block needs to change.