opencard 1.0.0

package/admin/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "opencard-admin",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0"
+  }
+}

package/admin/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/admin/src/App.tsx

@@ -0,0 +1,198 @@
+import { useState, useEffect, useCallback } from "react";
+import Dashboard from "./pages/Dashboard";
+import Transactions from "./pages/Transactions";
+import Cards from "./pages/Cards";
+
+type Page = "dashboard" | "transactions" | "cards";
+
+interface Stats {
+  cards: { totalCards: number; activeCards: number; frozenCards: number };
+  transactions: {
+    totalTransactions: number;
+    completedTransactions: number;
+    failedTransactions: number;
+    pendingTransactions: number;
+    totalRevenue: string;
+    totalVolume: string;
+  };
+  wallets: { totalWallets: number };
+}
+
+function App() {
+  const [page, setPage] = useState<Page>("dashboard");
+  const [token, setToken] = useState(
+    () => localStorage.getItem("opencard_admin_token") || "",
+  );
+  const [authed, setAuthed] = useState(false);
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [loginInput, setLoginInput] = useState("");
+
+  const apiBase = "/admin";
+
+  const fetchStats = useCallback(async () => {
+    try {
+      const res = await fetch(`${apiBase}/api/stats`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setStats(data);
+        setAuthed(true);
+      } else {
+        setAuthed(false);
+        localStorage.removeItem("opencard_admin_token");
+      }
+    } catch {
+      // server not reachable
+    }
+  }, [token]);
+
+  useEffect(() => {
+    if (token) fetchStats();
+  }, [token, fetchStats]);
+
+  // Auto-refresh stats every 30s
+  useEffect(() => {
+    if (!authed) return;
+    const interval = setInterval(fetchStats, 30000);
+    return () => clearInterval(interval);
+  }, [authed, fetchStats]);
+
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    localStorage.setItem("opencard_admin_token", loginInput);
+    setToken(loginInput);
+  };
+
+  if (!authed) {
+    return (
+      <div
+        className="min-h-screen flex items-center justify-center"
+        style={{ background: "var(--bg-primary)" }}
+      >
+        <form
+          onSubmit={handleLogin}
+          className="w-full max-w-sm p-8 rounded-2xl"
+          style={{
+            background: "var(--bg-card)",
+            border: "1px solid var(--border)",
+          }}
+        >
+          <div className="flex items-center gap-3 mb-8">
+            <div
+              className="w-10 h-10 rounded-xl flex items-center justify-center text-xl font-bold"
+              style={{
+                background: "linear-gradient(135deg, #818cf8, #6366f1)",
+              }}
+            >
+              O
+            </div>
+            <div>
+              <h1
+                className="text-xl font-bold"
+                style={{ color: "var(--text-primary)" }}
+              >
+                OpenCard
+              </h1>
+              <p className="text-xs" style={{ color: "var(--text-muted)" }}>
+                Admin Dashboard
+              </p>
+            </div>
+          </div>
+          <input
+            type="password"
+            value={loginInput}
+            onChange={(e) => setLoginInput(e.target.value)}
+            placeholder="Admin secret..."
+            className="w-full px-4 py-3 rounded-lg mb-4 outline-none text-sm transition-all focus:ring-2"
+            style={{
+              background: "var(--bg-secondary)",
+              border: "1px solid var(--border)",
+              color: "var(--text-primary)",
+            }}
+          />
+          <button
+            type="submit"
+            className="w-full py-3 rounded-lg font-semibold text-sm text-white transition-all hover:opacity-90"
+            style={{ background: "linear-gradient(135deg, #818cf8, #6366f1)" }}
+          >
+            Sign In
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen" style={{ background: "var(--bg-primary)" }}>
+      {/* Header */}
+      <header
+        className="sticky top-0 z-50 px-6 py-4 flex items-center justify-between"
+        style={{
+          background: "rgba(15, 15, 35, 0.85)",
+          backdropFilter: "blur(12px)",
+          borderBottom: "1px solid var(--border)",
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <div
+            className="w-9 h-9 rounded-xl flex items-center justify-center text-lg font-bold text-white"
+            style={{ background: "linear-gradient(135deg, #818cf8, #6366f1)" }}
+          >
+            O
+          </div>
+          <span
+            className="text-lg font-bold"
+            style={{ color: "var(--text-primary)" }}
+          >
+            OpenCard
+          </span>
+          <span
+            className="text-xs px-2 py-0.5 rounded-full"
+            style={{ background: "var(--accent-glow)", color: "var(--accent)" }}
+          >
+            Admin
+          </span>
+        </div>
+        <nav className="flex gap-1">
+          {(["dashboard", "transactions", "cards"] as Page[]).map((p) => (
+            <button
+              key={p}
+              onClick={() => setPage(p)}
+              className="px-4 py-2 rounded-lg text-sm font-medium capitalize transition-all"
+              style={{
+                background: page === p ? "var(--accent-glow)" : "transparent",
+                color: page === p ? "var(--accent)" : "var(--text-secondary)",
+              }}
+            >
+              {p}
+            </button>
+          ))}
+        </nav>
+        <button
+          onClick={() => {
+            localStorage.removeItem("opencard_admin_token");
+            setAuthed(false);
+            setToken("");
+          }}
+          className="text-xs px-3 py-1.5 rounded-lg transition-all hover:opacity-80"
+          style={{
+            background: "rgba(248, 113, 113, 0.1)",
+            color: "var(--danger)",
+          }}
+        >
+          Logout
+        </button>
+      </header>
+
+      {/* Content */}
+      <main className="p-6 max-w-7xl mx-auto">
+        {page === "dashboard" && <Dashboard stats={stats} />}
+        {page === "transactions" && <Transactions token={token} />}
+        {page === "cards" && <Cards token={token} />}
+      </main>
+    </div>
+  );
+}
+
+export default App;

package/admin/src/index.css

@@ -0,0 +1,44 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg-primary: #0f0f23;
+  --bg-secondary: #1a1a3e;
+  --bg-card: #1e1e45;
+  --bg-card-hover: #252563;
+  --accent: #818cf8;
+  --accent-glow: rgba(129, 140, 248, 0.15);
+  --text-primary: #e2e8f0;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --border: rgba(129, 140, 248, 0.12);
+  --success: #34d399;
+  --danger: #f87171;
+  --warning: #fbbf24;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", system-ui, sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--accent);
+  border-radius: 3px;
+}

package/admin/src/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/admin/src/pages/Cards.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect } from "react";
+
+interface Card {
+  id: string;
+  walletAddress: string;
+  kripiCardId: string;
+  nameOnCard: string;
+  email: string;
+  initialAmountUsd: string;
+  currentBalanceUsd: string | null;
+  status: string;
+  createdAt: string;
+}
+
+export default function Cards({ token }: { token: string }) {
+  const [cards, setCards] = useState<Card[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState("");
+
+  useEffect(() => {
+    fetchCards();
+  }, []);
+
+  async function fetchCards() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/admin/api/cards`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (res.ok) {
+        const data = await res.json();
+        setCards(data.cards);
+      }
+    } catch {
+      // ignore
+    }
+    setLoading(false);
+  }
+
+  const filtered = cards.filter(
+    (c) =>
+      c.walletAddress.toLowerCase().includes(search.toLowerCase()) ||
+      c.kripiCardId.toLowerCase().includes(search.toLowerCase()) ||
+      c.nameOnCard.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  const statusColors: Record<string, string> = {
+    active: "var(--success)",
+    frozen: "var(--warning)",
+    depleted: "var(--text-muted)",
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2
+          className="text-2xl font-bold"
+          style={{ color: "var(--text-primary)" }}
+        >
+          Cards
+        </h2>
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by wallet, card ID, or name..."
+          className="px-4 py-2 rounded-lg text-sm outline-none w-80 transition-all focus:ring-2"
+          style={{
+            background: "var(--bg-secondary)",
+            border: "1px solid var(--border)",
+            color: "var(--text-primary)",
+          }}
+        />
+      </div>
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <div
+            className="w-8 h-8 rounded-full border-2 border-t-transparent animate-spin"
+            style={{
+              borderColor: "var(--accent)",
+              borderTopColor: "transparent",
+            }}
+          />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filtered.map((card) => (
+            <div
+              key={card.id}
+              className="p-5 rounded-xl transition-all hover:scale-[1.01]"
+              style={{
+                background: "var(--bg-card)",
+                border: "1px solid var(--border)",
+              }}
+            >
+              <div className="flex items-center justify-between mb-4">
+                <span
+                  className="text-sm font-bold"
+                  style={{ color: "var(--text-primary)" }}
+                >
+                  {card.nameOnCard}
+                </span>
+                <span
+                  className="text-xs px-2 py-1 rounded-full font-medium capitalize"
+                  style={{
+                    background: `${statusColors[card.status] || "var(--text-muted)"}15`,
+                    color: statusColors[card.status] || "var(--text-muted)",
+                  }}
+                >
+                  {card.status}
+                </span>
+              </div>
+
+              <div className="space-y-2 text-sm">
+                <div className="flex justify-between">
+                  <span style={{ color: "var(--text-muted)" }}>
+                    KripiCard ID
+                  </span>
+                  <span
+                    className="font-mono text-xs"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    {card.kripiCardId}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span style={{ color: "var(--text-muted)" }}>Balance</span>
+                  <span
+                    className="font-bold"
+                    style={{ color: "var(--success)" }}
+                  >
+                    $
+                    {card.currentBalanceUsd
+                      ? parseFloat(card.currentBalanceUsd).toFixed(2)
+                      : "—"}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span style={{ color: "var(--text-muted)" }}>
+                    Initial Load
+                  </span>
+                  <span style={{ color: "var(--text-secondary)" }}>
+                    ${parseFloat(card.initialAmountUsd).toFixed(2)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span style={{ color: "var(--text-muted)" }}>Wallet</span>
+                  <span
+                    className="font-mono text-xs"
+                    style={{ color: "var(--text-secondary)" }}
+                  >
+                    {card.walletAddress.slice(0, 6)}...
+                    {card.walletAddress.slice(-4)}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span style={{ color: "var(--text-muted)" }}>Created</span>
+                  <span
+                    className="text-xs"
+                    style={{ color: "var(--text-muted)" }}
+                  >
+                    {new Date(card.createdAt).toLocaleDateString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ))}
+          {filtered.length === 0 && (
+            <div
+              className="col-span-full py-12 text-center"
+              style={{ color: "var(--text-muted)" }}
+            >
+              No cards found
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/admin/src/pages/Dashboard.tsx

@@ -0,0 +1,139 @@
+interface Stats {
+  cards: { totalCards: number; activeCards: number; frozenCards: number };
+  transactions: {
+    totalTransactions: number;
+    completedTransactions: number;
+    failedTransactions: number;
+    pendingTransactions: number;
+    totalRevenue: string;
+    totalVolume: string;
+  };
+  wallets: { totalWallets: number };
+}
+
+function StatCard({
+  label,
+  value,
+  accent,
+}: {
+  label: string;
+  value: string | number;
+  accent?: string;
+}) {
+  return (
+    <div
+      className="p-5 rounded-xl transition-all hover:scale-[1.02]"
+      style={{
+        background: "var(--bg-card)",
+        border: "1px solid var(--border)",
+      }}
+    >
+      <p
+        className="text-xs font-medium mb-1 uppercase tracking-wider"
+        style={{ color: "var(--text-muted)" }}
+      >
+        {label}
+      </p>
+      <p
+        className="text-2xl font-bold"
+        style={{ color: accent || "var(--text-primary)" }}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}
+
+export default function Dashboard({ stats }: { stats: Stats | null }) {
+  if (!stats) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <div
+          className="w-8 h-8 rounded-full border-2 border-t-transparent animate-spin"
+          style={{
+            borderColor: "var(--accent)",
+            borderTopColor: "transparent",
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2
+        className="text-2xl font-bold"
+        style={{ color: "var(--text-primary)" }}
+      >
+        Dashboard
+      </h2>
+
+      {/* Alert for failed transactions */}
+      {stats.transactions.failedTransactions > 0 && (
+        <div
+          className="p-4 rounded-xl flex items-center gap-3"
+          style={{
+            background: "rgba(248, 113, 113, 0.1)",
+            border: "1px solid rgba(248, 113, 113, 0.2)",
+          }}
+        >
+          <span className="text-lg">⚠️</span>
+          <div>
+            <p
+              className="text-sm font-semibold"
+              style={{ color: "var(--danger)" }}
+            >
+              {stats.transactions.failedTransactions} failed transaction(s)
+            </p>
+            <p className="text-xs" style={{ color: "var(--text-muted)" }}>
+              Agents may have paid but not received their cards. Check
+              Transactions tab.
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Total Cards" value={stats.cards.totalCards} />
+        <StatCard
+          label="Active Cards"
+          value={stats.cards.activeCards}
+          accent="var(--success)"
+        />
+        <StatCard
+          label="Frozen Cards"
+          value={stats.cards.frozenCards}
+          accent="var(--warning)"
+        />
+        <StatCard
+          label="Total Wallets"
+          value={stats.wallets.totalWallets}
+          accent="var(--accent)"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard
+          label="Total Revenue"
+          value={`$${parseFloat(stats.transactions.totalRevenue).toFixed(2)}`}
+          accent="var(--success)"
+        />
+        <StatCard
+          label="Total Volume"
+          value={`$${parseFloat(stats.transactions.totalVolume).toFixed(2)}`}
+        />
+        <StatCard
+          label="Completed Txns"
+          value={stats.transactions.completedTransactions}
+          accent="var(--success)"
+        />
+        <StatCard
+          label="Pending Txns"
+          value={stats.transactions.pendingTransactions}
+          accent="var(--warning)"
+        />
+      </div>
+    </div>
+  );
+}