shadcn.io is not affiliated with official shadcn/ui
Sync Completed Success Block for React
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 React with Base 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 with render set to an a element and nativeButton={false}.
Related
- Pro
Data Import Success
Backups and exportsA confirmation panel for a finished CSV import: one bar split into imported, duplicate and failed rows by their counts, a scrolling ledger of the failed rows with the problem and what the file had, and a real CSV error report built from the typed rows.
- Pro
Inventory Updated Success
Saves and updatesA confirmation panel for a stock count: tabs for three locations, each a table of SKUs with the count before, the signed change and the count after and the word Low under the reorder point, equal in height, and four sales channels that each say Synced.
- Pro
Bulk Update Success
Saves and updatesA confirmation panel for a bulk edit: a drawn contacts list whose twelve owner cells were just reassigned, with an undo bar docked at the foot of the stage whose Undo restores every cell, then offers Redo, and a button that applies the edit again.
- Pro
Cache Purge Success
Domains and networkA confirmation panel for a CDN purge: four figures worked out from the data, six edge regions each with a cache bar and the time it took, the purged paths as chips with their object counts, and a local Re-warm that fills the regions one after another.
- Pro
Backup Restored Success
Backups and exportsA confirmation page for a restore from a snapshot: the snapshot and the live database side by side with the same five tables, their row counts and checksums, a Match worked out for every pair, the checksum of the whole snapshot with a copy button and a local health check.
- Pro
Analytics Connected Success
Integrations and syncsA confirmation window for connected analytics: a counting events-a-minute figure, a table of the first eight events that fade in and a bounded feed with Pause, and a docked panel of the chosen event's properties in a JSON tree.