feat: build merchant dashboard UI (#94) (#141)

- Next.js 16 app with Tailwind CSS
- Login with user_id + PIN matching backend auth
- Overview page with live stats (polls /admin/dashboard/stats)
- Transactions page with filters, search, pagination, CSV export
- Payouts page with request form and history
- QR code generator with PNG download
- Analytics page with area, pie, and bar charts
- JWT auth context with route guard
- Polling hook for real-time updates

Author: tali-creator

dashboard/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

dashboard/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

dashboard/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

dashboard/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

dashboard/app/dashboard/analytics/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+import { useMemo } from "react";
+import { usePolling } from "@/lib/use-polling";
+import { api, Transaction } from "@/lib/api";
+import {
+  AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from "recharts";
+import { format, parseISO, startOfDay } from "date-fns";
+
+const COLORS = ["#6366f1", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6"];
+
+export default function AnalyticsPage() {
+  const { data: txs, loading } = usePolling(() => api.transactions(), 30000);
+
+  const { dailyVolume, statusDist, assetDist } = useMemo(() => {
+    if (!txs) return { dailyVolume: [], statusDist: [], assetDist: [] };
+
+    // Daily volume (last 30 days)
+    const byDay: Record<string, number> = {};
+    txs.forEach((t) => {
+      const day = format(startOfDay(parseISO(t.created_at)), "MMM d");
+      byDay[day] = (byDay[day] ?? 0) + t.send_amount / 1_000_000;
+    });
+    const dailyVolume = Object.entries(byDay)
+      .slice(-30)
+      .map(([date, volume]) => ({ date, volume: Number(volume.toFixed(2)) }));
+
+    // Status distribution
+    const bySt: Record<string, number> = {};
+    txs.forEach((t) => { bySt[t.status] = (bySt[t.status] ?? 0) + 1; });
+    const statusDist = Object.entries(bySt).map(([name, value]) => ({ name, value }));
+
+    // Asset distribution
+    const byAsset: Record<string, number> = {};
+    txs.forEach((t) => { byAsset[t.send_asset] = (byAsset[t.send_asset] ?? 0) + t.send_amount / 1_000_000; });
+    const assetDist = Object.entries(byAsset).map(([name, value]) => ({ name, value: Number(value.toFixed(2)) }));
+
+    return { dailyVolume, statusDist, assetDist };
+  }, [txs]);
+
+  if (loading && !txs) {
+    return (
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900 mb-6">Analytics</h1>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="bg-white border border-slate-200 rounded-xl p-5 h-72 animate-pulse" />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-slate-900 mb-6">Analytics</h1>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        {/* Daily Volume */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm lg:col-span-2">
+          <h2 className="font-semibold text-slate-800 mb-4">Daily Transaction Volume</h2>
+          <ResponsiveContainer width="100%" height={240}>
+            <AreaChart data={dailyVolume}>
+              <defs>
+                <linearGradient id="vol" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="5%" stopColor="#6366f1" stopOpacity={0.2} />
+                  <stop offset="95%" stopColor="#6366f1" stopOpacity={0} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
+              <XAxis dataKey="date" tick={{ fontSize: 11 }} />
+              <YAxis tick={{ fontSize: 11 }} />
+              <Tooltip formatter={(v) => [`${Number(v).toLocaleString()}`, "Volume"]} />
+              <Area type="monotone" dataKey="volume" stroke="#6366f1" fill="url(#vol)" strokeWidth={2} />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Status Distribution */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+          <h2 className="font-semibold text-slate-800 mb-4">Transaction Status</h2>
+          <ResponsiveContainer width="100%" height={220}>
+            <PieChart>
+              <Pie data={statusDist} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80} label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}>
+                {statusDist.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
+              </Pie>
+              <Tooltip />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Asset Distribution */}
+        <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
+          <h2 className="font-semibold text-slate-800 mb-4">Volume by Asset</h2>
+          <ResponsiveContainer width="100%" height={220}>
+            <BarChart data={assetDist}>
+              <CartesianGrid strokeDasharray="3 3" stroke="#f1f5f9" />
+              <XAxis dataKey="name" tick={{ fontSize: 11 }} />
+              <YAxis tick={{ fontSize: 11 }} />
+              <Tooltip formatter={(v) => [Number(v).toLocaleString(), "Volume"]} />
+              <Bar dataKey="value" radius={[4, 4, 0, 0]}>
+                {assetDist.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+      </div>
+    </div>
+  );
+}

dashboard/app/dashboard/layout.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/lib/auth-context";
+import Sidebar from "@/components/Sidebar";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { token } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (token === null && typeof window !== "undefined" && !localStorage.getItem("token")) {
+      router.replace("/login");
+    }
+  }, [token, router]);
+
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="ml-60 flex-1 p-6 overflow-auto">{children}</main>
+    </div>
+  );
+}

dashboard/app/dashboard/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { usePolling } from "@/lib/use-polling";
+import { api } from "@/lib/api";
+import StatCard from "@/components/StatCard";
+
+export default function OverviewPage() {
+  const { data, loading, error } = usePolling(() => api.dashboardStats(), 15000);
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-slate-900 mb-6">Overview</h1>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+          {error} — showing cached data
+        </div>
+      )}
+
+      {loading && !data ? (
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="bg-white rounded-xl border border-slate-200 p-5 h-24 animate-pulse" />
+          ))}
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <StatCard label="Total Users" value={data?.total_users ?? 0} />
+          <StatCard label="Total Payments" value={data?.total_payments ?? 0} color="text-indigo-600" />
+          <StatCard label="Transfers" value={data?.total_transfers ?? 0} />
+          <StatCard label="Withdrawals" value={data?.total_withdrawals ?? 0} />
+          <StatCard label="Active Merchants" value={data?.active_merchants ?? 0} color="text-green-600" />
+        </div>
+      )}
+
+      <p className="mt-4 text-xs text-slate-400">Auto-refreshes every 15 seconds</p>
+    </div>
+  );
+}

