Total Value
+ ++ {formatCurrency(portfolio.totalValue)} +
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {totalPercentChange >= 0 ? ( + + ) : ( + + )} + {formatPercent(totalPercentChange)} All Time +
+Cash Balance
+ ++ {formatCurrency(portfolio.cashBalance)} +
++ {((portfolio.cashBalance / portfolio.totalValue) * 100).toFixed( + 1, + )} + % of portfolio +
+Daily Change
+ += 0 ? "text-green-600" : "text-red-600"}`} + > + {formatPercent(portfolio.performance.daily)} +
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {formatCurrency( + (portfolio.totalValue * portfolio.performance.daily) / 100, + )} +
+| requestSort("symbol")}
+ className="group px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+ >
+
+ Symbol
+
+ {sortConfig.key === "symbol"
+ ? sortConfig.direction === "asc"
+ ? "\u2191"
+ : "\u2193"
+ : "\u2195"}
+
+
+ |
+ + Company + | + requestSort("shares")}
+ className="group px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+ >
+
+ Shares
+
+ {sortConfig.key === "shares"
+ ? sortConfig.direction === "asc"
+ ? "\u2191"
+ : "\u2193"
+ : "\u2195"}
+
+
+ |
+ requestSort("price")}
+ className="group px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+ >
+
+ Price
+
+ {sortConfig.key === "price"
+ ? sortConfig.direction === "asc"
+ ? "\u2191"
+ : "\u2193"
+ : "\u2195"}
+
+
+ |
+ requestSort("change")}
+ className="group px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+ >
+
+ Change
+
+ {sortConfig.key === "change"
+ ? sortConfig.direction === "asc"
+ ? "\u2191"
+ : "\u2193"
+ : "\u2195"}
+
+
+ |
+ requestSort("value")}
+ className="group px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+ >
+
+ Value
+
+ {sortConfig.key === "value"
+ ? sortConfig.direction === "asc"
+ ? "\u2191"
+ : "\u2193"
+ : "\u2195"}
+
+
+ |
+ requestSort("allocation")}
+ className="group px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
+ >
+
+ Allocation
+
+ {sortConfig.key === "allocation"
+ ? sortConfig.direction === "asc"
+ ? "\u2191"
+ : "\u2193"
+ : "\u2195"}
+
+
+ |
+
|---|---|---|---|---|---|---|
| + {holding.symbol} + | ++ {holding.name} + | ++ {holding.shares.toLocaleString()} + | ++ {formatCurrency(holding.price)} + | += 0 ? "text-green-600" : "text-red-600"}`} + > + {holding.change >= 0 ? ( + + ) : ( + + )} + {formatPercent(holding.change)} + | ++ {formatCurrency(holding.value)} + | +
+
+
+
+
+
+ {holding.allocation.toFixed(1)}%
+
+ = 0 ? "bg-green-500" : "bg-red-500"}`}
+ style={{
+ width: `${Math.min(100, holding.allocation * 3)}%`,
+ }}
+ >
+ |
+
Shares Owned
++ {selectedStock.shares.toLocaleString()} +
+Market Value
++ {formatCurrency(selectedStock.value)} +
+Avg. Cost
++ {formatCurrency(selectedStock.avgCost)} +
+Cost Basis
++ {formatCurrency( + selectedStock.avgCost * selectedStock.shares, + )} +
+Gain/Loss
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {formatCurrency( + (selectedStock.price - selectedStock.avgCost) * + selectedStock.shares, + )} +
+Allocation
++ {selectedStock.allocation.toFixed(2)}% +
+Daily
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {portfolio.performance.daily >= 0 ? ( + + ) : ( + + )} + {formatPercent(portfolio.performance.daily)} +
+Weekly
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {portfolio.performance.weekly >= 0 ? ( + + ) : ( + + )} + {formatPercent(portfolio.performance.weekly)} +
+Monthly
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {portfolio.performance.monthly >= 0 ? ( + + ) : ( + + )} + {formatPercent(portfolio.performance.monthly)} +
+Yearly
+= 0 ? "text-green-600" : "text-red-600"}`} + > + {portfolio.performance.yearly >= 0 ? ( + + ) : ( + + )} + {formatPercent(portfolio.performance.yearly)} +
+