Dashboard
The Dashboard is the first thing a consumer sees, and it is built to answer one question: is everything in sync? Everything on the page supports that answer, from the health banner at the top to the provider coverage and activity feed below it.
What it does#
The health hero. A large banner sits at the top and derives its state from three numbers: outdated or risky integrations, findings awaiting review, and Sync PRs in flight. If anything is out of sync, the banner turns red and tells you how many integrations are affected. If work is underway but nothing risky is outstanding, it turns amber and reads “sync in progress.” If there is nothing to fix, it turns green and reads “everything is in sync.” The banner also carries a “Review Sync PRs” button that jumps straight to the queue.
Headline counts. Next to the banner are three quick stats: open PRs, findings pending review, and integrations out of sync. These are the same numbers that drive the banner color, surfaced as figures.
Your surface. A row of tiles describes what API Sync is watching for you: how many Business Applications you have, how many Technical Applications (the scanned repos), how many provider integrations were detected across them, and how many of those providers matched an entry in the registry.
Provider coverage. A panel lists the providers the selected team actually uses. Each provider shows its open change count and how API Sync maintains it (partner, platform, or unsupported). A summary row above the list groups the providers by that source and totals the open changes. If you have not picked a team, the panel asks you to select one, because coverage is scoped to a team.
Recent activity. A feed on the right shows the latest events across the org, each with a provider icon and a relative timestamp like “3h ago” that reveals the exact time on hover.
How it behaves#
Team scoping. Provider coverage follows the active team chosen in the top bar. The Dashboard reads that team from application state and passes its id to the backend, which returns only the providers that team’s applications use. Change the team and the panel changes with it. The rest of the page (the hero and the surface tiles) reflects the wider org picture.
Honest states throughout. Every section handles loading, empty, and error on its own. While data loads, the hero shows a “checking sync status” message with a progress bar and the panels show skeleton placeholders. If the team uses no providers yet, the coverage panel says so and points you to Integration Inventory to scan. If the dashboard request fails, an error alert appears at the top rather than a blank or misleading screen. Counts render as a dash until real data arrives, never as a fake zero.
Data flow. The whole page is a single query (useGetApiSyncDashboardQuery) against GET /v1/api-sync/dashboard, optionally with a teamId. The response carries the KPIs, the coverage list, and the activity feed together, so the screen paints in one pass. Like every API Sync call, the response is decrypted and unwrapped before the component reads it.
Read-only. The Dashboard reports state. It does not start scans, open PRs, or change anything. Its only actions are navigation into the screens that do.