# Attention Routing 01 - Review queue (`attention-routing-01`) - SignalOS page block

> 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.

- **Version:** 0.3.4
- **Kind:** block (group: attention-routing) · **Category:** pages
- **Install:** `npx shadcn@latest add @signalos/attention-routing-01`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/filter-toolbar, @signalos/page-header, @signalos/record-list, @signalos/pagination
- **npm dependencies:** lucide-react@^1.7.0
- **Files installed:** `src/components/blocks/attention-routing-01/AttentionRouting01.tsx`, `src/components/blocks/attention-routing-01/AttentionRouting01.types.ts`, `src/components/blocks/attention-routing-01/AttentionRouting01.constants.ts`, `src/components/blocks/attention-routing-01/AttentionRouting01.utils.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
// 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 | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `key` | `string` | yes | - | Stable key. |
| `value` | `string` | yes | - | Current value. |
| `onChange` | `(value: string) => void` | yes | - | Change handler. |
| `options` | `readonly AttentionFilterOption[]` | yes | - | Selectable options. |
| `tone` | `"warning" \| "primary" \| "neutral" \| undefined` | no | - | Accent tone for the active segment. |

### `AttentionSelectFilter`

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

### `AttentionFilterOption`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `string` | yes | - |  |
| `label` | `string` | yes | - |  |

### `AttentionRouting01Props`

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

## 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.