import * as React from "react"; import { Button } from "@/components/ui/button"; import { ModalDialogSaasWorkflowApprovalTwo } from "@/registry/modal-dialog-saas-workflow-approval-two/modal-dialog-saas-workflow-approval-two"; 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 ModalDialogSaasWorkflowApprovalTwo >; const reviewers: NonNullable = [ { id: "1", name: "Amelia Jensen", role: "Security officer", avatar: "https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=160&q=80", status: "reviewing", }, { id: "2", name: "Logan Patel", role: "Automation lead", avatar: "https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?auto=format&fit=crop&w=160&q=80", status: "online", }, { id: "3", name: "Celine Huang", role: "Ops director", avatar: "https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?auto=format&fit=crop&w=160&q=80", status: "offline", }, ]; const sections: ComponentProps["sections"] = [ { id: "notifications", title: "Notification cadence", summary: "Expands frequency for VIP incidents", items: [ { id: "notif-threshold", label: "Escalation threshold", before: "5 failed deploys", after: "3 failed deploys", impact: "Reduces time to acknowledgement for high-priority incidents", riskLevel: "medium", commentCount: 2, }, { id: "notif-policy", label: "Pager duty policy", before: "Infra-oncall", after: "SecOps rotation", impact: "Aligns policy with compliance workflows", }, ], }, { id: "automations", title: "Automation rules", summary: "Adds AI guardrails before approving secrets", items: [ { id: "automation-ai", label: "AI anomaly detection", before: "Disabled", after: "Enabled", impact: "Blocks out-of-window credential access", riskLevel: "low", }, { id: "automation-rollback", label: "Rollback behaviour", before: "Manual", after: "Automatic on failure", impact: "Shortens remediation to under 2 minutes", }, ], }, ]; const metrics: ComponentProps["impactMetrics"] = [ { id: "sla", label: "Projected SLA", value: "99.95%", helper: "+0.6% uptime QoQ", }, { id: "alerts", label: "Critical alerts", value: "−38%", helper: "Less noise for on-call", }, { id: "rollback", label: "Rollback time", value: "1m 45s", helper: "Automatic remediation enabled", }, ]; const pendingComments: NonNullable = [ { id: "comment-1", author: "SecOps | Aiden", excerpt: "Verify that low-priority alerts still reach the insights feed.", }, { id: "comment-2", author: "SRE | Priya", excerpt: "Confirm time-zone aware scheduling before approving rollout.", }, ]; export function ModalDialogSaasWorkflowApprovalTwoDemo() { const [open, setOpen] = React.useState(false); const [decision, setDecision] = React.useState(null); return (

Workflow approval demo

Explore the blended sidebar + detail view with optimistic approval actions.

{decision ? (

Last decision: {decision}

) : null}

{ await new Promise((resolve) => setTimeout(resolve, 800)); setDecision("Approved"); }} onRequestChanges={async () => { await new Promise((resolve) => setTimeout(resolve, 600)); setDecision("Requested changes"); }} onSchedule={(id) => { setDecision(`Follow-up scheduled: ${id}`); }} />

); } export default ModalDialogSaasWorkflowApprovalTwoDemo;

Simple