Earnings Dashboard: Recharts Integration mit MRR Trend, Tier Breakdown Charts, Customer Growth, Pie Charts und mehr

backend/app/api/admin.py

@@ -301,6 +301,105 @@ async def get_admin_earnings(
     }
 
 
+# ============== Earnings History ==============
+
+@router.get("/earnings/history")
+async def get_admin_earnings_history(
+    db: Database,
+    admin: User = Depends(require_admin),
+    months: int = 12
+):
+    """
+    Get historical earnings data for charts.
+    
+    Calculates MRR for each month based on subscription start dates.
+    """
+    tier_prices = {
+        SubscriptionTier.SCOUT: 0,
+        SubscriptionTier.TRADER: 9,
+        SubscriptionTier.TYCOON: 29,
+    }
+    
+    # Get all subscriptions
+    result = await db.execute(select(Subscription))
+    all_subs = result.scalars().all()
+    
+    # Generate monthly data for the last N months
+    monthly_data = []
+    now = datetime.utcnow()
+    
+    for i in range(months - 1, -1, -1):
+        # Calculate the start of each month
+        month_start = datetime(now.year, now.month, 1) - timedelta(days=i * 30)
+        month_end = month_start + timedelta(days=30)
+        month_name = month_start.strftime("%b %Y")
+        
+        # Calculate MRR for this month
+        mrr = 0.0
+        tier_counts = {"scout": 0, "trader": 0, "tycoon": 0}
+        new_subs = 0
+        churned = 0
+        
+        for sub in all_subs:
+            # Was this subscription active during this month?
+            started_before_month_end = sub.started_at <= month_end
+            cancelled_after_month_start = (sub.cancelled_at is None or sub.cancelled_at >= month_start)
+            
+            if started_before_month_end and cancelled_after_month_start:
+                price = tier_prices.get(sub.tier, 0)
+                mrr += price
+                tier_key = sub.tier.value
+                if tier_key in tier_counts:
+                    tier_counts[tier_key] += 1
+            
+            # New subscriptions in this month
+            if month_start <= sub.started_at < month_end and sub.tier != SubscriptionTier.SCOUT:
+                new_subs += 1
+            
+            # Churned in this month
+            if sub.cancelled_at and month_start <= sub.cancelled_at < month_end:
+                churned += 1
+        
+        monthly_data.append({
+            "month": month_name,
+            "mrr": round(mrr, 2),
+            "arr": round(mrr * 12, 2),
+            "paying_customers": tier_counts["trader"] + tier_counts["tycoon"],
+            "scout": tier_counts["scout"],
+            "trader": tier_counts["trader"],
+            "tycoon": tier_counts["tycoon"],
+            "new_subscriptions": new_subs,
+            "churn": churned,
+        })
+    
+    # Calculate growth metrics
+    if len(monthly_data) >= 2:
+        current_mrr = monthly_data[-1]["mrr"]
+        prev_mrr = monthly_data[-2]["mrr"] if monthly_data[-2]["mrr"] > 0 else 1
+        mrr_growth = ((current_mrr - prev_mrr) / prev_mrr) * 100
+    else:
+        mrr_growth = 0
+    
+    # Calculate average revenue per user (ARPU)
+    current_paying = monthly_data[-1]["paying_customers"] if monthly_data else 0
+    current_mrr = monthly_data[-1]["mrr"] if monthly_data else 0
+    arpu = current_mrr / current_paying if current_paying > 0 else 0
+    
+    # Calculate LTV (assuming 12 month average retention)
+    ltv = arpu * 12
+    
+    return {
+        "monthly_data": monthly_data,
+        "metrics": {
+            "mrr_growth_percent": round(mrr_growth, 1),
+            "arpu": round(arpu, 2),
+            "ltv": round(ltv, 2),
+            "total_customers": sum(m["paying_customers"] for m in monthly_data[-1:]),
+        },
+        "timestamp": datetime.utcnow().isoformat(),
+    }
+
+
 # ============== User Management ==============
 
 class UpdateUserRequest(BaseModel):

