Upload folder using huggingface_hub

.gitattributes

@@ -1,19 +1,3 @@
 *.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.svg filter=lfs diff=lfs merge=lfs -text
-node_modules/@esbuild/win32-x64/esbuild.exe filter=lfs diff=lfs merge=lfs -text
-node_modules/@rollup/rollup-win32-x64-gnu/rollup.win32-x64-gnu.node filter=lfs diff=lfs merge=lfs -text
-node_modules/@rollup/rollup-win32-x64-msvc/rollup.win32-x64-msvc.node filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-fs/prebuilds/ios-arm64/bare-fs.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-fs/prebuilds/win32-arm64/bare-fs.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-fs/prebuilds/win32-x64/bare-fs.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-os/prebuilds/win32-arm64/bare-os.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-os/prebuilds/win32-x64/bare-os.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/android-arm64/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/android-x64/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/darwin-arm64/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/ios-arm64/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/ios-arm64-simulator/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/linux-x64/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/win32-arm64/bare-url.bare filter=lfs diff=lfs merge=lfs -text
-node_modules/bare-url/prebuilds/win32-x64/bare-url.bare filter=lfs diff=lfs merge=lfs -text

src/components/FeeTransparencyModule.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
-import { Search } from 'lucide-react';
+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
@@ -11,48 +13,137 @@ export default function FeeTransparencyModule({ portfolio }) {
   const totalCost = (parseFloat(expenseRatioCost) + parseFloat(advisoryCost) + hiddenFees.tradingCosts).toFixed(2);
 
   return (
-    <div className="bg-gs-navy text-white rounded-2xl p-8 shadow-lg relative overflow-hidden">
-      {/* Background Accent */}
-      <div className="absolute -right-10 -top-10 w-40 h-40 bg-white/5 rounded-full blur-2xl"></div>
-
-      <div className="relative z-10">
-        <header className="mb-6 flex justify-between items-end border-b border-white/10 pb-4">
-          <div>
-            <h2 className="text-2xl font-light mb-1 flex items-center">
-              <Search className="mr-2 text-gs-gold" size={24} /> Radical Transparency
-            </h2>
-            <p className="text-white/60 text-sm font-light">What you actually pay per $10,000 invested yearly</p>
-          </div>
-          <div className="text-right">
-            <span className="text-xs uppercase tracking-widest text-gs-gold font-semibold block mb-1">Fee Rating</span>
-            <span className="text-lg font-medium">{portfolio.feeImpact}</span>
+    <>
+      <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>
-        </header>
 
-        <div className="space-y-4 font-light text-sm">
-          <div className="flex justify-between items-center bg-white/5 p-3 rounded-lg">
-            <span className="text-white/80">Fund Expense Ratios ({hiddenFees.expenseRatio}%)</span>
-            <span className="font-medium text-white">${expenseRatioCost}</span>
-          </div>
-          <div className="flex justify-between items-center bg-white/5 p-3 rounded-lg">
-            <span className="text-white/80">Platform/Advisory Fee ({hiddenFees.advisoryFee}%)</span>
-            <span className="font-medium text-white">${advisoryCost}</span>
-          </div>
-          <div className="flex justify-between items-center bg-white/5 p-3 rounded-lg">
-            <span className="text-white/80">Estimated Trading Costs</span>
-            <span className="font-medium text-white">${hiddenFees.tradingCosts.toFixed(2)}</span>
-          </div>
-          
-          <div className="flex justify-between items-center pt-4 border-t border-white/10">
-            <span className="font-medium">Total Yearly Cost</span>
-            <span className="text-xl font-medium text-gs-gold">${totalCost}</span>
+          <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>
-        
-        <p className="text-xs text-white/40 mt-6 italic">
-          *Many traditional brokerages hide these numbers in dense prospectuses. We show them to you upfront so there are no surprises.
-        </p>
-      </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>
+    </>
   );
 }

src/components/HoldingsList.jsx

