shadcn.io is not affiliated with official shadcn/ui
Migration Tracker Kanban Block for React Aria
A data migration board with Pending, Migrating, Validating and Complete columns, a percentage worked out from records copied, an Advance button per job and a limit of three jobs copying at once.
Installation
Overview
Follow a database move table by table with this migration board for React with React Aria. A hairline frame with a plus mark on each corner holds four columns, Pending, Migrating, Validating and Complete, and eight tables to copy. Every card shows how many records are copied of how many, a bar drawn in SVG, the percentage and its error count in an outline Badge; the band above the board shows the overall share copied and the errors so far, and that percentage is worked out from the cards, never typed. Pending jobs have copied nothing and Validating and Complete jobs have copied everything. A job in Migrating has an Advance Button that copies another quarter and, at 100 percent, moves itself to Validating. Two rules refuse a move in words: at most three jobs migrate at once, shown as three boxes in the head, and a job can't reach Validating before every record is copied. 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 reports each move and Reset restores the board. On a phone the columns scroll sideways in one named region. For data migrations, imports and any job queue with a concurrency limit.
FAQ
How do I use my own tables?
Edit COLUMNS, LIMIT and START. A job has an id, its column, a title, the records to copy, how many are done and its errors. The percentages, the overall bar and the header are worked out from done and records. Record counts in the demo are made up.
How is the percentage worked out?
The overall figure is the sum of done over the sum of records across all cards, and each card's figure is its own done over records. settleCards keeps the numbers honest after every move: Pending is zero, Validating and Complete are full, and a job sent back into Migrating starts again from zero.
Why was my move refused?
Two rules in refusalOf: moving into Migrating while it holds LIMIT jobs is refused and names the jobs that are in it, and moving into Validating or Complete before every record is copied is refused and says how far the job got. Press Advance on a Migrating job to finish it, which frees a slot. The drag, the keyboard and the menu all ask the same function.
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, the arrow keys move it (left and right change column, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. The rule applies to every step, and each step is announced in the status line. React Aria's menu chooses a column by selection.
What stays in the demo?
Everything: the counts live in the component's state, nothing is copied, and a reload or Reset restores the starting board. To drive a real migration, replace grownOf with progress reported by your job runner and keep the slot limit on the server that starts jobs.
How does it look on a phone?
The columns scroll sideways with the next column showing, each column scrolls inside the board's fixed height, and nothing changes size when a card moves or a move is refused. Touch drags from the grip only, so the board still scrolls; the card's menu is the other way to move it.