EnterpriseFloorplansDashboard

Dashboard

Executive and operations view that keeps status, decisions, and action queues in one glance.

LandingOverviewPerformance

Overview

A dashboard floorplan gives teams fast context across health, throughput, and action risk.

It should reduce decision latency through clear prioritization, role-relevant modules, and limited motion.

Treat the dashboard as an entry point: every metric, exception, and queue item should disclose freshness and lead to evidence or action.

Monitor health and move priority work

Live preview

Change the reporting range, refresh source status, inspect performance, and move urgent requests into active review.

OPERATIONS CONTROL

Good morning, Maya

Review service health and act on the work that could miss policy.

Systems operationalLive data · updated 2 minutes ago
Requests processed1,24812.4% above last week
SLA attainment98.6%0.8 points higher
Open exceptions72 need attention
Median approval2.4h18 minutes faster
THROUGHPUT

Completed requests

On target
Prior periodCurrent periodTarget 1,100
WORK QUEUE

Approvals approaching SLA

RequestOwnerDueStatus
Production access exceptionAPR-2048Maya Chen18 minEscalated
Vendor renewal approvalAPR-2044Jon Bell1 hrIn review
Data export requestAPR-2039Priya Shah3 hrsPolicy check
INSIGHT

Approval time improved

18 min

faster after routing finance requests directly to the policy owner.

Anatomy

Use each piece in this order to keep interpretation and automation consistent.

OPERATIONSWorkspace health7 days
Requests1,248
SLA98.6%
Exceptions7
TREND
WORK QUEUE
12345
  1. 1
    Hero metric row

    Top-level KPIs with unit and trend context.

  2. 2
    Action rail

    Quick path to most critical operational actions.

  3. 3
    Trend modules

    Mini charts and alerts with relative recency.

  4. 4
    Work queue

    Prioritized items with status and ownership.

  5. 5
    Secondary insights

    Contextual modules for exceptions and next checks.

The ordering here is not visual-only; it reflects interaction priority and expected user cognition. Keep this order unless policy demands a specific domain exception.

When to use

Use this pattern when the user needs guided consistency, state, and reuse at scale.

Recommended

  • Executive review

    Use for quick periodic status checks across multiple streams.

  • On-call rotation

    Use with triage indicators and criticality tags.

  • Product operations

    Use for recurring release and support standups.

When not to use

Avoid forcing this pattern where simpler, direct interactions are sufficient.

Avoid

  • Single transaction flow

    Use detail pages for step-by-step tasks.

  • Highly dense operational tables

    Use list-report floorplan instead.

  • Read-only portals

    Avoid heavy controls when no actions are needed.

Variants

A small number of variants helps teams choose correctly without adding complexity.

Executive

Top-level snapshots with strategic metrics.

Operations

Action-first view with urgent queues and escalation status.

Configurable

Widget-level editing by role and workspace.

States

States communicate readiness, risk, and expected user behavior.

StateTriggerVisual responseInteraction
LoadingFresh data fetchSkeleton cards and fallback totalsKeep CTA available if safe.
HealthyNo blocking alertsGreen trend and confidence indicatorsEncourage routine review actions.
AlertSLA breach or backlogContrast-heavy badgesExpose quick remediation actions.
StaleRefresh deadline exceededLast-updated time and stale source warningPreserve prior values and offer a manual retry.
Partial dataOne or more sources unavailableUnavailable modules identify the affected sourceKeep independent modules usable and avoid a misleading global total.

Behavior

Behavior should remain predictable across devices, permissions, and async edges.

Refresh strategy

Use pull-to-refresh and interval sync with clear staleness states.

Composable cards

Allow layout-level config for role-specific dashboards.

Traceability

Each metric links to the underlying detail source.

Accessibility

Keep interaction clarity high and ensure assistive technologies get the same meaning.

KeyAction
ghNavigate to dashboard home section when keyboard bindings are configured.
1Jump to first primary widget in keyboard mode.
RRefresh dashboard data manually if supported.
  • Do not show critical alerts only through color.
  • Use headings and landmarks to group metric groups.
  • Keep widget ordering stable to reduce screen reader disorientation.
  • Provide text summaries for chart direction, period, and comparison.
  • Announce refresh completion and queue changes through a polite live region.

Content guidelines

Consistency is achieved by language standards, not by design only.

Metric copy

Prefer nouns + verbs that indicate actionability.

ExampleSLA breaches this week

Trend language

Use plain trend language in addition to sparklines.

ExampleDown 4% from last week

Prioritization

Order cards by business urgency, not alphabet.

ExampleOpen incidents first, then usage metrics.

Examples

Reference implementation style, payloads, and practical behavior.

Compose an operations dashboard

  • Show one clear callout for escalation before less critical metrics.
  • Keep the reporting period controlled at page level so every module compares the same range.
  • Preserve semantic headings, regions, and source freshness when arranging cards.
OperationsDashboard.tsx
tsx
import { Badge, Button, SegmentedControl } from 'omverse-ui'
 
export function OperationsDashboard({ snapshot, range, onRangeChange, onRefresh }) {
return (
<main aria-labelledby="dashboard-title">
<header>
<div>
<h1 id="dashboard-title">Operations control</h1>
<p role="status">Updated {snapshot.updatedLabel}</p>
</div>
<SegmentedControl
aria-label="Dashboard reporting range"
items={rangeOptions}
value={range}
onValueChange={onRangeChange}
/>
<Button variant="outlined" onClick={onRefresh}>Refresh</Button>
</header>
 
<section aria-label="Key performance indicators">
{snapshot.metrics.map((metric) => (
<article key={metric.id}>
<h2>{metric.label}</h2>
<strong>{metric.value}</strong>
<p>{metric.trendLabel}</p>
</article>
))}
</section>
 
<aside aria-labelledby="priority-queue-title">
<h2 id="priority-queue-title">Priority queue</h2>
<Badge color="warning">{snapshot.priorityCount}</Badge>
</aside>
</main>
)
}

Model freshness independently

  • Track source status per module instead of hiding partial failures behind one page-level loading state.
  • Keep the last verified value visible when policy allows and label it as stale.
  • Exclude unavailable values from derived totals and state that exclusion in plain language.
dashboard-snapshot.json
json
{
"generatedAt": "2026-08-21T09:42:00Z",
"range": "7d",
"sources": {
"approvals": { "status": "current", "updatedAt": "2026-08-21T09:41:48Z" },
"audit": { "status": "stale", "updatedAt": "2026-08-21T09:32:10Z" }
},
"metrics": [
{ "id": "sla", "value": 98.6, "unit": "percent", "trend": 0.8 }
]
}
Open linked component reference for implementation patterns

Props / API

Use these API entries as a baseline contract and validate them against your domain layer.

These names are implementation-oriented and should map to your local contracts.

Props

PropTypeDefaultDescription
widgetsreadonly DashboardWidget[]requiredOrdered layout cards with metadata and drill links.
healthDashboardHealthrequiredDefines overall status used in page chrome.
rangeDashboardRange'7d'Shared reporting period applied consistently across compatible modules.
sourceStatusRecord<string, SourceStatus>requiredFreshness and availability metadata for each dashboard source.
refreshEveryMsnumber30000Interval for periodic updates.
onAction(widgetId: string, action: string) => voidrequiredAction callback from quick actions.