84 lines
3 KiB
TypeScript
84 lines
3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useRef, useEffect } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
|
||
|
|
const LOCKED = new Set([
|
||
|
|
"registered", "name_approved", "name_reserved",
|
||
|
|
"resignation_sent", "appointment_accepted", "cancelled",
|
||
|
|
"Moved to step 2",
|
||
|
|
]);
|
||
|
|
|
||
|
|
const ACTIONS = [
|
||
|
|
{ label: "Name Reservation only", status: "Name reservation only in Progress", variant: "blue" },
|
||
|
|
{ label: "Apply for name reservation", status: "Name reservation in Progress", variant: "blue" },
|
||
|
|
{ label: "Name Already Approved", status: "Awaiting Client Approval", variant: "green" },
|
||
|
|
{ label: "K-number", status: "K-number registration", variant: "purple" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function ActionsDropdown({ id, name, status }: { id: string; name: string; status: string }) {
|
||
|
|
const router = useRouter();
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const [loading, setLoading] = useState<string | null>(null);
|
||
|
|
const ref = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
// Close on outside click
|
||
|
|
useEffect(() => {
|
||
|
|
if (!open) return;
|
||
|
|
function handler(e: MouseEvent) {
|
||
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||
|
|
}
|
||
|
|
document.addEventListener("mousedown", handler);
|
||
|
|
return () => document.removeEventListener("mousedown", handler);
|
||
|
|
}, [open]);
|
||
|
|
|
||
|
|
if (LOCKED.has(status)) {
|
||
|
|
return <span className="text-xs text-muted italic px-2">—</span>;
|
||
|
|
}
|
||
|
|
|
||
|
|
async function doAction(status: string) {
|
||
|
|
if (!confirm(`Set status to "${status}"?`)) return;
|
||
|
|
setLoading(status);
|
||
|
|
await fetch("/api/register/update-status", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ id, status }),
|
||
|
|
});
|
||
|
|
setLoading(null);
|
||
|
|
setOpen(false);
|
||
|
|
router.refresh();
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative" ref={ref}>
|
||
|
|
<button
|
||
|
|
onClick={() => setOpen(!open)}
|
||
|
|
className="px-2.5 py-1 bg-surface border border-border rounded text-xs font-semibold text-fg hover:border-accent hover:text-accent transition-colors whitespace-nowrap"
|
||
|
|
>
|
||
|
|
Actions {open ? "▲" : "▼"}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{open && (
|
||
|
|
<div className="absolute right-0 top-full mt-1 z-50 bg-surface border border-border rounded-lg shadow-xl w-56 overflow-hidden">
|
||
|
|
<div className="px-3 py-2 border-b border-border bg-surface-warm">
|
||
|
|
<p className="text-xs font-bold text-fg truncate">{name}</p>
|
||
|
|
<p className="text-xs text-muted">{status}</p>
|
||
|
|
</div>
|
||
|
|
<div className="py-1">
|
||
|
|
{ACTIONS.map((a) => (
|
||
|
|
<button
|
||
|
|
key={a.status}
|
||
|
|
onClick={() => doAction(a.status)}
|
||
|
|
disabled={loading === a.status}
|
||
|
|
className="w-full text-left px-3 py-2 text-xs hover:bg-surface-warm transition-colors disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{loading === a.status ? "…" : "→"} {a.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|