Earnings Dashboard: Duplikate entfernt, cleaner Layout
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
Some checks failed
CI / Frontend Lint & Type Check (push) Has been cancelled
CI / Frontend Build (push) Has been cancelled
CI / Backend Lint (push) Has been cancelled
CI / Backend Tests (push) Has been cancelled
CI / Docker Build (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
Deploy / Build & Push Images (push) Has been cancelled
Deploy / Deploy to Server (push) Has been cancelled
Deploy / Notify (push) Has been cancelled
This commit is contained in:
@ -17,7 +17,6 @@ import {
|
|||||||
Target,
|
Target,
|
||||||
Activity,
|
Activity,
|
||||||
BarChart3,
|
BarChart3,
|
||||||
PieChart as PieChartIcon,
|
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import {
|
import {
|
||||||
@ -25,11 +24,7 @@ import {
|
|||||||
Area,
|
Area,
|
||||||
BarChart,
|
BarChart,
|
||||||
Bar,
|
Bar,
|
||||||
LineChart,
|
|
||||||
Line,
|
Line,
|
||||||
PieChart,
|
|
||||||
Pie,
|
|
||||||
Cell,
|
|
||||||
XAxis,
|
XAxis,
|
||||||
YAxis,
|
YAxis,
|
||||||
CartesianGrid,
|
CartesianGrid,
|
||||||
@ -76,24 +71,22 @@ interface HistoryData {
|
|||||||
timestamp: string
|
timestamp: string
|
||||||
}
|
}
|
||||||
|
|
||||||
// Custom colors matching the design system
|
// Custom colors
|
||||||
const COLORS = {
|
const COLORS = {
|
||||||
primary: '#ef4444', // red-500
|
primary: '#ef4444',
|
||||||
accent: '#22c55e', // green-500
|
accent: '#22c55e',
|
||||||
amber: '#f59e0b', // amber-500
|
amber: '#f59e0b',
|
||||||
blue: '#3b82f6', // blue-500
|
blue: '#3b82f6',
|
||||||
purple: '#8b5cf6', // purple-500
|
rose: '#f43f5e',
|
||||||
cyan: '#06b6d4', // cyan-500
|
|
||||||
rose: '#f43f5e', // rose-500
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const TIER_COLORS = {
|
const TIER_COLORS = {
|
||||||
scout: '#6b7280', // gray-500
|
scout: '#6b7280',
|
||||||
trader: '#22c55e', // green-500
|
trader: '#22c55e',
|
||||||
tycoon: '#f59e0b', // amber-500
|
tycoon: '#f59e0b',
|
||||||
}
|
}
|
||||||
|
|
||||||
// Custom tooltip component
|
// Custom tooltip
|
||||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
const CustomTooltip = ({ active, payload, label }: any) => {
|
||||||
if (!active || !payload || !payload.length) return null
|
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>
|
<p className="text-xs font-mono text-white/60 mb-2">{label}</p>
|
||||||
{payload.map((entry: any, index: number) => (
|
{payload.map((entry: any, index: number) => (
|
||||||
<div key={index} className="flex items-center gap-2 text-sm">
|
<div key={index} className="flex items-center gap-2 text-sm">
|
||||||
<div
|
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
|
||||||
className="w-2 h-2 rounded-full"
|
|
||||||
style={{ backgroundColor: entry.color }}
|
|
||||||
/>
|
|
||||||
<span className="text-white/80">{entry.name}:</span>
|
<span className="text-white/80">{entry.name}:</span>
|
||||||
<span className="font-mono font-bold text-white">
|
<span className="font-mono font-bold text-white">
|
||||||
{entry.name.includes('$') || entry.dataKey === 'mrr' || entry.dataKey === 'arr'
|
{entry.dataKey === 'mrr' ? `$${entry.value.toLocaleString()}` : entry.value}
|
||||||
? `$${entry.value.toLocaleString()}`
|
|
||||||
: entry.value}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@ -123,7 +111,7 @@ export function EarningsTab() {
|
|||||||
const [history, setHistory] = useState<HistoryData | null>(null)
|
const [history, setHistory] = useState<HistoryData | null>(null)
|
||||||
const [loading, setLoading] = useState(true)
|
const [loading, setLoading] = useState(true)
|
||||||
const [refreshing, setRefreshing] = useState(false)
|
const [refreshing, setRefreshing] = useState(false)
|
||||||
const [activeChart, setActiveChart] = useState<'mrr' | 'customers' | 'tiers'>('mrr')
|
const [activeChart, setActiveChart] = useState<'revenue' | 'growth'>('revenue')
|
||||||
|
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
try {
|
try {
|
||||||
@ -167,18 +155,8 @@ export function EarningsTab() {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prepare pie chart data
|
// Calculate net growth
|
||||||
const pieData = [
|
const netGrowth = data.new_subscriptions.month - data.churn.month
|
||||||
{ 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 (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
@ -190,7 +168,7 @@ export function EarningsTab() {
|
|||||||
Revenue Dashboard
|
Revenue Dashboard
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xs text-white/30 font-mono mt-1">
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@ -203,426 +181,229 @@ export function EarningsTab() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main KPI Cards */}
|
{/* Main KPIs - 6 Cards */}
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
<div className="grid grid-cols-2 lg:grid-cols-6 gap-3">
|
||||||
{/* MRR */}
|
{/* 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="relative overflow-hidden border border-red-500/30 bg-gradient-to-br from-red-500/10 to-transparent p-4">
|
||||||
<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="flex items-center gap-2 mb-1">
|
||||||
<div className="relative">
|
<DollarSign className="w-4 h-4 text-red-400" />
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<span className="text-[10px] font-mono text-red-400/80 uppercase">MRR</span>
|
||||||
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* ARR */}
|
{/* 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="relative overflow-hidden border border-green-500/30 bg-gradient-to-br from-green-500/10 to-transparent p-4">
|
||||||
<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="flex items-center gap-2 mb-1">
|
||||||
<div className="relative">
|
<TrendingUp className="w-4 h-4 text-green-400" />
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<span className="text-[10px] font-mono text-green-400/80 uppercase">ARR</span>
|
||||||
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
{/* Customers */}
|
{/* Paying Customers */}
|
||||||
<div className="border border-white/10 bg-white/[0.02] p-5">
|
<div className="border border-white/10 bg-white/[0.02] p-4">
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Users className="w-4 h-4 text-blue-400" />
|
<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>
|
||||||
<div className="text-3xl font-bold text-white font-mono">
|
<div className="text-2xl font-bold text-white font-mono">
|
||||||
{data.paying_customers}
|
{data.paying_customers}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-1 mt-2 text-xs font-mono text-green-400">
|
<div className="text-[10px] text-white/40 font-mono mt-1">customers</div>
|
||||||
<ArrowUpRight className="w-3 h-3" />
|
|
||||||
+{data.new_subscriptions.week} this week
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ARPU */}
|
{/* ARPU */}
|
||||||
<div className="border border-white/10 bg-white/[0.02] p-5">
|
<div className="border border-white/10 bg-white/[0.02] p-4">
|
||||||
<div className="flex items-center gap-2 mb-2">
|
<div className="flex items-center gap-2 mb-1">
|
||||||
<Target className="w-4 h-4 text-purple-400" />
|
<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>
|
||||||
<div className="text-3xl font-bold text-white font-mono">
|
<div className="text-2xl font-bold text-white font-mono">
|
||||||
${history.metrics.arpu.toFixed(2)}
|
${history.metrics.arpu.toFixed(0)}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-white/40 font-mono mt-2">
|
<div className="text-[10px] text-white/40 font-mono mt-1">LTV: ${history.metrics.ltv.toFixed(0)}</div>
|
||||||
LTV: ${history.metrics.ltv.toFixed(0)}
|
</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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* MRR Chart */}
|
{/* Chart Section */}
|
||||||
<div className="border border-white/10 bg-[#0a0a0a]">
|
<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="px-6 py-4 border-b border-white/10 flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<BarChart3 className="w-5 h-5 text-red-400" />
|
<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>
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
{(['mrr', 'customers', 'tiers'] as const).map((chart) => (
|
{(['revenue', 'growth'] as const).map((chart) => (
|
||||||
<button
|
<button
|
||||||
key={chart}
|
key={chart}
|
||||||
onClick={() => setActiveChart(chart)}
|
onClick={() => setActiveChart(chart)}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"px-3 py-1.5 text-xs font-mono uppercase transition-all",
|
"px-3 py-1.5 text-xs font-mono uppercase transition-all",
|
||||||
activeChart === chart
|
activeChart === chart ? "bg-white/10 text-white" : "text-white/40 hover:text-white hover:bg-white/5"
|
||||||
? "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>
|
</button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-6 h-80">
|
<div className="p-6 h-72">
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
{activeChart === 'mrr' ? (
|
{activeChart === 'revenue' ? (
|
||||||
<AreaChart data={history.monthly_data}>
|
<AreaChart data={history.monthly_data}>
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="mrrGradient" x1="0" y1="0" x2="0" y2="1">
|
<linearGradient id="mrrGradient" x1="0" y1="0" x2="0" y2="1">
|
||||||
<stop offset="5%" stopColor={COLORS.primary} stopOpacity={0.3}/>
|
<stop offset="5%" stopColor={COLORS.primary} stopOpacity={0.3}/>
|
||||||
<stop offset="95%" stopColor={COLORS.primary} stopOpacity={0}/>
|
<stop offset="95%" stopColor={COLORS.primary} stopOpacity={0}/>
|
||||||
</linearGradient>
|
</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>
|
</defs>
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
|
||||||
<XAxis
|
<XAxis dataKey="month" tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} />
|
||||||
dataKey="month"
|
<YAxis tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} tickFormatter={(v) => `$${v}`} />
|
||||||
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 />} />
|
<Tooltip content={<CustomTooltip />} />
|
||||||
<Area
|
<Area type="monotone" dataKey="mrr" name="MRR" stroke={COLORS.primary} strokeWidth={2} fill="url(#mrrGradient)" />
|
||||||
type="monotone"
|
|
||||||
dataKey="mrr"
|
|
||||||
name="MRR"
|
|
||||||
stroke={COLORS.primary}
|
|
||||||
strokeWidth={2}
|
|
||||||
fill="url(#mrrGradient)"
|
|
||||||
/>
|
|
||||||
</AreaChart>
|
</AreaChart>
|
||||||
) : activeChart === 'customers' ? (
|
) : (
|
||||||
<ComposedChart data={history.monthly_data}>
|
<ComposedChart data={history.monthly_data}>
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
|
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" />
|
||||||
<XAxis
|
<XAxis dataKey="month" tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} />
|
||||||
dataKey="month"
|
<YAxis tick={{ fill: 'rgba(255,255,255,0.4)', fontSize: 10 }} axisLine={{ stroke: 'rgba(255,255,255,0.1)' }} />
|
||||||
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 />} />
|
<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="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]} />
|
<Bar dataKey="churn" name="Churned" fill={COLORS.rose} radius={[4, 4, 0, 0]} />
|
||||||
<Line
|
<Line type="monotone" dataKey="paying_customers" name="Total" stroke={COLORS.blue} strokeWidth={2} dot={{ fill: COLORS.blue, r: 3 }} />
|
||||||
type="monotone"
|
|
||||||
dataKey="paying_customers"
|
|
||||||
name="Total Paying"
|
|
||||||
stroke={COLORS.blue}
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ fill: COLORS.blue, strokeWidth: 0, r: 4 }}
|
|
||||||
/>
|
|
||||||
</ComposedChart>
|
</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>
|
</ResponsiveContainer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Bottom Section: Tier Breakdown + Pie Charts */}
|
{/* Subscription Breakdown - Clean Table */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
<div className="border border-white/10 bg-[#0a0a0a]">
|
||||||
{/* Tier Breakdown */}
|
<div className="px-6 py-4 border-b border-white/10">
|
||||||
<div className="lg:col-span-2 border border-white/10 bg-[#0a0a0a]">
|
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Subscriptions</h3>
|
||||||
<div className="px-6 py-4 border-b border-white/10">
|
</div>
|
||||||
<h3 className="text-sm font-bold text-white uppercase tracking-wider">Subscription Breakdown</h3>
|
<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>
|
||||||
<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 */}
|
{/* Trader */}
|
||||||
<div className="px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors">
|
<div className="px-6 py-3 flex items-center gap-4 hover:bg-white/[0.02] transition-colors">
|
||||||
<div className="flex items-center gap-4">
|
<div className="w-10 h-10 bg-green-500/10 border border-green-500/20 flex items-center justify-center flex-shrink-0">
|
||||||
<div className="w-12 h-12 bg-green-500/10 border border-green-500/20 flex items-center justify-center">
|
<TrendingUp className="w-5 h-5 text-green-400" />
|
||||||
<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>
|
</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 */}
|
{/* Scout */}
|
||||||
<div className="px-6 py-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors">
|
<div className="px-6 py-3 flex items-center gap-4 hover:bg-white/[0.02] transition-colors">
|
||||||
<div className="flex items-center gap-4">
|
<div className="w-10 h-10 bg-white/5 border border-white/10 flex items-center justify-center flex-shrink-0">
|
||||||
<div className="w-12 h-12 bg-white/5 border border-white/10 flex items-center justify-center">
|
<Zap className="w-5 h-5 text-white/40" />
|
||||||
<Zap className="w-6 h-6 text-white/40" />
|
</div>
|
||||||
</div>
|
<div className="flex-1 min-w-0">
|
||||||
<div>
|
<p className="text-sm font-bold text-white">Scout</p>
|
||||||
<p className="text-sm font-bold text-white">Scout</p>
|
<p className="text-xs text-white/40 font-mono">Free</p>
|
||||||
<p className="text-xs text-white/40 font-mono">Free tier</p>
|
</div>
|
||||||
</div>
|
<div className="text-right">
|
||||||
</div>
|
<p className="text-xl font-bold text-white font-mono">{data.tier_breakdown.scout.count}</p>
|
||||||
<div className="text-right">
|
</div>
|
||||||
<p className="text-2xl font-bold text-white font-mono">{data.tier_breakdown.scout.count}</p>
|
<div className="w-24 text-right">
|
||||||
<p className="text-xs text-white/30 font-mono">$0/mo</p>
|
<p className="text-sm font-bold text-white/30 font-mono">$0</p>
|
||||||
</div>
|
<p className="text-[10px] text-white/30 font-mono">/month</p>
|
||||||
<div className="w-32 h-2 bg-white/5 rounded-full overflow-hidden ml-4">
|
</div>
|
||||||
<div className="h-full bg-white/20 rounded-full" style={{ width: '0%' }} />
|
<div className="w-24 h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||||
</div>
|
<div className="h-full bg-white/20 rounded-full" style={{ width: '0%' }} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Pie Charts */}
|
{/* Total Row */}
|
||||||
<div className="space-y-4">
|
<div className="px-6 py-4 bg-white/[0.02] border-t border-white/10 flex items-center justify-between">
|
||||||
{/* Customer Distribution */}
|
<div className="flex items-center gap-2">
|
||||||
<div className="border border-white/10 bg-[#0a0a0a] p-4">
|
<span className="text-xs font-mono text-white/40 uppercase">Total Monthly</span>
|
||||||
<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>
|
</div>
|
||||||
|
<div className="text-2xl font-bold text-white font-mono">
|
||||||
{/* Revenue Distribution */}
|
${data.total_revenue_month.toLocaleString()}
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user