shadcn.io is not affiliated with official shadcn/ui
Security Researcher Profile Block for Vue
A security researcher bounty ledger with a year menu and a severity filter over nine reports, three figures for reports, total earned and median reward, and Hall of fame badges; a labelled sample.
Installation
Overview
Show a researcher's track record with this bounty ledger for Vue with Ark UI, a labelled sample with invented programmes and findings. A compact header holds the title and one sentence. The frame under it has a start side cell with the person, a Sample data Badge and three figures worked out from the lines on show: reports, total earned and the median reward. The main cell has a year menu and a severity Toggle Group (All, Low, Medium, High, Critical) above a table of nine reports: programme and finding, severity as a word with a four-step weight bar, reward and resolved date, with a Hall of fame outline badge where a programme credited her. A totals row adds what is shown, and filtering to nothing says so in place. The table keeps nine lines of height, so the panel never moves. It's built from Toggle Group, Native Select, a native table, Badge, Avatar and Guides, with a CSS entrance only. For a disclosure platform, a researcher page or any ledger filtered by year and level.
FAQ
Is any of this real?
No. The researcher, programmes, findings, rewards and dates are all invented and the page says Sample data. Do not publish a real person's findings or payouts without their consent and the programme's permission.
How do I use my own reports?
Edit REPORTS at the top: programme, finding, severity, reward, resolved date and whether the programme credited the researcher. The three figures, the totals row and the status line are worked out from the rows that pass the filters, and the median averages the two middle rewards when the count is even.
How do the filters combine?
A report shows when its resolved year matches the menu and its severity matches the toggle group. Both start on All. The status line spells out the result, and an empty result keeps the table's height with a sentence explaining it.
Why a word and a bar, not a colour?
Severity is the word plus the number of filled steps in the bar, so it reads the same in every theme and for people who can't tell colours apart.