shadcn.io is not affiliated with official shadcn/ui
Vulnerability Scan Dashboard Block for Vue
A fix queue of eight dependency advisories sorted by CVSS, with a severity toggle group, a Fix available switch, rows that open to the upgrade command with a copy button, and Mark as fixed that drops the counts.
Installation
Overview
Work down a dependency scan from the worst advisory to the last with this fix queue for Vue with Ark UI. A Toggle Group in the header filters by severity and carries the counts, and a Switch in the toolbar band keeps only the advisories that have a fix. Inside a hairline frame with a plus mark on each corner, eight Lockbridge advisories are listed by CVSS: the CVE id, the package, the installed and fixed versions, a CVSS bar, a priority from P0 to P3 and the fix state as words. A row opens in a Collapsible to the description, the upgrade command in a code box with a Copy Button, and a Shine Button that marks it fixed: the row then reads Fixed in this demo and the counts drop. Rescan only says that nothing was scanned. It's built from Toggle Group, Switch, Collapsible, Copy Button, Empty and Guides. For developer consoles and security reviews.
FAQ
How do I fill it with my lockfile's advisories?
Edit ADVISORIES: an id, a CVE, the package name, the installed version, the fixedIn version (empty when none is published), a cvss score in tenths and a summary. The priority is worked out from the score (P0 from 9.0, P1 from 7.0, P2 from 5.0, P3 below), the upgrade command is built from the package and the fixed version, and every count follows from the rows.
What do the filters do to the list?
The severity toggle group and the Fix available switch hide rows that do not match and update the counts and the status line. The list keeps a minimum height, so the panel does not change size when it gets shorter, and a filter that matches nothing shows a short message with a way back.
What does Mark as fixed do?
It marks the advisory fixed on the page: the row reads Fixed in this demo, muted and still in its place, and the open and with-a-fix counts in the header and the toggle group drop by one. Advisories with no published fix show a note instead of a command and cannot be marked.
What stays local, and how do I wire it for real?
Everything: the advisories are typed, Rescan scans nothing, and the copy button only copies text to your clipboard. To make it real, feed the rows from your scanner's report, run the upgrade in your own pipeline and mark an advisory fixed from the next scan's result instead of a button.