Build an AI Donor Insights Dashboard

# Example prompt for Claude Code
Create a Next.js 14 donor dashboard with:
- Supabase integration for donor/donation data
- Dashboard page with donation charts using Recharts
- API route for Claude AI insights generation
- TypeScript throughout
- Tailwind CSS styling

# Create new Next.js project
npx create-next-app@latest donor-dashboard --typescript --tailwind --eslint --app

# Navigate to project
cd donor-dashboard

# Install dependencies
npm install @supabase/supabase-js recharts @anthropic-ai/sdk date-fns

# Install dev dependencies
npm install -D @types/recharts

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex min-h-screen bg-gray-950">
      {/* Sidebar */}
      <aside className="w-64 border-r border-gray-800 p-6">
        <div className="mb-8">
          <h1 className="text-xl font-bold text-white">
            Donor Insights
          </h1>
          <p className="text-sm text-gray-400">AI-Powered Analytics</p>
        </div>
        <nav className="space-y-2">
          <NavLink href="/dashboard" icon="chart">Overview</NavLink>
          <NavLink href="/dashboard/donors" icon="users">Donors</NavLink>
          <NavLink href="/dashboard/campaigns" icon="target">Campaigns</NavLink>
          <NavLink href="/dashboard/insights" icon="sparkles">AI Insights</NavLink>
          <NavLink href="/dashboard/reports" icon="file">Reports</NavLink>
        </nav>
      </aside>

      {/* Main content */}
      <main className="flex-1 p-8">
        {children}
      </main>
    </div>
  )
}

-- Donors table
CREATE TABLE donors (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  first_name TEXT NOT NULL,
  last_name TEXT NOT NULL,
  phone TEXT,
  address JSONB,
  first_donation_date TIMESTAMPTZ,
  last_donation_date TIMESTAMPTZ,
  total_donated DECIMAL(10,2) DEFAULT 0,
  donation_count INTEGER DEFAULT 0,
  is_recurring BOOLEAN DEFAULT false,
  donor_tier TEXT DEFAULT 'standard', -- standard, silver, gold, platinum
  tags TEXT[],
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

-- Campaigns table
CREATE TABLE campaigns (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  goal_amount DECIMAL(10,2),
  raised_amount DECIMAL(10,2) DEFAULT 0,
  start_date TIMESTAMPTZ NOT NULL,
  end_date TIMESTAMPTZ,
  status TEXT DEFAULT 'active', -- active, completed, paused
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Donations table
CREATE TABLE donations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  donor_id UUID REFERENCES donors(id) ON DELETE SET NULL,
  campaign_id UUID REFERENCES campaigns(id) ON DELETE SET NULL,
  amount DECIMAL(10,2) NOT NULL,
  currency TEXT DEFAULT 'USD',
  payment_method TEXT, -- card, bank, check, cash
  is_recurring BOOLEAN DEFAULT false,
  recurring_frequency TEXT, -- weekly, monthly, yearly
  status TEXT DEFAULT 'completed', -- pending, completed, refunded
  notes TEXT,
  donated_at TIMESTAMPTZ DEFAULT now(),
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Create indexes for performance
CREATE INDEX idx_donations_donor_id ON donations(donor_id);
CREATE INDEX idx_donations_campaign_id ON donations(campaign_id);
CREATE INDEX idx_donations_donated_at ON donations(donated_at);
CREATE INDEX idx_donors_last_donation ON donors(last_donation_date);

'use client'

import {
  AreaChart, Area, XAxis, YAxis, CartesianGrid,
  Tooltip, ResponsiveContainer
} from 'recharts'
import { format } from 'date-fns'

interface DonationData {
  date: string
  amount: number
  count: number
}

interface Props {
  data: DonationData[]
  timeRange: '7d' | '30d' | '90d' | '1y'
}

export function DonationTrendChart({ data, timeRange }: Props) {
  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr)
    return timeRange === '7d'
      ? format(date, 'EEE')
      : format(date, 'MMM d')
  }

  const formatCurrency = (value: number) =>
    new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 0,
    }).format(value)

  return (
    <div className="bg-gray-900 rounded-xl p-6 border border-gray-800">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h3 className="text-lg font-semibold text-white">
            Donation Trends
          </h3>
          <p className="text-sm text-gray-400">
            Total donations over time
          </p>
        </div>
        <TimeRangeSelector value={timeRange} />
      </div>

      <ResponsiveContainer width="100%" height={300}>
        <AreaChart data={data}>
          <defs>
            <linearGradient id="donationGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3}/>
              <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0}/>
            </linearGradient>
          </defs>
          <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
          <XAxis
            dataKey="date"
            tickFormatter={formatDate}
            stroke="#9ca3af"
            fontSize={12}
          />
          <YAxis
            tickFormatter={formatCurrency}
            stroke="#9ca3af"
            fontSize={12}
          />
          <Tooltip
            content={<CustomTooltip />}
            cursor={{ stroke: '#8b5cf6', strokeWidth: 1 }}
          />
          <Area
            type="monotone"
            dataKey="amount"
            stroke="#8b5cf6"
            strokeWidth={2}
            fill="url(#donationGradient)"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  )
}

