ember-market-frontend/components/admin/InviteVendorCard.tsx

"use client";
import { useState } from "react";
import { fetchClient } from "@/lib/api-client";

export default function InviteVendorCard() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  async function handleInvite(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setMessage(null);
    try {
      await fetchClient("/admin/invitations", {
        method: "POST",
        body: { username, email }
      });
      setMessage("Invitation sent");
      setUsername("");
      setEmail("");
    } 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">
      <h2 className="font-medium">Invite Vendor</h2>
      <p className="text-sm text-muted-foreground mt-1">Generate and send an invite</p>
      <form onSubmit={handleInvite} className="mt-4 space-y-3">
        <input
          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
          placeholder="Vendor username"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
        <input
          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
          placeholder="Email (optional)"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          type="email"
        />
        <button
          type="submit"
          className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
          disabled={loading}
        >
          {loading ? "Sending..." : "Send Invite"}
        </button>
        {message && <p className="text-xs text-muted-foreground">{message}</p>}
      </form>
    </div>
  );
}