Earnings Dashboard: Duplikate entfernt, cleaner Layout

frontend/src/components/admin/EarningsTab.tsx

@@ -17,7 +17,6 @@ import {
   Target,
   Activity,
   BarChart3,
-  PieChart as PieChartIcon,
 } from 'lucide-react'
 import clsx from 'clsx'
 import {
@@ -25,11 +24,7 @@ import {
   Area,
   BarChart,
   Bar,
-  LineChart,
   Line,
-  PieChart,
-  Pie,
-  Cell,
   XAxis,
   YAxis,
   CartesianGrid,
@@ -76,24 +71,22 @@ interface HistoryData {
   timestamp: string
 }
 
-// Custom colors matching the design system
+// Custom colors
 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
+  primary: '#ef4444',
+  accent: '#22c55e',
+  amber: '#f59e0b',
+  blue: '#3b82f6',
+  rose: '#f43f5e',
 }
 
 const TIER_COLORS = {
-  scout: '#6b7280', // gray-500
-  trader: '#22c55e', // green-500
-  tycoon: '#f59e0b', // amber-500
+  scout: '#6b7280',
+  trader: '#22c55e',
+  tycoon: '#f59e0b',
 }
 
-// Custom tooltip component
+// Custom tooltip
 const CustomTooltip = ({ active, payload, label }: any) => {
   if (!active || !payload || !payload.length) return null
   
@@ -102,15 +95,10 @@ const CustomTooltip = ({ active, payload, label }: any) => {
       <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 }}
-          />
+          <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}
+            {entry.dataKey === 'mrr' ? `$${entry.value.toLocaleString()}` : entry.value}
           </span>
         </div>
       ))}
