shadcn.io is not affiliated with official shadcn/ui
Client Projects Kanban Block for Svelte
A client board with a column per client and twelve projects, each drawing its hours logged against its budget as a meter with an over-budget word and a Log 4 hours button.
Installation
Overview
See where every client's hours are going with this client projects kanban for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds one column per client (four of them, sharing their lines) and twelve projects. Each card draws its hours logged against its budget as a thin meter with the figures in words ("36 of 40 hours") and a state word ("4 hours to go", "At budget", "Over budget by 4 hours"); an over-budget project gets a hatched meter and an alert glyph. "Log 4 hours" on a card adds time, so a project can cross its budget in the demo. Every client head adds up its hours against its budgets, and the sentence under the heading counts the projects that are over. A project over budget stays with its client, and the refusal says the overage belongs on that client's invoice. A card 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 columns scroll sideways in one named region. For agencies, consultancies and any retainer work billed by the hour.
FAQ
How do I fill it with my own clients and projects?
Edit COLUMNS and START. A client column has an id and a name; a project has an id, a title, its budget and hours in whole hours, and the column (client) it starts in. The meters, the words and the header sentence are calculated from the cards.
What happens when a project goes over budget?
Its meter fills and hatches, the card says "Over budget by" and the number of hours, and the status line says so when "Log 4 hours" tips it over. From then on refusalOf keeps it in its client's column, because moving it would shift the overage to another client's totals. Change STEP to log a different number of hours, or replace the button with a field.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the project'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 column (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. A step into another client for an over-budget project is refused in the status line and the project stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every client under "Move to" with the current one ticked, so one choice 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, and how do I save it?
Everything: The moves and the logged hours live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your time-tracking API from act (Log 4 hours) and your projects API from put (every finished move), then update the cards from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card.