import Anthropic from '@anthropic-ai/sdk'
import { createClient } from '@supabase/supabase-js'
import { NextResponse } from 'next/server'

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY!,
})

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_KEY!
)

export async function POST(request: Request) {
  try {
    const { insightType } = await request.json()

    // Fetch donor data for analysis
    const { data: donors } = await supabase
      .from('donors')
      .select(`
        *,
        donations (
          amount,
          donated_at,
          campaign_id,
          is_recurring
        )
      `)
      .order('total_donated', { ascending: false })
      .limit(500)

    // Fetch recent donation trends
    const { data: recentDonations } = await supabase
      .from('donations')
      .select('amount, donated_at, is_recurring')
      .gte('donated_at', new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toISOString())
      .order('donated_at', { ascending: false })

    // Build context for Claude
    const donorSummary = {
      totalDonors: donors?.length || 0,
      totalRaised: donors?.reduce((sum, d) => sum + (d.total_donated || 0), 0),
      recurringDonors: donors?.filter(d => d.is_recurring).length || 0,
      avgDonation: recentDonations?.length
        ? recentDonations.reduce((sum, d) => sum + d.amount, 0) / recentDonations.length
        : 0,
      // Donors who haven't given in 60+ days
      atRiskDonors: donors?.filter(d => {
        if (!d.last_donation_date) return false
        const daysSince = (Date.now() - new Date(d.last_donation_date).getTime()) / (1000 * 60 * 60 * 24)
        return daysSince > 60 && d.donation_count > 1
      }).length || 0,
    }

    // Generate insights with Claude
    const message = await anthropic.messages.create({
      model: 'claude-sonnet-4-20250514',
      max_tokens: 1024,
      messages: [{
        role: 'user',
        content: `You are an AI analyst for a nonprofit donor management system.
Analyze this donor data and provide actionable insights.

Donor Summary:
- Total Donors: ${donorSummary.totalDonors}
- Total Raised (all time): $${donorSummary.totalRaised.toLocaleString()}
- Recurring Donors: ${donorSummary.recurringDonors}
- Average Recent Donation: $${donorSummary.avgDonation.toFixed(2)}
- At-Risk Donors (60+ days inactive): ${donorSummary.atRiskDonors}

Recent Donation Data (last 90 days):
${JSON.stringify(recentDonations?.slice(0, 50), null, 2)}

Top Donor Profiles:
${JSON.stringify(donors?.slice(0, 20).map(d => ({
  totalDonated: d.total_donated,
  donationCount: d.donation_count,
  isRecurring: d.is_recurring,
  tier: d.donor_tier,
  daysSinceLastDonation: d.last_donation_date
    ? Math.floor((Date.now() - new Date(d.last_donation_date).getTime()) / (1000 * 60 * 60 * 24))
    : null
})), null, 2)}

Insight Type Requested: ${insightType}

Based on this data, provide:
1. Key Insight: One paragraph summary of the most important finding
2. Trend Analysis: What patterns do you see in donation behavior?
3. At-Risk Alert: Specific recommendations for re-engaging lapsed donors
4. Growth Opportunity: One actionable suggestion to increase donations
5. Predicted Outcome: What might happen in the next 30 days based on trends?

Format your response as JSON with these exact keys:
{
  "keyInsight": "...",
  "trendAnalysis": "...",
  "atRiskAlert": "...",
  "growthOpportunity": "...",
  "predictedOutcome": "...",
  "confidenceScore": 0.0-1.0
}`
      }]
    })

    // Parse Claude's response
    const responseText = message.content[0].type === 'text'
      ? message.content[0].text
      : ''

    // Extract JSON from response
    const jsonMatch = responseText.match(/\{[\s\S]*\}/)
    const insights = jsonMatch ? JSON.parse(jsonMatch[0]) : null

    return NextResponse.json({
      success: true,
      insights,
      summary: donorSummary,
      generatedAt: new Date().toISOString()
    })

  } catch (error) {
    console.error('Insight generation error:', error)
    return NextResponse.json(
      { success: false, error: 'Failed to generate insights' },
      { status: 500 }
    )
  }
}

import { jsPDF } from 'jspdf'
import { format } from 'date-fns'