dashboard/app/dashboard/payouts/page.tsx

@@ -0,0 +1,131 @@
+"use client";
+import { useState } from "react";
+import { usePolling } from "@/lib/use-polling";
+import { api, Payout } from "@/lib/api";
+import StatusBadge from "@/components/StatusBadge";
+import { format } from "date-fns";
+
+export default function PayoutsPage() {
+  const { data, loading, error, refresh } = usePolling(() => api.payoutHistory(20, 0), 30000);
+  const payouts: Payout[] = data?.payouts ?? [];
+
+  const [form, setForm] = useState({ amount: "", asset: "USDC", bankAccountId: "", anchorId: "" });
+  const [submitting, setSubmitting] = useState(false);
+  const [msg, setMsg] = useState<{ type: "ok" | "err"; text: string } | null>(null);
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    setMsg(null);
+    try {
+      await api.requestPayout({
+        amount: String(Math.round(Number(form.amount) * 1_000_000)),
+        asset: form.asset,
+        bankAccountId: form.bankAccountId,
+        anchorId: form.anchorId,
+      });
+      setMsg({ type: "ok", text: "Payout requested successfully." });
+      setForm({ amount: "", asset: "USDC", bankAccountId: "", anchorId: "" });
+      refresh();
+    } catch (e) {
+      setMsg({ type: "err", text: e instanceof Error ? e.message : "Failed" });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-slate-900 mb-6">Payouts</h1>
+
+      {/* Request payout form */}
+      <div className="bg-white border border-slate-200 rounded-xl p-5 mb-6 shadow-sm max-w-lg">
+        <h2 className="font-semibold text-slate-800 mb-4">Request Payout</h2>
+        {msg && (
+          <div className={`mb-3 p-3 rounded-lg text-sm ${msg.type === "ok" ? "bg-green-50 text-green-700 border border-green-200" : "bg-red-50 text-red-700 border border-red-200"}`}>
+            {msg.text}
+          </div>
+        )}
+        <form onSubmit={submit} className="space-y-3">
+          <div className="flex gap-2">
+            <input
+              required
+              type="number"
+              min="0.01"
+              step="0.01"
+              placeholder="Amount"
+              value={form.amount}
+              onChange={(e) => setForm((f) => ({ ...f, amount: e.target.value }))}
+              className="flex-1 border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            />
+            <select
+              value={form.asset}
+              onChange={(e) => setForm((f) => ({ ...f, asset: e.target.value }))}
+              className="border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            >
+              {["USDC", "USDT", "XLM"].map((a) => <option key={a}>{a}</option>)}
+            </select>
+          </div>
+          <input
+            required
+            placeholder="Bank Account ID (UUID)"
+            value={form.bankAccountId}
+            onChange={(e) => setForm((f) => ({ ...f, bankAccountId: e.target.value }))}
+            className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+          <input
+            required
+            placeholder="Anchor ID"
+            value={form.anchorId}
+            onChange={(e) => setForm((f) => ({ ...f, anchorId: e.target.value }))}
+            className="w-full border border-slate-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          />
+          <button
+            type="submit"
+            disabled={submitting}
+            className="w-full bg-indigo-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 disabled:opacity-50 transition-colors"
+          >
+            {submitting ? "Requesting…" : "Request Payout"}
+          </button>
+        </form>
+      </div>
+
+      {/* History */}
+      <h2 className="font-semibold text-slate-800 mb-3">Payout History</h2>
+      {error && <div className="mb-3 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>}
+      <div className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
+        <table className="w-full text-sm">
+          <thead className="bg-slate-50 border-b border-slate-200">
+            <tr>
+              {["ID", "Date", "Amount", "Asset", "Status", "Anchor"].map((h) => (
+                <th key={h} className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">{h}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-100">
+            {loading && payouts.length === 0 ? (
+              Array.from({ length: 5 }).map((_, i) => (
+                <tr key={i}>{Array.from({ length: 6 }).map((_, j) => (
+                  <td key={j} className="px-4 py-3"><div className="h-4 bg-slate-100 rounded animate-pulse" /></td>
+                ))}</tr>
+              ))
+            ) : payouts.length === 0 ? (
+              <tr><td colSpan={6} className="px-4 py-10 text-center text-slate-400">No payouts yet</td></tr>
+            ) : (
+              payouts.map((p) => (
+                <tr key={p.id} className="hover:bg-slate-50">
+                  <td className="px-4 py-3 font-mono text-xs text-slate-500">{p.id.slice(0, 8)}…</td>
+                  <td className="px-4 py-3 text-slate-600 whitespace-nowrap">{format(new Date(p.createdAt), "MMM d, yyyy")}</td>
+                  <td className="px-4 py-3 font-medium">{(Number(p.amount) / 1_000_000).toFixed(2)}</td>
+                  <td className="px-4 py-3">{p.asset}</td>
+                  <td className="px-4 py-3"><StatusBadge status={p.status} /></td>
+                  <td className="px-4 py-3 text-slate-400 text-xs">{p.anchorId}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}