@qhristen/paygrid 0.1.0

package/dist/core/privacy-wrapper.js

@@ -0,0 +1,72 @@
+import { TokenSymbol as Symbol } from "../types";
+import { ShadowWireClient, } from "@radr/shadowwire";
+export class PrivacyWrapper {
+    constructor(config) {
+        this.config = config;
+        this.rpcUrl = this.config.rpcUrl;
+        this.client = new ShadowWireClient({
+            network: "mainnet-beta",
+            // apiBaseUrl: this.config.rpcUrl
+            debug: false,
+        });
+    }
+    async getPrivateBalance(walletAddress, symbol) {
+        return await this.client.getBalance(walletAddress, symbol);
+    }
+    async withdraw({ symbol, recipient }) {
+        const balance = await this.client.getBalance(recipient, symbol);
+        if (balance.available === 0) {
+            console.log("No funds available");
+            return;
+        }
+        const amount = symbol === Symbol.SOL
+            ? (balance?.available ?? 0) / 1e9
+            : (balance?.available ?? 0) / 1e6;
+        return await this.client.withdraw({
+            amount,
+            wallet: recipient,
+        });
+    }
+    async transfer({ symbol, sender, amount, }) {
+        return await this.client.transfer({
+            amount,
+            recipient: this.config.marchantWalletADdress,
+            sender,
+            token: symbol,
+            type: "internal",
+        });
+    }
+    async createTransferTransaction(params) {
+        const result = await this.client.transfer({
+            sender: params.walletAddress,
+            recipient: this.config.marchantWalletADdress,
+            amount: params.amount,
+            token: params.symbol,
+            type: "external",
+        });
+        return result;
+    }
+    async createDepositTransaction(params) {
+        try {
+            let response;
+            console.log(params, "params");
+            if (params.symbol === "SOL") {
+                response = await this.client.deposit({
+                    wallet: params.walletAddress,
+                    amount: params.amount * 1000000000,
+                });
+            }
+            else {
+                response = await this.client.deposit({
+                    wallet: params.walletAddress,
+                    amount: params.amount * 1000000,
+                    token_mint: params.tokenMint,
+                });
+            }
+            return response;
+        }
+        catch (e) {
+            throw new Error(`Failed to create privacy transaction: ${e?.message ?? String(e)}`);
+        }
+    }
+}

package/dist/dashboard/api-section.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ApiKeysSectionProps {
+    apiKey?: string;
+    baseUrl?: string;
+}
+declare const ApiKeysSection: React.FC<ApiKeysSectionProps>;
+export default ApiKeysSection;

package/dist/dashboard/api-section.jsx

