VulnReport

Code

import { VulnReport, type VulnFinding, type VulnScan } from "@fadymondy/nasaq/web";declare const findings: VulnFinding[];declare const history: VulnScan[];declare const api: { scan(): Promise<void> };export const Vulns = () => <VulnReport findings={findings} history={history} lastScanAt={Date.now()} onScan={() => api.scan()} />;

Security · beta

Live examples and controls: VulnReport in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/vuln-report.json

Show what the last security scan found. Four tiles count findings by severity (critical, high, medium, low), a badge says whether the total went up or down since the previous scan, the top findings are listed (most severe first, then highest CVSS) with the installed and the fixed version and a copy button for the CVE id, and the scan history is drawn as stacked bars. With no findings it says so plainly; with no scan yet it shows an empty state. It has no scanner: you pass findings (or counts) and history, and onScan starts a new scan.

When to useCopy Anchor Link

• A security page in an admin or hosting product.
• SeverityTiles on a dashboard.

When not to useCopy Anchor Link

• Triage workflows with assignees and status per CVE: build on DataTable.
• Certificate expiry: use CertificateMonitor.

ImportCopy Anchor Link

import { VulnReport } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { VulnReport, type VulnFinding, type VulnScan } from "@fadymondy/nasaq/web";

declare const findings: VulnFinding[];
declare const history: VulnScan[];
declare const api: { scan(): Promise<void> };

export const Vulns = () => <VulnReport findings={findings} history={history} lastScanAt={Date.now()} onScan={() => api.scan()} />;

AnatomyCopy Anchor Link

VulnReport                   data-slot="vuln-report"
├─ header                    title, last scan, Scan now
├─ total + trend Badge       "3 fewer than the previous scan"
├─ SeverityTiles             Critical, High, Medium, Low
├─ top findings              severity Badge, CVE id, title, package@version → fixed version, CVSS, copy
└─ scan history              stacked bar per scan, oldest first

APICopy Anchor Link

VulnReport: every Card prop except children, plus:

SeverityTiles: counts. Helpers (pure, tested): countBySeverity, totalCount, riskTone, topFindings, trend, isCveId.

ExamplesCopy Anchor Link

Counts only

import { SeverityTiles } from "@fadymondy/nasaq/web";

export const Tiles = () => <SeverityTiles counts={{ critical: 1, high: 4, medium: 9, low: 12 }} />;

AccessibilityCopy Anchor Link

• Severity is always a word. The counts are a description list (dl). Each history bar is an image with a text alternative giving the date and total.
• Copy buttons have a name that includes the CVE id.

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. CVE ids, package names and versions stay left to right. The history runs in reading order.

Styling & tokensCopy Anchor Link

• Built on Card, Badge, CopyButton, EmptyState and --nq-* tokens. Target [data-slot="vuln-report"].

Do / Don'tCopy Anchor Link

• Do show the fixed version: it is the action to take.
• Do say "no fix yet" when there is none.
• Don't show a green all-clear for a scan that failed: leave lastScanAt out and show an error.
• Don't invent CVE ids in production data.

RelatedCopy Anchor Link

• cert-monitor
• uptime-monitors
• alerts

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-security-vulnerability-report--docs