77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
|
import { RevenueDataPoint } from '@/types/dashboard';
|
||
|
|
import { formatCurrency } from '@/data/mockData';
|
||
|
|
|
||
|
|
interface RevenueChartProps {
|
||
|
|
data: RevenueDataPoint[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function RevenueChart({ data }: RevenueChartProps) {
|
||
|
|
const maxValue = Math.max(...data.map(d => Math.max(d.revenue, d.payouts)));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="neu-card p-6">
|
||
|
|
<div className="flex items-center justify-between mb-6">
|
||
|
|
<div>
|
||
|
|
<h2 className="text-lg font-bold text-foreground">Revenue vs Payouts</h2>
|
||
|
|
<p className="text-sm text-muted-foreground">Last 7 days comparison</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="h-3 w-3 rounded-sm bg-accent" />
|
||
|
|
<span className="text-sm text-muted-foreground">Revenue</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="h-3 w-3 rounded-sm bg-success" />
|
||
|
|
<span className="text-sm text-muted-foreground">Payouts</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Chart Area */}
|
||
|
|
<div className="h-64 flex items-end gap-4 pt-8 pb-4">
|
||
|
|
{data.map((point, index) => (
|
||
|
|
<div key={index} className="flex-1 flex flex-col items-center gap-2">
|
||
|
|
<div className="w-full flex items-end justify-center gap-1 h-48">
|
||
|
|
{/* Revenue Bar */}
|
||
|
|
<div
|
||
|
|
className="w-5 bg-accent rounded-t-md transition-all duration-300 hover:bg-ocean-blue"
|
||
|
|
style={{
|
||
|
|
height: `${(point.revenue / maxValue) * 100}%`,
|
||
|
|
minHeight: '8px'
|
||
|
|
}}
|
||
|
|
title={formatCurrency(point.revenue)}
|
||
|
|
/>
|
||
|
|
{/* Payout Bar */}
|
||
|
|
<div
|
||
|
|
className="w-5 bg-success rounded-t-md transition-all duration-300 hover:opacity-80"
|
||
|
|
style={{
|
||
|
|
height: `${(point.payouts / maxValue) * 100}%`,
|
||
|
|
minHeight: '8px'
|
||
|
|
}}
|
||
|
|
title={formatCurrency(point.payouts)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<span className="text-xs font-medium text-muted-foreground">{point.day}</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Summary */}
|
||
|
|
<div className="grid grid-cols-2 gap-4 pt-4 border-t border-border/50">
|
||
|
|
<div className="text-center">
|
||
|
|
<p className="text-2xl font-bold text-foreground">
|
||
|
|
{formatCurrency(data.reduce((sum, d) => sum + d.revenue, 0))}
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-muted-foreground">Total Revenue</p>
|
||
|
|
</div>
|
||
|
|
<div className="text-center">
|
||
|
|
<p className="text-2xl font-bold text-foreground">
|
||
|
|
{formatCurrency(data.reduce((sum, d) => sum + d.payouts, 0))}
|
||
|
|
</p>
|
||
|
|
<p className="text-sm text-muted-foreground">Total Payouts</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|