Approval Workflow

import * as React from "react"
import {
  ApprovalWorkflowBuilder,
  ApprovalWorkflowTimeline,
  ApprovalWorkflowActions,
  createWorkflowInstance,
  useApprovalWorkflow,
  type WorkflowDefinition,
} from "@/components/micto/approval-workflow"

const definition: WorkflowDefinition = {
  title: "Leave Request Approval",
  steps: [
    {
      id: "department-head",
      title: "Department Head",
      rule: "all",
      slaHours: 24,
      approvers: [{ id: "u-head-1", name: "Dept Head" }],
    },
    {
      id: "hr-review",
      title: "HR Review",
      rule: "any",
      slaHours: 24,
      approvers: [
        { id: "u-hr-1", name: "HR Officer A" },
        { id: "u-hr-2", name: "HR Officer B" },
      ],
    },
  ],
}

export default function Example() {
  const approverOptions = [
    { value: "u-head-1", label: "Dept Head", role: "MICTO" },
    { value: "u-hr-1", label: "HR Officer A", role: "HR" },
    { value: "u-hr-2", label: "HR Officer B", role: "HR" },
  ]
  const [value, setValue] = React.useState(definition)
  const [instance, setInstance] = React.useState(() => createWorkflowInstance(definition))
  const workflow = useApprovalWorkflow({
    value,
    onChange: setValue,
    instance,
    onInstanceChange: setInstance,
    onOverdue: (step) => console.log("Overdue step:", step.id),
  })

  return (
    <div className="space-y-4">
      <ApprovalWorkflowBuilder
        value={workflow.definition}
        onChange={workflow.setDefinition}
        approverOptions={approverOptions}
        showAdvancedFields={false}
      />
      <ApprovalWorkflowTimeline
        definition={workflow.definition}
        instance={workflow.instance}
      />
      <ApprovalWorkflowActions
        definition={workflow.definition}
        instance={workflow.instance}
        approverId="u-head-1"
        onAction={workflow.submitAction}
      />
    </div>
  )
}