import * as React from "react"; import { IntegrationDetailHealthDashboardFour } from "@/registry/integration-detail-health-dashboard-four/integration-detail-health-dashboard-four"; import { Button } from "@/components/ui/button"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof IntegrationDetailHealthDashboardFour >; type IntegrationDetailHealthDashboardFourStat = NonNullable< ComponentProps["stats"] >[number]; type IntegrationDetailHealthDashboardFourUsage = NonNullable< ComponentProps["usage"] >[number]; type IntegrationDetailHealthDashboardFourEvent = NonNullable< ComponentProps["events"] >[number]; type IntegrationDetailHealthDashboardFourAlert = NonNullable< ComponentProps["alerts"] >[number]; type IntegrationDetailHealthDashboardFourIssueRow = NonNullable< ComponentProps["issues"] >[number]; export function IntegrationDetailHealthDashboardFourDemo() { const stats: IntegrationDetailHealthDashboardFourStat[] = [ { id: "status", label: "Sync status", value: "Healthy", change: "2h ago", status: "ok", helpText: "Last sync completed successfully", }, { id: "latency", label: "Avg. latency", value: "412 ms", change: "▼ 38 ms vs last run", status: "ok", }, { id: "errors", label: "Errors (24h)", value: "5", change: "▲ 2 warnings", status: "warning", }, { id: "accounts", label: "Connected accounts", value: "18", change: "No new accounts", status: "ok", }, ]; const events: IntegrationDetailHealthDashboardFourEvent[] = [ { id: "run-success", timestamp: "Today · 09:24 PT", title: "Full sync completed", description: "23,481 records processed. 3 warnings flagged pending retries.", status: "ok", actor: "system", }, { id: "warning", timestamp: "Today · 09:02 PT", title: "Retry queued", description: "Invoices API returned rate limit. Retry scheduled in 5 minutes.", status: "warning", metadata: "Attempt #2", }, { id: "incident", timestamp: "Yesterday · 19:17 PT", title: "Sandbox credential expired", description: "Sandbox integration token expired. Update credentials to continue syncing test data.", status: "error", actor: "qa-service", }, { id: "resume", timestamp: "Yesterday · 16:48 PT", title: "Sync resumed", description: "Manual pause cleared by RevOps admin.", status: "ok", actor: "maya.chen", }, ]; const alerts: IntegrationDetailHealthDashboardFourAlert[] = [ { id: "credential", title: "Sandbox refresh token expires in 3 days", description: "Rotate credentials or risk losing parity between staging and production environments.", severity: "warning", }, { id: "webhook", title: "Webhook delivery failures", description: "9 deliveries to billing service returned 410. Confirm endpoints are still active.", severity: "error", actions: (

), }, ]; const issues: IntegrationDetailHealthDashboardFourIssueRow[] = [ { id: "rate-limit", name: "Billing API rate limit", severity: "warning", lastDetected: "09:02 PT", occurrences: "7 in last 24h", owner: "platform@nextbase.com", actionLabel: "View details", }, { id: "credential", name: "Sandbox credential expired", severity: "error", lastDetected: "19:17 PT", occurrences: "1", owner: "qa@nextbase.com", actionLabel: "Rotate token", }, { id: "mapping", name: "Field mapping skipped", severity: "warning", lastDetected: "Yesterday", occurrences: "12", owner: "revops@nextbase.com", }, ]; const usage: IntegrationDetailHealthDashboardFourUsage[] = [ { id: "records", label: "Records synced (24h)", value: "23,481", trend: "+11% vs last week", caption: "Includes opportunities, activities, and custom objects.", }, { id: "retry", label: "Retry success rate", value: "96.2%", trend: "+3.4 pts", }, { id: "users", label: "Active admin users", value: "34", caption: "Users receiving notifications across workspaces.", }, { id: "latency", label: "P95 latency", value: "1.9 s", trend: "-18% after caching update", }, ]; return ( console.log("Reconnect triggered")} onPause={() => console.log("Pause sync")} onNotifyTeam={() => console.log("Notify team")} onExport={() => console.log("Export report")} /> ); } const Example = IntegrationDetailHealthDashboardFourDemo export default IntegrationDetailHealthDashboardFourDemo;

Simple