Use this template when an internal team needs one screen for navigation, KPIs, saved queues, filters, selected-row actions, table scanning, and record review. It is intentionally dense: the operator should be able to assess the queue, select a record, and decide the next action without moving to a separate detail page.

Template

Exception command center

Order review queue

Monitor at-risk fulfillment, switch queues, and resolve the selected order from one surface.

Needs review

SLA risk within 4 hours

Manual queueUpdated 2m ago

On-time rate

+1.8%

96.4%

Rolling 7 day fulfillment

Target 95%Healthy

Warehouse load

82%

BKK-02

Primary queue for this shift

3 lanes active12 blockers

QueueNeeds review

WarehouseBKK-02

SLA< 4h

3orders selected

Priority queue selection

Order	Customer	Status	Owner	ETA
ORD-4821	Northwind Supply B2B portal	Review	Mina	Today 16:30
ORD-4819	Atlas Retail EDI	Picking	Krit	Tomorrow
ORD-4815	Metro Goods Marketplace	Packed	Nok	Today 18:00

ORD-4821

Northwind Supply · B2B portal

Review

Fulfillment decision

Address mismatch requires manual approval before pick release.

Risk: High
Owner: Mina
Warehouse: BKK-02
ETA: Today 16:30

Latest activity

Address warning raised by risk rules.
Inventory reserved in lane 3.
Customer requested same-day dispatch.

Code

import {
  AdminShell,
  AdminShellBody,
  AdminShellHeader,
  AdminShellMain,
  AdminShellPanel,
  AdminShellSidebar,
  MetricCard,
  PageHeader,
  RecordInspector,
  SidebarNav,
  ViewSwitcher,
} from '@nim-ui/components';

export function OperationsWorkspace() {
  return (
    <AdminShell density="compact">
      <AdminShellBody>
        <AdminShellSidebar aria-label="Operations navigation">
          <SidebarNav aria-label="Primary navigation">{/* nav groups */}</SidebarNav>
        </AdminShellSidebar>
        <AdminShellPanel>
          <AdminShellHeader>{/* global actions */}</AdminShellHeader>
          <AdminShellMain>
            <PageHeader>{/* page context and primary actions */}</PageHeader>
            <div className="grid gap-3 md:grid-cols-3">
              <MetricCard>{/* queue KPI */}</MetricCard>
              <MetricCard>{/* performance KPI */}</MetricCard>
              <MetricCard>{/* capacity KPI */}</MetricCard>
            </div>
            <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
              <section>{/* ViewSwitcher, DataToolbar, FilterSummary, BulkActionBar, DataTable */}</section>
              <RecordInspector>{/* selected record detail and actions */}</RecordInspector>
            </div>
          </AdminShellMain>
        </AdminShellPanel>
      </AdminShellBody>
    </AdminShell>
  );
}

Composition Notes

Use AdminShell and SidebarNav when the page belongs to a persistent internal app, not a standalone report.
Put MetricCard above the queue only when the metrics change the operator's immediate decision.
Use ViewSwitcher for saved queues and DataToolbar for search, filters, and table commands.
Keep FilterSummary visible while filters affect the table result set.
Show BulkActionBar only when selected rows have available actions.
Pair a dense table with RecordInspector when row selection needs approval, escalation, metadata, or audit context.
On mobile, allow the queue and table to scroll horizontally inside their own surfaces rather than widening the document.

Backoffice Operations Template