38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import {Heading, Text} from '@astryxdesign/core/Text';
|
|
import {AreaChartView} from '@/shared/components/charts/AreaChartView';
|
|
import {REVENUE_TREND_DATA} from '../../services/commerceService';
|
|
|
|
export function RevenueChart() {
|
|
return (
|
|
<div className="rounded-xl border border-border bg-card p-4 space-y-3 overflow-hidden shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Heading level={4} className="text-base font-bold text-white">
|
|
Revenue Trend
|
|
</Heading>
|
|
<Text size="sm" color="secondary">
|
|
Hourly revenue performance against targets
|
|
</Text>
|
|
</div>
|
|
<span className="text-xs font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-full border border-emerald-500/20">
|
|
+14.2% Above Target
|
|
</span>
|
|
</div>
|
|
|
|
<div className="h-64 w-full pt-2">
|
|
<AreaChartView
|
|
data={REVENUE_TREND_DATA}
|
|
xKey="time"
|
|
series={[
|
|
{key: 'Revenue', label: 'Actual Revenue (₹)'},
|
|
{key: 'Target', label: 'Baseline Target (₹)'},
|
|
]}
|
|
height="100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|