shadcn.io is not affiliated with official shadcn/ui
Fleet Management Kanban Block for Svelte
A four-column fleet board (Available, On route, In service, Out of service) of ten vehicles with odometer readings and a service word from a fixed date, where an overdue vehicle can't go on route.
Installation
Overview
Keep a small fleet moving with this vehicle board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Available, On route, In service and Out of service) and ten vehicles. Each card shows the vehicle, its fleet number in mono, always read left to right, its odometer in kilometres and a service word worked out from a fixed date: overdue by so many days, due in so many days, or a date. Every column head counts its vehicles and the overdue ones, and the sentence under the heading is worked out from the cards. One rule guards the board: a vehicle whose service is overdue can't go On route, and the refusal says to send it to In service first, where the next service is booked six months on. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu under "Move to". A polite status line reports each change and Reset restores the fleet. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For depots, delivery firms and any fleet with a service interval.
FAQ
How do I fill it with my own vehicles?
Edit COLUMNS and START. A vehicle has an id, the column it starts in, a number, a model, its odometer km and due, the ISO date its next service is due. The service words, the overdue counts and the sentences are calculated from them.
Where does
From the constant AS_OF, a fixed date, never the clock, so the board reads the same on the server, in the browser and in tests. For a real fleet, pass the current date in as a prop and compute daysTo from it.
How does the service rule work?
refusalOf returns a reason when a vehicle going On route is past its due date. All routes ask it. settleCards sets the next service date to BOOKED whenever a vehicle lands in In service, so a serviced vehicle can leave the workshop and go out.
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 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. Each step is announced in the status line. The card's "More actions" menu offers a "Move to" choice for every column too, which is the route for a single pointer and for touch.
What stays in the demo, and how do I save the moves?
Everything: moves and booked services live in the component's state, and a reload or Reset restores the fleet. Odometer readings don't change. To save for real, call your API from put and update the cards from the response. The vehicles are made up.
How does it look on a phone?
The columns scroll sideways in one named region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. The service word and the odometer stay on one row. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu moves a card with a single tap.