tanstack_start_ts 1.0.0

package/src/routes/admin.tsx

@@ -0,0 +1,811 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useServerFn } from "@tanstack/react-start";
+import {
+  isAdmin,
+  listAllProducts,
+  upsertProduct,
+  deleteProduct,
+  grantSelfAdmin,
+  createAdmin,
+  listAdmins,
+  importProductFromLink,
+} from "@/lib/admin.functions";
+import { getCategories } from "@/lib/products.functions";
+import { useAuth } from "@/hooks/use-auth";
+import { useMemo, useState } from "react";
+import {
+  Plus,
+  Trash2,
+  Edit3,
+  Shield,
+  ExternalLink,
+  Flame,
+  TrendingUp,
+  Star,
+  UserPlus,
+  Crown,
+  KeyRound,
+  Mail,
+  Lock,
+  Loader2,
+  WandSparkles,
+  RefreshCw,
+  Link2,
+  FileDown,
+  Sparkles,
+} from "lucide-react";
+import { toast } from "sonner";
+import { resolveBuyUrl } from "@/lib/product-links";
+
+export const Route = createFileRoute("/admin")({
+  head: () => ({ meta: [{ title: "Admin · Scrollsy" }, { name: "robots", content: "noindex" }] }),
+  component: AdminPage,
+});
+
+function AdminPage() {
+  const { user, loading } = useAuth();
+  const isAdminFn = useServerFn(isAdmin);
+  const grantFn = useServerFn(grantSelfAdmin);
+
+  const {
+    data: roleData,
+    isLoading: roleLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["is-admin", user?.id],
+    enabled: !!user,
+    queryFn: () => isAdminFn(),
+  });
+
+  if (loading || (user && roleLoading)) return <div className="p-10">Loading…</div>;
+
+  if (!user) {
+    return (
+      <div className="max-w-md mx-auto pt-24 px-4 text-center glass-strong rounded-3xl p-8">
+        <Shield className="w-12 h-12 mx-auto text-brand-magenta" />
+        <h1 className="font-display text-2xl font-bold mt-4">Admin sign-in required</h1>
+        <p className="text-sm text-muted-foreground mt-2">
+          Admins must sign in with their assigned Admin ID, email and password.
+        </p>
+        <Link
+          to="/admin/login"
+          className="btn-glow inline-block mt-6 rounded-full px-6 py-3 font-semibold text-sm"
+        >
+          Go to admin sign-in
+        </Link>
+      </div>
+    );
+  }
+
+  if (!roleData?.admin) {
+    return (
+      <div className="max-w-md mx-auto pt-24 px-4 text-center glass-strong rounded-3xl p-8">
+        <Shield className="w-10 h-10 mx-auto text-brand-magenta" />
+        <h1 className="font-display text-2xl font-bold mt-4">Not an admin yet</h1>
+        <p className="text-sm text-muted-foreground mt-2">
+          If you're the project owner, claim Master Admin access now. Only the very first user can
+          self-grant — you will receive the master Admin ID{" "}
+          <span className="text-foreground font-mono">doraexplora</span>.
+        </p>
+        <button
+          onClick={async () => {
+            try {
+              const res = await grantFn();
+              toast.success(`You're the Master Admin! Admin ID: ${res.admin_id}`);
+              refetch();
+            } catch (e: any) {
+              toast.error(e.message ?? "Failed");
+            }
+          }}
+          className="btn-glow mt-6 rounded-full px-6 py-3 font-semibold text-sm"
+        >
+          Claim Master Admin access
+        </button>
+      </div>
+    );
+  }
+
+  return <AdminDashboard isMaster={!!roleData.is_master} adminId={roleData.admin_id} />;
+}
+
+function AdminDashboard({ isMaster, adminId }: { isMaster: boolean; adminId: string | null }) {
+  const qc = useQueryClient();
+  const listFn = useServerFn(listAllProducts);
+  const upsertFn = useServerFn(upsertProduct);
+  const delFn = useServerFn(deleteProduct);
+  const importFn = useServerFn(importProductFromLink);
+
+  const { data: products } = useQuery({ queryKey: ["admin-products"], queryFn: () => listFn() });
+  const { data: categories } = useQuery({ queryKey: ["cats"], queryFn: () => getCategories() });
+
+  const [editing, setEditing] = useState<any | null>(null);
+  const [tab, setTab] = useState<"products" | "admins">("products");
+
+  const upsert = useMutation({
+    mutationFn: (data: any) => upsertFn({ data }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["admin-products"] });
+      qc.invalidateQueries({ queryKey: ["home"] });
+      toast.success("Saved");
+      setEditing(null);
+    },
+    onError: (e: any) => toast.error(e.message ?? "Failed"),
+  });
+
+  const del = useMutation({
+    mutationFn: (id: string) => delFn({ data: { id } }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["admin-products"] });
+      toast.success("Deleted");
+    },
+  });
+
+  const stats = {
+    total: products?.length ?? 0,
+    trending: products?.filter((p) => p.is_trending).length ?? 0,
+    hot: products?.filter((p) => p.is_hot).length ?? 0,
+    featured: products?.filter((p) => p.is_featured).length ?? 0,
+    views: products?.reduce((s, p) => s + (p.view_count ?? 0), 0) ?? 0,
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 pt-10 pb-20">
+      <div className="flex items-center justify-between flex-wrap gap-3">
+        <div>
+          <h1 className="font-display text-4xl font-bold">
+            Admin <span className="text-gradient">dashboard</span>
+          </h1>
+          <p className="text-sm text-muted-foreground mt-1 inline-flex items-center gap-2">
+            {isMaster && (
+              <span className="inline-flex items-center gap-1 text-brand-amber">
+                <Crown className="w-3.5 h-3.5" /> Master Admin
+              </span>
+            )}
+            <span>
+              Admin ID: <span className="font-mono text-foreground">{adminId}</span>
+            </span>
+          </p>
+        </div>
+        {tab === "products" && (
+          <button
+            onClick={() => setEditing({})}
+            className="btn-glow rounded-full px-5 py-2.5 font-semibold text-sm inline-flex items-center gap-2"
+          >
+            <Plus className="w-4 h-4" /> New product
+          </button>
+        )}
+      </div>
+
+      <div className="mt-6 inline-flex glass rounded-full p-1 text-sm">
+        <button
+          onClick={() => setTab("products")}
+          className={`px-4 py-1.5 rounded-full transition ${tab === "products" ? "bg-white/10 text-foreground" : "text-muted-foreground"}`}
+        >
+          Products
+        </button>
+        <button
+          onClick={() => setTab("admins")}
+          className={`px-4 py-1.5 rounded-full transition inline-flex items-center gap-1.5 ${tab === "admins" ? "bg-white/10 text-foreground" : "text-muted-foreground"}`}
+        >
+          <UserPlus className="w-3.5 h-3.5" /> Admins
+        </button>
+      </div>
+
+      {tab === "products" && (
+        <>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mt-6">
+            <Stat label="Products" value={stats.total} />
+            <Stat
+              label="Trending"
+              value={stats.trending}
+              icon={<TrendingUp className="w-4 h-4 text-brand-magenta" />}
+            />
+            <Stat
+              label="Hot deals"
+              value={stats.hot}
+              icon={<Flame className="w-4 h-4 text-brand-orange" />}
+            />
+            <Stat
+              label="Featured"
+              value={stats.featured}
+              icon={<Star className="w-4 h-4 text-brand-amber" />}
+            />
+            <Stat label="Total views" value={stats.views.toLocaleString()} />
+          </div>
+
+          <div className="mt-10 glass-strong rounded-3xl overflow-hidden">
+            <div className="grid grid-cols-12 px-5 py-3 text-xs text-muted-foreground uppercase tracking-wider border-b border-white/5">
+              <div className="col-span-5">Product</div>
+              <div className="col-span-2">Price</div>
+              <div className="col-span-2">Status</div>
+              <div className="col-span-1">Views</div>
+              <div className="col-span-2 text-right">Actions</div>
+            </div>
+            {(products ?? []).map((p) => {
+              const openUrl = resolveBuyUrl(p) ?? p.affiliate_url ?? p.product_url ?? p.source_url;
+              return (
+                <div
+                  key={p.id}
+                  className="grid grid-cols-12 px-5 py-3 items-center hover:bg-white/5 border-b border-white/5 last:border-none text-sm"
+                >
+                  <div className="col-span-5 flex items-center gap-3 min-w-0">
+                    <img
+                      src={p.image_url}
+                      alt=""
+                      className="w-10 h-10 rounded-lg object-cover shrink-0"
+                    />
+                    <div className="truncate">
+                      <div className="font-medium truncate">{p.title}</div>
+                      <div className="text-xs text-muted-foreground truncate">
+                        {p.imported_from ?? p.merchant ?? "Shopping site"}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="col-span-2">
+                    <span className="text-gradient font-bold">${Number(p.price).toFixed(2)}</span>
+                    {p.original_price && (
+                      <span className="text-xs text-muted-foreground line-through ml-2">
+                        ${Number(p.original_price).toFixed(2)}
+                      </span>
+                    )}
+                  </div>
+                  <div className="col-span-2 flex gap-1 flex-wrap">
+                    {p.is_trending && (
+                      <span className="text-[10px] bg-brand-magenta/20 text-brand-magenta rounded px-1.5 py-0.5">
+                        TREND
+                      </span>
+                    )}
+                    {p.is_hot && (
+                      <span className="text-[10px] bg-brand-orange/20 text-brand-orange rounded px-1.5 py-0.5">
+                        HOT
+                      </span>
+                    )}
+                    {p.is_featured && (
+                      <span className="text-[10px] bg-brand-amber/20 text-brand-amber rounded px-1.5 py-0.5">
+                        FEAT
+                      </span>
+                    )}
+                  </div>
+                  <div className="col-span-1 text-xs text-muted-foreground">{p.view_count}</div>
+                  <div className="col-span-2 flex justify-end gap-1">
+                    <a
+                      href={openUrl ?? "#"}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-2 rounded-lg hover:bg-white/10"
+                      title="Open store link"
+                    >
+                      <ExternalLink className="w-4 h-4" />
+                    </a>
+                    <button
+                      onClick={() => setEditing(p)}
+                      className="p-2 rounded-lg hover:bg-white/10"
+                      title="Edit"
+                    >
+                      <Edit3 className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => confirm("Delete this product?") && del.mutate(p.id)}
+                      className="p-2 rounded-lg hover:bg-destructive/20 text-destructive"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+            {(products ?? []).length === 0 && (
+              <div className="p-10 text-center text-muted-foreground text-sm">
+                No products yet. Add your first one above.
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {tab === "admins" && <AdminsPanel isMaster={isMaster} />}
+
+      {editing && (
+        <EditDialog
+          product={editing}
+          categories={categories ?? []}
+          onClose={() => setEditing(null)}
+          onSave={(d) => upsert.mutate(d)}
+          saving={upsert.isPending}
+          onImport={(url) => importFn({ data: { url } })}
+          importingLabel="Import Product From Link"
+        />
+      )}
+    </div>
+  );
+}
+
+function AdminsPanel({ isMaster }: { isMaster: boolean }) {
+  const qc = useQueryClient();
+  const listFn = useServerFn(listAdmins);
+  const createFn = useServerFn(createAdmin);
+  const { data: admins } = useQuery({ queryKey: ["admins"], queryFn: () => listFn() });
+
+  const [form, setForm] = useState({ email: "", password: "", admin_id: "" });
+
+  const create = useMutation({
+    mutationFn: (data: typeof form) => createFn({ data }),
+    onSuccess: () => {
+      toast.success("Admin added");
+      qc.invalidateQueries({ queryKey: ["admins"] });
+      setForm({ email: "", password: "", admin_id: "" });
+    },
+    onError: (e: any) => toast.error(e.message ?? "Failed"),
+  });
+
+  return (
+    <div className="mt-6 grid lg:grid-cols-2 gap-6">
+      <div className="glass-strong rounded-3xl p-6">
+        <h2 className="font-display text-xl font-bold inline-flex items-center gap-2">
+          <UserPlus className="w-5 h-5 text-brand-magenta" /> Add new admin
+        </h2>
+        {!isMaster ? (
+          <p className="text-sm text-muted-foreground mt-3">
+            Only the Master Admin can add new admins. Ask the Master Admin (admin ID{" "}
+            <span className="font-mono text-foreground">doraexplora</span>) to assign you an Admin
+            ID.
+          </p>
+        ) : (
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              create.mutate(form);
+            }}
+            className="space-y-3 mt-5"
+          >
+            <FieldRow
+              icon={<KeyRound className="w-4 h-4" />}
+              label="Assign Admin ID"
+              value={form.admin_id}
+              onChange={(v) => setForm((f) => ({ ...f, admin_id: v }))}
+              placeholder="e.g. jane_admin"
+            />
+            <FieldRow
+              icon={<Mail className="w-4 h-4" />}
+              label="Admin email"
+              type="email"
+              value={form.email}
+              onChange={(v) => setForm((f) => ({ ...f, email: v }))}
+              placeholder="admin@company.com"
+            />
+            <FieldRow
+              icon={<Lock className="w-4 h-4" />}
+              label="Initial password"
+              type="password"
+              value={form.password}
+              onChange={(v) => setForm((f) => ({ ...f, password: v }))}
+              placeholder="Min 8 characters"
+            />
+            <button
+              disabled={create.isPending || !form.email || !form.password || !form.admin_id}
+              className="btn-glow w-full rounded-full py-3 font-semibold text-sm disabled:opacity-60"
+            >
+              {create.isPending ? "Creating…" : "Create admin"}
+            </button>
+            <p className="text-xs text-muted-foreground pt-1">
+              The new admin will sign in at <span className="font-mono">/admin/login</span> using
+              this Admin ID, email, and password.
+            </p>
+          </form>
+        )}
+      </div>
+
+      <div className="glass-strong rounded-3xl p-6">
+        <h2 className="font-display text-xl font-bold">Current admins</h2>
+        <div className="mt-4 divide-y divide-white/5">
+          {(admins ?? []).map((a) => (
+            <div key={a.user_id} className="py-3 flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <div className="text-sm font-medium truncate inline-flex items-center gap-2">
+                  {a.is_master && <Crown className="w-3.5 h-3.5 text-brand-amber" />}
+                  {a.email ?? "—"}
+                </div>
+                <div className="text-xs text-muted-foreground font-mono">
+                  {a.admin_id ?? "(no admin id)"}
+                </div>
+              </div>
+              {a.is_master && (
+                <span className="text-[10px] bg-brand-amber/20 text-brand-amber rounded px-2 py-0.5 uppercase tracking-wider">
+                  Master
+                </span>
+              )}
+            </div>
+          ))}
+          {(admins ?? []).length === 0 && (
+            <p className="text-sm text-muted-foreground py-4">No admins yet.</p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FieldRow({
+  icon,
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  type?: string;
+}) {
+  return (
+    <div>
+      <label className="text-xs text-muted-foreground">{label}</label>
+      <div className="mt-1 flex items-center gap-2 glass rounded-xl px-3 py-2.5">
+        <span className="text-muted-foreground">{icon}</span>
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="flex-1 bg-transparent outline-none text-sm placeholder:text-muted-foreground"
+        />
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value, icon }: { label: string; value: any; icon?: React.ReactNode }) {
+  return (
+    <div className="glass rounded-2xl p-4">
+      <div className="text-xs text-muted-foreground inline-flex items-center gap-1">
+        {icon}
+        {label}
+      </div>
+      <div className="font-display text-2xl font-bold mt-1">{value}</div>
+    </div>
+  );
+}
+
+function EditDialog({
+  product,
+  categories,
+  onClose,
+  onSave,
+  saving,
+  onImport,
+  importingLabel,
+}: {
+  product: any;
+  categories: any[];
+  onClose: () => void;
+  onSave: (d: any) => void;
+  saving: boolean;
+  onImport: (url: string) => Promise<any>;
+  importingLabel: string;
+}) {
+  const [form, setForm] = useState<any>({
+    id: product.id,
+    title: product.title ?? "",
+    description: product.description ?? "",
+    image_url: product.image_url ?? "",
+    price: product.price ?? 0,
+    original_price: product.original_price ?? null,
+    currency: product.currency ?? "USD",
+    affiliate_url: product.affiliate_url ?? "",
+    product_url: product.product_url ?? "",
+    tracking_url: product.tracking_url ?? "",
+    source_url: product.source_url ?? "",
+    imported_from: product.imported_from ?? "",
+    import_notes: product.import_notes ?? "",
+    merchant: product.merchant ?? "",
+    category_id: product.category_id ?? null,
+    tags: product.tags ?? [],
+    badges: product.badges ?? [],
+    is_trending: product.is_trending ?? false,
+    is_hot: product.is_hot ?? false,
+    is_featured: product.is_featured ?? false,
+    shipping_info: product.shipping_info ?? "",
+    delivery_estimate: product.delivery_estimate ?? "",
+  });
+
+  const [importUrl, setImportUrl] = useState(
+    product.product_url ?? product.source_url ?? product.affiliate_url ?? "",
+  );
+  const [importing, setImporting] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+
+  const set = (k: string, v: any) => setForm((f: any) => ({ ...f, [k]: v }));
+
+  const applyImported = (payload: any) => {
+    setForm((current: any) => ({
+      ...current,
+      title: payload.title ?? current.title,
+      description: payload.description ?? current.description,
+      image_url: payload.image_url ?? current.image_url,
+      price: payload.price ?? current.price,
+      original_price: payload.original_price ?? current.original_price,
+      currency: payload.currency ?? current.currency,
+      merchant: payload.merchant ?? current.merchant,
+      product_url: payload.product_url ?? current.product_url,
+      tracking_url: payload.tracking_url ?? current.tracking_url,
+      source_url: payload.source_url ?? current.source_url,
+      imported_from: payload.imported_from ?? current.imported_from,
+      import_notes: payload.import_notes ?? current.import_notes,
+      tags: payload.tags ?? current.tags,
+      badges: payload.badges ?? current.badges,
+      shipping_info: payload.shipping_info ?? current.shipping_info,
+      delivery_estimate: payload.delivery_estimate ?? current.delivery_estimate,
+      affiliate_url: payload.tracking_url ?? payload.product_url ?? current.affiliate_url,
+    }));
+    if (payload.product_url) setImportUrl(payload.product_url);
+    if (payload.import_notes) setImportError(null);
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto"
+      onClick={onClose}
+    >
+      <div
+        className="glass-strong rounded-3xl p-6 max-w-3xl w-full my-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-start justify-between gap-4 mb-5">
+          <div>
+            <h2 className="font-display text-2xl font-bold">
+              {product.id ? "Edit product" : "New product"}
+            </h2>
+            <p className="text-xs text-muted-foreground mt-1 inline-flex items-center gap-1.5">
+              <Sparkles className="w-3.5 h-3.5 text-brand-magenta" />
+              Keep the shopping experience clean while still allowing tracking behind the scenes.
+            </p>
+          </div>
+          <span className="text-[10px] uppercase tracking-wider bg-white/5 border border-white/10 rounded-full px-3 py-1 text-muted-foreground">
+            Manual + import
+          </span>
+        </div>
+
+        <div className="rounded-3xl border border-white/10 bg-white/5 p-4 mb-5">
+          <div className="flex flex-col md:flex-row gap-3 md:items-end">
+            <div className="flex-1">
+              <label className="text-xs text-muted-foreground">Import Product From Link</label>
+              <div className="mt-1 flex items-center gap-2 glass rounded-xl px-3 py-2.5">
+                <Link2 className="w-4 h-4 text-brand-magenta shrink-0" />
+                <input
+                  value={importUrl}
+                  onChange={(e) => setImportUrl(e.target.value)}
+                  placeholder="Paste an AliExpress, Temu, Amazon, eBay, Alibaba, or other store link"
+                  className="flex-1 bg-transparent outline-none text-sm placeholder:text-muted-foreground"
+                />
+              </div>
+            </div>
+            <button
+              type="button"
+              disabled={importing || !importUrl.trim()}
+              onClick={async () => {
+                try {
+                  setImporting(true);
+                  setImportError(null);
+                  const preview = await onImport(importUrl.trim());
+                  applyImported(preview);
+                  toast.success("Imported product details");
+                } catch (e: any) {
+                  const message = e?.message ?? "Import failed";
+                  setImportError(message);
+                  toast.error(message);
+                } finally {
+                  setImporting(false);
+                }
+              }}
+              className="btn-glow rounded-full px-5 py-3 font-semibold text-sm inline-flex items-center gap-2 disabled:opacity-60"
+            >
+              {importing ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <FileDown className="w-4 h-4" />
+              )}
+              {importing ? "Fetching…" : importingLabel}
+            </button>
+          </div>
+          {importError ? (
+            <div className="mt-3 text-xs text-destructive inline-flex items-center gap-2">
+              <RefreshCw className="w-3.5 h-3.5" />
+              {importError}
+            </div>
+          ) : (
+            <p className="mt-3 text-xs text-muted-foreground">
+              We’ll try to fetch title, price, description, images, ratings, and source details
+              automatically. You can edit everything before publishing.
+            </p>
+          )}
+        </div>
+
+        <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-2">
+          <Inp label="Title" value={form.title} onChange={(v) => set("title", v)} />
+          <Inp
+            label="Description"
+            value={form.description}
+            onChange={(v) => set("description", v)}
+            textarea
+          />
+          <div className="grid md:grid-cols-2 gap-3">
+            <Inp label="Image URL" value={form.image_url} onChange={(v) => set("image_url", v)} />
+            <Inp
+              label="Product URL"
+              value={form.product_url}
+              onChange={(v) => set("product_url", v)}
+            />
+          </div>
+          <div className="grid md:grid-cols-2 gap-3">
+            <Inp
+              label="Tracking URL"
+              value={form.tracking_url}
+              onChange={(v) => set("tracking_url", v)}
+            />
+            <Inp
+              label="Source URL"
+              value={form.source_url}
+              onChange={(v) => set("source_url", v)}
+            />
+          </div>
+          <div className="grid md:grid-cols-2 gap-3">
+            <Inp
+              label="Affiliate URL"
+              value={form.affiliate_url}
+              onChange={(v) => set("affiliate_url", v)}
+            />
+            <Inp label="Currency" value={form.currency} onChange={(v) => set("currency", v)} />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Inp
+              label="Price"
+              type="number"
+              value={form.price}
+              onChange={(v) => set("price", Number(v))}
+            />
+            <Inp
+              label="Original price"
+              type="number"
+              value={form.original_price ?? ""}
+              onChange={(v) => set("original_price", v ? Number(v) : null)}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Inp
+              label="Merchant"
+              value={form.merchant ?? ""}
+              onChange={(v) => set("merchant", v)}
+            />
+            <div>
+              <label className="text-xs text-muted-foreground">Category</label>
+              <select
+                value={form.category_id ?? ""}
+                onChange={(e) => set("category_id", e.target.value || null)}
+                className="w-full glass rounded-xl px-3 py-2.5 text-sm bg-transparent outline-none mt-1"
+              >
+                <option value="">— None —</option>
+                {categories.map((c: any) => (
+                  <option key={c.id} value={c.id} className="bg-background">
+                    {c.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          <div className="grid md:grid-cols-2 gap-3">
+            <Inp
+              label="Imported from"
+              value={form.imported_from ?? ""}
+              onChange={(v) => set("imported_from", v)}
+            />
+            <Inp
+              label="Import notes"
+              value={form.import_notes ?? ""}
+              onChange={(v) => set("import_notes", v)}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <Inp
+              label="Shipping info"
+              value={form.shipping_info ?? ""}
+              onChange={(v) => set("shipping_info", v)}
+            />
+            <Inp
+              label="Delivery estimate"
+              value={form.delivery_estimate ?? ""}
+              onChange={(v) => set("delivery_estimate", v)}
+            />
+          </div>
+          <div className="flex flex-wrap gap-4 pt-2">
+            <Toggle
+              label="Trending"
+              checked={form.is_trending}
+              onChange={(v) => set("is_trending", v)}
+            />
+            <Toggle label="Hot deal" checked={form.is_hot} onChange={(v) => set("is_hot", v)} />
+            <Toggle
+              label="Featured"
+              checked={form.is_featured}
+              onChange={(v) => set("is_featured", v)}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 pt-5 mt-3 border-t border-white/10">
+          <button onClick={onClose} className="px-4 py-2 rounded-full text-sm hover:bg-white/5">
+            Cancel
+          </button>
+          <button
+            disabled={saving}
+            onClick={() => onSave(form)}
+            className="btn-glow rounded-full px-5 py-2 font-semibold text-sm disabled:opacity-60"
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Inp({
+  label,
+  value,
+  onChange,
+  type = "text",
+  textarea,
+}: {
+  label: string;
+  value: any;
+  onChange: (v: string) => void;
+  type?: string;
+  textarea?: boolean;
+}) {
+  return (
+    <div>
+      <label className="text-xs text-muted-foreground">{label}</label>
+      {textarea ? (
+        <textarea
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          rows={3}
+          className="w-full glass rounded-xl px-3 py-2 text-sm bg-transparent outline-none mt-1 resize-none"
+        />
+      ) : (
+        <input
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full glass rounded-xl px-3 py-2 text-sm bg-transparent outline-none mt-1"
+        />
+      )}
+    </div>
+  );
+}
+
+function Toggle({
+  label,
+  checked,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <label className="inline-flex items-center gap-2 text-sm cursor-pointer">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange(e.target.checked)}
+        className="accent-brand-magenta w-4 h-4"
+      />
+      {label}
+    </label>
+  );
+}