43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { resolveRequest } from "./actions";
|
|
import { Check, X } from "lucide-react";
|
|
|
|
export function RequestActions({ requestId }: { requestId: string }) {
|
|
const router = useRouter();
|
|
const [pending, setPending] = useState<"approve" | "deny" | null>(null);
|
|
const [error, setError] = useState("");
|
|
|
|
async function handle(decision: "APPROVED" | "DENIED") {
|
|
setPending(decision === "APPROVED" ? "approve" : "deny");
|
|
setError("");
|
|
const result = await resolveRequest(requestId, decision);
|
|
setPending(null);
|
|
if ("error" in result) setError(result.error);
|
|
else router.refresh();
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 shrink-0">
|
|
{error && <span className="text-xs text-danger-700">{error}</span>}
|
|
<button
|
|
onClick={() => handle("DENIED")}
|
|
disabled={!!pending}
|
|
className="inline-flex items-center gap-1.5 rounded-lg border border-danger-200 bg-white px-3 py-1.5 text-sm font-medium text-danger-700 hover:bg-danger-50 disabled:opacity-50 transition-colors"
|
|
>
|
|
<X className="h-3.5 w-3.5" />
|
|
{pending === "deny" ? "Denying…" : "Deny"}
|
|
</button>
|
|
<button
|
|
onClick={() => handle("APPROVED")}
|
|
disabled={!!pending}
|
|
className="inline-flex items-center gap-1.5 rounded-lg bg-success px-3 py-1.5 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-50 transition-opacity"
|
|
>
|
|
<Check className="h-3.5 w-3.5" />
|
|
{pending === "approve" ? "Approving…" : "Approve"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|