A human-in-the-loop decision card that keeps risk, evidence and impact explicit before an agent acts: approve or reject, with typed confirmation for critical actions.
"use client";
import { useEffect, useRef, useState } from "react";
import {
ApprovalCard,
ApprovalCardActions,
ApprovalCardApprove,
ApprovalCardDetail,
ApprovalCardDetails,
ApprovalCardHeader,
ApprovalCardReject,
type ApprovalCardStatus,
type ApprovalDecision,
} from "@/components/ui/approval-card";
type DemoState =
| { status: Exclude<ApprovalCardStatus, "submitting" | "error"> }
| { status: "submitting"; pendingDecision: ApprovalDecision };
export default function ApprovalCardDemo() {
const [state, setState] = useState<DemoState>({ status: "ready" });
const timer = useRef<number | null>(null);
useEffect(() => () => {
if (timer.current) window.clearTimeout(timer.current);
}, []);
const decide = (decision: ApprovalDecision) => {
setState({ status: "submitting", pendingDecision: decision });
timer.current = window.setTimeout(() => setState({ status: decision }), 900);
};
return (
<div className="flex min-h-[460px] w-full items-center justify-center p-6">
<div className="grid w-full max-w-[560px] gap-3">
<ApprovalCard {...state} risk="high" variant="detailed">
<ApprovalCardHeader
title="Deploy the generated refund policy?"
description="This changes how new customer refunds are routed."
/>
<ApprovalCardDetails>
<ApprovalCardDetail label="Requested by">Operations agent · Refund triage</ApprovalCardDetail>
<ApprovalCardDetail label="Affected resources">refund-policy-v4 · 3 queues</ApprovalCardDetail>
<ApprovalCardDetail label="Proposed changes">
<ul>
<li>Route refunds over $500 to review</li>
<li>Notify the operations lead</li>
</ul>
</ApprovalCardDetail>
<ApprovalCardDetail label="Supporting evidence">
A 14-day replay matched 98.6% of prior decisions.
</ApprovalCardDetail>
<ApprovalCardDetail label="Downstream impact" className="sm:col-span-2">
New refund requests begin using this policy immediately after approval.
</ApprovalCardDetail>
</ApprovalCardDetails>
<ApprovalCardActions>
<ApprovalCardReject onClick={() => decide("rejected")} />
<ApprovalCardApprove onClick={() => decide("approved")}>Deploy policy</ApprovalCardApprove>
</ApprovalCardActions>
</ApprovalCard>
{state.status === "approved" || state.status === "rejected" ? (
<button
type="button"
onClick={() => setState({ status: "ready" })}
className="justify-self-center rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
>
Reset demo
</button>
) : null}
</div>
</div>
);
}
Part of Uai — browse the full library on 21st.dev.