# CertificateMonitor > A TLS certificate monitor - a table of hosts with issuer, expiry date and a days-left badge that turns amber at 30 days and red at 7 or when expired, soonest first, with check again, renew and stop monitoring. Source: https://docs.nasaqui.com/components/cert-monitor ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/cert-monitor.json ``` Watch certificates so none lapses unnoticed. Each host shows its issuer, expiry date, whether it renews automatically and a days-left badge: green above 30 days, amber at 30 or fewer, red at 7 or fewer or already expired, and neutral when the check failed. The list is sorted with the soonest expiry first. Row actions: check again, renew now (for certificates that do not renew automatically) and stop monitoring (with a confirm). Add a host from the toolbar. It has no backend: your callbacks act and you pass the updated `certificates` back. Change the thresholds with `thresholds`; override the clock with `now` in tests and stories. ## When to use - A security or hosting page that lists certificates. - `DaysLeftBadge` beside a domain elsewhere. ## When not to use - Issuing certificates or CSRs. - Domain verification: use `DomainsManager`. ## Import ```tsx import { CertificateMonitor } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { CertificateMonitor, type CertificateRecord } from "@fadymondy/nasaq/web"; declare const certificates: CertificateRecord[]; declare const api: { add(host: string): Promise; recheck(id: string): Promise }; export const Certs = () => ( api.add(h)} onRecheck={(id) => api.recheck(id)} /> ); ``` ## Anatomy ``` CertificateMonitor data-slot="certificate-monitor" ├─ header title, "N monitored, M need attention" Badge ├─ toolbar search, add host form ├─ DataTable host, issuer, expires, auto renew, DaysLeftBadge; row menu: Check again, Renew now, Stop monitoring └─ AlertDialog stop monitoring confirm DaysLeftBadge data-slot="days-left-badge" data-status = valid | expiring | critical | expired | error ``` ## API **CertificateMonitor**: every `Card` prop except `children`, plus: | Prop | Type | Default | Description | | --- | --- | --- | --- | | `certificates` | `readonly CertificateRecord[]` | required | `{ id, host, issuer?, validTo?, autoRenew?, error? }`. `error` marks a failed check. | | `thresholds` | `{ warnDays, criticalDays }` | `{ 30, 7 }` | At or below `warnDays` is amber; at or below `criticalDays` is red. | | `now` | `Date \| number` | now | Override the clock. | | `loading` | `boolean` | `false` | Skeleton state. | | `onAdd` | `(host) => Promise` | | Shows the add form. | | `onRecheck`, `onRenew`, `onRemove` | `(id) => Promise<...>` | | Each shows its row action. Renew only shows for manual certificates. | | `labels` | `Partial` | | Override any string. | **DaysLeftBadge**: `days`, `host`, `thresholds`. **Helpers** (pure, tested): `certDaysLeft(validTo, now)`, `certStatus`, `certTone`, `byExpiry`, `summarizeCerts`, `isValidCertHost`. ## Examples **Custom thresholds** ```tsx import { DaysLeftBadge } from "@fadymondy/nasaq/web"; export const Badge = () => ; // still green ``` ## Accessibility - The badge always says how many days (or that it expired): never colour alone. It also has an `aria-label` with the host. - Rows have a button for the menu, not only right-click. Errors show in an `Alert`. ## RTL & i18n - English and Arabic strings follow the Nasaq locale. Hostnames stay left to right; dates use Latin digits. ## Styling & tokens - Built on `DataTable`, `Card`, `Badge`, `AlertDialog` and `--nq-*` tokens. Target `[data-slot="certificate-monitor"]`. ## Do / Don't - Do alert well before 30 days for certificates that renew by hand. - Do show a failed check as its own state instead of hiding the row. - Don't count days from a stale `now`: leave it unset in production. - Don't remove a host without the confirm. ## Related - [`domains-manager`](https://docs.nasaqui.com/components/domains-manager) - [`proxy-hosts`](https://docs.nasaqui.com/components/proxy-hosts) - [`vuln-report`](https://docs.nasaqui.com/components/vuln-report) ## Lab https://docs.nasaqui.com/?path=/docs/components-security-certificate-monitor--docs ## Code ### React ```tsx import { CertificateMonitor, type CertificateRecord } from "@fadymondy/nasaq/web"; declare const certificates: CertificateRecord[]; declare const api: { add(host: string): Promise; recheck(id: string): Promise }; export const Certs = () => ( api.add(h)} onRecheck={(id) => api.recheck(id)} /> ); ``` ### shadcn ```tsx import { CertificateMonitor, type CertificateRecord } from "@/components/ui/cert-monitor"; declare const certificates: CertificateRecord[]; declare const api: { add(host: string): Promise; recheck(id: string): Promise }; export const Certs = () => ( api.add(h)} onRecheck={(id) => api.recheck(id)} /> ); ``` ### Vue ```vue ``` ### Blade ```blade @php $certs = [ ['id' => 'c1', 'host' => 'app.example.com', 'issuer' => "Let's Encrypt", 'validTo' => '2026-11-30T09:00:00Z', 'autoRenew' => true], ['id' => 'c2', 'host' => 'api.example.com', 'issuer' => 'DigiCert', 'validTo' => '2026-10-04T09:00:00Z'], ['id' => 'c3', 'host' => '*.example.org', 'issuer' => "Let's Encrypt", 'validTo' => '2026-10-20T09:00:00Z', 'autoRenew' => true], ['id' => 'c4', 'host' => 'legacy.example.com', 'issuer' => 'Sectigo', 'validTo' => '2026-09-27T09:00:00Z'], ]; @endphp
``` ### HTML + Alpine ```html

TLS certificates

When each certificate expires, so none lapses unnoticed.
Auto renew
Actions
45 d 12 d 3 d Expired 2 d ago Unknown
```