import * as React from "react"; import { Button } from "@/components/ui/button"; import { ModalDialogAdminBulkEditConfirmationFive } from "@/registry/modal-dialog-admin-bulk-edit-confirmation-five/modal-dialog-admin-bulk-edit-confirmation-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 ModalDialogAdminBulkEditConfirmationFive >; type ModalDialogAdminBulkEditConfirmationFiveFilter = NonNullable< ComponentProps["filters"] >[number]; type ModalDialogAdminBulkEditConfirmationFiveChange = NonNullable< ComponentProps["changes"] >[number]; const filters: ModalDialogAdminBulkEditConfirmationFiveFilter[] = [ { id: "region", label: "Region: EMEA", tone: "outline" }, { id: "plan", label: "Plan: Enterprise" }, { id: "status", label: "Status: Active", tone: "secondary" }, ]; const changes: ModalDialogAdminBulkEditConfirmationFiveChange[] = [ { id: "org-1", entityLabel: "Acme Analytics", before: { "Plan tier": "Growth", "Seat limit": "25", "Data retention": "90 days", }, after: { "Plan tier": "Enterprise", "Seat limit": "60", "Data retention": "365 days", }, warnings: ["Requires invoice update in NetSuite"], }, { id: "org-2", entityLabel: "Nova Robotics", before: { "Plan tier": "Enterprise", "Seat limit": "45", "Ops region": "US-East", }, after: { "Plan tier": "Enterprise", "Seat limit": "80", "Ops region": "EU-West", }, }, ]; export function ModalDialogAdminBulkEditConfirmationFiveDemo() { const [open, setOpen] = React.useState(false); const [latestJob, setLatestJob] = React.useState(null); return (

Bulk edit confirmation modal

Review diff cards, filter chips, and destructive confirmation before applying irreversible updates.

{latestJob ? (

Last job: {latestJob}

) : null}

{ await new Promise((resolve) => setTimeout(resolve, 900)); setLatestJob(`Job-${Date.now().toString().slice(-6)}`); }} onDownloadCsv={async () => { await new Promise((resolve) => setTimeout(resolve, 600)); setLatestJob("CSV export queued"); }} onCancel={() => setLatestJob("Cancelled")} />

); } export default ModalDialogAdminBulkEditConfirmationFiveDemo;

Simple