Attention Routing 01 - Review queue

v0.3.4

Fully reusable list-based workflow block composed from Page Header, Filter Toolbar, Record List, and Pagination. Supports generic filtering, search, selection, and custom rendering. Domain-agnostic and configurable via props.

View as Markdown

Preview

Open full page ↗

Install & usage

npx shadcn@latest add @signalos/attention-routing-01

Pulls the page source plus its widget dependencies (@signalos/tokens, @signalos/utils, @signalos/filter-toolbar, @signalos/page-header, @signalos/record-list, @signalos/pagination) into your app - you own the copy. Requires access.

usage

// after: npx shadcn@latest add @signalos/attention-routing-01
// mount the pulled page in a route, e.g. src/app/attention-routing/page.tsx
import { AttentionRouting01 } from "@/components/blocks/attention-routing-01/AttentionRouting01"

export default function Page() {
  return <AttentionRouting01 />
}

Props

AttentionSegmentFilter

Prop	Type	Default	Description
key*	`string`	-	Stable key.
value*	`string`	-	Current value.
onChange*	`(value: string) => void`	-	Change handler.
options*	`readonly AttentionFilterOption[]`	-	Selectable options.
tone	`"warning" \| "primary" \| "neutral" \| undefined`	-	Accent tone for the active segment.

AttentionSelectFilter

Prop	Type	Default
key*	`string`	-
value*	`string`	-
onChange*	`(value: string) => void`	-
options*	`readonly AttentionFilterOption[]`	-
placeholder	`string \| undefined`	-

AttentionFilterOption

Prop	Type	Default	Description
value*	`string`	-
label*	`string`	-

AttentionRouting01Props

Prop	Type	Default	Description
items*	`readonly TData[]`	-	The items to render in the queue.
title	`ReactNode`	"Attention Routing"	Page heading.
description	`ReactNode`	-	Sub-heading under the title.
loading	`boolean \| undefined`	-	Loading state — renders skeletons via `renderSkeleton`.
error	`boolean \| undefined`	-	Error state — renders `errorMessage`.
errorMessage	`ReactNode`	-
segmentFilters	`readonly AttentionSegmentFilter[] \| undefined`	-	Segmented pill-group filters (severity, deadline window, …).
selectFilters	`readonly AttentionSelectFilter[] \| undefined`	-	Dropdown filters (owner, role, …).
toolbarExtras	`ReactNode`	-	Additional content rendered inside the FilterToolbar (e.g. action buttons, toggles, badges).
searchValue	`string \| undefined`	-	Free-text search value + handler.
onSearchChange	`((value: string) => void) \| undefined`	-
searchPlaceholder	`string \| undefined`	"Search attention items..."
resultLabel	`string \| undefined`	"item"	Singular noun for the result count, e.g. "item".
onRefresh	`(() => void) \| undefined`	-	Refresh affordance.
isRefreshing	`boolean \| undefined`	-
selectedId	`string \| null \| undefined`	-	Currently-selected item id (for highlight state in `renderItem`).
onSelect	`((item: TData) => void) \| undefined`	-	Fired when an item is activated (click / Enter / Space).
renderItem	`((item: TData, index: number) => ReactNode) \| undefined`	-	Renders a single item.
renderSkeleton	`((index: number) => ReactNode) \| undefined`	-	Renders a single loading skeleton row.
getItemKey	`((item: TData, index: number) => string) \| undefined`	-	Stable key for an item.
emptyTitle	`ReactNode`	-	Empty-state copy.
emptyDescription	`ReactNode`	-
summary	`ReactNode`	-	KPI/summary content rendered above the toolbar.
showPagination	`boolean \| undefined`	-	Pagination (hidden while searching).
currentPage	`number \| undefined`	-
pageSize	`number \| undefined`	-
totalRecords	`number \| undefined`	-
onPageChange	`((page: number) => void) \| undefined`	-
onPageSizeChange	`((pageSize: number) => void) \| undefined`	-
detailPanel	`ReactNode`	-	Detail drawer/panel rendered at the end of the block.
className	`string \| undefined`	-
data-testid	`string \| undefined`	-

Changelog

attention-routing-01

0.3.4

Resolved a merge conflict.

0.3.3

Title styling now comes from page-header defaults; className now lands on the block root instead of the inner record list.
Use semantic status tokens (text-text-error, bg-bg-warning, border-border-, bg-status-) instead of raw palette scales so client theme overrides restyle status colors.

0.3.2

Removed unused Button import from preview file.

0.3.1

BREAKING: extra props added

0.3.0

BREAKING: Fully componentized. The block's domain-specific local components (RoutingFeedCard, RoutingFlowTimeline, SignalsList, RelatedHypothesisRow, SignalSummaryFallback, and the MetaBox / SectionLabel / EmptyState atoms) were extracted into reusable, domain-agnostic widgets: ranked-list-card, lifecycle-timeline, metric-bar-list, and data-primitives.
The block is now a pure orchestrator with a generic, strongly-typed API: segmentFilters / selectFilters arrays replace the hardcoded severity/breaching/owner filter props; title / description / searchPlaceholder / resultLabel are configurable; summary replaces summaryData.
Removed the hardcoded filter-option constants and the item cva variants (styling now lives in ranked-list-card).
Removed class-variance-authority, @signalos/badge, @signalos/button, @signalos/dropdown-menu, and @signalos/status-badge from the block's direct dependencies (now transitive through the extracted widgets).
Removed leftover console.log calls and dead/commented code.

0.2.1

BREAKING: Refactored to follow a fully reusable, component-driven architecture
Removed domain-specific filter props (severityFilter, breachingFilter, ownerFilter, etc.)
Added generic segmentFilters and selectFilters arrays for flexible filtering
Added configurable pageTitle and pageDescription props
Removed hardcoded filter options and labels from constants
Component now acts as a pure orchestrator with no business logic
All data, state, and behavior injected via props for maximum reusability
Updated TypeScript interfaces to use generic, domain-agnostic types
Improved documentation with JSDoc comments

0.1.4

Add @signalos/pagination to registryDependencies.

0.1.3

Remove unused pagination props from component signature.

0.1.2

Remove commented unused PaginationBar import.

0.1.1

Content sync fix to bring source in line with published registry payload.

0.1.0

Initial release: attention-routing review queue composed from the shared page-header, filter-toolbar, and list-view widgets. Renders items with a severity badge, owner, wait time, and an overflow actions menu.