shadcn.io is not affiliated with official shadcn/ui
Pharmacist Licence Wallet Profile Block for React
A pharmacist profile as a licence wallet: a menu of the three states where she is licensed, a card with the number masked behind Show number and a copy button, issue and expiry dates, a status word and a bar of the days to go.
Installation
Overview
Keep every licence in one place, with this pharmacist profile for React with Base UI. A compact header holds the title and a Select for the state, and the hairline frame under it opens on the pharmacist: initials, name, role and place, then her clinical areas as outline Badges. The licence is a framed card: the issuing board, a status word with a dot, the number masked until a Toggle reads Show number, a Copy Button that puts the number on the clipboard, a Data List of the dates issued and expires and the term, and a Progress bar of how much of the term remains, in days. Every date is measured from a typed day, and the status (active, renewal due or expired) is worked out from the dates rather than typed. The foot, ruled by Guides, holds one polite status line. It is a sample record: the states, boards and numbers are invented and nothing is checked against a board. It's built from Select, Toggle, Copy Button, Progress, Data List, Badge, Avatar and Guides, with a CSS entrance only. For a pharmacy directory, a credentials wallet or any profile that shows a licence.
FAQ
How do I fill it with my own licences?
Edit LICENCES. Each has an id, the name of the state, the issuing board, the number, and the ISO days it was issued and expires. AS_OF is the day the page treats as today: set it from the server's date in a real app. The days to go, the share of the term, the term in days and the status are all worked out from those dates, so a new licence needs nothing else. A licence ends up as Renewal due when 90 days or fewer remain, and Expired once the day has passed.
How does the masked number work?
The number is shown with its middle group hidden ("SMP-••••-0937"), and a screen reader hears that it is hidden and how it ends. Show number is a toggle button: pressed it shows the whole number, pressed again it hides it, and changing the state hides it again so a number is never left open by accident. The masking is only on screen, so keep real numbers on the server and send the full value only after the visitor asks for it.
Does Copy really copy?
Yes. It writes the full sample number to the clipboard whether it is shown or not, and the status line says Copied the sample number. If the browser refuses (no permission, or a page not served over HTTPS) the line says the clipboard refused it. The copy button names the state it belongs to, so its purpose is clear when you move between licences.
Is anything checked or sent?
No. The numbers are samples with a made-up format, the boards are invented, and nothing is verified against a register. Choosing a state, showing the number and copying all stay in the page. To make it real, look the licence up on your server and send the masked form to the client, with the full number only behind a deliberate action.
Is it accessible?
The state menu is named, the licence is a description list, the dates are real time elements, and the bar is decorative: the days to go are written beside it, so nothing depends on seeing it. Status is a word and a dot that is filled, half filled or hollow, never a colour. The status line is a polite live region present from the start. In a right-to-left layout the number, the dates and the counts keep their order.
How does it look on a phone?
The card keeps its two halves stacked: the number on its own line, then Show number and Copy side by side, then the dates and the bar. The licences badge in the person band is hidden below the small breakpoint, and the status line stays on one line. Every state has the same layout, so switching between them never moves the panel.
Related
- Pro
Doctor Insurance Plan Check Profile
Credentials and proofA doctor profile that answers does she take my plan: three board certifications as badges, a combobox over fourteen insurance plans and a result card saying in network, out of network or not accepted with the copay, referral and hospitals.
- Pro
Mechanic Certification Runway Profile
Credentials and proofA mechanic profile as a certification runway: six of eight tests held toward Master technician, each as a ruled row with a bar from issue to expiry on one axis, the months to go in words, and a switch that dims whatever is not due within 12 months.
- Pro
Veterinarian Services by Species Profile
Quotes and servicesA vet profile as a species-by-service matrix: a group of five species, a table of ten services marked Offered or Not offered with the words and an icon and a price from, and figures for the count, the cheapest service and the emergency hours.
- Pro
Backup Codes Account
Sign-in methodsAn account's backup codes: ten one-time codes in a hairline grid with the spent ones struck through, a meter of how many are left, a real text file to download and copy, and a new set behind a password.
- Pro
Credentials Table Team
Skills and expertiseNine credentials held by the people of a compliance-software company in a ruled table, each with its holder, certification, fictional issuing body and the month it is valid until, under a category filter that moves the picked category to the front and dims the rest.
- Pro
Credential Badge Kit Awards
Badges and sealsA credential badge drawn at 96, 64 and 32 pixels in a framed figure, beside an HTML and Markdown embed snippet in tabs with a Copy button and a Verified line that shows the day the credential is valid until.