shadcn.io is not affiliated with official shadcn/ui
Sync Completed Success Block for Vue
A confirmation panel for a finished data sync: a table of records created, updated and skipped for four objects with a segmented bar under each name, a switch for a 15-minute schedule with the next run time, and a Sync now button that adds a second run.
Installation
Overview
Show a sync as a result and as a schedule, with this confirmation panel for Vue with Ark UI. It is the panel Syncglade, a data-sync tool, shows once four objects have moved between a CRM and a data warehouse: a header with one action, the Shine Button that opens the logs, over one framed card in two cells. The start cell is a native Table of the run you are looking at: contacts, deals, notes and files, with the records created, updated and skipped and a thin bar split in the same three parts under each name, and the totals. The end cell is the schedule: a Switch, Sync now, and the list of runs. For syncs, imports and any job that runs again on a timer.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was synced and nothing is scheduled. The two runs are typed sample data, so Sync now always adds the same second run. To wire it, fill FIRST with your finished run, and have Sync now start a real job and add its result; set INTERVAL to your schedule and make the switch save it on your server.
How is the next run worked out?
From the start of the latest run plus the interval: run 1 started at 09:00 UTC, so with the switch on the next run is at 09:15 UTC; after Sync now adds run 2, which started at 09:06 UTC, it is 09:21 UTC. Turning the switch off replaces the time with a sentence that it syncs only when you press Sync now, and the live line says so.
What do the runs do?
Each run is a native radio button, so the arrow keys move between them. Choosing one fills the table with that run's counts and its title with its start time; the table keeps its four rows, so the panel never moves. Run 2 is a reserved slot until Sync now adds it, and a second press says both runs are already in the list.
How do I read the bars?
Under each object's name a thin bar is split into the records created (solid), updated (mid grey) and skipped as unchanged (hollow), each as long as its count. The counts are also in the columns, so the bar is never the only way to read it, and a key under the table names the three parts. The totals row is added up from the objects.
How does it look on a phone?
The schedule goes under the table. The table keeps all four columns, with the bars under the names, and the run list and Sync now are full width.
Where does the link go?
View logs is the Shine Button in the header: a link to your own route. It is a Shine Button rendered as a link through the framework's own as-child mechanism.