CertificateMonitor

Code

import { CertificateMonitor, type CertificateRecord } from "@fadymondy/nasaq/web";declare const certificates: CertificateRecord[];declare const api: { add(host: string): Promise<void>; recheck(id: string): Promise<void> };export const Certs = () => (  <CertificateMonitor certificates={certificates} onAdd={(h) => api.add(h)} onRecheck={(id) => api.recheck(id)} />);

Security · beta

Live examples and controls: CertificateMonitor in the lab.

InstallCopy Anchor Link

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 useCopy Anchor Link

• A security or hosting page that lists certificates.
• DaysLeftBadge beside a domain elsewhere.

When not to useCopy Anchor Link

• Issuing certificates or CSRs.
• Domain verification: use DomainsManager.

ImportCopy Anchor Link

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

Quick startCopy Anchor Link

import { CertificateMonitor, type CertificateRecord } from "@fadymondy/nasaq/web";

declare const certificates: CertificateRecord[];
declare const api: { add(host: string): Promise<void>; recheck(id: string): Promise<void> };

export const Certs = () => (
  <CertificateMonitor certificates={certificates} onAdd={(h) => api.add(h)} onRecheck={(id) => api.recheck(id)} />
);

AnatomyCopy Anchor Link

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

APICopy Anchor Link

CertificateMonitor: every Card prop except children, plus:

DaysLeftBadge: days, host, thresholds.

Helpers (pure, tested): certDaysLeft(validTo, now), certStatus, certTone, byExpiry, summarizeCerts, isValidCertHost.

ExamplesCopy Anchor Link

Custom thresholds

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

export const Badge = () => <DaysLeftBadge days={20} thresholds={{ warnDays: 14, criticalDays: 3 }} />; // still green

AccessibilityCopy Anchor Link

• 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 & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. Hostnames stay left to right; dates use Latin digits.

Styling & tokensCopy Anchor Link

• Built on DataTable, Card, Badge, AlertDialog and --nq-* tokens. Target [data-slot="certificate-monitor"].

Do / Don'tCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• domains-manager
• proxy-hosts
• vuln-report

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-security-certificate-monitor--docs