@@ -0,0 +1,146 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+const ApiKeysSection = ({ apiKey, baseUrl }) => {
+    const [keys, setKeys] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [newKeyData, setNewKeyData] = useState(null);
+    const fetchKeys = async () => {
+        setIsLoading(true);
+        try {
+            const headers = {};
+            if (apiKey)
+                headers['x-api-key'] = apiKey;
+            const res = await fetch(`${baseUrl}/api-keys`, { headers });
+            if (res.ok) {
+                const data = await res.json();
+                setKeys(data);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch API keys:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const createKey = async () => {
+        const name = prompt('Enter a name for the new API key:');
+        if (!name)
+            return;
+        setIsLoading(true);
+        try {
+            const headers = {
+                'Content-Type': 'application/json',
+            };
+            if (apiKey)
+                headers['x-api-key'] = apiKey;
+            const res = await fetch(`${baseUrl}/api-keys`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({ name }),
+            });
+            if (res.ok) {
+                const result = await res.json();
+                setNewKeyData({ key: result.key, name: result.apiKey.name });
+                fetchKeys();
+            }
+        }
+        catch (error) {
+            console.error('Failed to create API key:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const revokeKey = async (id, name) => {
+        if (!confirm(`Are you sure you want to revoke the key "${name}"? This action cannot be undone.`))
+            return;
+        setIsLoading(true);
+        try {
+            const headers = {};
+            if (apiKey)
+                headers['x-api-key'] = apiKey;
+            const res = await fetch(`${baseUrl}/api-keys/${id}`, {
+                method: 'DELETE',
+                headers
+            });
+            if (res.ok) {
+                fetchKeys();
+            }
+        }
+        catch (error) {
+            console.error('Failed to revoke API key:', error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchKeys();
+    }, [apiKey, baseUrl]);
+    return (<div className="space-y-6">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h3 className="text-xl font-bold">API Access Tokens</h3>
+          <p className="text-gray-500 text-sm">Generate keys to integrate PayGrid into your applications.</p>
+        </div>
+        <button onClick={createKey} disabled={isLoading} className="w-full md:w-auto bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50">
+          {isLoading ? 'Creating...' : '+ Create New Key'}
+        </button>
+      </div>
+
+      {newKeyData && (<div className="bg-emerald-500/10 border border-emerald-500/20 p-6 rounded-2xl relative">
+          <button onClick={() => setNewKeyData(null)} className="absolute top-4 right-4 text-gray-400 hover:text-white">
+            ✕
+          </button>
+          <h4 className="text-emerald-400 font-semibold mb-2">New API Key Created!</h4>
+          <p className="text-sm text-gray-400 mb-4">Make sure to copy your API key now. You won't be able to see it again.</p>
+          <div className="flex items-center gap-2">
+            <pre className="bg-black/50 p-4 rounded-xl font-mono text-sm text-emerald-300 flex-1 overflow-x-auto">
+              {newKeyData.key}
+            </pre>
+            <button onClick={() => navigator.clipboard.writeText(newKeyData.key)} className="bg-white/5 hover:bg-white/10 p-4 rounded-xl transition-colors" title="Copy to clipboard">
+              📋
+            </button>
+          </div>
+        </div>)}
+
+      <div className="grid gap-4">
+        {isLoading && keys.length === 0 ? (<div className="text-center py-12 text-gray-500">Loading keys...</div>) : keys.length === 0 ? (<div className="text-center py-12 text-gray-500 font-medium bg-[#111] border border-white/10 rounded-2xl">
+            No API keys found. Create one to get started.
+          </div>) : (keys.map(key => (<div key={key.id} className="bg-[#111] border border-white/10 p-4 md:p-6 rounded-2xl flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 bg-white/5 rounded-full flex-shrink-0 flex items-center justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#888" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 2-2 2.23"/><path d="M7 22 22.77 6.23a2 2 0 0 0 0-2.83l-.77-.77a2 2 0 0 0-2.83 0L3.41 18.41A2 2 0 0 0 3 19.83V22h2.17a2 2 0 0 0 1.42-.59Z"/><path d="m15 5 4 4"/></svg>
+                </div>
+                <div className="min-w-0">
+                  <h4 className="font-semibold truncate">{key.name}</h4>
+                  <p className="text-xs font-mono text-gray-500 mt-1">{key.keyHint}••••••••••••••••</p>
+                </div>
+              </div>
+              <div className="flex items-center justify-between md:justify-end gap-6 border-t md:border-t-0 border-white/5 pt-4 md:pt-0">
+                <div className="text-left md:text-right">
+                  <p className="text-[10px] text-gray-500 uppercase font-bold">Created</p>
+                  <p className="text-sm">{new Date(key.createdAt).toLocaleDateString()}</p>
+                </div>
+                <button onClick={() => revokeKey(key.id, key.name)} className="text-red-400 hover:text-red-300 text-xs font-semibold p-2">
+                  Revoke
+                </button>
+              </div>
+            </div>)))}
+      </div>
+
+      <div className="bg-indigo-500/5 border border-indigo-500/20 p-6 rounded-2xl">
+        <h4 className="text-indigo-400 font-semibold mb-2">Integration Guide</h4>
+        <p className="text-sm text-gray-400 mb-4">Initialize the SDK in your Next.js application using your API secret key.</p>
+        <pre className="bg-black/50 p-4 rounded-xl font-mono text-xs text-indigo-300 overflow-x-auto">
+          {`const paygrid = initPayGrid({
+  apiKey: process.env.PAYGRID_API_KEY,
+  rpcUrl: 'https://api.devnet.solana.com',
+  network: 'devnet'
+});`}
+        </pre>
+      </div>
+    </div>);
+};
+export default ApiKeysSection;

package/dist/dashboard/constant.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const SUPPORTED_TOKENS: {
+    symbol: string;
+    mint: string;
+    color: string;
+}[];
+export declare const Icons: {
+    Dashboard: () => React.JSX.Element;
+    Payments: () => React.JSX.Element;
+    Key: () => React.JSX.Element;
+    Search: () => React.JSX.Element;
+    External: () => React.JSX.Element;
+};

package/dist/dashboard/constant.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+export const SUPPORTED_TOKENS = [
+    { symbol: 'SOL', mint: '11111111111111111111111111111111', color: '#14F195' },
+    { symbol: 'USDC', mint: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', color: '#2775CA' },
+    { symbol: 'BONK', mint: 'DezXAZ8z7PnrnRJjz3wXBoRgixJ6WoPBw5DRF6S49t38', color: '#FFA500' }
+];
+export const Icons = {
+    Dashboard: () => (<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>),
+    Payments: () => (<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>),
+    Key: () => (<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m21 2-2 2.23"/><path d="M7 22 22.77 6.23a2 2 0 0 0 0-2.83l-.77-.77a2 2 0 0 0-2.83 0L3.41 18.41A2 2 0 0 0 3 19.83V22h2.17a2 2 0 0 0 1.42-.59Z"/><path d="m15 5 4 4"/></svg>),
+    Search: () => (<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>),
+    External: () => (<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>)
+};

package/dist/dashboard/index.d.ts

@@ -0,0 +1,3 @@
+export declare function PayGridDashboard({ baseUrl, }: {
+    baseUrl?: string;
+}): import("react").JSX.Element | null;

package/dist/dashboard/index.jsx

@@ -0,0 +1,319 @@
+"use client";
+import { initWASM, isWASMSupported, ShadowWireClient } from "@radr/shadowwire";
+import { clsx } from "clsx";
+import { LogOut, Menu, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
+import { twMerge } from "tailwind-merge";
+import { logout } from "../auth/actions";
+import { LoginScreen } from "../auth/login-screen";
+import ApiKeysSection from "./api-section";
+import { Icons } from "./constant";
+import PaymentsTable from "./payment-table";
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function PayGridDashboard({ baseUrl = "/api/paygrid", }) {
+    const [activeTab, setActiveTab] = useState("overview");
+    const [analytics, setAnalytics] = useState(null);
+    const [intents, setIntents] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isAnalyticsLoading, setIsAnalyticsLoading] = useState(false);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+    const [timeframe, setTimeframe] = useState(30);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [isAdmin, setIsAdmin] = useState(null);
+    const apiKey = process.env.NEXT_PUBLIC_PAYGRID_API_SECRET;
+    const merchantAddress = process.env.NEXT_PUBLIC_MERCHANT_WALLET_ADDRESS;
+    const [client] = useState(() => new ShadowWireClient());
+    const [wasmInitialized, setWasmInitialized] = useState(false);
+    const [balance, setBalance] = useState(null);
+    const fetchAnalytics = async (showLoading = false) => {
+        if (showLoading)
+            setIsAnalyticsLoading(true);
+        try {
+            const headers = {};
+            if (apiKey)
+                headers["x-api-key"] = apiKey;
+            const res = await fetch(`${baseUrl}/analytics?days=${timeframe}`, {
+                headers,
+            });
+            if (res.ok) {
+                const stats = await res.json();
+                setAnalytics(stats);
+            }
+        }
+        catch (error) {
+            console.error("Failed to fetch analytics:", error);
+        }
+        finally {
+            if (showLoading)
+                setIsAnalyticsLoading(false);
+        }
+    };
+    const fetchPayments = async () => {
+        try {
+            const headers = {};
+            if (apiKey)
+                headers["x-api-key"] = apiKey;
+            const res = await fetch(`${baseUrl}/payments`, { headers });
+            if (res.ok) {
+                const list = await res.json();
+                setIntents(list);
+            }
+        }
+        catch (error) {
+            console.error("Failed to fetch payments:", error);
+        }
+    };
+    useEffect(() => {
+        async function init() {
+            if (!isWASMSupported()) {
+                // setError('WebAssembly not supported');
+                return;
+            }
+            try {
+                await initWASM("/wasm/settler_wasm_bg.wasm");
+                setWasmInitialized(true);
+                await loadBalance();
+            }
+            catch (err) {
+                // setError('Initialization failed: ' + err.message);
+            }
+        }
+        init();
+    }, []);
+    console.log(balance, "wallet balance");
+    const loadBalance = async () => {
+        try {
+            const data = await client.getBalance(merchantAddress ?? "", "USDC");
+            setBalance(data.available / 1e9);
+        }
+        catch (err) {
+            console.error("Balance load failed:", err);
+        }
+    };
+    // Initial load for payments
+    useEffect(() => {
+        setIsLoading(true);
+        fetchPayments().then(() => setIsLoading(false));
+    }, [apiKey, baseUrl]);
+    // Analytics load (including timeframe changes)
+    useEffect(() => {
+        fetchAnalytics(true);
+        // Check admin session cookie on client side
+        const hasSession = document.cookie.includes("paygrid_admin_session=true");
+        setIsAdmin(hasSession);
+    }, [apiKey, baseUrl, timeframe]);
+    const filteredIntents = intents.filter((intent) => {
+        const query = searchQuery.toLowerCase();
+        return (intent.id.toLowerCase().includes(query) ||
+            intent.status.toLowerCase().includes(query) ||
+            intent.amount.toString().includes(query) ||
+            (intent.walletAddress &&
+                intent.walletAddress.toLowerCase().includes(query)));
+    });
+    const renderContent = () => {
+        switch (activeTab) {
+            case "overview":
+                return (<div className="space-y-6">
+            <div className="grid grid-cols-3 md:grid-cols-3 gap-2 md:gap-6">
+              <div className="bg-[#111] border border-white/10 p-6 rounded-2xl relative overflow-hidden">
+                {isAnalyticsLoading && (<div className="absolute inset-0 bg-black/20 backdrop-blur-[1px] flex items-center justify-center z-10">
+                    <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+                  </div>)}
+                <p className="text-gray-400 text-sm font-medium">
+                  Total Volume
+                </p>
+                <h3 className="text-3xl font-bold mt-1 text-white">
+                  ${analytics?.totalRevenue.toFixed(2)}
+                </h3>
+                <p className={cn("text-xs mt-2", (analytics?.revenueGrowth || 0) >= 0
+                        ? "text-emerald-400"
+                        : "text-red-400")}>
+                  {(analytics?.revenueGrowth || 0) >= 0 ? "↑" : "↓"}{" "}
+                  {Math.abs(analytics?.revenueGrowth || 0).toFixed(1)}% from
+                  last {timeframe === 30 ? "month" : "week"}
+                </p>
+              </div>
+              <div className="bg-[#111] border border-white/10 p-6 rounded-2xl relative overflow-hidden">
+                {isAnalyticsLoading && (<div className="absolute inset-0 bg-black/20 backdrop-blur-[1px] flex items-center justify-center z-10">
+                    <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+                  </div>)}
+                <p className="text-gray-400 text-sm font-medium">
+                  Payment Intents
+                </p>
+                <h3 className="text-3xl font-bold mt-1 text-white">
+                  {analytics?.transactionCount}
+                </h3>
+                <p className="text-gray-500 text-xs mt-2">
+                  Past {timeframe} days
+                </p>
+              </div>
+              <div className="bg-[#111] border border-white/10 p-6 rounded-2xl relative overflow-hidden">
+                {isAnalyticsLoading && (<div className="absolute inset-0 bg-black/20 backdrop-blur-[1px] flex items-center justify-center z-10">
+                    <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+                  </div>)}
+                <p className="text-gray-400 text-sm font-medium">
+                  Settlement Rate
+                </p>
+                <h3 className="text-3xl font-bold mt-1 text-white">
+                  {analytics?.settlementRate.toFixed(1)}%
+                </h3>
+                <p className="text-emerald-400 text-xs mt-2">
+                  High performance
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-[#111] border border-white/10 p-6 rounded-2xl h-[400px] relative overflow-hidden">
+              {isAnalyticsLoading && (<div className="absolute inset-0 bg-black/20 backdrop-blur-[1px] flex items-center justify-center z-10">
+                  <div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+                </div>)}
+              <div className="flex justify-between items-center mb-6">
+                <h3 className="font-semibold text-lg">Revenue Over Time</h3>
+                <div className="flex gap-2">
+                  <button onClick={() => setTimeframe(7)} className={cn("text-xs px-3 py-1 rounded-full transition-all border", timeframe === 7
+                        ? "bg-indigo-500/20 border-indigo-500/30 text-indigo-400"
+                        : "bg-white/5 border-white/10 text-gray-400 hover:bg-white/10")}>
+                    7D
+                  </button>
+                  <button onClick={() => setTimeframe(30)} className={cn("text-xs px-3 py-1 rounded-full transition-all border", timeframe === 30
+                        ? "bg-indigo-500/20 border-indigo-500/30 text-indigo-400"
+                        : "bg-white/5 border-white/10 text-gray-400 hover:bg-white/10")}>
+                    30D
+                  </button>
+                </div>
+              </div>
+              <ResponsiveContainer width="100%" height="80%" minWidth={0}>
+                <AreaChart data={analytics?.history || []}>
+                  <defs>
+                    <linearGradient id="colorAmt" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="5%" stopColor="#6366f1" stopOpacity={0.3}/>
+                      <stop offset="95%" stopColor="#6366f1" stopOpacity={0}/>
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" stroke="#222" vertical={false}/>
+                  <XAxis dataKey="date" stroke="#444" fontSize={12} tickLine={false} axisLine={false}/>
+                  <YAxis stroke="#444" fontSize={12} tickLine={false} axisLine={false}/>
+                  <Tooltip contentStyle={{
+                        backgroundColor: "#111",
+                        border: "1px solid #333",
+                        borderRadius: "8px",
+                    }} itemStyle={{ color: "#fff" }}/>
+                  <Area type="monotone" dataKey="amount" stroke="#6366f1" fillOpacity={1} fill="url(#colorAmt)" strokeWidth={2}/>
+                </AreaChart>
+              </ResponsiveContainer>
+            </div>
+
+            <div className="bg-[#111] border border-white/10 rounded-2xl overflow-hidden">
+              <div className="px-6 py-4 border-b border-white/10 flex justify-between items-center">
+                <h3 className="font-semibold">Recent Activity</h3>
+                <button onClick={() => setActiveTab("payments")} className="text-xs text-indigo-400 hover:text-indigo-300">
+                  View all
+                </button>
+              </div>
+              <PaymentsTable intents={filteredIntents.slice(0, 5)}/>
+            </div>
+          </div>);
+            case "payments":
+                return <PaymentsTable intents={filteredIntents} isFullPage/>;
+            case "apikeys":
+                return <ApiKeysSection apiKey={apiKey} baseUrl={baseUrl}/>;
+        }
+    };
+    if (isAdmin === null) {
+        return null; // or loading spinner
+    }
+    if (!isAdmin) {
+        return <LoginScreen />;
+    }
+    return (<div className="flex min-h-screen">
+      {/* Sidebar Overlay */}
+      {isSidebarOpen && (<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-30 lg:hidden" onClick={() => setIsSidebarOpen(false)}/>)}
+
+      {/* Sidebar */}
+      <aside className={cn("w-64 border-r border-white/10 flex flex-col fixed h-full bg-[#050505] z-40 transition-transform duration-300 ease-in-out", isSidebarOpen
+            ? "translate-x-0"
+            : "-translate-x-full lg:translate-x-0")}>
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-2">
+              <div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center font-bold text-lg">
+                P
+              </div>
+              <span className="font-bold text-xl tracking-tight">PayGrid</span>
+            </div>
+            <button className="lg:hidden text-gray-400 hover:text-white" onClick={() => setIsSidebarOpen(false)}>
+              <X size={20}/>
+            </button>
+          </div>
+
+          <nav className="space-y-1">
+            <button onClick={() => {
+            setActiveTab("overview");
+            setIsSidebarOpen(false);
+        }} className={`w-full cursor-pointer flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${activeTab === "overview" ? "bg-white/10 text-white" : "text-gray-400 hover:text-white hover:bg-white/5"}`}>
+              <Icons.Dashboard /> Overview
+            </button>
+            <button onClick={() => {
+            setActiveTab("payments");
+            setIsSidebarOpen(false);
+        }} className={`w-full cursor-pointer flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${activeTab === "payments" ? "bg-white/10 text-white" : "text-gray-400 hover:text-white hover:bg-white/5"}`}>
+              <Icons.Payments /> Payments
+            </button>
+            <button onClick={() => {
+            setActiveTab("apikeys");
+            setIsSidebarOpen(false);
+        }} className={`w-full cursor-pointer flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all ${activeTab === "apikeys" ? "bg-white/10 text-white" : "text-gray-400 hover:text-white hover:bg-white/5"}`}>
+              <Icons.Key /> API Keys
+            </button>
+          </nav>
+        </div>
+
+        <div className="mt-auto p-6 border-t border-white/10">
+          <div className="flex items-center gap-3">
+            <img src="https://picsum.photos/32/32" className="w-8 h-8 rounded-full" alt="User"/>
+            <div className="flex flex-col">
+              <span className="text-sm font-medium">Merchant Account</span>
+              <span className="text-xs text-gray-500">Live Mode</span>
+            </div>
+          </div>
+          {<button onClick={logout} className="w-full cursor-pointer flex items-center gap-2 mt-4 px-2 py-2 text-red-400 hover:text-red-300 hover:bg-white/5 rounded-lg transition-all text-sm font-medium">
+              <LogOut size={16}/> Sign Out
+            </button>}
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 lg:ml-64 p-4 md:p-8 pt-20 lg:pt-8 w-full bg-[#050505] overflow-hidden">
+        <header className="flex flex-col md:flex-row md:justify-between md:items-center mb-8 gap-4">
+          <div className="flex items-center gap-4">
+            <button className="lg:hidden p-2 bg-[#111] border border-white/10 rounded-lg text-gray-400" onClick={() => setIsSidebarOpen(true)}>
+              <Menu size={20}/>
+            </button>
+            <div>
+              <h1 className="text-xl md:text-2xl font-bold capitalize">
+                {activeTab}
+              </h1>
+              <p className="text-gray-500 text-xs md:text-sm">
+                Manage your Solana payments infrastructure
+              </p>
+            </div>
+          </div>
+          <div className="flex gap-3 w-full md:w-auto">
+            <div className="relative w-full md:w-auto">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
+                <Icons.Search />
+              </div>
+              <input type="text" placeholder="Search intents..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} className="w-full bg-[#111] border border-white/10 rounded-xl pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50"/>
+            </div>
+          </div>
+        </header>
+
+        {isLoading ? (<div className="flex items-center justify-center h-64">
+            <div className="w-8 h-8 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
+          </div>) : (renderContent())}
+      </main>
+    </div>);
+}

package/dist/dashboard/payment-table.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PaymentIntent } from '../types';
+interface Props {
+    intents: PaymentIntent[];
+    isFullPage?: boolean;
+}
+declare const PaymentsTable: React.FC<Props>;
+export default PaymentsTable;