@@ -0,0 +1,304 @@
+import React, { useState, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  ChevronDown, 
+  ChevronUp, 
+  Plus, 
+  Search, 
+  TrendingUp, 
+  TrendingDown, 
+  Trash2,
+  PieChart as PieIcon,
+  BarChart3,
+  Info
+} from 'lucide-react';
+import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
+import InvestmentCommittee from './InvestmentCommittee';
+
+export default function HoldingsList({ 
+  allocation, 
+  prices, 
+  onAddClick, 
+  onAssetClick,
+  onRemoveAsset 
+}) {
+  const [expandedId, setExpandedId] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const filteredAllocation = useMemo(() => {
+    return allocation.filter(asset => 
+      asset.ticker.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      asset.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [allocation, searchTerm]);
+
+  const toggleExpand = (ticker) => {
+    setExpandedId(expandedId === ticker ? null : ticker);
+  };
+
+  return (
+    <div className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden">
+      {/* Header section matching the user's requested layout */}
+      <div className="p-6 border-b border-gray-50 flex flex-col md:flex-row justify-between items-center gap-4 bg-gs-light/30">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-gs-navy rounded-xl text-white shadow-lg shadow-gs-navy/20">
+            <BarChart3 size={20} />
+          </div>
+          <h2 className="text-xl font-bold text-gs-navy tracking-tight">Portfolio Holdings</h2>
+        </div>
+        
+        <div className="flex items-center gap-3 w-full md:w-auto">
+          <div className="relative flex-1 md:flex-none">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gs-slate/40" size={16} />
+            <input 
+              type="text" 
+              placeholder="Search holdings..." 
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10 pr-4 py-2 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-gs-gold/30 focus:border-gs-gold transition-all w-full md:w-64 shadow-sm"
+            />
+          </div>
+          <button 
+            onClick={onAddClick}
+            className="flex items-center gap-2 px-4 py-2 bg-gs-navy text-white rounded-xl hover:bg-gs-gold hover:text-gs-navy transition-all shadow-md font-bold text-sm whitespace-nowrap group"
+          >
+            <Plus size={16} className="group-hover:rotate-90 transition-transform duration-300" />
+            Add Holding
+          </button>
+        </div>
+      </div>
+
+      {/* Table Header */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-left border-collapse">
+          <thead>
+            <tr className="text-[10px] font-bold text-gs-slate/50 uppercase tracking-[0.1em] border-b border-gray-50">
+              <th className="px-6 py-4 font-bold">Asset</th>
+              <th className="px-6 py-4 font-bold text-right">Price</th>
+              <th className="px-6 py-4 font-bold text-right hidden sm:table-cell">Shares</th>
+              <th className="px-6 py-4 font-bold text-right">Value</th>
+              <th className="px-6 py-4 font-bold text-right hidden lg:table-cell">Avg Cost</th>
+              <th className="px-6 py-4 font-bold text-right hidden md:table-cell">Gain/Loss</th>
+              <th className="px-6 py-4 font-bold text-right">Return</th>
+              <th className="px-6 py-4 font-bold text-right">Alloc</th>
+              <th className="px-4 py-4 w-10"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredAllocation.length > 0 ? (
+              filteredAllocation.map((asset) => (
+                <HoldingRow 
+                  key={asset.ticker} 
+                  asset={asset} 
+                  priceData={prices[asset.ticker]}
+                  isExpanded={expandedId === asset.ticker}
+                  onToggle={() => toggleExpand(asset.ticker)}
+                  onRemove={() => onRemoveAsset(asset.ticker)}
+                />
+              ))
+            ) : (
+              <tr>
+                <td colSpan="9" className="px-6 py-20 text-center">
+                  <div className="flex flex-col items-center gap-3">
+                    <div className="p-4 bg-gs-light rounded-full text-gs-slate/20">
+                      <Search size={40} />
+                    </div>
+                    <p className="text-gs-slate font-light text-lg">No holdings found matching your search.</p>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function HoldingRow({ asset, priceData, isExpanded, onToggle, onRemove }) {
+  const currentPrice = priceData?.price || 0;
+  const marketValue = asset.shares * currentPrice;
+  const totalCost = asset.shares * (asset.avgCost || 0);
+  const gainLoss = marketValue - totalCost;
+  const returnPct = (totalCost > 0 && !isNaN(gainLoss)) ? (gainLoss / totalCost) * 100 : 0;
+  
+  const isPositive = gainLoss >= 0;
+
+  return (
+    <>
+      <tr 
+        onClick={onToggle}
+        className={`group cursor-pointer border-b border-gray-50 transition-all ${isExpanded ? 'bg-gs-gold/5' : 'hover:bg-gs-light/50'}`}
+      >
+        {/* Asset Column */}
+        <td className="px-6 py-4">
+          <div className="flex items-center gap-4">
+            <div 
+              className="w-10 h-10 rounded-xl flex items-center justify-center text-white font-bold text-xs shadow-inner"
+              style={{ backgroundColor: asset.color }}
+            >
+              {asset.ticker?.substring(0, 2) || '??'}
+            </div>
+            <div>
+              <div className="flex items-center gap-2">
+                <span className="font-bold text-gs-navy uppercase tracking-wide">{asset.ticker}</span>
+                <span className="text-[10px] px-1.5 py-0.5 bg-gs-light text-gs-slate font-bold rounded uppercase">
+                  {asset.type === 'mf' ? 'ETF' : 'STOCK'}
+                </span>
+              </div>
+              <p className="text-xs text-gs-slate/60 font-medium truncate max-w-[120px]">{asset.name}</p>
+              {priceData?.percent !== undefined && !isNaN(priceData.percent) && (
+                <div className={`flex items-center gap-1 text-[10px] font-bold mt-0.5 ${priceData.percent >= 0 ? 'text-green-600' : 'text-red-500'}`}>
+                  {priceData.percent >= 0 ? '▲' : '▼'} {Math.abs(priceData.percent).toFixed(2)}% today
+                </div>
+              )}
+            </div>
+          </div>
+        </td>
+
+        {/* Price Column */}
+        <td className="px-6 py-4 text-right">
+          <p className="font-bold text-gs-navy">${currentPrice.toFixed(2)}</p>
+        </td>
+
+        {/* Shares Column */}
+        <td className="px-6 py-4 text-right hidden sm:table-cell">
+          <p className="text-gs-slate font-medium">{asset.shares}</p>
+        </td>
+
+        {/* Value Column */}
+        <td className="px-6 py-4 text-right">
+          <p className="font-bold text-gs-navy">${marketValue.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</p>
+        </td>
+
+        {/* Avg Cost Column */}
+        <td className="px-6 py-4 text-right hidden lg:table-cell">
+          <p className="text-gs-slate/60 font-medium">${(asset.avgCost || 0).toFixed(2)}</p>
+        </td>
+
+        {/* Gain/Loss Column */}
+        <td className="px-6 py-4 text-right hidden md:table-cell">
+          <p className={`font-bold ${isPositive ? 'text-green-600' : 'text-red-500'}`}>
+            {isPositive ? '+' : ''}${Math.abs(gainLoss).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
+          </p>
+        </td>
+
+        {/* Return Column */}
+        <td className="px-6 py-4 text-right">
+          <div className={`inline-flex items-center px-2 py-1 rounded-lg text-xs font-bold ${isPositive ? 'bg-green-50 text-green-600' : 'bg-red-50 text-red-500'}`}>
+            {isPositive ? '+' : ''}{returnPct.toFixed(2)}%
+          </div>
+        </td>
+
+        {/* Alloc Column */}
+        <td className="px-6 py-4 text-right">
+          <div className="flex flex-col items-end gap-1.5">
+            <span className="font-bold text-gs-navy text-xs">{asset.value.toFixed(1)}%</span>
+            <div className="w-16 h-1.5 bg-gs-light rounded-full overflow-hidden shadow-inner">
+              <div 
+                className="h-full rounded-full transition-all duration-1000"
+                style={{ width: `${asset.value}%`, backgroundColor: asset.color }}
+              ></div>
+            </div>
+          </div>
+        </td>
+
+        {/* Actions/Expand Column */}
+        <td className="px-4 py-4" onClick={(e) => e.stopPropagation()}>
+           <div className="flex items-center gap-2">
+            <button 
+              onClick={() => onRemove()}
+              className="p-1.5 text-gs-slate/20 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all opacity-0 group-hover:opacity-100"
+              title="Remove Holding"
+            >
+              <Trash2 size={14} />
+            </button>
+            <div className={`text-gs-slate/30 group-hover:text-gs-gold transition-colors ${isExpanded ? 'rotate-180' : ''}`}>
+              <ChevronDown size={18} />
+            </div>
+           </div>
+        </td>
+      </tr>
+
+      {/* Expanded Section */}
+      <AnimatePresence>
+        {isExpanded && (
+          <motion.tr
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="bg-gs-light/30 border-b border-gray-50 overflow-hidden"
+          >
+            <td colSpan="9" className="p-0">
+              <div className="p-6 grid grid-cols-1 xl:grid-cols-3 gap-8">
+                {/* Visual Analysis */}
+                <div className="xl:col-span-2 space-y-4">
+                  <div className="flex justify-between items-end">
+                    <div>
+                      <h4 className="text-sm font-bold text-gs-navy uppercase tracking-wider mb-1">Price Performance</h4>
+                      <p className="text-xs text-gs-slate/60">Real-time market tracking for {asset.ticker}</p>
+                    </div>
+                    <div className="flex gap-2">
+                      <span className="text-[10px] font-bold px-2 py-1 bg-white border border-gray-100 rounded-lg shadow-sm">1 Month</span>
+                    </div>
+                  </div>
+                  
+                  <div className="h-48 bg-white p-4 rounded-2xl border border-gray-100 shadow-sm">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <AreaChart data={priceData?.history || []}>
+                        <defs>
+                          <linearGradient id={`color-${asset.ticker}`} x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="5%" stopColor={asset.color} stopOpacity={0.1}/>
+                            <stop offset="95%" stopColor={asset.color} stopOpacity={0}/>
+                          </linearGradient>
+                        </defs>
+                        <Tooltip 
+                          contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}
+                        />
+                        <Area 
+                          type="monotone" 
+                          dataKey="price" 
+                          stroke={asset.color} 
+                          strokeWidth={2} 
+                          fill={`url(#color-${asset.ticker})`} 
+                        />
+                      </AreaChart>
+                    </ResponsiveContainer>
+                  </div>
+
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="bg-white p-3 rounded-xl border border-gray-100 shadow-sm">
+                      <p className="text-[10px] font-bold text-gs-slate/40 uppercase mb-1">Volatility</p>
+                      <p className="text-sm font-bold text-gs-navy">Moderate</p>
+                    </div>
+                    <div className="bg-white p-3 rounded-xl border border-gray-100 shadow-sm">
+                      <p className="text-[10px] font-bold text-gs-slate/40 uppercase mb-1">Buy Price</p>
+                      <p className="text-sm font-bold text-gs-navy">${(asset.avgCost || 0).toFixed(2)}</p>
+                    </div>
+                    <div className="bg-white p-3 rounded-xl border border-gray-100 shadow-sm">
+                      <p className="text-[10px] font-bold text-gs-slate/40 uppercase mb-1">Hold Since</p>
+                      <p className="text-sm font-bold text-gs-navy">{new Date(asset.dateBought).toLocaleDateString()}</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* AI Analysis Sidebar */}
+                <div className="space-y-4">
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="w-6 h-6 rounded-lg bg-gs-gold/20 flex items-center justify-center text-gs-gold">
+                      <Info size={14} />
+                    </div>
+                    <h4 className="text-sm font-bold text-gs-navy uppercase tracking-wider">AI Investment Thesis</h4>
+                  </div>
+                  <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+                    <InvestmentCommittee ticker={asset.ticker} inline={true} />
+                  </div>
+                </div>
+              </div>
+            </td>
+          </motion.tr>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

src/components/Indicators.jsx

@@ -2,19 +2,19 @@ import React, { useState } from 'react';
 import { Activity, ShieldAlert, Info, X, PieChart, DollarSign, Target } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-export default function Indicators({ portfolio }) {
+export default function Indicators({ portfolio, isFlattened = false }) {
   const [activeInfo, setActiveInfo] = useState(null); // 'health' or 'risk'
 
   // A simple gauge visualization using SVG
   const dashArray = 283; // 2 * pi * r (r=45)
   const dashOffset = dashArray - (dashArray * portfolio.healthScore) / 100;
 
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
+  const content = (
+    <>
       {/* Portfolio Health Score */}
       <div 
         onClick={() => setActiveInfo('health')}
-        className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex items-center justify-between cursor-pointer hover:border-gs-gold transition-all group"
+        className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex items-center justify-between cursor-pointer hover:border-gs-gold transition-all group h-full"
       >
         <div>
           <h3 className="text-sm text-gs-slate uppercase tracking-wider mb-1 font-medium flex items-center">
@@ -44,7 +44,7 @@ export default function Indicators({ portfolio }) {
       {/* Risk Meter */}
       <div 
         onClick={() => setActiveInfo('risk')}
-        className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col justify-center cursor-pointer hover:border-gs-gold transition-all group"
+        className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col justify-center cursor-pointer hover:border-gs-gold transition-all group h-full"
       >
         <h3 className="text-sm text-gs-slate uppercase tracking-wider mb-4 font-medium flex items-center">
           <ShieldAlert size={16} className="mr-2 text-gs-gold" /> Risk Level
@@ -163,6 +163,12 @@ export default function Indicators({ portfolio }) {
           </div>
         )}
       </AnimatePresence>
+    </>
+  );
+
+  return isFlattened ? content : (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative">
+      {content}
     </div>
   );
 }

src/components/InvestmentCommittee.jsx

@@ -44,12 +44,16 @@ const mockDebates = {
   ]
 };
 
-export default function InvestmentCommittee({ ticker, isDebating, setIsDebating }) {
+export default function InvestmentCommittee({ ticker, isDebating: externalIsDebating, setIsDebating: externalSetIsDebating, inline = false }) {
   const [messages, setMessages] = useState([]);
   const [convictionScore, setConvictionScore] = useState(null);
   const [loading, setLoading] = useState(false);
+  const [internalIsDebating, setInternalIsDebating] = useState(false);
   const scrollRef = useRef(null);
 
+  const isDebating = externalIsDebating !== undefined ? externalIsDebating : internalIsDebating;
+  const setIsDebating = externalSetIsDebating !== undefined ? externalSetIsDebating : setInternalIsDebating;
+
   useEffect(() => {
     setMessages([]);
     setConvictionScore(null);
@@ -147,37 +151,35 @@ export default function InvestmentCommittee({ ticker, isDebating, setIsDebating
       } else {
         clearInterval(interval);
         setLoading(false);
+        setIsDebating(false);
       }
     }, 1200);
   };
 
   return (
-    <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col h-[500px]">
-      <header className="mb-4 flex justify-between items-center border-b pb-4">
+    <div className={`bg-white rounded-2xl shadow-sm border border-gray-100 flex flex-col ${inline ? 'h-[350px] p-4' : 'h-[500px] p-6'}`}>
+      <header className={`flex justify-between items-center border-b ${inline ? 'mb-2 pb-2' : 'mb-4 pb-4'}`}>
         <div>
-          <h2 className="text-xl font-medium text-gs-navy flex items-center">
-            <Users className="mr-2 text-gs-gold" size={20} /> AI Investment Committee
+          <h2 className={`${inline ? 'text-sm' : 'text-xl'} font-medium text-gs-navy flex items-center`}>
+            <Users className={`${inline ? 'mr-1.5' : 'mr-2'} text-gs-gold`} size={inline ? 16 : 20} /> AI Committee
           </h2>
-          <p className="text-sm text-gs-slate font-light mt-1">
-            {ticker ? `Analyzing: ${ticker}` : 'Select an asset from your portfolio chart to debate.'}
-          </p>
         </div>
         {ticker && !isDebating && !convictionScore && (
           <button 
             onClick={runDebate}
             disabled={loading}
-            className="flex items-center px-4 py-2 bg-gs-navy text-white text-sm rounded-lg hover:bg-gs-navy/90 transition-colors"
+            className={`flex items-center bg-gs-navy text-white rounded-lg hover:bg-gs-navy/90 transition-colors font-bold ${inline ? 'px-2 py-1 text-[10px]' : 'px-4 py-2 text-sm'}`}
           >
-            {loading ? <Loader2 size={16} className="animate-spin mr-2" /> : <PlayCircle size={16} className="mr-2" />}
-            Start Debate
+            {loading ? <Loader2 size={inline ? 12 : 16} className="animate-spin mr-1.5" /> : <PlayCircle size={inline ? 12 : 16} className="mr-1.5" />}
+            Debate
           </button>
         )}
       </header>
 
-      <div className="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar" ref={scrollRef}>
+      <div className="flex-1 overflow-y-auto space-y-3 pr-1 custom-scrollbar" ref={scrollRef}>
         {!ticker && (
-          <div className="h-full flex items-center justify-center text-gray-400 text-sm italic">
-            Waiting for asset selection...
+          <div className="h-full flex items-center justify-center text-gray-400 text-xs italic">
+            Waiting for selection...
           </div>
         )}
         
@@ -187,13 +189,13 @@ export default function InvestmentCommittee({ ticker, isDebating, setIsDebating
               key={idx}
               initial={{ opacity: 0, y: 10 }}
               animate={{ opacity: 1, y: 0 }}
-              className="flex gap-3"
+              className="flex gap-2"
             >
-              <div className={`mt-1 flex-shrink-0 w-8 h-8 rounded-full ${agents[msg.agent].bg} ${agents[msg.agent].color} flex items-center justify-center`}>
+              <div className={`mt-0.5 flex-shrink-0 w-6 h-6 rounded-lg ${agents[msg.agent].bg} ${agents[msg.agent].color} flex items-center justify-center`}>
                 {agents[msg.agent].icon}
               </div>
-              <div className="bg-gray-50 rounded-xl p-3 text-sm text-gs-slate border border-gray-100 w-full">
-                <span className={`text-xs font-semibold uppercase tracking-wider block mb-1 ${agents[msg.agent].color}`}>
+              <div className="bg-gray-50 rounded-xl p-2.5 text-[11px] text-gs-slate border border-gray-100 w-full leading-relaxed">
+                <span className={`text-[9px] font-bold uppercase tracking-wider block mb-0.5 ${agents[msg.agent].color}`}>
                   {agents[msg.agent].name}
                 </span>
                 {msg.text}
@@ -203,8 +205,8 @@ export default function InvestmentCommittee({ ticker, isDebating, setIsDebating
         </AnimatePresence>
         
         {loading && messages.length > 0 && messages.length < 4 && (
-          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex items-center text-gray-400 text-sm ml-11">
-            <Loader2 size={14} className="animate-spin mr-2" /> Typing...
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex items-center text-gray-400 text-[10px] ml-8">
+            <Loader2 size={10} className="animate-spin mr-1.5" /> Typing...
           </motion.div>
         )}
       </div>
@@ -213,24 +215,18 @@ export default function InvestmentCommittee({ ticker, isDebating, setIsDebating
         <motion.div 
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          className="mt-4 pt-4 border-t"
+          className={`mt-2 pt-2 border-t`}
         >
-          <div className="bg-gs-light p-4 rounded-xl">
+          <div className="bg-gs-light p-3 rounded-xl border border-gs-gold/10">
             <div className="flex justify-between items-center">
-              <span className="font-medium text-gs-navy">Consensus Conviction Score</span>
+              <span className="text-[10px] font-bold text-gs-navy uppercase">Conviction Score</span>
               <div className="flex items-center">
-                <span className={`text-2xl font-bold ${convictionScore >= 70 ? 'text-green-600' : convictionScore >= 40 ? 'text-gs-gold' : 'text-red-500'}`}>
+                <span className={`text-lg font-bold ${convictionScore >= 70 ? 'text-green-600' : convictionScore >= 40 ? 'text-gs-gold' : 'text-red-500'}`}>
                   {convictionScore}
                 </span>
-                <span className="text-gray-400 ml-1">/ 100</span>
+                <span className="text-[10px] text-gray-400 ml-0.5">/ 100</span>
               </div>
             </div>
-            <p className="text-[10px] text-gs-slate mt-2 italic leading-tight border-t border-gray-200 pt-2">
-              The committee's confidence in this asset's current risk-to-reward. 
-              <span className="font-bold ml-1">70+ Overweight</span>, 
-              <span className="font-bold ml-1">40-69 Hold</span>, 
-              <span className="font-bold ml-1">Below 40 Underweight</span>.
-            </p>
           </div>
         </motion.div>
       )}

src/components/StockPopup.jsx

@@ -13,7 +13,7 @@ const TIMEFRAME_DAYS = {
   'ALL': 365
 };
 
-export default function StockPopup({ ticker, assetName, onClose }) {
+export default function StockPopup({ ticker, assetName, onClose, allHoldings = [], prices = {} }) {
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(false);
   const [isDebating, setIsDebating] = useState(false);
@@ -32,6 +32,20 @@ export default function StockPopup({ ticker, assetName, onClose }) {
     loadData();
   }, [ticker]);
 
+  // Calculate Top Performers
+  const topPerformers = useMemo(() => {
+    if (!allHoldings.length || !prices) return [];
+    
+    return allHoldings
+      .map(asset => ({
+        ...asset,
+        perf: prices[asset.ticker]?.percent || 0,
+        currentPrice: prices[asset.ticker]?.price || 0
+      }))
+      .sort((a, b) => b.perf - a.perf)
+      .slice(0, 5);
+  }, [allHoldings, prices]);
+
   const viewData = useMemo(() => {
     if (!data) return null;
     
@@ -77,11 +91,11 @@ export default function StockPopup({ ticker, assetName, onClose }) {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
       <div 
-        className="w-full max-w-4xl max-h-[90vh] overflow-y-auto rounded-xl shadow-2xl flex flex-col animate-in zoom-in-95 duration-200"
+        className="w-full max-w-5xl max-h-[90vh] overflow-y-auto rounded-xl shadow-2xl flex flex-col animate-in zoom-in-95 duration-200"
         style={{ backgroundColor: bgColor }}
       >
         {/* Header */}
-        <div className="p-6 pb-2 flex justify-between items-start sticky top-0 bg-[#111111] z-10 border-b border-gray-800">
+        <div className="p-6 pb-4 flex justify-between items-start sticky top-0 bg-[#111111] z-10 border-b border-gray-800">
           <div>
             <h2 className="text-2xl font-bold text-white flex items-center">
               {assetName} <Star size={18} className="ml-3 text-gray-500 hover:text-yellow-400 cursor-pointer" />
@@ -102,10 +116,10 @@ export default function StockPopup({ ticker, assetName, onClose }) {
           </button>
         </div>
 
-        <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="p-8 grid grid-cols-1 lg:grid-cols-12 gap-10">
           {/* Main Chart Area */}
-          <div className="lg:col-span-2">
-            <div className="h-72 w-full mt-4">
+          <div className="lg:col-span-8">
+            <div className="h-80 w-full mt-4">
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart data={viewData.history} margin={{ top: 10, right: 0, left: 0, bottom: 0 }}>
                   <defs>
@@ -135,15 +149,15 @@ export default function StockPopup({ ticker, assetName, onClose }) {
             </div>
 
             {/* Time Controls */}
-            <div className="flex space-x-4 mt-6 border-b border-gray-800 pb-2">
+            <div className="flex space-x-6 mt-6 border-b border-gray-800 pb-2">
               {['1W', '1M', '3M', '1Y', 'ALL'].map(t => (
                 <button 
                   key={t} 
                   onClick={() => setTimeframe(t)}
-                  className={`text-sm font-medium pb-2 border-b-2 transition-colors ${
+                  className={`text-sm font-bold pb-2 border-b-2 transition-colors ${
                     t === timeframe 
                       ? (viewData.isPositive ? 'text-[#00C805] border-[#00C805]' : 'text-[#FF5000] border-[#FF5000]') 
-                      : 'text-gray-500 border-transparent hover:text-gray-300'
+                      : 'text-gray-600 border-transparent hover:text-gray-300'
                   }`}
                 >
                   {t}
@@ -151,15 +165,7 @@ export default function StockPopup({ ticker, assetName, onClose }) {
               ))}
             </div>
 
-            <div className="mt-6 text-gray-300 text-sm leading-relaxed">
-              <p>Historical charting for {assetName} over the selected period. Notice the volatility patterns represented by the area chart.</p>
-            </div>
-          </div>
-
-          {/* Right Sidebar: AI Committee */}
-          <div className="lg:col-span-1">
-            {/* We render the Investment Committee inside a styled container so it fits the dark theme or stands out as a module */}
-            <div className="bg-white rounded-xl shadow-inner overflow-hidden border border-gray-200">
+            <div className="mt-8">
                <InvestmentCommittee 
                 ticker={ticker}
                 isDebating={isDebating}
@@ -167,6 +173,57 @@ export default function StockPopup({ ticker, assetName, onClose }) {
               />
             </div>
           </div>
+
+          {/* Right Sidebar: Top Performers */}
+          <div className="lg:col-span-4 space-y-8">
+            <div>
+              <h3 className="text-white text-xs font-black uppercase tracking-[0.2em] mb-8 flex items-center gap-3">
+                <span className="text-lg">🏆</span> Top Performers
+              </h3>
+              
+              <div className="space-y-6">
+                {topPerformers.map((asset, idx) => (
+                  <div key={asset.ticker} className="flex items-center justify-between group">
+                    <div className="flex items-center gap-4">
+                      <div className="w-6 flex justify-center">
+                        {idx === 0 ? <span className="text-lg">🥇</span> : 
+                         idx === 1 ? <span className="text-lg">🥈</span> : 
+                         idx === 2 ? <span className="text-lg">🥉</span> : 
+                         <div className="p-1.5 bg-gs-navy rounded-md text-gs-gold/50"><TrendingUp size={12} /></div>}
+                      </div>
+                      
+                      <div 
+                        className="w-12 h-12 rounded-xl flex items-center justify-center text-[10px] font-black text-gs-navy"
+                        style={{ backgroundColor: asset.color }}
+                      >
+                        {asset.ticker}
+                      </div>
+                      
+                      <div>
+                        <p className="text-sm font-bold text-white tracking-tight">{asset.ticker}</p>
+                        <p className="text-[10px] text-gray-500 font-medium tracking-wide">${asset.currentPrice.toLocaleString()}</p>
+                      </div>
+                    </div>
+                    
+                    <div className="text-right">
+                      <span className={`text-sm font-black ${asset.perf >= 0 ? 'text-[#00C805]' : 'text-[#FF5000]'}`}>
+                        {asset.perf >= 0 ? '+' : ''}{asset.perf.toFixed(2)}%
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="pt-8 border-t border-gray-800">
+               <div className="bg-gs-navy/30 rounded-2xl p-5 border border-white/5">
+                 <h4 className="text-[10px] font-bold text-gs-gold uppercase tracking-widest mb-3">Portfolio Insight</h4>
+                 <p className="text-xs text-gray-400 leading-relaxed">
+                   {assetName} currently ranks #{topPerformers.findIndex(a => a.ticker === ticker) + 1} among your top-tier performers.
+                 </p>
+               </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/data/mockData.js

@@ -1,11 +1,11 @@
 export const mockPortfolios = {
   Cautious: {
     allocation: [
-      { name: 'Vanguard Total Bond (BND)', ticker: 'BND', value: 40, color: '#1E293B', shares: 145, dateBought: '2023-01-15', type: 'mf' },
-      { name: 'Vanguard Intl Bond (BNDX)', ticker: 'BNDX', value: 20, color: '#334155', shares: 85, dateBought: '2023-03-22', type: 'mf' },
-      { name: 'SPDR S&P 500 (SPY)', ticker: 'SPY', value: 15, color: '#C5A880', shares: 12, dateBought: '2022-11-10', type: 'mf' },
-      { name: 'Johnson & Johnson (JNJ)', ticker: 'JNJ', value: 15, color: '#64748B', shares: 35, dateBought: '2023-05-05', type: 'stock' },
-      { name: 'Cash Equivalents', ticker: 'CASH', value: 10, color: '#E5E7EB', shares: 2500, dateBought: '2024-01-01', type: 'stock' }
+      { name: 'Vanguard Total Bond (BND)', ticker: 'BND', value: 40, color: '#1E293B', shares: 145, avgCost: 74.50, dateBought: '2023-01-15', type: 'mf' },
+      { name: 'Vanguard Intl Bond (BNDX)', ticker: 'BNDX', value: 20, color: '#334155', shares: 85, avgCost: 48.20, dateBought: '2023-03-22', type: 'mf' },
+      { name: 'SPDR S&P 500 (SPY)', ticker: 'SPY', value: 15, color: '#C5A880', shares: 12, avgCost: 410.00, dateBought: '2022-11-10', type: 'mf' },
+      { name: 'Johnson & Johnson (JNJ)', ticker: 'JNJ', value: 15, color: '#64748B', shares: 35, avgCost: 155.00, dateBought: '2023-05-05', type: 'stock' },
+      { name: 'Cash Equivalents', ticker: 'CASH', value: 10, color: '#E5E7EB', shares: 2500, avgCost: 1.00, dateBought: '2024-01-01', type: 'stock' }
     ],
     riskLevel: 'Low',
     expectedReturn: '4-5%',
@@ -14,12 +14,12 @@ export const mockPortfolios = {
   },
   Balanced: {
     allocation: [
-      { name: 'Vanguard S&P 500 (VOO)', ticker: 'VOO', value: 30, color: '#0B233F', shares: 45, dateBought: '2022-08-14', type: 'mf' },
-      { name: 'Microsoft Corp (MSFT)', ticker: 'MSFT', value: 15, color: '#C5A880', shares: 25, dateBought: '2021-12-01', type: 'stock' },
-      { name: 'Apple Inc. (AAPL)', ticker: 'AAPL', value: 15, color: '#1E293B', shares: 60, dateBought: '2022-02-18', type: 'stock' },
-      { name: 'Vanguard Total Intl (VXUS)', ticker: 'VXUS', value: 15, color: '#64748B', shares: 90, dateBought: '2023-06-30', type: 'mf' },
-      { name: 'Berkshire Hathaway (BRK-B)', ticker: 'BRK-B', value: 10, color: '#334155', shares: 18, dateBought: '2022-05-12', type: 'stock' },
-      { name: 'Vanguard Total Bond (BND)', ticker: 'BND', value: 15, color: '#94A3B8', shares: 70, dateBought: '2023-11-20', type: 'mf' }
+      { name: 'Vanguard S&P 500 (VOO)', ticker: 'VOO', value: 30, color: '#0B233F', shares: 45, avgCost: 380.00, dateBought: '2022-08-14', type: 'mf' },
+      { name: 'Microsoft Corp (MSFT)', ticker: 'MSFT', value: 15, color: '#C5A880', shares: 25, avgCost: 290.00, dateBought: '2021-12-01', type: 'stock' },
+      { name: 'Apple Inc. (AAPL)', ticker: 'AAPL', value: 15, color: '#1E293B', shares: 60, avgCost: 145.00, dateBought: '2022-02-18', type: 'stock' },
+      { name: 'Vanguard Total Intl (VXUS)', ticker: 'VXUS', value: 15, color: '#64748B', shares: 90, avgCost: 52.00, dateBought: '2023-06-30', type: 'mf' },
+      { name: 'Berkshire Hathaway (BRK-B)', ticker: 'BRK-B', value: 10, color: '#334155', shares: 18, avgCost: 310.00, dateBought: '2022-05-12', type: 'stock' },
+      { name: 'Vanguard Total Bond (BND)', ticker: 'BND', value: 15, color: '#94A3B8', shares: 70, avgCost: 72.00, dateBought: '2023-11-20', type: 'mf' }
     ],
     riskLevel: 'Medium',
     expectedReturn: '7-9%',
@@ -28,12 +28,12 @@ export const mockPortfolios = {
   },
   Bold: {
     allocation: [
-      { name: 'Invesco QQQ Trust (QQQ)', ticker: 'QQQ', value: 25, color: '#0B233F', shares: 35, dateBought: '2021-09-10', type: 'mf' },
-      { name: 'Tesla, Inc. (TSLA)', ticker: 'TSLA', value: 20, color: '#C5A880', shares: 40, dateBought: '2022-10-05', type: 'stock' },
-      { name: 'Amazon.com (AMZN)', ticker: 'AMZN', value: 15, color: '#1E293B', shares: 55, dateBought: '2023-02-28', type: 'stock' },
-      { name: 'Google (GOOGL)', ticker: 'GOOGL', value: 15, color: '#64748B', shares: 65, dateBought: '2023-04-14', type: 'stock' },
-      { name: 'JPMorgan Chase (JPM)', ticker: 'JPM', value: 15, color: '#334155', shares: 42, dateBought: '2022-07-22', type: 'stock' },
-      { name: 'Vanguard S&P 500 (VOO)', ticker: 'VOO', value: 10, color: '#94A3B8', shares: 15, dateBought: '2024-01-10', type: 'mf' }
+      { name: 'Invesco QQQ Trust (QQQ)', ticker: 'QQQ', value: 25, color: '#0B233F', shares: 35, avgCost: 320.00, dateBought: '2021-09-10', type: 'mf' },
+      { name: 'Tesla, Inc. (TSLA)', ticker: 'TSLA', value: 20, color: '#C5A880', shares: 40, avgCost: 180.00, dateBought: '2022-10-05', type: 'stock' },
+      { name: 'Amazon.com (AMZN)', ticker: 'AMZN', value: 15, color: '#1E293B', shares: 55, avgCost: 120.00, dateBought: '2023-02-28', type: 'stock' },
+      { name: 'Google (GOOGL)', ticker: 'GOOGL', value: 15, color: '#64748B', shares: 65, avgCost: 110.00, dateBought: '2023-04-14', type: 'stock' },
+      { name: 'JPMorgan Chase (JPM)', ticker: 'JPM', value: 15, color: '#334155', shares: 42, avgCost: 135.00, dateBought: '2022-07-22', type: 'stock' },
+      { name: 'Vanguard S&P 500 (VOO)', ticker: 'VOO', value: 10, color: '#94A3B8', shares: 15, avgCost: 400.00, dateBought: '2024-01-10', type: 'mf' }
     ],
     riskLevel: 'High',
     expectedReturn: '12-15%',

src/pages/Dashboard.jsx

@@ -11,9 +11,10 @@ import MacroTracker from '../components/MacroTracker';
 import StockPopup from '../components/StockPopup';
 import PortfolioHeatmap from '../components/PortfolioHeatmap';
 import FinancialCalculators from '../components/FinancialCalculators';
-import { LayoutGrid, Plus } from 'lucide-react';
-import { AnimatePresence } from 'framer-motion';
+import { LayoutGrid, Plus, PieChart as PieIcon, BarChart3, X, ChevronRight } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
 import StockSearch from '../components/StockSearch';
+import HoldingsList from '../components/HoldingsList';
 
 export default function Dashboard({ riskProfile }) {
   // Initialize with a cached portfolio if available, otherwise an empty one
@@ -26,10 +27,7 @@ export default function Dashboard({ riskProfile }) {
         console.error("Error loading saved portfolio:", e);
       }
     }
-    return {
-      ...mockPortfolios[riskProfile],
-      allocation: []
-    };
+    return mockPortfolios[riskProfile] || { allocation: [] };
   });
 
   // Save to cache whenever portfolio changes
@@ -42,6 +40,7 @@ export default function Dashboard({ riskProfile }) {
   const [activePopupAsset, setActivePopupAsset] = useState(null);
   const [showHeatmap, setShowHeatmap] = useState(false);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isHoldingsOpen, setIsHoldingsOpen] = useState(false);
   const [totals, setTotals] = useState({ value: 0, change: 0, percent: 0, rawValue: 0, loading: true });
   const [prices, setPrices] = useState({});
 
@@ -63,6 +62,10 @@ export default function Dashboard({ riskProfile }) {
       const marketVal = asset.shares * priceData.price;
       const weight = marketTotal > 0 ? (marketVal / marketTotal) * 100 : 0;
       
+      const totalCost = asset.shares * (asset.buyPrice || priceData.price);
+      const gainLoss = marketVal - totalCost;
+      const returnPct = (totalCost > 0 && !isNaN(gainLoss) && isFinite(gainLoss)) ? (gainLoss / totalCost) * 100 : 0;
+      
       const metrics = tickerMetrics[asset.ticker] || { beta: 1, expenseRatio: 0.1 };
       totalBeta += (metrics.beta || 1) * (weight / 100);
       totalExpense += (metrics.expenseRatio || 0.1) * (weight / 100);
@@ -71,7 +74,8 @@ export default function Dashboard({ riskProfile }) {
         ...asset,
         value: Number(weight.toFixed(2)),
         dayChange: priceData.percent,
-        dollarChange: priceData.change
+        dollarChange: priceData.change,
+        returnPct
       };
     });
 
@@ -155,6 +159,32 @@ export default function Dashboard({ riskProfile }) {
     });
   };
 
+  const handleRemoveAsset = (ticker) => {
+    setCurrentPortfolio(prev => {
+      const updatedAllocation = prev.allocation.filter(a => a.ticker !== ticker);
+      
+      // Redistribute value to maintain 100%
+      if (updatedAllocation.length > 0) {
+        const currentSum = updatedAllocation.reduce((acc, a) => acc + a.value, 0);
+        const scale = 100 / currentSum;
+        updatedAllocation.forEach(a => {
+          a.value = Number((a.value * scale).toFixed(2));
+        });
+        
+        // Final adjust for rounding
+        const finalSum = updatedAllocation.reduce((acc, a) => acc + a.value, 0);
+        if (finalSum !== 100) {
+          updatedAllocation[0].value += Number((100 - finalSum).toFixed(2));
+        }
+      }
+
+      return {
+        ...prev,
+        allocation: updatedAllocation
+      };
+    });
+  };
+
   useEffect(() => {
     async function calculateTotals() {
       if (currentPortfolio.allocation.length === 0) {
@@ -176,7 +206,8 @@ export default function Dashboard({ riskProfile }) {
         priceMap[ticker] = {
           price: data.currentPrice,
           change: data.change,
-          percent: (data.change / (data.currentPrice - data.change)) * 100
+          percent: (data.change / (data.currentPrice - data.change)) * 100,
+          history: data.history
         };
         newTotalValue += currentPortfolio.allocation[index].shares * data.currentPrice;
         newTotalChange += (currentPortfolio.allocation[index].shares * data.change);
@@ -197,7 +228,7 @@ export default function Dashboard({ riskProfile }) {
       });
     }
     calculateTotals();
-  }, [JSON.stringify(currentPortfolio.allocation.map(a => `${a.ticker}-${a.shares}`))]); // Only watch ticker/shares, not the derived weights changes
+  }, [JSON.stringify(currentPortfolio.allocation.map(a => `${a.ticker}-${a.shares}`))]);
 
   return (
     <div className="min-h-screen bg-gs-light p-6 md:p-12 relative">
@@ -236,132 +267,101 @@ export default function Dashboard({ riskProfile }) {
           </div>
         </header>
 
-        {/* Top Section: Allocation */}
-        <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 flex flex-col md:flex-row items-center mb-8">
-          <div className="w-full md:w-1/2 h-64">
-            <ResponsiveContainer width="100%" height="100%">
-              <PieChart>
-                <Pie
-                  data={displayPortfolio.allocation}
-                  cx="50%"
-                  cy="50%"
-                  innerRadius={80}
-                  outerRadius={110}
-                  paddingAngle={2}
-                  dataKey="value"
-                  nameKey="name"
-                  stroke="none"
-                >
-                  {displayPortfolio.allocation.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
-                <Tooltip 
-                  formatter={(value, name) => [`${value}%`, name]}
-                  contentStyle={{ borderRadius: '12px', border: 'none', boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }}
-                />
-              </PieChart>
-            </ResponsiveContainer>
-          </div>
-          <div className="w-full md:w-1/2 space-y-4">
-            <div className="flex justify-between items-center mb-4">
-              <h3 className="text-xl font-medium text-gs-navy">Current Allocation</h3>
-              <div className="flex gap-2">
+        {/* Portfolio Overview & Holdings Section */}
+        <div className="space-y-8 mb-10">
+          {/* Top Landscape "Tablet": Allocation & Summary */}
+          <div className="bg-white rounded-[2.5rem] p-10 shadow-xl border border-gray-100 flex flex-col xl:flex-row items-center gap-12 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-gs-gold/5 rounded-full -mr-32 -mt-32 blur-3xl"></div>
+            
+            {/* Left Column: Chart & Composition */}
+            <div className="flex flex-col items-center xl:items-start flex-1 min-w-[320px]">
+              <h3 className="text-2xl font-bold text-gs-navy mb-6 flex items-center gap-3">
+                <PieIcon className="text-gs-gold" size={24} /> Allocation
+              </h3>
+              <div className="w-full h-64 mb-8">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={displayPortfolio.allocation}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={85}
+                      outerRadius={115}
+                      paddingAngle={4}
+                      dataKey="value"
+                      nameKey="name"
+                      stroke="none"
+                    >
+                      {displayPortfolio.allocation.map((entry, index) => (
+                        <Cell key={`cell-${index}`} fill={entry.color} />
+                      ))}
+                    </Pie>
+                    <Tooltip 
+                      contentStyle={{ borderRadius: '16px', border: 'none', boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)' }}
+                      formatter={(value) => [`${value}%`, 'Weight']}
+                    />
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
+              
+              {/* Portfolio Composition moved here under the chart */}
+              <div className="w-full max-w-[300px] mt-2">
+                <div className="flex justify-between text-[10px] font-bold text-gs-navy uppercase tracking-widest mb-2.5">
+                  <span>Equities ({displayPortfolio.stockSplit.toFixed(0)}%)</span>
+                  <span>Fixed Income ({displayPortfolio.mfSplit.toFixed(0)}%)</span>
+                </div>
+                <div className="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden flex shadow-inner">
+                  <div className="h-full bg-gs-navy" style={{ width: `${displayPortfolio.stockSplit}%` }}></div>
+                  <div className="h-full bg-gs-gold" style={{ width: `${displayPortfolio.mfSplit}%` }}></div>
+                </div>
+              </div>
+            </div>
+            
+            {/* Right: Strategy, Transparency & Side-by-Side Actions */}
+            <div className="flex-[1.5] w-full flex flex-col justify-between space-y-6">
+              <div className="space-y-4">
+                <div className="bg-gs-navy rounded-[2rem] p-6 text-white relative overflow-hidden shadow-lg border border-white/5">
+                  <div className="absolute -right-6 -top-6 w-24 h-24 bg-gs-gold/10 rounded-full blur-2xl"></div>
+                  <h4 className="text-[9px] font-bold text-gs-gold uppercase tracking-[0.2em] mb-2.5">Strategy Target</h4>
+                  <p className="text-sm font-light leading-relaxed">
+                    Portfolio optimized for a <span className="font-bold text-gs-gold">{riskProfile}</span> objective.
+                  </p>
+                </div>
+                
+                <FeeTransparencyModule portfolio={displayPortfolio} />
+              </div>
+
+              {/* Side-by-Side Action Buttons at the bottom */}
+              <div className="grid grid-cols-2 gap-4">
                 <button 
-                  onClick={() => setIsSearchOpen(true)}
-                  className="bg-gs-navy text-white p-1.5 rounded-lg hover:bg-gs-gold hover:text-gs-navy transition-all shadow-sm"
-                  title="Add Asset"
+                  onClick={() => setIsHoldingsOpen(true)}
+                  className="flex items-center justify-center gap-3 py-5 bg-gs-navy text-white rounded-2xl hover:bg-gs-gold hover:text-gs-navy transition-all group shadow-xl shadow-gs-navy/20 active:scale-95 border border-white/5"
                 >
-                  <Plus size={18} />
+                  <BarChart3 size={18} className="group-hover:scale-110 transition-transform" />
+                  <span className="font-bold text-xs tracking-tight uppercase">Holdings</span>
                 </button>
                 <button 
                   onClick={() => setShowHeatmap(true)}
-                  className="text-gs-slate hover:text-gs-gold transition-colors p-1"
-                  title="View Heatmap"
+                  className="flex items-center justify-center gap-3 py-5 bg-gs-light text-gs-navy rounded-2xl hover:bg-gs-navy hover:text-white transition-all group active:scale-95 border border-gs-navy/5 shadow-sm"
                 >
-                  <LayoutGrid size={18} />
+                  <LayoutGrid size={18} className="group-hover:scale-110 transition-transform" />
+                  <span className="font-bold text-xs tracking-tight uppercase">Heatmap</span>
                 </button>
               </div>
             </div>
-            
-            {/* Asset Type Split Indicator */}
-            <div className="mb-6 bg-gs-light/30 p-4 rounded-xl border border-gray-100">
-              <div className="flex justify-between text-[10px] font-bold text-gs-slate uppercase tracking-widest mb-2">
-                <span>Stocks ({displayPortfolio.stockSplit.toFixed(2)}%)</span>
-                <span>Mutual Funds ({displayPortfolio.mfSplit.toFixed(2)}%)</span>
-              </div>
-              <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden flex">
-                <div 
-                  className="h-full bg-gs-navy transition-all duration-1000" 
-                  style={{ width: `${displayPortfolio.stockSplit}%` }}
-                ></div>
-                <div 
-                  className="h-full bg-gs-gold transition-all duration-1000" 
-                  style={{ width: `${displayPortfolio.mfSplit}%` }}
-                ></div>
-              </div>
-            </div>
+          </div>
 
-            <p className="text-xs text-gs-slate mb-3 italic">Click an asset to view historical performance and AI analysis.</p>
-            <div className="max-h-60 overflow-y-auto pr-2">
-              {displayPortfolio.allocation.length > 0 ? (
-                displayPortfolio.allocation.map((asset, idx) => (
-                  <button 
-                    key={idx} 
-                    onClick={() => {
-                      if (asset.ticker) {
-                        setActivePopupAsset({ ticker: asset.ticker, name: asset.name });
-                      }
-                    }}
-                    className="w-full text-left flex justify-between items-center p-3 rounded-lg transition-colors mb-2 bg-gs-light/50 hover:bg-gray-100 hover:shadow-sm border border-transparent hover:border-gray-200 group"
-                  >
-                    <div className="flex items-center justify-between w-full">
-                      <div className="flex items-center">
-                        <div className="w-4 h-4 rounded-full mr-3 shadow-sm" style={{ backgroundColor: asset.color }}></div>
-                        <div className="flex flex-col items-start">
-                          <span className="text-gs-slate font-medium text-sm group-hover:text-gs-navy transition-colors">{asset.name}</span>
-                          <div className="flex items-center gap-2 mt-0.5">
-                            <span className="text-[10px] text-gray-400 font-medium">{asset.shares} shares</span>
-                            {asset.dayChange !== undefined && (
-                              <span className={`text-[10px] font-bold ${asset.dayChange >= 0 ? 'text-green-600' : 'text-red-500'}`}>
-                                {asset.dayChange >= 0 ? '+' : ''}${Math.abs(asset.dollarChange || 0).toFixed(2)} ({asset.dayChange >= 0 ? '▲' : '▼'} {Math.abs(asset.dayChange).toFixed(2)}%)
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                      <span className="font-bold text-gs-navy text-sm ml-4">{asset.value.toFixed(2)}%</span>
-                    </div>
-                  </button>
-                ))
-              ) : (
-                <div className="text-center py-12 bg-gs-light/20 rounded-2xl border-2 border-dashed border-gray-200">
-                  <p className="text-gs-slate text-sm font-light mb-6 italic">Your portfolio is currently empty.</p>
-                  <button 
-                    onClick={() => setIsSearchOpen(true)}
-                    className="inline-flex items-center gap-2 px-8 py-3 bg-gs-navy text-white rounded-xl hover:bg-gs-gold hover:text-gs-navy transition-all shadow-lg font-bold"
-                  >
-                    <Plus size={18} />
-                    Build Your Portfolio
-                  </button>
-                </div>
-              )}
-            </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <Indicators portfolio={displayPortfolio} isFlattened={true} />
           </div>
         </div>
 
         {/* Investment & Retirement Planning Section */}
         <FinancialCalculators />
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
-          {/* Left Column: Indicators */}
-          <div className="lg:col-span-2 space-y-8">
-            <Indicators portfolio={displayPortfolio} />
-            <FeeTransparencyModule portfolio={displayPortfolio} />
-          </div>
-
-          {/* Right Column: Rebalancing Engine */}
-          <div className="space-y-8">
+        <div className="grid grid-cols-1 xl:grid-cols-3 gap-8 mt-8">
+          {/* Rebalancing Engine - Spanning more width since Indicators are above */}
+          <div className="xl:col-span-3">
             <RebalancingEngine onScenarioSelect={handleRebalance} />
           </div>
         </div>
@@ -383,8 +383,38 @@ export default function Dashboard({ riskProfile }) {
         ticker={activePopupAsset?.ticker} 
         assetName={activePopupAsset?.name} 
         onClose={closeStockPopup} 
+        allHoldings={displayPortfolio.allocation}
+        prices={prices}
       />
       
+      <AnimatePresence>
+        {isHoldingsOpen && (
+          <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 md:p-10 bg-gs-navy/40 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="w-full max-w-7xl max-h-full overflow-hidden flex flex-col relative"
+            >
+              <button 
+                onClick={() => setIsHoldingsOpen(false)}
+                className="absolute top-4 right-6 z-10 p-2 bg-white/10 hover:bg-white/20 text-white rounded-full transition-all backdrop-blur-md border border-white/10"
+              >
+                <X size={20} />
+              </button>
+              <div className="overflow-y-auto rounded-[2rem] shadow-2xl">
+                <HoldingsList 
+                  allocation={displayPortfolio.allocation}
+                  prices={prices}
+                  onAddClick={() => setIsSearchOpen(true)}
+                  onRemoveAsset={handleRemoveAsset}
+                />
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
       <AnimatePresence>
         {showHeatmap && (
           <PortfolioHeatmap