Building Custom Dashboards

Build beautiful, tailored analytics and management interfaces for your merchants.

Dashboard Templates

We provide starter templates for common use cases:

1. Subscription Box Manager

Best for: Subscription box businesses, meal kits, membership sites Features:

• Active subscription count and MRR

• Churn rate tracking

• Upcoming renewals calendar

• Product popularity analysis

• Customer retention cohorts

Tech Stack: Next.js + Recharts + Tailwind Build Time: 4-6 hours GitHub Template: (coming soon)

2. Affiliate Hub

Best for: Affiliate programs, MLM businesses Features:

• Affiliate leaderboard

• Commission calculations

• Payment tracking

• Referral link generator

• Performance analytics

Tech Stack: React + Chart.js + Material-UI Build Time: 6-8 hours GitHub Template: (coming soon)

3. Customer Intelligence Dashboard

Best for: Data-driven merchants, agencies Features:

• RFM segmentation visualization

• Customer lifetime value analysis

• Cohort retention analysis

• Win-back campaign ROI calculator

• Predictive churn modeling

Tech Stack: Vue.js + D3.js + Vuetify Build Time: 8-12 hours GitHub Template: (coming soon)

Building from Scratch

Step 1: Design Your Data Flow

User Interface (React/Vue/Angular)
        ↓
API Client Layer (fetch/axios)
        ↓
AIVA Merchant API (https://api.getaiva.ai)
        ↓
Data Transformation Layer
        ↓
State Management (Redux/Vuex/Zustand)
        ↓
UI Components (Charts, Tables, Cards)

Step 2: Set Up Authentication

// lib/api-client.ts
const AIVA_API_BASE = 'https://api.getaiva.ai';

export class AivaApiClient {
  constructor(
    private apiKey: string,
    private merchantId: string
  ) {}

  private async fetch(endpoint: string, options = {}) {
    const response = await fetch(`${AIVA_API_BASE}${endpoint}`, {
      ...options,
      headers: {
        'X-API-Key': this.apiKey,
        'Content-Type': 'application/json',
        ...options.headers
      }
    });

    if (!response.ok) {
      throw new Error(`API Error: ${response.status}`);
    }

    return response.json();
  }

  async getIntelligence() {
    return this.fetch(`/api/merchant/${this.merchantId}/intelligence`);
  }

  async getCustomers(segment?: string, page = 1) {
    const query = new URLSearchParams();
    if (segment) query.set('segment', segment);
    query.set('page', page.toString());
    query.set('pageSize', '50');

    return this.fetch(`/api/merchant/${this.merchantId}/customers?${query}`);
  }

  // Add more methods for other endpoints...
}

Step 3: Create Reusable Components

See the Superprompts section for complete component examples.

Step 4: Implement Data Fetching

// Using SWR (React)
import useSWR from 'swr';

function useDashboardData(merchantId: string, apiKey: string) {
  const fetcher = async (url: string) => {
    const res = await fetch(url, {
      headers: { 'X-API-Key': apiKey }
    });
    return res.json();
  };

  const { data: intelligence, error: intError } = useSWR(
    `https://api.getaiva.ai/api/merchant/${merchantId}/intelligence`,
    fetcher,
    { refreshInterval: 60000 } // Refresh every minute
  );

  const { data: customers, error: custError } = useSWR(
    `https://api.getaiva.ai/api/merchant/${merchantId}/customers?pageSize=100`,
    fetcher
  );

  return {
    intelligence,
    customers,
    isLoading: !intelligence || !customers,
    error: intError || custError
  };
}
`"

**Step 5: Deploy**

Recommended platforms:

- **Vercel:** Next.js, React apps (free tier available)

- **Netlify:** Static sites, JAMstack (free tier available)

- **Railway:** Full-stack apps with backend (free tier available)

- **Fly.io:** Docker containers, global edge deployment -