Superprompt: Build Next.js Dashboard

Use with: Claude Code, Cursor, Windsurf, Gemini Code Assist

TASK: Build a custom merchant analytics dashboard for the AIVA Platform

CONTEXT:
I'm building a dashboard for merchants using the AIVA Merchant Data API.
The API provides customer data, subscriptions, affiliates, orders, and intelligence.

REQUIREMENTS:

- Framework: Next.js 14 with App Router, TypeScript, Tailwind CSS

- Data visualization: Recharts or Chart.js

- Authentication: API key from environment variables

- Responsive design: Desktop and mobile

- Real-time updates: Use SWR for data fetching with 15-minute cache

FEATURES TO IMPLEMENT:

- **Overview Dashboard Page** (/)

   - 4 KPI cards: Total Revenue, MRR, Active Subscriptions, Total Customers
   - Revenue trend chart (last 6 months, line chart)
   - RFM segment breakdown (donut chart with 5 segments)
   - At-risk customer alert box (if count > 10)

- **Customers Page** (/customers)

   - Data table with columns: Name, Email, Segment, Orders, Total Spent, Last Order
   - Filter by RFM segment (dropdown)
   - Search by email
   - Pagination (50 per page)
   - Click row to see customer details

- **Subscriptions Page** (/subscriptions)

   - MRR/ARR cards at top
   - Subscription list with status badges
   - Filter by status (active, paused, cancelled)
   - Chart showing MRR trend over time

- **Affiliates Page** (/affiliates)

   - Leaderboard table sorted by total earnings
   - Commission owed total at top
   - Conversion rate metrics
   - Search by affiliate code or email

API ENDPOINT DETAILS:

- Base URL: https://api.getaiva.ai

- Auth: X-API-Key header

- Get customers: GET /api/merchant/{merchantId}/customers?segment={segment}&page={page}&pageSize={pageSize}

- Get subscriptions: GET /api/merchant/{merchantId}/subscriptions?status={status}

- Get affiliates: GET /api/merchant/{merchantId}/affiliates

- Get intelligence: GET /api/merchant/{merchantId}/intelligence

EXAMPLE API RESPONSE (customers):
{
  "customers": [
    {
      "id": "cust-123",
      "email": "john@example.com",
      "firstName": "John",
      "lastName": "Smith",
      "ordersCount": 15,
      "totalSpent": 2450.75,
      "rfmSegment": "Champions",
      "daysSinceLastOrder": 12,
      "lastOrderDate": "2025-11-10T14:22:00Z"
    }
  ],
  "total": 1247,
  "page": 1,
  "pageSize": 50,
  "totalPages": 25
}

STYLING GUIDELINES:

- Use Tailwind CSS utility classes

- Color scheme: Purple primary (#8B5CF6), Pink secondary (#EC4899)

- Dark mode support

- Rounded corners (rounded-lg, rounded-xl)

- Smooth animations on hover

FOLDER STRUCTURE:
/app
  /page.tsx                    # Overview dashboard
  /customers/page.tsx          # Customers page
  /subscriptions/page.tsx      # Subscriptions page
  /affiliates/page.tsx         # Affiliates page
  /layout.tsx                  # Root layout with navigation
/components
  /KPICard.tsx                 # Reusable stat card
  /CustomerTable.tsx           # Customer data table
  /RFMChart.tsx                # RFM donut chart
  /RevenueChart.tsx            # Revenue line chart
/lib
  /api.ts                      # API client wrapper
  /types.ts                    # TypeScript interfaces
/hooks
  /useCustomers.ts             # SWR hook for customers
  /useSubscriptions.ts         # SWR hook for subscriptions

CODE QUALITY:

- Use TypeScript strict mode

- Implement proper error handling

- Add loading states

- Show user-friendly error messages

- Add comments for complex logic

- Follow Next.js best practices

DELIVERABLES:

- Complete Next.js application with all 4 pages

- Responsive design that works on mobile

- Dark mode toggle

- README with setup instructions

- Environment variable example (.env.example)

START IMPLEMENTATION NOW.
Create all files and components needed for a production-ready dashboard.
`"

**Expected Result:** A complete, production-ready Next.js dashboard in 5-10 minutes. -