Vendor Compliance Ledger Success Block for React

Nothing was verified or sent. The four documents, the vendor and the portal address are typed sample data (the address ends in .example), and the only thing the page does is copy that address through the browser's clipboard. To wire it, build DOCS from your compliance records (a verified day and a valid-until day, empty when it never expires), set AS_OF from the day you render and point the header button at your portal.

From the dates. Every count is the difference in whole days between the typed AS_OF and a document's valid-until day, worked out in UTC, never from the clock; a document that ends within SOON days (90) shows a clock and the count, any other shows a check and Verified. The foot's date comes from the same list: the document that ends first, and REMIND (30) days before it.

It's a native table on every base, with a caption for assistive technology, column headings and each document's name as a row heading, inside a scrollable named region.

No. Verified is a check and the word; an expiring document is a clock and "Expires in 63 days" in a heavier weight, in light and dark alike.

Yes. It writes the full address to the clipboard and a screen reader hears "Portal address copied" (or that the clipboard refused, which happens on a page not served over HTTPS). The field is read-only and left-to-right whatever the page's direction.

The header's button drops under the sentence, the address field fits the width and the table keeps the document and its state, with the verified and valid-until days written under the document's name. The field holds a long address, so it scrolls inside itself.