Serraniel/investment-portfolio-simulator
1
0
Fork 0
mirror of https://github.com/Tomato6966/investment-portfolio-simulator.git synced 2025-04-04 14:50:35 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

add money equalization for simplesavingsplan simulator

Browse source
This commit is contained in:
tomato6966 2025-03-08 16:47:03 +01:00
parent ee5f002271
commit d13764652b
1 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/SavingsPlanSimulator.tsx
View file

@ -352,19 +352,22 @@ export const SavingsPlanSimulator = ({
<div className="grid grid-cols-8 gap-4"> <div className="grid grid-cols-8 gap-4">
<div className="flex flex-wrap gap-2 overflow-y-auto pr-2 col-span-7"> <div className="flex flex-wrap gap-2 overflow-y-auto pr-2 col-span-7">
{stocks.map(stock => ( {stocks.map(stock => (
<div key={stock.id} className="flex items-center border border-gray-200 dark:border-slate-700 rounded-md p-2 bg-gray-100 dark:bg-slate-700/50"> <div key={stock.id} className="flex flex-wrap items-center border border-gray-200 dark:border-slate-700 rounded-md p-2 bg-gray-100 dark:bg-slate-700/50">
<div <div className='flex items-center justify-between w-full'>
className="w-3 h-3 rounded-full mr-2" <div
style={{ backgroundColor: stockColors[stock.id] }} className="w-3 h-3 rounded-full mr-2"
></div> style={{ backgroundColor: stockColors[stock.id] }}
<span className="text-sm dark:text-gray-300 mr-2 truncate flex-1">{stock.name}</span> ></div>
<input <span className="text-sm dark:text-gray-300 mr-2 truncate flex-1">{stock.name}</span>
type="number" <input
value={allocations[stock.id] || 0} type="number"
onChange={(e) => handleAllocationChange(stock.id, Number(e.target.value))} value={allocations[stock.id] || 0}
className="border p-1 rounded dark:bg-slate-700 dark:text-white dark:border-slate-600 w-16 text-right" onChange={(e) => handleAllocationChange(stock.id, Number(e.target.value))}
/> className="border p-1 rounded dark:bg-slate-700 dark:text-white dark:border-slate-600 w-16 text-right"
<span className="ml-1 dark:text-gray-400">%</span> />
<span className="ml-1 dark:text-gray-400">%</span>
</div>
<div className='flex items-end justify-end w-full text-xs dark:text-gray-400 italic'>Equals: {totalAmount * (allocations[stock.id] || 0) / 100}€</div>
</div> </div>
))} ))}
</div> </div>