shadcn.io is not affiliated with official shadcn/ui
Grant Proposals Kanban Block for Ark UI
A four-lane grant tracker of nine proposals with the amount requested, a deadline worked out in words from a fixed date, and a rule that a proposal without a budget can't be submitted.
Installation
Overview
Keep a research lab's applications in order with this grant board for React with Ark UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines: Drafting, Submitted, Under review and Awarded. Each of the nine proposals is a card with a title, the amount requested, a deadline in words worked out from a fixed date ("Due in 12 days", "Due today", "Overdue by 2 days", and a plain date once the proposal is past Drafting) and its budget line. Every lane head counts its proposals and totals what they request, and the header sentence names the soonest deadline. One rule guards the board: a proposal with no budget can't be submitted, the refusal says so, and the "Add budget" button fills in the planned budget and lifts it. A proposal moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For grant calendars and any application tracker with a deadline and a gate.
FAQ
How do I fill it with my own proposals?
Edit COLUMNS, START and AS_OF. A proposal has an id, the column it starts in, a title, the amount requested in cents (the usd() helper turns dollars into cents), a due ISO date, a budget in cents (0 means none yet) and a plan, the budget that "Add budget" fills in. Set AS_OF to today's date in production, or compute it once on the server.
How are the deadlines worked out?
From the ISO dates and the one AS_OF constant, as whole days since the epoch, so the words never depend on the visitor's clock or time zone and the server and the browser agree. While a proposal is in Drafting the words are relative; once it is submitted its deadline is a plain date such as "Deadline 9 Oct", written without Intl.
How does the budget rule work?
refusalOf returns a sentence when a drafting proposal with no budget is moved to Submitted; the card stays where it is, focus returns to it and the sentence appears in the status line. "Add budget" is a real button with the proposal's name in its label; it sets the budget to the planned figure and says so, after which the move is allowed. Reset also takes budgets back.
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 in the lane, ArrowLeft and ArrowRight go to the neighbouring lane (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 lanes 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.
What stays in the demo?
Everything. The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the deals and the figures are made up. Awarded cards are not locked here; add that rule in refusalOf if your funder requires it. To keep a board, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The lanes scroll sideways inside the board with the next lane showing, and each lane scrolls up and down within the board's fixed height, so the page does not jump when a card moves. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.