Refactor: Global Theme System and Finance Modules Redesign

src/components/dashboard/InvestmentPerformance.tsx

@@ -0,0 +1,73 @@
+
+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;