Payment Insights Dashboard

A powerful dashboard for tracking and analyzing x402 protocol micropayment transactions across your applications.

Features

🔴 Real-time Transaction Monitoring

• Live WebSocket updates for instant transaction visibility
• Connection status indicator with automatic reconnection
• Filterable transaction feed with search capabilities

📊 Revenue Analytics

• Customizable date ranges for flexible reporting
• Payment source breakdowns with visual charts
• Key metrics including total revenue, success rates, and average transaction values

🔧 Failed Payment Debugging

• Detailed error logs with categorized error types
• Smart retry suggestions based on error patterns
• Debug console with filtering and search functionality

Quick Start

Prerequisites

• Node.js 18.0 or higher
• npm or yarn package manager

Installation

# Clone the repository
git clone https://github.com/your-org/payment-insights.git
cd payment-insights

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

# Start the development server
npm run dev

Open http://localhost:3000 to view the dashboard.

Environment Variables

Create a .env.local file with the following variables:

# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_WS_URL=ws://localhost:3001

# Optional: Analytics
NEXT_PUBLIC_ANALYTICS_ENABLED=true

Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── api/               # API routes
│   └── page.tsx           # Main dashboard page
├── components/
│   ├── analytics/         # Revenue and metrics components
│   ├── debug/             # Debug console components
│   ├── layout/            # Dashboard layout components
│   └── ui/                # Reusable UI components
├── hooks/                 # Custom React hooks
├── lib/
│   ├── analytics/         # Analytics utilities
│   ├── api/               # API client and endpoints
│   ├── debug/             # Debug and error utilities
│   ├── errors/            # Error handling
│   ├── transactions/      # Transaction processing
│   └── utils/             # General utilities
docs/                      # Documentation

Usage

Viewing Transactions

The main dashboard displays a real-time feed of all x402 transactions. Use the filters to:

• Search by transaction ID or resource
• Filter by status (completed, pending, failed)
• Sort by date, amount, or status

Analyzing Revenue

1. Navigate to the Analytics section
2. Select a date range using the date picker
3. View revenue charts and source breakdowns
4. Export data for further analysis

Debugging Failed Payments

1. Open the Debug Console
2. Filter errors by type or severity
3. Review detailed error logs
4. Follow suggested retry actions

For detailed usage instructions, see docs/USAGE.md.

API Reference

The dashboard exposes several API endpoints for integration:

• GET /api/transactions - Fetch transaction history
• GET /api/analytics - Retrieve analytics data
• GET /api/debug/logs - Access error logs

For complete API documentation, see docs/API.md.

Development

Running Tests

# Run unit tests
npm test

# Run tests with coverage
npm run test:coverage

# Run e2e tests
npm run test:e2e

Building for Production

# Create production build
npm run build

# Start production server
npm start

Code Quality

# Run linter
npm run lint

# Format code
npm run format

# Type check
npm run type-check

Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• 📖 Documentation
• 🐛 Issue Tracker
• 💬 Discussions

Built with ❤️ for the x402 protocol ecosystem