Approval Desk

Dashboards

About

A React approval workflow block with editable proposals, recipient selection, rejection reasons, and recoverable decisions, useful for reviewing AI agent actions and outgoing messages before execution.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Approval Desk to your project and fits it to your theme.

Code

How Approval Desk is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import ApprovalDesk from "@/components/ui/approval-desk";

export default function ApprovalDeskDemo() {
  const [fail, setFail] = React.useState(false);
  const [recorded, setRecorded] = React.useState("");
  const id = React.useId();
  return <div className="flex min-h-[460px] w-full flex-col items-center justify-center bg-background p-4 text-foreground sm:p-8"><div className="w-full max-w-4xl"><div className="mb-4 flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground"><span>Workspace / Action review</span><label htmlFor={id} className="flex cursor-pointer items-center gap-2"><input id={id} type="checkbox" checked={fail} onChange={event => setFail(event.target.checked)} className="h-3.5 w-3.5 accent-primary" /> Simulate save failure</label></div><ApprovalDesk onDecision={async decision => { await new Promise(resolve => window.setTimeout(resolve, 600)); if (fail) throw new Error("Simulated failure"); setRecorded(decision.decision === "approved" ? "Demo approval saved. No email sent." : "Demo rejection saved."); }} /><p role="status" className="mt-3 min-h-5 text-center text-[11px] text-muted-foreground">{recorded || "Demo workspace · example recipients · no external delivery"}</p></div></div>;
}