承認ステップApprovalStepsExperimental

Approval-route timeline: each step's state (pending / current / approved / rejected / skipped) maps to a tone, icon, and accessible label, with actor, timestamp, and comment. For expense, ringi, and review approval workflows. Built on Timeline.

プレビュー

  1. 申請
    承認
  2. 一次承認（上長）
    差戻し

    勘定科目が交際費ではなく会議費です。修正のうえ再申請してください。

  3. 経理確認
    確認中
  4. 支払
    待ち

Props

表は横にスクロールできます
プロパティ型初期値説明
stepsApprovalStep[]-Each step: { label, state, actor?, timestamp?, comment? }.
state (per step)"pending" | "current" | "approved" | "rejected" | "skipped"-Maps to a marker tone, icon, and text label (state is never colour-only).
stateLabelsPartial<Record<state, string>>-Localizable state text (also used in each step's aria-label).
variant"default" | "compact""default"Density.
classNamestring-Additional CSS class names.

Usage

import { ApprovalSteps, type ApprovalStep } from "@gunjo/ui"

const steps: ApprovalStep[] = [
  { label: "申請", state: "approved", actor: "山田 太郎", timestamp: "5/20 10:12" },
  { label: "一次承認（上長）", state: "rejected", actor: "佐藤 部長",
    timestamp: "5/20 14:40", comment: "勘定科目を会議費に修正のうえ再申請してください。" },
  { label: "経理確認", state: "current", actor: "経理部" },
  { label: "支払", state: "pending" },
]

export function Example() {
  return (
    <ApprovalSteps steps={steps}
      stateLabels={{ approved: "承認", rejected: "差戻し", current: "確認中", pending: "待ち" }} />
  )
}