import * as React from "react"; import { MultiStepFormInternalWorkflowApprovalGateConditionalSubstepsFive } from "@/registry/multi-step-form-internal-workflow-approval-gate-conditional-substeps-five/multi-step-form-internal-workflow-approval-gate-conditional-substeps-five"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof MultiStepFormInternalWorkflowApprovalGateConditionalSubstepsFive >; type ApprovalTimelineEntry = NonNullable[number]; type ApprovalComment = NonNullable[number]; type ApprovalFormValues = Parameters< NonNullable >[0]; const TIMELINE: ApprovalTimelineEntry[] = [ { id: "1", actor: "Jordan Lee", role: "Request Owner", action: "Draft created and shared with manager", timestamp: "Mar 4 · 9:12am", }, { id: "2", actor: "Samira Patel", role: "Manager", action: "Reviewed summary and requested adjustments on milestone scope", timestamp: "Mar 4 · 3:47pm", notes: "Need finance approval before we increase headcount SLAs.", }, { id: "3", actor: "Alex Johnson", role: "Finance", action: "Provided budget alignment confirmation", timestamp: "Mar 5 · 10:15am", }, ]; const COMMENTS: ApprovalComment[] = [ { id: "c1", author: "Samira Patel", message: "Can you attach the vendor contract draft? Legal will need it.", timestamp: "Mar 4 · 4:03pm", }, { id: "c2", author: "Jordan Lee", message: "Uploaded contract to the shared drive and linked in legal attachments field.", timestamp: "Mar 4 · 4:15pm", }, { id: "c3", author: "Alex Johnson", message: "Budget is covered under strategic initiatives. Approved from finance.", timestamp: "Mar 5 · 10:15am", }, ]; const REVIEWERS = [ { id: "1", name: "Alex Johnson", role: "Finance" }, { id: "2", name: "Jamie Chen", role: "Security" }, { id: "3", name: "Priya Das", role: "Legal" }, ]; const INITIAL_VALUES: Partial = { requestTitle: "AI-powered support automation rollout", requestOwner: "Jordan Lee", summary: "Scope includes pilot with Tier 1 accounts, incremental headcount, and vendor onboarding risk mitigations.", managerNotes: "Looks good — ensure Tier 2 ramp plan is in place before full launch.", requiresLegalReview: true, legalImpactNotes: "Vendor handles user data; ensure data processing agreement is in place.", legalAttachments: "https://drive.example.com/dpa-contract", }; export function MultiStepFormInternalWorkflowApprovalGateConditionalSubstepsFiveDemo() { const [lastAction, setLastAction] = React.useState(null); return (

{ await new Promise((resolve) => setTimeout(resolve, 500)); setLastAction(action); }} onSubmit={async () => { await new Promise((resolve) => setTimeout(resolve, 700)); setLastAction("submitted"); }} /> {lastAction ? (

Last action:{" "} {lastAction}

) : null}

); } export default MultiStepFormInternalWorkflowApprovalGateConditionalSubstepsFiveDemo;

Simple