shadcn.io is not affiliated with official shadcn/ui
Zendesk Integration Status Monitoring Block for React Aria
Sync freshness for six help-desk objects as bars against their intervals, a Production or Sandbox select, lateness in words with the backlog, and a detail band with the last error and a Retry.
Installation
Overview
Spot the help-desk object that has stopped syncing with this integration status panel for React with React Aria. It is Syncharbor, a sync connector (made up) that copies tickets, users, organizations, macros, views and satisfaction ratings from Zendesk. A select in the header picks the Production or the Sandbox connection. Each object is a row with a bar for the time since its last sync against its interval, a tick where the interval ends, the lateness in words ("Behind by 12 min") and the records waiting. State is a mark and a word. Pressing a row reads it in a detail band that shows when it last synced, its interval, the backlog and its last error, and a Retry now button that queues nothing outside the demo. Guides draw the frame and its bands; the entrance is CSS only. For sync dashboards, integration pages and on-call handovers.
FAQ
How do I use my own objects?
Edit CONNECTIONS: each has a list of objects with the minutes since the last sync (age), the interval, the backlog and the last error (empty when the last run was clean). An object is late when its age is over its interval, and failing when it has an error. The header counts, the bars, the words and the detail band are derived.
What does Retry do?
In this demo it marks the retry as queued for that object and says so in the status line; nothing is sent. In your app call your connector's retry from the handler and show its result in the same place.
What is real here and what is typed?
All of it is typed and nothing connects. Zendesk is named once as the help desk being read, with no logo, and the connector and its figures are made up.