shadcn.io is not affiliated with official shadcn/ui
Contract Lifecycle Kanban Block for Vue
A four-stage contract board of twelve compact cards with values and an expiry word counted from a fixed date, a dialog on each counterparty for terms and clauses, and a rule that a contract needs a signed date to become active.
Installation
Overview
Follow agreements from first draft to expiry with this contract board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines: Draft, Negotiation, Active and Expired, each head adding up the value of its contracts. Each of the twelve contracts is a compact card with the counterparty, the value in whole dollars and an expiry word worked out from the end date against a fixed date ("Ends in 9 days", "Expired 40 days ago"). Pressing a counterparty opens a real Dialog with the kind of agreement, the term, the renewal terms, the key clauses as a list, a signed date and a "Move to" Native Select; Escape or Close shuts it and focus returns to the card. One rule guards the Active stage: a contract with no signed date cannot become active, the refusal says so, and the dialog has the date field that clears it. A card also moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a polite status line in the foot reports each move and Reset restores the board. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For contract registers, renewals and any lifecycle with a sign-off.
FAQ
How do I fill it with my own contracts?
Edit COLUMNS and START. A contract has an id, the column it starts in, the counterparty, its kind, a value in cents, start, end and signed dates as ISO strings (empty when unknown), the renewal terms and a list of clauses. Totals in the heads and the header sentence are calculated from the cards.
How is the expiry word worked out?
From the end date and AS_OF, a fixed date at the top of the file, never from the clock, so the words stay true when the demo is read later: whole days between the two give "Ends in 9 days", "Ends tomorrow", "Ends today", "Expired 40 days ago" or, for an active contract past its end date, "Past its end date by 3 days". In your app, set AS_OF from the server's date and let the word follow.
How does the signed date rule work?
refusalOf decides: a contract with an empty signed date cannot go to Active, whether it is dragged, moved with the keyboard, chosen from the card's menu or picked in the dialog, and all four use the same sentence. Typing a signed date in the dialog clears the rule for that contract; a date after the fixed date is refused.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, ArrowUp and ArrowDown change its place, ArrowLeft and ArrowRight go to the neighbouring column (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the columns with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch, and it obeys the same rule as dragging.
What stays in the demo?
Everything. Signed dates and moves live in the component's state, nothing is saved, signed or sent, and a reload or Reset brings back the starting board. The firm, the counterparties and the terms are made up and are not legal text. To keep changes, call your API from put and from the dialog's handlers.