e7c06e4352
Introduces SystemStatusCard and InvitationsListCard components to the admin dashboard for displaying system metrics and active invitations. Refactors InviteVendorCard to generate and display invitation codes, and updates card layouts for consistent sizing. Improves admin page structure and enhances visibility of system and invitation data.
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { fetchClient } from "@/lib/api-client";
|
|
|
|
export default function InviteVendorCard() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [code, setCode] = useState<string | null>(null);
|
|
|
|
async function handleInvite() {
|
|
setLoading(true);
|
|
setMessage(null);
|
|
setCode(null);
|
|
try {
|
|
const res = await fetchClient<{ code: string }>("/admin/invitations", { method: "POST" });
|
|
setMessage("Invitation created");
|
|
setCode(res.code);
|
|
} catch (e: any) {
|
|
setMessage(e?.message || "Failed to send invitation");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-lg border border-border/60 bg-background p-4 h-full min-h-[200px]">
|
|
<h2 className="font-medium">Invite Vendor</h2>
|
|
<p className="text-sm text-muted-foreground mt-1">Generate a new invitation code</p>
|
|
<div className="mt-4 space-y-3">
|
|
<button
|
|
onClick={handleInvite}
|
|
className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
|
|
disabled={loading}
|
|
>
|
|
{loading ? "Generating..." : "Generate Invite Code"}
|
|
</button>
|
|
{message && <p className="text-xs text-muted-foreground">{message}</p>}
|
|
{code && (
|
|
<div className="text-sm">
|
|
Code: <span className="font-mono px-1.5 py-0.5 rounded bg-muted">{code}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|