Spaces:
Sleeping
Sleeping
File size: 7,884 Bytes
0c5252a dbc70ee 0c5252a dbc70ee 0c5252a dbc70ee 0c5252a dbc70ee 0c5252a dbc70ee | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 | import React, { useState } from 'react';
import { Search, ChevronRight, ShieldCheck, X, DollarSign, Info, Activity } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
export default function FeeTransparencyModule({ portfolio }) {
const [isModalOpen, setIsModalOpen] = useState(false);
const { hiddenFees } = portfolio;
// Convert percentages to an illustrative dollar amount based on a $10,000 investment over 1 year
const illustrativeInvestment = 10000;
const expenseRatioCost = (illustrativeInvestment * (hiddenFees.expenseRatio / 100)).toFixed(2);
const advisoryCost = (illustrativeInvestment * (hiddenFees.advisoryFee / 100)).toFixed(2);
const totalCost = (parseFloat(expenseRatioCost) + parseFloat(advisoryCost) + hiddenFees.tradingCosts).toFixed(2);
return (
<>
<motion.div
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
onClick={() => setIsModalOpen(true)}
className="h-full flex items-center justify-center"
>
<div className="w-full bg-gs-navy text-white rounded-[4rem] p-4 pl-6 pr-8 shadow-xl flex items-center justify-between cursor-pointer group hover:bg-gs-navy/95 transition-all border border-white/10 relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-24 h-24 bg-gs-gold/5 rounded-full blur-2xl"></div>
<div className="flex items-center gap-4">
<div className="p-3 rounded-full bg-gs-gold/20 text-gs-gold group-hover:bg-gs-gold group-hover:text-gs-navy transition-all">
<ShieldCheck size={20} />
</div>
<div>
<h2 className="text-sm font-bold tracking-tight">Radical Transparency</h2>
<p className="text-white/40 text-[9px] uppercase font-bold tracking-[0.1em]">Fee Report</p>
</div>
</div>
<div className="flex items-center gap-5">
<div className="text-right">
<span className="block text-xl font-bold text-gs-gold">${Math.round(totalCost)}</span>
</div>
<div className="p-2 rounded-full bg-white/5 text-white/40 group-hover:bg-white/10 group-hover:text-white transition-all">
<ChevronRight size={16} />
</div>
</div>
</div>
</motion.div>
<AnimatePresence>
{isModalOpen && (
<div className="fixed inset-0 z-[100] flex items-center justify-center p-6">
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setIsModalOpen(false)}
className="absolute inset-0 bg-gs-navy/60 backdrop-blur-md"
/>
<motion.div
initial={{ opacity: 0, scale: 0.9, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.9, y: 20 }}
className="relative bg-white rounded-[2.5rem] shadow-2xl w-full max-w-lg overflow-hidden border border-white/20"
>
{/* Modal Header */}
<div className="bg-gs-navy p-8 text-white relative">
<div className="absolute -right-10 -top-10 w-40 h-40 bg-gs-gold/10 rounded-full blur-3xl"></div>
<div className="flex justify-between items-start relative z-10">
<div>
<div className="flex items-center gap-3 mb-2">
<div className="p-2 bg-gs-gold rounded-lg text-gs-navy">
<Search size={20} />
</div>
<span className="text-gs-gold text-[10px] font-black uppercase tracking-[0.2em]">Transparency Report</span>
</div>
<h2 className="text-3xl font-light">Radical Transparency</h2>
<p className="text-white/40 text-xs mt-1">Cost breakdown per $10,000 invested annually</p>
</div>
<button
onClick={() => setIsModalOpen(false)}
className="p-2 bg-white/5 hover:bg-white/10 text-white/60 hover:text-white rounded-full transition-all"
>
<X size={20} />
</button>
</div>
</div>
<div className="p-8 space-y-6">
<div className="space-y-4">
<div className="flex justify-between items-center bg-gs-light/50 p-5 rounded-2xl border border-gray-100">
<div>
<span className="block text-xs font-bold text-gs-navy uppercase tracking-wider">Fund Expense Ratios</span>
<span className="text-[10px] text-gs-slate/60">{hiddenFees.expenseRatio}% blended average</span>
</div>
<span className="font-bold text-xl text-gs-navy">${expenseRatioCost}</span>
</div>
<div className="flex justify-between items-center bg-gs-light/50 p-5 rounded-2xl border border-gray-100">
<div>
<span className="block text-xs font-bold text-gs-navy uppercase tracking-wider">Platform & Advisory</span>
<span className="text-[10px] text-gs-slate/60">{hiddenFees.advisoryFee}% management fee</span>
</div>
<span className="font-bold text-xl text-gs-navy">${advisoryCost}</span>
</div>
<div className="flex justify-between items-center bg-gs-light/50 p-5 rounded-2xl border border-gray-100">
<div>
<span className="block text-xs font-bold text-gs-navy uppercase tracking-wider">Estimated Trading Costs</span>
<span className="text-[10px] text-gs-slate/60">Bid/ask spreads & execution</span>
</div>
<span className="font-bold text-xl text-gs-navy">${hiddenFees.tradingCosts.toFixed(2)}</span>
</div>
</div>
<div className="bg-gs-navy rounded-2xl p-6 text-white flex justify-between items-center shadow-lg">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-white/5 rounded-xl flex items-center justify-center text-gs-gold">
<Activity size={24} />
</div>
<div>
<p className="text-[10px] font-bold text-white/40 uppercase tracking-widest">Total Yearly Impact</p>
<p className="text-2xl font-bold text-gs-gold">${totalCost}</p>
</div>
</div>
<div className="text-right">
<p className="text-[9px] font-bold text-white/40 uppercase tracking-widest mb-1">Fee Rating</p>
<span className="px-3 py-1 bg-gs-gold text-gs-navy text-[10px] font-black uppercase rounded-lg">
{portfolio.feeImpact}
</span>
</div>
</div>
<p className="text-[11px] text-gs-slate/60 leading-relaxed italic text-center px-4">
"The most expensive investment is the one with hidden costs. We provide this report to ensure your capital works for you, not the middleman."
</p>
<button
onClick={() => setIsModalOpen(false)}
className="w-full bg-gs-navy text-white py-4 rounded-2xl font-bold text-sm hover:bg-gs-navy/95 transition-all shadow-xl shadow-gs-navy/20 active:scale-[0.98]"
>
Close Report
</button>
</div>
</motion.div>
</div>
)}
</AnimatePresence>
</>
);
}
|