承認ワークフローApprovalWorkflowExperimental
Interactive approval / review workflow: drives an ordered pipeline of stages through advance→next, send-back (to a prior stage with a reason, rolling back later records) and reject (terminal), recording an actor + timestamp on each transition, and renders the result with ApprovalSteps (state never colour-only). Controlled via value + onChange; advancing is gated by canAdvance. For case management, benefit/application screening, ringi/expense approval, onboarding and any staged back-office review.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| stages | WorkflowStage[] | - | Ordered pipeline stages: { id, label, name? }. |
| value | WorkflowValue | - | Controlled state: { currentStageId, status?, records? }. status = 'in-progress' | 'approved' | 'rejected'; records keyed by stage id hold { actor, at, comment }. |
| onChange | (next: WorkflowValue) => void | - | Called on advance / send-back / reject with the next state. |
| canAdvance | boolean | true | Gate advancing OUT of the current stage (e.g. required docs checked). |
| actor | ReactNode | - | Recorded on each transition (who acted). |
| now | () => ReactNode | new Date().toLocaleString('ja-JP') | Timestamp written into records (called only on a user action). |
| allowSendBack / allowReject | boolean | true | Show the 差戻し / 却下 controls. |
| advanceHint | ReactNode | - | Shown next to a disabled advance button (why it's blocked). |
| labels / stateLabels / variant | object / object / 'default' | 'compact' | - | Action-button labels, ApprovalSteps state labels, and the ApprovalSteps variant. |
Usage
import * as React from "react"
import { ApprovalWorkflow, type WorkflowStage, type WorkflowValue } from "@gunjo/ui"
const stages: WorkflowStage[] = [
{ id: "intake", label: "申請受付" },
{ id: "docs", label: "書類審査" },
{ id: "eligibility", label: "資格判定" },
{ id: "decision", label: "決定" },
{ id: "pay", label: "支給" },
]
function Screening() {
const [value, setValue] = React.useState<WorkflowValue>({ currentStageId: "intake" })
return (
<ApprovalWorkflow
stages={stages}
value={value}
onChange={setValue}
actor="審査担当 田中"
canAdvance={requirementsMet} // gate advancing out of the current stage
advanceHint="必要書類が未チェックです"
/>
)
}
// advance → records {actor, timestamp} + moves to next (last stage → status "approved")
// send-back → pick a prior stage + reason, rolls back later records
// reject → terminal "rejected" with a reason