74 lines
3.3 KiB
TypeScript
74 lines
3.3 KiB
TypeScript
|
|
import React from 'react';
|
|
import { GlassCard } from '@/components/ui/GlassCard';
|
|
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
|
|
import { DirhamIcon } from '@/components/ui/custom-icons';
|
|
|
|
const InvestmentPerformance: React.FC = () => {
|
|
// Dummy chart data for visualization
|
|
const data = [
|
|
{ name: 'Jan', value: 2400000 },
|
|
{ name: 'Feb', value: 2450000 },
|
|
{ name: 'Mar', value: 2550000 },
|
|
{ name: 'Apr', value: 2500000 },
|
|
{ name: 'May', value: 2650000 },
|
|
{ name: 'Jun', value: 2847500 },
|
|
];
|
|
|
|
return (
|
|
<GlassCard className="p-6 h-full flex flex-col">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h3 className="text-lg font-semibold text-slate-800">Investment Performance</h3>
|
|
<select className="bg-slate-50 border-none text-sm text-slate-600 rounded-lg p-2 focus:ring-0 cursor-pointer">
|
|
<option>Last 6 Months</option>
|
|
<option>Year to Date</option>
|
|
<option>All Time</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div>
|
|
<p className="text-xs text-slate-500">Total Portfolio</p>
|
|
<div className="flex items-center gap-1 font-bold text-slate-800 text-lg">
|
|
<DirhamIcon className="w-4 h-4" /> 2.85M
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-slate-500">Annual Return</p>
|
|
<p className="font-bold text-green-600 text-lg">+12.7%</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-slate-500">Monthly Contrib.</p>
|
|
<div className="flex items-center gap-1 font-bold text-slate-800 text-lg">
|
|
<DirhamIcon className="w-4 h-4" /> 12.5K
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-xs text-slate-500">Risk Score</p>
|
|
<p className="font-bold text-orange-500 text-lg">3.2/10</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 min-h-[200px] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data}>
|
|
<defs>
|
|
<linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} />
|
|
<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: '#94a3b8' }} />
|
|
<Tooltip
|
|
contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
|
|
/>
|
|
<Area type="monotone" dataKey="value" stroke="#8b5cf6" strokeWidth={3} fillOpacity={1} fill="url(#colorValue)" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</GlassCard>
|
|
);
|
|
};
|
|
|
|
export default InvestmentPerformance;
|