状態盤StatusBoardExperimental

The live entity status board at the center of every dispatch / monitoring floor: many labeled entities (vehicles / machines / spots), each carrying a status (空車 / 故障 / 稼働中), a location, and a note, laid out as a responsive tile grid. Problems and availability stand out via a tone-accent rail + a colour-safe status pill (icon + text, never colour alone); tiles sort fault-first by default; tiles group by zone/area with a per-group problem count. items[] (flat) or groups[] of {id,label,status,tone,location?,note?,icon?,trailing?,rank?,onSelect?}. The board a Gantt / DataTable / HeatmapChart can't be — taxi 配車盤, 駅務の機器状態盤, ramp GSE board, factory line OEE. (Gantt = rows × time, DataTable = sortable grid of rows, HeatmapChart = read-only value-by-colour matrix; this is a spatial/grouped board of selectable status entities where problems pop.) RSC-safe except the opt-in onSelect.

プレビュー

渋谷エリア

4台

新宿エリア

1件 要対応

故障/空車は先頭にソート・状態はアイコン＋ラベルで色のみに依存しない。グループ見出しは要対応件数を表示。

Props

表は横にスクロールできます
プロパティ型初期値説明
groupsStatusBoardGroup[]-グループ化タイル（各グループ＝見出し＋タイルグリッド＋要対応件数）。
itemsStatusBoardItem[]-フラットなタイル（グループ無し）。groups 指定時は無視。
selectedIdstring | number-1タイルを強調（他は淡色化）。
minTileWidthnumber150レスポンシブグリッドのタイル最小幅(px)。
problemTonesStatusBoardTone[]["danger","warning"]要対応カウント＋ソート優先に数えるトーン。
sortbooleantruefault-first ソート（rank→トーン重大度）。
StatusBoardItem.labelReactNode-エンティティ名（号車/機器名）。
StatusBoardItem.statusReactNode-状態（空車/故障）＝アイコン＋テキストの色安全ピル。
StatusBoardItem.tone"default" | "primary" | "info" | "success" | "warning" | "danger" | "muted""default"状態ピル＋タイルのアクセント。
StatusBoardItem.location / note / icon / trailingReactNode-場所・メモ・先頭アイコン・右寄せ（Meter/件数）。
StatusBoardItem.ranknumber-明示ソート順（小さいほど先頭）。省略時はトーン重大度順。
StatusBoardItem.onSelect() => void-タイルを選択可能に（詳細を開く）。

Usage

import { StatusBoard, type StatusBoardGroup } from "@gunjo/ui"
import { IconCar } from "@tabler/icons-react"

const groups: StatusBoardGroup[] = [
  { label: "渋谷エリア", items: [
    { id: "501", label: "501号車", icon: <IconCar/>, status: "空車", tone: "success",
      location: "佐藤 乗務", note: "渋谷駅付け待ち", onSelect: () => openVehicle("501") },
    { id: "508", label: "508号車", status: "故障", tone: "danger",
      location: "鈴木 乗務", note: "エンジン警告灯・対応要", onSelect: () => openVehicle("508") },
  ]},
]

<StatusBoard groups={groups} />        // or flat: <StatusBoard items={...} />

使用コンポーネント

ActionQueueDataTableBadge