interface ReportData {
  summary: {
    totalDonors: number
    totalRaised: number
    recurringDonors: number
    newDonorsThisMonth: number
  }
  insights: {
    keyInsight: string
    trendAnalysis: string
    growthOpportunity: string
  }
  topDonors: Array<{
    name: string
    totalDonated: number
  }>
}

export async function generateDonorReport(data: ReportData): Promise<Blob> {
  const doc = new jsPDF()
  const pageWidth = doc.internal.pageSize.getWidth()

  // Header
  doc.setFontSize(24)
  doc.setTextColor(139, 92, 246) // Purple accent
  doc.text('Donor Insights Report', pageWidth / 2, 30, { align: 'center' })

  doc.setFontSize(12)
  doc.setTextColor(100)
  doc.text(format(new Date(), 'MMMM d, yyyy'), pageWidth / 2, 40, { align: 'center' })

  // Summary Section
  doc.setFontSize(16)
  doc.setTextColor(0)
  doc.text('Summary', 20, 60)

  doc.setFontSize(11)
  doc.setTextColor(60)
  const summaryLines = [
    `Total Donors: ${data.summary.totalDonors.toLocaleString()}`,
    `Total Raised: $${data.summary.totalRaised.toLocaleString()}`,
    `Recurring Donors: ${data.summary.recurringDonors}`,
    `New Donors This Month: ${data.summary.newDonorsThisMonth}`,
  ]
  summaryLines.forEach((line, i) => {
    doc.text(line, 25, 72 + (i * 8))
  })

  // AI Insights Section
  doc.setFontSize(16)
  doc.setTextColor(0)
  doc.text('AI-Powered Insights', 20, 115)

  doc.setFontSize(11)
  doc.setTextColor(60)

  const insightY = 127
  doc.setFont('helvetica', 'bold')
  doc.text('Key Finding:', 25, insightY)
  doc.setFont('helvetica', 'normal')
  const keyInsightLines = doc.splitTextToSize(data.insights.keyInsight, pageWidth - 50)
  doc.text(keyInsightLines, 25, insightY + 8)

  // Continue with more sections...

  return doc.output('blob')
}

import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
import Anthropic from 'https://esm.sh/@anthropic-ai/sdk'

const anthropic = new Anthropic({
  apiKey: Deno.env.get('ANTHROPIC_API_KEY')!,
})

serve(async (req) => {
  const supabase = createClient(
    Deno.env.get('SUPABASE_URL')!,
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
  )

  // Get last 7 days of donations
  const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)

  const { data: weeklyDonations } = await supabase
    .from('donations')
    .select('amount, donated_at, donor_id')
    .gte('donated_at', weekAgo.toISOString())

  const totalThisWeek = weeklyDonations?.reduce((sum, d) => sum + d.amount, 0) || 0
  const donationCount = weeklyDonations?.length || 0
  const uniqueDonors = new Set(weeklyDonations?.map(d => d.donor_id)).size

  // Generate AI summary
  const message = await anthropic.messages.create({
    model: 'claude-sonnet-4-20250514',
    max_tokens: 512,
    messages: [{
      role: 'user',
      content: `Write a brief, encouraging weekly donation summary email for nonprofit staff.

This week's stats:
- Total raised: $${totalThisWeek.toLocaleString()}
- Number of donations: ${donationCount}
- Unique donors: ${uniqueDonors}

Write 2-3 short paragraphs highlighting the positive impact. Include one specific
action item for the coming week. Keep the tone warm and mission-focused.`
    }]
  })

  const emailContent = message.content[0].type === 'text'
    ? message.content[0].text
    : ''

  // Send email via your preferred service (Resend, SendGrid, etc.)
  await fetch('https://api.resend.com/emails', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${Deno.env.get('RESEND_API_KEY')}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'insights@yournonprofit.org',
      to: ['staff@yournonprofit.org'],
      subject: `Weekly Donor Digest: $${totalThisWeek.toLocaleString()} raised!`,
      html: `
        <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;">
          <h1 style="color: #8b5cf6;">Weekly Donor Insights</h1>
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
            <p style="margin: 0; font-size: 24px; font-weight: bold;">$${totalThisWeek.toLocaleString()}</p>
            <p style="margin: 4px 0 0; color: #666;">raised this week from ${uniqueDonors} donors</p>
          </div>
          ${emailContent.split('\n').map(p => `<p>${p}</p>`).join('')}
          <p style="margin-top: 30px; color: #666; font-size: 12px;">
            Generated by AI Donor Insights Dashboard
          </p>
        </div>
      `
    })
  })

  return new Response(JSON.stringify({ success: true }), {
    headers: { 'Content-Type': 'application/json' }
  })
})