Hardik
d27ec9152c
Replace per-row inline action buttons (Edit, Activate/Deactivate, Delete, Grant SuperUser) across all six admin tables with a Radix DropdownMenu triggered by a ⋯ button. Introduces RowActionsMenu/Item/DestructiveItem/ Separator primitives and a DeleteConfirmDialog modal. Each Edit*Button gains controlled open/onOpenChange props so the dialog can be driven from the table's per-row ActionsMenu sub-component. Toggle and delete actions use useTransition + router.refresh() directly in the table. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useTransition } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { AdminDialog } from "@/components/ui/admin-dialog";
|
|
|
|
type ActionResult = { ok: true } | { error: string };
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onOpenChange: (v: boolean) => void;
|
|
label: string;
|
|
onConfirm: () => Promise<ActionResult>;
|
|
}
|
|
|
|
export function DeleteConfirmDialog({ open, onOpenChange, label, onConfirm }: Props) {
|
|
const router = useRouter();
|
|
const [error, setError] = useState("");
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
function handleClose() {
|
|
if (isPending) return;
|
|
setError("");
|
|
onOpenChange(false);
|
|
}
|
|
|
|
function handleConfirm() {
|
|
setError("");
|
|
startTransition(async () => {
|
|
const result = await onConfirm();
|
|
if ("error" in result) {
|
|
setError(result.error);
|
|
} else {
|
|
onOpenChange(false);
|
|
router.refresh();
|
|
}
|
|
});
|
|
}
|
|
|
|
return (
|
|
<AdminDialog title={`Delete ${label}?`} open={open} onClose={handleClose}>
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-neutral-600">
|
|
This action cannot be undone. Are you sure you want to permanently delete{" "}
|
|
<span className="font-semibold text-neutral-900">{label}</span>?
|
|
</p>
|
|
{error && (
|
|
<p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>
|
|
)}
|
|
<div className="flex justify-end gap-3 pt-1">
|
|
<button
|
|
type="button"
|
|
onClick={handleClose}
|
|
disabled={isPending}
|
|
className="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 disabled:opacity-60"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={handleConfirm}
|
|
disabled={isPending}
|
|
className="rounded-lg bg-danger px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-60 transition-colors"
|
|
>
|
|
{isPending ? "Deleting…" : "Delete"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</AdminDialog>
|
|
);
|
|
}
|