@gigamusic/admin 0.2.0 → 1.0.0

package/src/pages/AdminLinksPage.tsx

@@ -1,187 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useSlot } from "@gigamusic/ui/client";
-
-interface LinkItem {
-  id: number;
-  title: string;
-  url: string;
-  position: number;
-  isVisible: boolean;
-  showOnHero: boolean;
-}
-
-/**
- * Editor for the global `/links` page link list. Optimistic updates with a
- * 500ms debounced PUT; reordering uses the bulk `orderedIds` endpoint so two
- * swapped neighbors land in a single round-trip.
- */
-export function AdminLinksPage() {
-  const Button = useSlot("Button");
-  const [links, setLinks] = useState<LinkItem[]>([]);
-  const [newTitle, setNewTitle] = useState("");
-  const [newUrl, setNewUrl] = useState("");
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let cancelled = false;
-    fetch("/api/admin/links")
-      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Load failed"))))
-      .then((data: LinkItem[]) => {
-        if (!cancelled) {
-          setLinks(data);
-          setLoading(false);
-        }
-      })
-      .catch(() => !cancelled && setLoading(false));
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  async function addLink() {
-    if (!newTitle || !newUrl) return;
-    const res = await fetch("/api/admin/links", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ title: newTitle, url: newUrl }),
-    });
-    if (res.ok) {
-      const link = (await res.json()) as LinkItem;
-      setLinks((prev) => [...prev, link]);
-      setNewTitle("");
-      setNewUrl("");
-    }
-  }
-
-  async function saveLink(link: LinkItem) {
-    await fetch("/api/admin/links", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(link),
-    });
-  }
-
-  async function deleteLink(id: number) {
-    await fetch(`/api/admin/links?id=${id}`, { method: "DELETE" });
-    setLinks((prev) => prev.filter((l) => l.id !== id));
-  }
-
-  function updateField<K extends keyof LinkItem>(
-    id: number,
-    field: K,
-    value: LinkItem[K],
-  ) {
-    setLinks((prev) => {
-      const next = prev.map((l) => (l.id === id ? { ...l, [field]: value } : l));
-      const updated = next.find((l) => l.id === id);
-      if (updated) void saveLink(updated);
-      return next;
-    });
-  }
-
-  async function moveLink(index: number, direction: "up" | "down") {
-    const swap = direction === "up" ? index - 1 : index + 1;
-    if (swap < 0 || swap >= links.length) return;
-    const next = [...links];
-    [next[index]!, next[swap]!] = [next[swap]!, next[index]!];
-    setLinks(next);
-    await fetch("/api/admin/links", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ orderedIds: next.map((l) => l.id) }),
-    });
-  }
-
-  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
-
-  return (
-    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold">Links</h1>
-      <p className="text-sm text-muted-foreground">
-        Edits the global <code>/links</code> page and hero links on the homepage.
-      </p>
-
-      <div className="space-y-3">
-        {links.map((link, index) => (
-          <div
-            key={link.id}
-            className="flex items-start gap-3 rounded border border-border p-3"
-          >
-            <div className="flex flex-col gap-1">
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                disabled={index === 0}
-                onClick={() => moveLink(index, "up")}
-              >
-                ▲
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                disabled={index === links.length - 1}
-                onClick={() => moveLink(index, "down")}
-              >
-                ▼
-              </Button>
-            </div>
-            <div className="flex flex-1 flex-wrap items-center gap-2">
-              <input
-                value={link.title}
-                onChange={(e) => updateField(link.id, "title", e.target.value)}
-                placeholder="Title"
-                className="min-w-0 flex-1 rounded border border-border bg-background px-2 py-1 text-sm"
-              />
-              <input
-                value={link.url}
-                onChange={(e) => updateField(link.id, "url", e.target.value)}
-                placeholder="URL"
-                className="min-w-0 flex-1 rounded border border-border bg-background px-2 py-1 text-sm"
-              />
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => updateField(link.id, "isVisible", !link.isVisible)}
-              >
-                {link.isVisible ? "Visible" : "Hidden"}
-              </Button>
-              <label className="flex items-center gap-1 text-xs text-muted-foreground">
-                <input
-                  type="checkbox"
-                  checked={link.showOnHero}
-                  onChange={() =>
-                    updateField(link.id, "showOnHero", !link.showOnHero)
-                  }
-                />
-                homepage
-              </label>
-              <Button variant="destructive" size="sm" onClick={() => deleteLink(link.id)}>
-                Delete
-              </Button>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-2 rounded border border-dashed border-border p-3">
-        <input
-          value={newTitle}
-          onChange={(e) => setNewTitle(e.target.value)}
-          placeholder="Link title"
-          className="min-w-0 flex-1 rounded border border-border bg-background px-2 py-1 text-sm"
-        />
-        <input
-          value={newUrl}
-          onChange={(e) => setNewUrl(e.target.value)}
-          placeholder="https://..."
-          className="min-w-0 flex-1 rounded border border-border bg-background px-2 py-1 text-sm"
-        />
-        <Button onClick={addLink} disabled={!newTitle || !newUrl}>
-          Add Link
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/pages/AdminNewReleasePage.tsx

@@ -1,12 +0,0 @@
-"use client";
-
-import { ReleaseForm } from "../components/ReleaseForm";
-
-export function AdminNewReleasePage() {
-  return (
-    <div className="max-w-2xl">
-      <h1 className="mb-6 text-2xl font-semibold">New Release</h1>
-      <ReleaseForm />
-    </div>
-  );
-}

package/src/pages/AdminOrdersPage.tsx

@@ -1,127 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useSlot } from "@gigamusic/ui/client";
-import { formatCurrency } from "@gigamusic/ui";
-
-interface OrderItem {
-  id: number;
-  release?: { name: string } | null;
-  track?: { name: string } | null;
-}
-
-interface Order {
-  id: number;
-  email: string;
-  amountTotal: number;
-  status: "pending" | "completed" | "failed";
-  createdAt: string;
-  stripePaymentId: string | null;
-  items: OrderItem[];
-}
-
-/**
- * Email-lookup orders view. The consumer can swap this for a paginated table
- * backed by a custom `/api/admin/orders` endpoint that supports filtering by
- * date range; the minimum surface here is "find a customer's orders to
- * troubleshoot a missing download."
- */
-export function AdminOrdersPage() {
-  const Button = useSlot("Button");
-  const [email, setEmail] = useState("");
-  const [orders, setOrders] = useState<Order[] | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-
-  async function search(e: React.FormEvent) {
-    e.preventDefault();
-    if (!email) return;
-    setLoading(true);
-    setError("");
-    try {
-      const res = await fetch(
-        `/api/admin/orders?email=${encodeURIComponent(email)}`,
-      );
-      if (!res.ok) throw new Error(`Search failed (${res.status})`);
-      setOrders((await res.json()) as Order[]);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  return (
-    <div>
-      <h1 className="mb-6 text-2xl font-semibold">Orders</h1>
-      <form onSubmit={search} className="mb-6 flex gap-2">
-        <input
-          type="email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          placeholder="Search by email..."
-          className="flex-1 rounded border border-border bg-background px-3 py-2 text-sm"
-        />
-        <Button type="submit" disabled={loading}>
-          {loading ? "Searching..." : "Search"}
-        </Button>
-      </form>
-
-      {error && <p className="text-sm text-destructive">{error}</p>}
-
-      {orders && (
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-border text-left">
-              <th className="py-2">ID</th>
-              <th className="py-2">Date</th>
-              <th className="py-2">Items</th>
-              <th className="py-2 text-right">Amount</th>
-              <th className="py-2 text-right">Status</th>
-              <th className="py-2 text-right">Stripe</th>
-            </tr>
-          </thead>
-          <tbody>
-            {orders.map((order) => (
-              <tr key={order.id} className="border-b border-border/40">
-                <td className="py-2 font-mono text-xs">#{order.id}</td>
-                <td className="py-2">
-                  {new Date(order.createdAt).toLocaleDateString()}
-                </td>
-                <td className="py-2 max-w-[200px] truncate text-muted-foreground">
-                  {order.items
-                    .map((i) => i.release?.name ?? i.track?.name ?? "—")
-                    .join(", ")}
-                </td>
-                <td className="py-2 text-right">
-                  {formatCurrency(order.amountTotal)}
-                </td>
-                <td className="py-2 text-right">{order.status}</td>
-                <td className="py-2 text-right">
-                  {order.stripePaymentId ? (
-                    <a
-                      href={`https://dashboard.stripe.com/payments/${order.stripePaymentId}`}
-                      rel="noopener noreferrer"
-                      className="text-xs hover:underline"
-                    >
-                      View
-                    </a>
-                  ) : (
-                    <span className="text-xs text-muted-foreground">—</span>
-                  )}
-                </td>
-              </tr>
-            ))}
-            {orders.length === 0 && (
-              <tr>
-                <td colSpan={6} className="py-8 text-center text-muted-foreground">
-                  No orders found.
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-}

package/src/pages/AdminReleasesPage.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import Link from "next/link";
-import { useSlot } from "@gigamusic/ui/client";
-
-interface ReleaseSummary {
-  id: number;
-  name: string;
-  slug: string;
-  price: number;
-  type: string;
-  isPublished: boolean;
-  tracks: Array<{ id: number }>;
-}
-
-/** Lists every release with quick edit + delete. Fetches from `/api/admin/releases`. */
-export function AdminReleasesPage() {
-  const Button = useSlot("Button");
-  const [releases, setReleases] = useState<ReleaseSummary[] | null>(null);
-  const [error, setError] = useState("");
-
-  useEffect(() => {
-    let cancelled = false;
-    fetch("/api/admin/releases")
-      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Load failed"))))
-      .then((data) => {
-        if (!cancelled) setReleases(data as ReleaseSummary[]);
-      })
-      .catch((err) => !cancelled && setError(String(err)));
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  return (
-    <div>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-semibold">Releases</h1>
-        <Button href="/admin/releases/new">New Release</Button>
-      </div>
-
-      {error && <p className="text-sm text-destructive">{error}</p>}
-
-      <table className="w-full text-sm">
-        <thead>
-          <tr className="border-b border-border text-left">
-            <th className="py-2">Name</th>
-            <th className="py-2 text-right">Type</th>
-            <th className="py-2 text-right">Price</th>
-            <th className="py-2 text-right">Tracks</th>
-            <th className="py-2 text-right">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {releases?.map((release) => (
-            <tr key={release.id} className="border-b border-border/40">
-              <td className="py-2">
-                <Link
-                  href={`/admin/releases/${release.id}/edit`}
-                  className="hover:underline"
-                >
-                  {release.name}
-                </Link>
-              </td>
-              <td className="py-2 text-right">{release.type}</td>
-              <td className="py-2 text-right">
-                ${(release.price / 100).toFixed(2)}
-              </td>
-              <td className="py-2 text-right">{release.tracks.length}</td>
-              <td className="py-2 text-right">
-                {release.isPublished ? "Published" : "Draft"}
-              </td>
-            </tr>
-          ))}
-          {releases && releases.length === 0 && (
-            <tr>
-              <td colSpan={5} className="py-8 text-center text-muted-foreground">
-                No releases yet.
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/src/pages/AdminSettingsPage.tsx

@@ -1,84 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { useSlot } from "@gigamusic/ui/client";
-
-const DISCOUNT_KEY = "catalog_discount_percent";
-
-/**
- * Site-wide settings editor. Currently exposes the catalog-discount percent;
- * any other consumer-specific tunables should get their own settings pages
- * so each editor can render the right form for its value shape.
- */
-export function AdminSettingsPage() {
-  const Button = useSlot("Button");
-  const [discount, setDiscount] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [saved, setSaved] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    fetch(`/api/admin/settings?key=${encodeURIComponent(DISCOUNT_KEY)}`)
-      .then((r) => (r.ok ? r.json() : Promise.reject(new Error("Load failed"))))
-      .then((data: { value: unknown }) => {
-        if (cancelled) return;
-        const value =
-          typeof data.value === "number"
-            ? String(data.value)
-            : typeof data.value === "string"
-              ? data.value
-              : "15";
-        setDiscount(value);
-        setLoading(false);
-      })
-      .catch(() => !cancelled && setLoading(false));
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  async function handleSave() {
-    setSaving(true);
-    setSaved(false);
-    await fetch("/api/admin/settings", {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ key: DISCOUNT_KEY, value: Number(discount) }),
-    });
-    setSaving(false);
-    setSaved(true);
-    setTimeout(() => setSaved(false), 3000);
-  }
-
-  if (loading) return <p className="text-sm text-muted-foreground">Loading…</p>;
-
-  return (
-    <div className="max-w-md space-y-6">
-      <h1 className="text-2xl font-semibold">Settings</h1>
-      <div className="space-y-2">
-        <label htmlFor="discount" className="text-sm font-medium">
-          Catalog Discount (%)
-        </label>
-        <div className="flex items-center gap-3">
-          <input
-            id="discount"
-            type="number"
-            min="0"
-            max="100"
-            value={discount}
-            onChange={(e) => setDiscount(e.target.value)}
-            className="w-24 rounded border border-border bg-background px-3 py-2 text-sm"
-          />
-          <Button onClick={handleSave} disabled={saving}>
-            {saving ? "Saving..." : "Save"}
-          </Button>
-          {saved && <span className="text-sm">Saved</span>}
-        </div>
-        <p className="text-xs text-muted-foreground">
-          Discount applied when customers buy the entire catalog.
-        </p>
-      </div>
-    </div>
-  );
-}