68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
|
|
||
|
|
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;
|