frontend/package.json

@@ -15,7 +15,8 @@
     "lucide-react": "^0.303.0",
     "zustand": "^4.4.7",
     "clsx": "^2.1.0",
-    "sharp": "^0.33.5"
+    "sharp": "^0.33.5",
+    "recharts": "^2.15.0"
   },
   "devDependencies": {
     "@types/node": "^20.10.6",

frontend/src/components/admin/EarningsTab.tsx

@@ -5,6 +5,7 @@ import { api } from '@/lib/api'
 import {
   DollarSign,
   TrendingUp,
+  TrendingDown,
   Users,
   Crown,
   Zap,
@@ -13,8 +14,30 @@ import {
   ArrowUpRight,
   ArrowDownRight,
   Coins,
+  Target,
+  Activity,
+  BarChart3,
+  PieChart as PieChartIcon,
 } from 'lucide-react'
 import clsx from 'clsx'
+import {
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  ComposedChart,
+} from 'recharts'
 
 interface EarningsData {
   mrr: number
@@ -32,15 +55,84 @@ interface EarningsData {
   timestamp: string
 }
 
+interface HistoryData {
+  monthly_data: Array<{
+    month: string
+    mrr: number
+    arr: number
+    paying_customers: number
+    scout: number
+    trader: number
+    tycoon: number
+    new_subscriptions: number
+    churn: number
+  }>
+  metrics: {
+    mrr_growth_percent: number
+    arpu: number
+    ltv: number
+    total_customers: number
+  }
+  timestamp: string
+}
+
+// Custom colors matching the design system
+const COLORS = {
+  primary: '#ef4444', // red-500
+  accent: '#22c55e', // green-500
+  amber: '#f59e0b', // amber-500
+  blue: '#3b82f6', // blue-500
+  purple: '#8b5cf6', // purple-500
+  cyan: '#06b6d4', // cyan-500
+  rose: '#f43f5e', // rose-500
+}
+
+const TIER_COLORS = {
+  scout: '#6b7280', // gray-500
+  trader: '#22c55e', // green-500
+  tycoon: '#f59e0b', // amber-500
+}
+
+// Custom tooltip component
+const CustomTooltip = ({ active, payload, label }: any) => {
+  if (!active || !payload || !payload.length) return null
+  
+  return (
+    <div className="bg-[#0a0a0a] border border-white/10 p-3 shadow-xl">
+      <p className="text-xs font-mono text-white/60 mb-2">{label}</p>
+      {payload.map((entry: any, index: number) => (
+        <div key={index} className="flex items-center gap-2 text-sm">
+          <div 
+            className="w-2 h-2 rounded-full" 
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-white/80">{entry.name}:</span>
+          <span className="font-mono font-bold text-white">
+            {entry.name.includes('$') || entry.dataKey === 'mrr' || entry.dataKey === 'arr' 
+              ? `$${entry.value.toLocaleString()}`
+              : entry.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export function EarningsTab() {
   const [data, setData] = useState<EarningsData | null>(null)
+  const [history, setHistory] = useState<HistoryData | null>(null)
   const [loading, setLoading] = useState(true)
   const [refreshing, setRefreshing] = useState(false)
+  const [activeChart, setActiveChart] = useState<'mrr' | 'customers' | 'tiers'>('mrr')
 
   const loadData = async () => {
     try {
-      const earnings = await api.getAdminEarnings()
+      const [earnings, earningsHistory] = await Promise.all([
+        api.getAdminEarnings(),
+        api.getAdminEarningsHistory(12),
+      ])
       setData(earnings)
+      setHistory(earningsHistory)
     } catch (err) {
       console.error('Failed to load earnings:', err)
     } finally {
@@ -61,12 +153,12 @@ export function EarningsTab() {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <Loader2 className="w-6 h-6 text-red-400 animate-spin" />
+        <Loader2 className="w-8 h-8 text-red-400 animate-spin" />
       </div>
     )
   }
 
-  if (!data) {
+  if (!data || !history) {
     return (
       <div className="text-center py-20">
         <DollarSign className="w-12 h-12 text-white/10 mx-auto mb-4" />
@@ -75,12 +167,28 @@ export function EarningsTab() {
     )
   }
 
+  // Prepare pie chart data
+  const pieData = [
+    { name: 'Tycoon', value: data.tier_breakdown.tycoon.count, color: TIER_COLORS.tycoon },
+    { name: 'Trader', value: data.tier_breakdown.trader.count, color: TIER_COLORS.trader },
+    { name: 'Scout', value: data.tier_breakdown.scout.count, color: TIER_COLORS.scout },
+  ].filter(d => d.value > 0)
+
+  // Revenue pie data
+  const revenuePieData = [
+    { name: 'Tycoon', value: data.tier_breakdown.tycoon.revenue, color: TIER_COLORS.tycoon },
+    { name: 'Trader', value: data.tier_breakdown.trader.revenue, color: TIER_COLORS.trader },
+  ].filter(d => d.value > 0)
+
   return (
     <div className="space-y-6">
-      {/* Header Actions */}
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <p className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Revenue Dashboard</p>
+          <h2 className="text-lg font-bold text-white flex items-center gap-2">
+            <Activity className="w-5 h-5 text-red-400" />
+            Revenue Dashboard
+          </h2>
           <p className="text-xs text-white/30 font-mono mt-1">
             Last updated: {new Date(data.timestamp).toLocaleString()}
           </p>
@@ -95,144 +203,380 @@ export function EarningsTab() {
         </button>
       </div>
 
-      {/* Main Revenue Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      {/* Main KPI Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
         {/* MRR */}
-        <div className="relative overflow-hidden border border-red-500/30 bg-gradient-to-br from-red-500/10 to-red-500/5 p-6">
-          <div className="absolute top-0 right-0 w-32 h-32 bg-red-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
+        <div className="relative overflow-hidden border border-red-500/30 bg-gradient-to-br from-red-500/10 to-transparent p-5">
+          <div className="absolute top-0 right-0 w-24 h-24 bg-red-500/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2" />
           <div className="relative">
-            <div className="flex items-center gap-2 mb-3">
-              <div className="w-10 h-10 bg-red-500/20 flex items-center justify-center">
-                <DollarSign className="w-5 h-5 text-red-400" />
-              </div>
-              <span className="text-[10px] font-mono text-red-400/60 uppercase tracking-wider">Monthly Recurring</span>
+            <div className="flex items-center gap-2 mb-2">
+              <DollarSign className="w-4 h-4 text-red-400" />
+              <span className="text-[10px] font-mono text-red-400/80 uppercase tracking-wider">MRR</span>
             </div>
-            <div className="text-4xl font-bold text-white font-mono tracking-tight">
+            <div className="text-3xl font-bold text-white font-mono">
               ${data.mrr.toLocaleString()}
             </div>
-            <div className="text-xs text-white/40 font-mono mt-2">MRR</div>
+            {history.metrics.mrr_growth_percent !== 0 && (
+              <div className={clsx(
+                "flex items-center gap-1 mt-2 text-xs font-mono",
+                history.metrics.mrr_growth_percent > 0 ? "text-green-400" : "text-rose-400"
+              )}>
+                {history.metrics.mrr_growth_percent > 0 ? (
+                  <ArrowUpRight className="w-3 h-3" />
+                ) : (
+                  <ArrowDownRight className="w-3 h-3" />
+                )}
+                {Math.abs(history.metrics.mrr_growth_percent)}% vs last month
+              </div>
+            )}
           </div>
         </div>
 
         {/* ARR */}
-        <div className="relative overflow-hidden border border-accent/30 bg-gradient-to-br from-accent/10 to-accent/5 p-6">
-          <div className="absolute top-0 right-0 w-32 h-32 bg-accent/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
+        <div className="relative overflow-hidden border border-green-500/30 bg-gradient-to-br from-green-500/10 to-transparent p-5">
+          <div className="absolute top-0 right-0 w-24 h-24 bg-green-500/10 rounded-full blur-2xl -translate-y-1/2 translate-x-1/2" />
           <div className="relative">
-            <div className="flex items-center gap-2 mb-3">
-              <div className="w-10 h-10 bg-accent/20 flex items-center justify-center">
-                <TrendingUp className="w-5 h-5 text-accent" />
-              </div>
-              <span className="text-[10px] font-mono text-accent/60 uppercase tracking-wider">Annual Recurring</span>
+            <div className="flex items-center gap-2 mb-2">
+              <TrendingUp className="w-4 h-4 text-green-400" />
+              <span className="text-[10px] font-mono text-green-400/80 uppercase tracking-wider">ARR</span>
             </div>
-            <div className="text-4xl font-bold text-white font-mono tracking-tight">
+            <div className="text-3xl font-bold text-white font-mono">
               ${data.arr.toLocaleString()}
             </div>
-            <div className="text-xs text-white/40 font-mono mt-2">ARR</div>
+            <div className="text-xs text-white/40 font-mono mt-2">
+              Projected annual
+            </div>
           </div>
         </div>
 
-        {/* Paying Customers */}
-        <div className="border border-white/10 bg-white/[0.02] p-6">
-          <div className="flex items-center gap-2 mb-3">
-            <div className="w-10 h-10 bg-white/5 flex items-center justify-center">
-              <Users className="w-5 h-5 text-white/60" />
-            </div>
-            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Paying Customers</span>
+        {/* Customers */}
+        <div className="border border-white/10 bg-white/[0.02] p-5">
+          <div className="flex items-center gap-2 mb-2">
+            <Users className="w-4 h-4 text-blue-400" />
+            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Paying</span>
           </div>
-          <div className="text-4xl font-bold text-white font-mono tracking-tight">
+          <div className="text-3xl font-bold text-white font-mono">
             {data.paying_customers}
           </div>
-          <div className="flex items-center gap-2 mt-2">
-            <span className="text-xs text-accent font-mono flex items-center gap-1">
-              <ArrowUpRight className="w-3 h-3" />
-              +{data.new_subscriptions.week} this week
-            </span>
+          <div className="flex items-center gap-1 mt-2 text-xs font-mono text-green-400">
+            <ArrowUpRight className="w-3 h-3" />
+            +{data.new_subscriptions.week} this week
           </div>
         </div>
 
-        {/* Yield Revenue */}
-        <div className="border border-amber-500/20 bg-amber-500/[0.03] p-6">
-          <div className="flex items-center gap-2 mb-3">
-            <div className="w-10 h-10 bg-amber-500/10 flex items-center justify-center">
-              <Coins className="w-5 h-5 text-amber-400" />
-            </div>
-            <span className="text-[10px] font-mono text-amber-400/60 uppercase tracking-wider">Yield Revenue</span>
+        {/* ARPU */}
+        <div className="border border-white/10 bg-white/[0.02] p-5">
+          <div className="flex items-center gap-2 mb-2">
+            <Target className="w-4 h-4 text-purple-400" />
+            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">ARPU</span>
           </div>
-          <div className="text-4xl font-bold text-white font-mono tracking-tight">
-            ${data.yield_revenue_month.toFixed(0)}
+          <div className="text-3xl font-bold text-white font-mono">
+            ${history.metrics.arpu.toFixed(2)}
+          </div>
+          <div className="text-xs text-white/40 font-mono mt-2">
+            LTV: ${history.metrics.ltv.toFixed(0)}
           </div>
-          <div className="text-xs text-white/40 font-mono mt-2">This month (30%)</div>
         </div>
       </div>
 
-      {/* Tier Breakdown */}
+      {/* MRR Chart */}
       <div className="border border-white/10 bg-[#0a0a0a]">
-        <div className="px-6 py-4 border-b border-white/10">
-          <h3 className="text-sm font-bold text-white uppercase tracking-wider">Subscription Breakdown</h3>
+        <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <BarChart3 className="w-5 h-5 text-red-400" />
+            <h3 className="text-sm font-bold text-white uppercase tracking-wider">Revenue Trend</h3>
+          </div>
+          <div className="flex gap-1">
+            {(['mrr', 'customers', 'tiers'] as const).map((chart) => (
+              <button
+                key={chart}
+                onClick={() => setActiveChart(chart)}
+                className={clsx(
+                  "px-3 py-1.5 text-xs font-mono uppercase transition-all",
+                  activeChart === chart 
+                    ? "bg-white/10 text-white" 
+                    : "text-white/40 hover:text-white hover:bg-white/5"
+                )}
+              >
+                {chart === 'mrr' ? 'Revenue' : chart === 'customers' ? 'Customers' : 'Tiers'}
+              </button>
+            ))}
+          </div>
         </div>
-        <div className="divide-y divide-white/[0.06]">
-          {/* Tycoon */}
-          <div className="px-6 py-4 flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="w-12 h-12 bg-amber-500/10 border border-amber-500/20 flex items-center justify-center">
-                <Crown className="w-6 h-6 text-amber-400" />
+        <div className="p-6 h-80">
+          <ResponsiveContainer width="100%" height="100%">
+            {activeChart === 'mrr' ? (
+              <AreaChart data={history.monthly_data}>
+                <defs>
+                  <linearGradient id="mrrGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor={COLORS.primary} stopOpacity={0.3}/>
+                    <stop offset="95%" stopColor={COLORS.primary} stopOpacity={0}/>
+                  </linearGradient>
+                  <linearGradient id="arrGradient" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor={COLORS.accent} stopOpacity={0.2}/>
+                    <stop offset="95%" stopColor={COLORS.accent} stopOpacity={0}/>
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
+                <XAxis 
+                  dataKey="month" 
+                  tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                />
+                <YAxis 
+                  tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                  tickFormatter={(value) => `$${value}`}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Area
+                  type="monotone"
+                  dataKey="mrr"
+                  name="MRR"
+                  stroke={COLORS.primary}
+                  strokeWidth={2}
+                  fill="url(#mrrGradient)"
+                />
+              </AreaChart>
+            ) : activeChart === 'customers' ? (
+              <ComposedChart data={history.monthly_data}>
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
+                <XAxis 
+                  dataKey="month" 
+                  tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                />
+                <YAxis 
+                  tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Bar dataKey="new_subscriptions" name="New" fill={COLORS.accent} radius={[4, 4, 0, 0]} />
+                <Bar dataKey="churn" name="Churned" fill={COLORS.rose} radius={[4, 4, 0, 0]} />
+                <Line 
+                  type="monotone" 
+                  dataKey="paying_customers" 
+                  name="Total Paying"
+                  stroke={COLORS.blue} 
+                  strokeWidth={2}
+                  dot={{ fill: COLORS.blue, strokeWidth: 0, r: 4 }}
+                />
+              </ComposedChart>
+            ) : (
+              <BarChart data={history.monthly_data}>
+                <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
+                <XAxis 
+                  dataKey="month" 
+                  tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                />
+                <YAxis 
+                  tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }}
+                  axisLine={{ stroke: 'rgba(255,255,255,0.1)' }}
+                />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend 
+                  wrapperStyle={{ paddingTop: '20px' }}
+                  formatter={(value) => <span className="text-white/60 text-xs font-mono">{value}</span>}
+                />
+                <Bar dataKey="tycoon" name="Tycoon" stackId="a" fill={TIER_COLORS.tycoon} radius={[0, 0, 0, 0]} />
+                <Bar dataKey="trader" name="Trader" stackId="a" fill={TIER_COLORS.trader} radius={[0, 0, 0, 0]} />
+                <Bar dataKey="scout" name="Scout" stackId="a" fill={TIER_COLORS.scout} radius={[4, 4, 0, 0]} />
+              </BarChart>
+            )}
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Bottom Section: Tier Breakdown + Pie Charts */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        {/* Tier Breakdown */}
+        <div className="lg:col-span-2 border border-white/10 bg-[#0a0a0a]">
+          <div className="px-6 py-4 border-b border-white/10">
+            <h3 className="text-sm font-bold text-white uppercase tracking-wider">Subscription Breakdown</h3>
+          </div>
+          <div className="divide-y divide-white/[0.06]">
+            {/* Tycoon */}
+            <div className="px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 bg-amber-500/10 border border-amber-500/20 flex items-center justify-center">
+                  <Crown className="w-6 h-6 text-amber-400" />
+                </div>
+                <div>
+                  <p className="text-sm font-bold text-white">Tycoon</p>
+                  <p className="text-xs text-white/40 font-mono">$29/month · Premium</p>
+                </div>
               </div>
-              <div>
-                <p className="text-sm font-bold text-white">Tycoon</p>
-                <p className="text-xs text-white/40 font-mono">$29/month</p>
+              <div className="text-right">
+                <p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.tycoon.count}</p>
+                <p className="text-xs text-amber-400 font-mono">${data.tier_breakdown.tycoon.revenue}/mo</p>
+              </div>
+              <div className="w-32 h-2 bg-white/5 rounded-full overflow-hidden ml-4">
+                <div 
+                  className="h-full bg-amber-400 rounded-full transition-all"
+                  style={{ 
+                    width: `${(data.tier_breakdown.tycoon.revenue / data.mrr) * 100 || 0}%` 
+                  }}
+                />
               </div>
             </div>
-            <div className="text-right">
-              <p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.tycoon.count}</p>
-              <p className="text-xs text-amber-400 font-mono">${data.tier_breakdown.tycoon.revenue}/mo</p>
+
+            {/* Trader */}
+            <div className="px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 bg-green-500/10 border border-green-500/20 flex items-center justify-center">
+                  <TrendingUp className="w-6 h-6 text-green-400" />
+                </div>
+                <div>
+                  <p className="text-sm font-bold text-white">Trader</p>
+                  <p className="text-xs text-white/40 font-mono">$9/month · Standard</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.trader.count}</p>
+                <p className="text-xs text-green-400 font-mono">${data.tier_breakdown.trader.revenue}/mo</p>
+              </div>
+              <div className="w-32 h-2 bg-white/5 rounded-full overflow-hidden ml-4">
+                <div 
+                  className="h-full bg-green-400 rounded-full transition-all"
+                  style={{ 
+                    width: `${(data.tier_breakdown.trader.revenue / data.mrr) * 100 || 0}%` 
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* Scout */}
+            <div className="px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 bg-white/5 border border-white/10 flex items-center justify-center">
+                  <Zap className="w-6 h-6 text-white/40" />
+                </div>
+                <div>
+                  <p className="text-sm font-bold text-white">Scout</p>
+                  <p className="text-xs text-white/40 font-mono">Free tier</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.scout.count}</p>
+                <p className="text-xs text-white/30 font-mono">$0/mo</p>
+              </div>
+              <div className="w-32 h-2 bg-white/5 rounded-full overflow-hidden ml-4">
+                <div className="h-full bg-white/20 rounded-full" style={{ width: '0%' }} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Pie Charts */}
+        <div className="space-y-4">
+          {/* Customer Distribution */}
+          <div className="border border-white/10 bg-[#0a0a0a] p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <PieChartIcon className="w-4 h-4 text-blue-400" />
+              <span className="text-xs font-mono text-white/60 uppercase">Customers</span>
+            </div>
+            <div className="h-40">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={pieData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={40}
+                    outerRadius={60}
+                    paddingAngle={2}
+                    dataKey="value"
+                  >
+                    {pieData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip 
+                    content={({ active, payload }) => {
+                      if (!active || !payload || !payload.length) return null
+                      const data = payload[0].payload
+                      return (
+                        <div className="bg-[#0a0a0a] border border-white/10 px-3 py-2">
+                          <p className="text-xs font-mono text-white">
+                            {data.name}: {data.value}
+                          </p>
+                        </div>
+                      )
+                    }}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+            <div className="flex justify-center gap-4 mt-2">
+              {pieData.map((entry, index) => (
+                <div key={index} className="flex items-center gap-1.5">
+                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
+                  <span className="text-[10px] font-mono text-white/50">{entry.name}</span>
+                </div>
+              ))}
             </div>
           </div>
 
-          {/* Trader */}
-          <div className="px-6 py-4 flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="w-12 h-12 bg-accent/10 border border-accent/20 flex items-center justify-center">
-                <TrendingUp className="w-6 h-6 text-accent" />
-              </div>
-              <div>
-                <p className="text-sm font-bold text-white">Trader</p>
-                <p className="text-xs text-white/40 font-mono">$9/month</p>
-              </div>
+          {/* Revenue Distribution */}
+          <div className="border border-white/10 bg-[#0a0a0a] p-4">
+            <div className="flex items-center gap-2 mb-3">
+              <Coins className="w-4 h-4 text-amber-400" />
+              <span className="text-xs font-mono text-white/60 uppercase">Revenue Split</span>
             </div>
-            <div className="text-right">
-              <p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.trader.count}</p>
-              <p className="text-xs text-accent font-mono">${data.tier_breakdown.trader.revenue}/mo</p>
+            <div className="h-40">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={revenuePieData}
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={40}
+                    outerRadius={60}
+                    paddingAngle={2}
+                    dataKey="value"
+                  >
+                    {revenuePieData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                  <Tooltip 
+                    content={({ active, payload }) => {
+                      if (!active || !payload || !payload.length) return null
+                      const data = payload[0].payload
+                      return (
+                        <div className="bg-[#0a0a0a] border border-white/10 px-3 py-2">
+                          <p className="text-xs font-mono text-white">
+                            {data.name}: ${data.value}
+                          </p>
+                        </div>
+                      )
+                    }}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
             </div>
-          </div>
-
-          {/* Scout */}
-          <div className="px-6 py-4 flex items-center justify-between">
-            <div className="flex items-center gap-4">
-              <div className="w-12 h-12 bg-white/5 border border-white/10 flex items-center justify-center">
-                <Zap className="w-6 h-6 text-white/40" />
-              </div>
-              <div>
-                <p className="text-sm font-bold text-white">Scout</p>
-                <p className="text-xs text-white/40 font-mono">Free</p>
-              </div>
-            </div>
-            <div className="text-right">
-              <p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.scout.count}</p>
-              <p className="text-xs text-white/30 font-mono">$0/mo</p>
+            <div className="flex justify-center gap-4 mt-2">
+              {revenuePieData.map((entry, index) => (
+                <div key={index} className="flex items-center gap-1.5">
+                  <div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
+                  <span className="text-[10px] font-mono text-white/50">{entry.name}</span>
+                </div>
+              ))}
             </div>
           </div>
         </div>
       </div>
 
-      {/* Growth & Churn */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {/* Growth Metrics */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
         {/* New This Week */}
         <div className="border border-white/10 bg-white/[0.02] p-5">
           <div className="flex items-center gap-2 mb-2">
-            <ArrowUpRight className="w-4 h-4 text-accent" />
+            <ArrowUpRight className="w-4 h-4 text-green-400" />
             <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">New This Week</span>
           </div>
-          <p className="text-3xl font-bold text-accent font-mono">{data.new_subscriptions.week}</p>
+          <p className="text-3xl font-bold text-green-400 font-mono">{data.new_subscriptions.week}</p>
           <p className="text-xs text-white/30 font-mono mt-1">paid subscriptions</p>
         </div>
 
@@ -249,24 +593,34 @@ export function EarningsTab() {
         {/* Churn */}
         <div className="border border-white/10 bg-white/[0.02] p-5">
           <div className="flex items-center gap-2 mb-2">
-            <ArrowDownRight className="w-4 h-4 text-rose-400" />
-            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Churned This Month</span>
+            <TrendingDown className="w-4 h-4 text-rose-400" />
+            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Churned</span>
           </div>
           <p className="text-3xl font-bold text-rose-400 font-mono">{data.churn.month}</p>
-          <p className="text-xs text-white/30 font-mono mt-1">cancelled</p>
+          <p className="text-xs text-white/30 font-mono mt-1">this month</p>
+        </div>
+
+        {/* Yield Revenue */}
+        <div className="border border-amber-500/20 bg-amber-500/[0.03] p-5">
+          <div className="flex items-center gap-2 mb-2">
+            <Coins className="w-4 h-4 text-amber-400" />
+            <span className="text-[10px] font-mono text-amber-400/60 uppercase tracking-wider">Yield Revenue</span>
+          </div>
+          <p className="text-3xl font-bold text-white font-mono">${data.yield_revenue_month.toFixed(0)}</p>
+          <p className="text-xs text-white/30 font-mono mt-1">platform cut (30%)</p>
         </div>
       </div>
 
       {/* Total Revenue Summary */}
-      <div className="border border-white/10 bg-gradient-to-r from-white/[0.02] to-transparent p-6">
+      <div className="border border-red-500/20 bg-gradient-to-r from-red-500/10 via-red-500/5 to-transparent p-6">
         <div className="flex items-center justify-between">
           <div>
-            <p className="text-[10px] font-mono text-white/40 uppercase tracking-wider mb-1">Total Monthly Revenue</p>
-            <p className="text-xs text-white/30 font-mono">Subscriptions + Yield (30%)</p>
+            <p className="text-[10px] font-mono text-red-400/60 uppercase tracking-wider mb-1">Total Monthly Revenue</p>
+            <p className="text-xs text-white/30 font-mono">Subscriptions + Yield Platform Cut</p>
           </div>
           <div className="text-right">
-            <p className="text-4xl font-bold text-white font-mono">${data.total_revenue_month.toLocaleString()}</p>
-            <p className="text-xs text-white/40 font-mono mt-1">
+            <p className="text-5xl font-bold text-white font-mono">${data.total_revenue_month.toLocaleString()}</p>
+            <p className="text-sm text-white/40 font-mono mt-2">
               ${(data.total_revenue_month * 12).toLocaleString()} projected ARR
             </p>
           </div>
@@ -275,4 +629,3 @@ export function EarningsTab() {
     </div>
   )
 }
-

frontend/src/lib/api.ts

@@ -1286,6 +1286,29 @@ class AdminApiClient extends ApiClient {
     }>('/admin/earnings')
   }
 
+  async getAdminEarningsHistory(months: number = 12) {
+    return this.request<{
+      monthly_data: Array<{
+        month: string
+        mrr: number
+        arr: number
+        paying_customers: number
+        scout: number
+        trader: number
+        tycoon: number
+        new_subscriptions: number
+        churn: number
+      }>
+      metrics: {
+        mrr_growth_percent: number
+        arpu: number
+        ltv: number
+        total_customers: number
+      }
+      timestamp: string
+    }>(`/admin/earnings/history?months=${months}`)
+  }
+
   // Admin Users
   async getAdminUsers(limit: number = 50, offset: number = 0, search?: string) {
     const params = new URLSearchParams({ limit: String(limit), offset: String(offset) })