対応キューActionQueueExperimental
The severity-sorted 'action-needed' worklist: the triage surface every back-office / dispatch / ops / CRM home screen opens with (失効防止 / 更新 / 満期 / 誕生日, ダイヤ乱れ・遅延・運休, アラート対応). Each row carries a severity (critical/warning/info/neutral → icon + tone, never colour alone, with an sr-only severity label), a category chip (kind), a headline + detail, trailing meta (due / time / count) and optional action buttons; rows sort critical → neutral. The other half of the morning dashboard alongside StatGroup (the KPI strip). For a single notice use Alert; for an ambient bell tray use NotificationCenter; this is the inline, act-now list. Presentational by default — onSelect makes a row's body activatable.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| items | ActionItem[] | - | 対応項目の配列。 |
| ActionItem.severity | "critical" | "warning" | "info" | "neutral" | "neutral" | 重大度。アイコン＋トーン＋（ソート時の）並び順を決める。色だけに依存しない（アイコン形＋sr-only ラベル）。 |
| ActionItem.kind | ReactNode | - | 種別チップ（失効リスク / 更新 / 満期 / 遅延拡大 …）。 |
| ActionItem.title | ReactNode | - | 見出し（何を・誰/どこに対して）。 |
| ActionItem.detail | ReactNode | - | 補足行（推奨アクション・文脈）。 |
| ActionItem.meta | ReactNode | - | 右寄せの副次テキスト（期日 / 時刻 / 件数）。 |
| ActionItem.actions | ReactNode | - | 末尾のアクションボタン（行ボタンに入れ子にせず兄弟として描画）。 |
| ActionItem.onSelect | () => void | - | 行の本文を活性化（詳細を開く）。任意——省略すると行は表示専用。 |
| sortBySeverity | boolean | true | 描画前に重大度（critical → neutral）でソート。 |
| emptyLabel | ReactNode | "対応が必要な項目はありません" | 項目が無いときの破線プレースホルダ。 |
Usage
import { ActionQueue, Button } from "@gunjo/ui"
<ActionQueue
items={[
{ severity: "critical", kind: "失効リスク", title: "田所さま — 終身保険が今月末で失効",
detail: "失効防止コールを本日中に。", meta: "本日",
actions: <Button size="sm">対応</Button> },
{ severity: "warning", kind: "更新", title: "三宅さま — 更新期限", meta: "あと7日" },
{ severity: "info", kind: "誕生日", title: "宇佐美さま — お誕生日", meta: "明日" },
]}
/>