@@ -123,7 +111,7 @@ export function EarningsTab() {
   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 [activeChart, setActiveChart] = useState<'revenue' | 'growth'>('revenue')
 
   const loadData = async () => {
     try {
@@ -167,18 +155,8 @@ 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)
+  // Calculate net growth
+  const netGrowth = data.new_subscriptions.month - data.churn.month
 
   return (
     <div className="space-y-6">
@@ -190,7 +168,7 @@ export function EarningsTab() {
             Revenue Dashboard
           </h2>
           <p className="text-xs text-white/30 font-mono mt-1">
-            Last updated: {new Date(data.timestamp).toLocaleString()}
+            Updated: {new Date(data.timestamp).toLocaleString()}
           </p>
         </div>
         <button
@@ -203,426 +181,229 @@ export function EarningsTab() {
         </button>
       </div>
 
-      {/* Main KPI Cards */}
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {/* Main KPIs - 6 Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-6 gap-3">
         {/* MRR */}
-        <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-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-3xl font-bold text-white font-mono">
-              ${data.mrr.toLocaleString()}
-            </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 className="relative overflow-hidden border border-red-500/30 bg-gradient-to-br from-red-500/10 to-transparent p-4">
+          <div className="flex items-center gap-2 mb-1">
+            <DollarSign className="w-4 h-4 text-red-400" />
+            <span className="text-[10px] font-mono text-red-400/80 uppercase">MRR</span>
           </div>
+          <div className="text-2xl font-bold text-white font-mono">
+            ${data.mrr.toLocaleString()}
+          </div>
+          {history.metrics.mrr_growth_percent !== 0 && (
+            <div className={clsx(
+              "flex items-center gap-1 mt-1 text-[10px] 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)}%
+            </div>
+          )}
         </div>
 
         {/* ARR */}
-        <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-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-3xl font-bold text-white font-mono">
-              ${data.arr.toLocaleString()}
-            </div>
-            <div className="text-xs text-white/40 font-mono mt-2">
-              Projected annual
-            </div>
+        <div className="relative overflow-hidden border border-green-500/30 bg-gradient-to-br from-green-500/10 to-transparent p-4">
+          <div className="flex items-center gap-2 mb-1">
+            <TrendingUp className="w-4 h-4 text-green-400" />
+            <span className="text-[10px] font-mono text-green-400/80 uppercase">ARR</span>
           </div>
+          <div className="text-2xl font-bold text-white font-mono">
+            ${data.arr.toLocaleString()}
+          </div>
+          <div className="text-[10px] text-white/40 font-mono mt-1">projected</div>
         </div>
 
-        {/* Customers */}
-        <div className="border border-white/10 bg-white/[0.02] p-5">
-          <div className="flex items-center gap-2 mb-2">
+        {/* Paying Customers */}
+        <div className="border border-white/10 bg-white/[0.02] p-4">
+          <div className="flex items-center gap-2 mb-1">
             <Users className="w-4 h-4 text-blue-400" />
-            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">Paying</span>
+            <span className="text-[10px] font-mono text-white/40 uppercase">Paying</span>
           </div>
-          <div className="text-3xl font-bold text-white font-mono">
+          <div className="text-2xl font-bold text-white font-mono">
             {data.paying_customers}
           </div>
-          <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 className="text-[10px] text-white/40 font-mono mt-1">customers</div>
         </div>
 
         {/* ARPU */}
-        <div className="border border-white/10 bg-white/[0.02] p-5">
-          <div className="flex items-center gap-2 mb-2">
+        <div className="border border-white/10 bg-white/[0.02] p-4">
+          <div className="flex items-center gap-2 mb-1">
             <Target className="w-4 h-4 text-purple-400" />
-            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">ARPU</span>
+            <span className="text-[10px] font-mono text-white/40 uppercase">ARPU</span>
           </div>
-          <div className="text-3xl font-bold text-white font-mono">
-            ${history.metrics.arpu.toFixed(2)}
+          <div className="text-2xl font-bold text-white font-mono">
+            ${history.metrics.arpu.toFixed(0)}
           </div>
-          <div className="text-xs text-white/40 font-mono mt-2">
-            LTV: ${history.metrics.ltv.toFixed(0)}
+          <div className="text-[10px] text-white/40 font-mono mt-1">LTV: ${history.metrics.ltv.toFixed(0)}</div>
+        </div>
+
+        {/* Net Growth */}
+        <div className={clsx(
+          "border p-4",
+          netGrowth >= 0 ? "border-green-500/20 bg-green-500/[0.03]" : "border-rose-500/20 bg-rose-500/[0.03]"
+        )}>
+          <div className="flex items-center gap-2 mb-1">
+            {netGrowth >= 0 ? <TrendingUp className="w-4 h-4 text-green-400" /> : <TrendingDown className="w-4 h-4 text-rose-400" />}
+            <span className="text-[10px] font-mono text-white/40 uppercase">Net Growth</span>
           </div>
+          <div className={clsx("text-2xl font-bold font-mono", netGrowth >= 0 ? "text-green-400" : "text-rose-400")}>
+            {netGrowth >= 0 ? '+' : ''}{netGrowth}
+          </div>
+          <div className="text-[10px] text-white/40 font-mono mt-1">this month</div>
+        </div>
+
+        {/* Yield Revenue */}
+        <div className="border border-amber-500/20 bg-amber-500/[0.03] p-4">
+          <div className="flex items-center gap-2 mb-1">
+            <Coins className="w-4 h-4 text-amber-400" />
+            <span className="text-[10px] font-mono text-amber-400/60 uppercase">Yield</span>
+          </div>
+          <div className="text-2xl font-bold text-white font-mono">
+            ${data.yield_revenue_month.toFixed(0)}
+          </div>
+          <div className="text-[10px] text-white/40 font-mono mt-1">30% cut</div>
         </div>
       </div>
 
-      {/* MRR Chart */}
+      {/* Chart Section */}
       <div className="border border-white/10 bg-[#0a0a0a]">
         <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>
+            <h3 className="text-sm font-bold text-white uppercase tracking-wider">Trend</h3>
           </div>
           <div className="flex gap-1">
-            {(['mrr', 'customers', 'tiers'] as const).map((chart) => (
+            {(['revenue', 'growth'] 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"
+                  activeChart === chart ? "bg-white/10 text-white" : "text-white/40 hover:text-white hover:bg-white/5"
                 )}
               >
-                {chart === 'mrr' ? 'Revenue' : chart === 'customers' ? 'Customers' : 'Tiers'}
+                {chart === 'revenue' ? 'MRR' : 'Growth'}
               </button>
             ))}
           </div>
         </div>
-        <div className="p-6 h-80">
+        <div className="p-6 h-72">
           <ResponsiveContainer width="100%" height="100%">
-            {activeChart === 'mrr' ? (
+            {activeChart === 'revenue' ? (
               <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}`}
-                />
+                <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={(v) => `$${v}`} />
                 <Tooltip content={<CustomTooltip />} />
-                <Area
-                  type="monotone"
-                  dataKey="mrr"
-                  name="MRR"
-                  stroke={COLORS.primary}
-                  strokeWidth={2}
-                  fill="url(#mrrGradient)"
-                />
+                <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)' }}
-                />
+                <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: '10px' }} formatter={(v) => <span className="text-white/60 text-xs font-mono">{v}</span>} />
                 <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 }}
-                />
+                <Line type="monotone" dataKey="paying_customers" name="Total" stroke={COLORS.blue} strokeWidth={2} dot={{ fill: COLORS.blue, r: 3 }} />
               </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>
+      {/* Subscription Breakdown - Clean Table */}
+      <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">Subscriptions</h3>
+        </div>
+        <div className="divide-y divide-white/[0.06]">
+          {/* Tycoon */}
+          <div className="px-6 py-3 flex items-center gap-4 hover:bg-white/[0.02] transition-colors">
+            <div className="w-10 h-10 bg-amber-500/10 border border-amber-500/20 flex items-center justify-center flex-shrink-0">
+              <Crown className="w-5 h-5 text-amber-400" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-bold text-white">Tycoon</p>
+              <p className="text-xs text-white/40 font-mono">$29/mo</p>
+            </div>
+            <div className="text-right">
+              <p className="text-xl font-bold text-white font-mono">{data.tier_breakdown.tycoon.count}</p>
+            </div>
+            <div className="w-24 text-right">
+              <p className="text-sm font-bold text-amber-400 font-mono">${data.tier_breakdown.tycoon.revenue}</p>
+              <p className="text-[10px] text-white/30 font-mono">/month</p>
+            </div>
+            <div className="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
+              <div 
+                className="h-full bg-amber-400 rounded-full"
+                style={{ width: `${data.mrr > 0 ? (data.tier_breakdown.tycoon.revenue / data.mrr) * 100 : 0}%` }}
+              />
+            </div>
           </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 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>
 
-            {/* 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>
+          {/* Trader */}
+          <div className="px-6 py-3 flex items-center gap-4 hover:bg-white/[0.02] transition-colors">
+            <div className="w-10 h-10 bg-green-500/10 border border-green-500/20 flex items-center justify-center flex-shrink-0">
+              <TrendingUp className="w-5 h-5 text-green-400" />
             </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-bold text-white">Trader</p>
+              <p className="text-xs text-white/40 font-mono">$9/mo</p>
+            </div>
+            <div className="text-right">
+              <p className="text-xl font-bold text-white font-mono">{data.tier_breakdown.trader.count}</p>
+            </div>
+            <div className="w-24 text-right">
+              <p className="text-sm font-bold text-green-400 font-mono">${data.tier_breakdown.trader.revenue}</p>
+              <p className="text-[10px] text-white/30 font-mono">/month</p>
+            </div>
+            <div className="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
+              <div 
+                className="h-full bg-green-400 rounded-full"
+                style={{ width: `${data.mrr > 0 ? (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>
+          {/* Scout */}
+          <div className="px-6 py-3 flex items-center gap-4 hover:bg-white/[0.02] transition-colors">
+            <div className="w-10 h-10 bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
+              <Zap className="w-5 h-5 text-white/40" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-bold text-white">Scout</p>
+              <p className="text-xs text-white/40 font-mono">Free</p>
+            </div>
+            <div className="text-right">
+              <p className="text-xl font-bold text-white font-mono">{data.tier_breakdown.scout.count}</p>
+            </div>
+            <div className="w-24 text-right">
+              <p className="text-sm font-bold text-white/30 font-mono">$0</p>
+              <p className="text-[10px] text-white/30 font-mono">/month</p>
+            </div>
+            <div className="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
+              <div className="h-full bg-white/20 rounded-full" style={{ width: '0%' }} />
             </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>
+        {/* Total Row */}
+        <div className="px-6 py-4 bg-white/[0.02] border-t border-white/10 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-mono text-white/40 uppercase">Total Monthly</span>
           </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="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 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 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-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-green-400 font-mono">{data.new_subscriptions.week}</p>
-          <p className="text-xs text-white/30 font-mono mt-1">paid subscriptions</p>
-        </div>
-
-        {/* New This Month */}
-        <div className="border border-white/10 bg-white/[0.02] p-5">
-          <div className="flex items-center gap-2 mb-2">
-            <TrendingUp className="w-4 h-4 text-blue-400" />
-            <span className="text-[10px] font-mono text-white/40 uppercase tracking-wider">New This Month</span>
-          </div>
-          <p className="text-3xl font-bold text-blue-400 font-mono">{data.new_subscriptions.month}</p>
-          <p className="text-xs text-white/30 font-mono mt-1">paid subscriptions</p>
-        </div>
-
-        {/* Churn */}
-        <div className="border border-white/10 bg-white/[0.02] p-5">
-          <div className="flex items-center gap-2 mb-2">
-            <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">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-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-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-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 className="text-2xl font-bold text-white font-mono">
+            ${data.total_revenue_month.toLocaleString()}
           </div>
         </div>
       </div>