shadcn.io is not affiliated with official shadcn/ui
Deadline Tracker Kanban Block for Solid
A board of thirteen studio jobs whose lanes (Overdue, Today, This week, Later and Done) are worked out from each due date, so moving a card changes its date and the status line says what it is now.
Installation
Overview
Keep a studio's deadlines honest with this deadline tracker for Solid with Ark UI. A hairline frame with a plus mark on each corner holds five lanes that share their lines: Overdue, Today, This week, Later and Done. A card's lane is never typed. It is worked out from its due date against one fixed "today" (Monday 12 October in this demo, with no clock), so a lane head can say what it covers, "13 to 18 Oct", and a card can say "5 days overdue" or "Due tomorrow" as a glyph and a word in an outline Badge, with the date in a time element and the owner's initials in an Avatar. Moving a card changes its date: Today sets it to today, This week to that Friday, Later to two weeks out, and the status line says what the new date is. Overdue takes no drops, because only a date in the past puts a card there, and the refusal says so. A card moves three ways: drag it by its grip, focus the grip and press Space to pick it up, the arrow keys to move it, Space to drop it and Escape to cancel, or open its Dropdown Menu and choose a lane under "Move to", which is the route for a single pointer and for touch. A polite status line in the foot reports each move and Reset puts the board back. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For client work, release checklists and any list where a date decides what is next.
FAQ
How do I fill it with my own jobs?
Edit START and, if you want other lanes, COLUMNS. A card has an id, a title, a project, an owner, a due date as YYYY-MM-DD, a done flag and the column it starts in, which must match what laneOf makes of its date (the Done lane aside). Change AS_OF to move the demo's "today"; on a real page pass the current day in from the server so the lanes and words agree on both sides.
How is a card's lane worked out, and what does a move change?
laneOf reads the days between the card's date and AS_OF: below zero is Overdue, zero is Today, up to six is This week and anything later is Later. A card dropped on a date lane gets that lane's date from laneDate unless it is already in that lane, so a reorder inside a lane changes nothing. Dropping on Done keeps the date and marks the job done, and dragging a done job back to a date lane reopens it with that lane's date. Each finished move says which date it ended on.
Why can't I drop a card on Overdue?
Because Overdue is a fact about the date, not a choice. A job is overdue when its date has passed, and a tracker that let you drop a card there would have to invent a past date. The rule is refusalOf, which the drop, the keyboard steps and the menu all ask, so no route gets around it; the refusal tells you to pick a date lane instead. Replace it if your tracker should let people backdate.
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. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring lane (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every lane and the current one ticked. Choosing one moves the card by the same route as a drop, so the same rule applies, puts focus on the card in its new place and says so in the status line.
What stays in the demo, and how do I save the moves?
Everything: the cards live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through (the menu, a drop and the keyboard drop), and send the new due date it produced. The names, jobs and dates are made up.