Refactor: Global Theme System and Finance Modules Redesign

src/components/portfolio/AssetAllocation.tsx

@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { GlassCard } from '@/components/ui/GlassCard';
+import { formatAmount } from '@/lib/utils';
+import { DirhamIcon } from '@/components/ui/custom-icons';
+
+interface AssetAllocationProps {
+    holdings: Array<{
+        name: string;
+        symbol: string;
+        currentValue: number;
+        sector: string; // Keep for color logic if needed
+        shares?: number;
+        units?: number;
+    }>;
+    totalValue: number;
+}
+
+const AssetAllocation: React.FC<AssetAllocationProps> = ({ holdings, totalValue }) => {
+    // Sort holdings by value descending
+    const sortedHoldings = [...holdings].sort((a, b) => b.currentValue - a.currentValue);
+
+    // Helper to get color based on index
+    const getGradient = (index: number) => {
+        const gradients = [
+            'from-blue-500 to-blue-600',
+            'from-green-500 to-green-600',
+            'from-purple-500 to-purple-600',
+            'from-orange-500 to-orange-600',
+            'from-pink-500 to-pink-600',
+            'from-teal-500 to-teal-600',
+        ];
+        return gradients[index % gradients.length];
+    };
+
+    return (
+        <GlassCard className="p-6 h-full">
+            <h3 className="text-lg font-semibold text-slate-800 mb-6">Asset Allocation</h3>
+            <div className="space-y-6">
+                {sortedHoldings.map((stock, index) => {
+                    const percentage = ((stock.currentValue / totalValue) * 100).toFixed(1);
+                    return (
+                        <div key={index} className="space-y-2">
+                            <div className="flex justify-between items-center text-sm">
+                                <div className="flex items-center gap-2">
+                                    <span className="font-bold text-slate-700 w-12">{stock.symbol}</span>
+                                    <span className="text-slate-500 truncate max-w-[120px]">{stock.name}</span>
+                                </div>
+                                <div className="text-right">
+                                    <span className="font-bold text-slate-900">{percentage}%</span>
+                                </div>
+                            </div>
+                            <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
+                                <div
+                                    className={`h-full bg-gradient-to-r ${getGradient(index)} transition-all duration-1000`}
+                                    style={{ width: `${percentage}%` }}
+                                ></div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </GlassCard>
+    );
+};
+
+export default AssetAllocation;