shadcn.io is not affiliated with official shadcn/ui
Agreements Account Block for Vue
The agreements an account has accepted, with the version and day of each, an update or expired state in words, a What changed disclosure, Accept update, one button for every pending document and a real sample copy to download.
Installation
Overview
Let people see what they have agreed to and catch up on what changed, with this agreements panel for Vue with Ark UI. Five documents (Terms of Service, Privacy Policy, Data Processing Addendum, Marketing Consent and Beta Terms) are rows with the version accepted, the day, and a state as a dot and a word: Accepted, Update available or Expired. A Toggle Group filters by state, each choice with its count. A document with an update opens What changed to the three clauses that differ, and Accept update records the new version as of the fixed as-of day; an expired consent offers Accept again. The header's Shine Button is the only colored control: it accepts every pending document at once. Download a copy is a real Download Trigger that makes a small text file in the tab and says it is a sample, not the signed agreement. An unseen copy of the list keeps the panel's height when the filter narrows it, and an Empty state covers an empty view. It's built from Toggle Group, Download Trigger, Shine Button, Button, Empty and Guides, with a CSS entrance only. For account pages, marketplaces and any app that asks people to accept new terms.
FAQ
How do I fill it with my documents?
Edit AGREEMENTS. Each has an id, a name, the current version and the ISO day it was published, the version the person accepted and the day (on), an ISO expires day when an acceptance lapsed, a lapses flag for documents whose consent ends after a year, and the changes of the current version as short clauses. The state is worked out: expired when the lapse day has passed, an update when the accepted version isn't the current one, otherwise accepted. Every date comes from the one AS_OF constant, never the clock.
What stays local, and how do I make accepting real?
Everything: Accept update and the header button record the new version in this page's state and the status line says nothing was sent; Start over puts the sample back, which a real record never allows. To wire it, post the document id and version to your server in accept and update the row only when it answers. Keep the acceptance, its version and its timestamp on the server, since that is the evidence.
Is the download the real agreement?
No, and it says so. It makes a plain text file in the tab with the name, the version, the day you accepted it and a line that it is a sample from a demo. To make it real, give each document a file on your server and use it as the Download Trigger's data, so people get the exact version they accepted.
What happens to an expired consent?
Marketing Consent here lapses after a year, as the typed lapses flag says. Once the day passes the row reads Expired with the day, shows Accept again and joins the pending count, and accepting renews it for another year from the as-of day. Documents that don't lapse never expire.
How does it look on a phone?
Each row stacks: the document and its version, then its state, then the buttons in a wrapping line. What changed opens under the row. The filter wraps onto more lines and the foot stacks its status over Start over.
Is it accessible?
The documents are a real list. State is a word as well as a dot, What changed is a button that says whether it is open and names its document, and every row's buttons carry the document's name since the visible words repeat. The status line is a polite live region present from the start, and after Accept update focus stays on that row.