Add ticker formatting utilities and update display logic

Introduces `formatTickerForDisplay` and `normalizeTickerForComparison` in a new `src/lib/tickers.ts` utility. Updates portfolio, rebalance, and schedule-rebalance components to use these functions for consistent ticker display, especially for crypto pairs. Also extends position types to include `assetClass` and `assetSymbol`, and updates logic to fetch and use asset symbols for crypto positions.

Author: BWJ2310

src/components/PortfolioPositions.tsx

@@ -6,6 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { TrendingUp, TrendingDown, RefreshCw, Loader2, Eye, Activity, Clock, AlertCircle, AlertTriangle, Lock } from "lucide-react";
 import { alpacaAPI } from "@/lib/alpaca";
+import { formatTickerForDisplay } from "@/lib/tickers";
 import { useAuth, isSessionValid, hasAlpacaCredentials } from "@/lib/auth";
 import { supabase } from "@/lib/supabase";
 import { useToast } from "@/hooks/use-toast";
@@ -34,6 +35,7 @@ import ScheduleListModal from "./ScheduleListModal";
 
 interface Position {
   symbol: string;
+  displaySymbol: string;
   shares: number;
   avgCost: number;
   currentPrice: number;
@@ -42,6 +44,8 @@ interface Position {
   unrealizedPLPct: number;
   dayChange: number;
   description?: string;
+  assetClass?: string;
+  assetSymbol?: string;
 }
 
 interface PortfolioPositionsProps {
@@ -188,6 +192,7 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
 
         // Calculate today's change from open if we have the data
         const stockData = batchData[pos.symbol];
+        const assetSymbol = stockData?.asset?.symbol;
         if (stockData?.currentBar) {
           const todayOpen = stockData.currentBar.o;
           const priceChange = currentPrice - todayOpen;
@@ -205,14 +210,17 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
 
         return {
           symbol: pos.symbol,
+          displaySymbol: formatTickerForDisplay(pos.symbol, { assetClass: pos.asset_class, assetSymbol }),
           shares: parseFloat(pos.qty),
           avgCost: parseFloat(pos.avg_entry_price),
           currentPrice: currentPrice,
           marketValue: parseFloat(pos.market_value),
           unrealizedPL: parseFloat(pos.unrealized_pl),
           unrealizedPLPct: parseFloat(pos.unrealized_plpc) * 100,
           dayChange: dayChangePercent,
-          description: description
+          description: description,
+          assetClass: pos.asset_class,
+          assetSymbol
         };
       });
 
@@ -610,7 +618,7 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
                       >
                         <TableCell className="font-medium w-[60px]">
                           <Badge variant={selectedStock === position.symbol ? 'default' : 'outline'}>
-                            {position.symbol}
+                            {position.displaySymbol}
                           </Badge>
                         </TableCell>
                         <TableCell className="text-right text-sm px-2">{position.shares.toFixed(2)}</TableCell>

src/components/rebalance/components/PortfolioComposition.tsx

@@ -3,6 +3,7 @@
 
 import { Card } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
+import { formatTickerForDisplay } from "@/lib/tickers";
 import type { RebalancePosition } from "../types";
 
 interface PortfolioCompositionProps {
@@ -25,28 +26,31 @@ export function PortfolioComposition({
 
         {/* Stacked Bar */}
         <div className="w-full h-10 flex rounded-lg overflow-hidden border">
-          {positions.map((position) => (
-            <div
-              key={position.ticker}
-              className="relative group transition-opacity hover:opacity-90"
-              style={{
-                width: `${position.currentAllocation}%`,
-                backgroundColor: positionColors[position.ticker]
-              }}
-            >
-              {/* Show percentage if space allows */}
-              {position.currentAllocation >= 8 && (
-                <span className="absolute inset-0 flex items-center justify-center text-white text-xs font-medium drop-shadow">
-                  {position.currentAllocation.toFixed(1)}%
-                </span>
-              )}
+          {positions.map((position) => {
+            const displayTicker = formatTickerForDisplay(position.ticker, { assetClass: position.assetClass, assetSymbol: position.assetSymbol });
+            return (
+              <div
+                key={position.ticker}
+                className="relative group transition-opacity hover:opacity-90"
+                style={{
+                  width: `${position.currentAllocation}%`,
+                  backgroundColor: positionColors[position.ticker]
+                }}
+              >
+                {/* Show percentage if space allows */}
+                {position.currentAllocation >= 8 && (
+                  <span className="absolute inset-0 flex items-center justify-center text-white text-xs font-medium drop-shadow">
+                    {position.currentAllocation.toFixed(1)}%
+                  </span>
+                )}
 
-              {/* Tooltip on hover */}
-              <div className="opacity-0 group-hover:opacity-100 absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-10 pointer-events-none transition-opacity">
-                {position.ticker}: {position.currentAllocation.toFixed(1)}%
+                {/* Tooltip on hover */}
+                <div className="opacity-0 group-hover:opacity-100 absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 text-white text-xs rounded whitespace-nowrap z-10 pointer-events-none transition-opacity">
+                  {displayTicker}: {position.currentAllocation.toFixed(1)}%
+                </div>
               </div>
-            </div>
-          ))}
+            );
+          })}
 
           {/* Cash portion */}
           {cashAllocation > 0 && (
@@ -70,16 +74,19 @@ export function PortfolioComposition({
 
         {/* Legend */}
         <div className="flex flex-wrap gap-3 text-xs">
-          {positions.map((position) => (
-            <div key={position.ticker} className="flex items-center gap-1.5">
-              <div
-                className="w-3 h-3 rounded"
-                style={{ backgroundColor: positionColors[position.ticker] }}
-              />
-              <span className="font-medium">{position.ticker}:</span>
-              <span className="text-muted-foreground">{position.currentAllocation.toFixed(1)}%</span>
-            </div>
-          ))}
+          {positions.map((position) => {
+            const displayTicker = formatTickerForDisplay(position.ticker, { assetClass: position.assetClass, assetSymbol: position.assetSymbol });
+            return (
+              <div key={position.ticker} className="flex items-center gap-1.5">
+                <div
+                  className="w-3 h-3 rounded"
+                  style={{ backgroundColor: positionColors[position.ticker] }}
+                />
+                <span className="font-medium">{displayTicker}:</span>
+                <span className="text-muted-foreground">{position.currentAllocation.toFixed(1)}%</span>
+              </div>
+            );
+          })}
           {cashAllocation > 0 && (
             <div className="flex items-center gap-1.5">
               <div className="w-3 h-3 rounded bg-gray-500" />
@@ -91,4 +98,4 @@ export function PortfolioComposition({
       </div>
     </Card>
   );
-}
+}

src/components/rebalance/components/StockPositionCard.tsx

@@ -5,6 +5,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Progress } from "@/components/ui/progress";
 import { Badge } from "@/components/ui/badge";
 import { Lock, Eye } from "lucide-react";
+import { formatTickerForDisplay } from "@/lib/tickers";
 import type { RebalancePosition } from "../types";
 
 interface StockPositionCardProps {
@@ -24,8 +25,9 @@ export function StockPositionCard({
   isWatchlist = false,
   onToggle
 }: StockPositionCardProps) {
-  const displayTicker = ticker || position?.ticker || '';
-  
+  const rawTicker = ticker || position?.ticker || '';
+  const displayTicker = formatTickerForDisplay(rawTicker, { assetClass: position?.assetClass, assetSymbol: position?.assetSymbol });
+
   if (isWatchlist && ticker) {
     // Watchlist stock card (simpler version)
     return (
@@ -42,7 +44,7 @@ export function StockPositionCard({
               onClick={(e) => e.stopPropagation()}
               disabled={isDisabled}
             />
-            <span className="font-semibold">{ticker}</span>
+            <span className="font-semibold">{displayTicker}</span>
             {isDisabled && <Lock className="h-4 w-4 text-muted-foreground" />}
             <Badge variant="outline" className="text-xs">
               <Eye className="w-3 h-3 mr-1" />
@@ -81,7 +83,7 @@ export function StockPositionCard({
               onClick={(e) => e.stopPropagation()}
               disabled={isDisabled}
             />
-            <span className="font-semibold text-lg">{position.ticker}</span>
+            <span className="font-semibold text-lg">{displayTicker}</span>
             {isDisabled && <Lock className="h-4 w-4 text-muted-foreground" />}
           </div>
           <div className="text-right">
@@ -116,4 +118,4 @@ export function StockPositionCard({
       </div>
     </div>
   );
-}
+}

src/components/rebalance/hooks/useRebalanceData.ts

@@ -129,9 +129,42 @@ export function useRebalanceData(isOpen: boolean) {
           currentShares: parseFloat(pos.qty || '0'),
           currentValue: parseFloat(pos.market_value || '0'),
           currentAllocation: (parseFloat(pos.market_value || '0') / totalEquity) * 100,
-          avgPrice: parseFloat(pos.avg_entry_price || '0')
+          avgPrice: parseFloat(pos.avg_entry_price || '0'),
+          assetClass: pos.asset_class
         }));
 
+        const cryptoTickers = Array.from(new Set(
+          processedPositions
+            .filter(pos => (pos.assetClass || '').toLowerCase() === 'crypto')
+            .map(pos => pos.ticker)
+        ));
+
+        if (cryptoTickers.length > 0) {
+          const assetSymbolEntries = await Promise.all(
+            cryptoTickers.map(async (ticker) => {
+              try {
+                const asset = await alpacaAPI.getAsset(ticker);
+                const symbol = typeof asset?.symbol === 'string' ? asset.symbol : null;
+                return [ticker, symbol] as const;
+              } catch (error) {
+                console.warn(`Failed to fetch asset metadata for ${ticker}:`, error);
+                return [ticker, null] as const;
+              }
+            })
+          );
+
+          const assetSymbolMap = new Map(
+            assetSymbolEntries.filter(([, symbol]) => typeof symbol === 'string' && !!symbol)
+          );
+
+          processedPositions.forEach((position) => {
+            const assetSymbol = assetSymbolMap.get(position.ticker);
+            if (assetSymbol) {
+              position.assetSymbol = assetSymbol;
+            }
+          });
+        }
+
         // Sort positions by allocation (descending)
         processedPositions.sort((a, b) => b.currentAllocation - a.currentAllocation);
 

src/components/rebalance/tabs/StockSelectionTab.tsx

@@ -11,6 +11,7 @@ import { Loader2, Eye, Lock, AlertCircle } from "lucide-react";
 import { PortfolioComposition } from "../components/PortfolioComposition";
 import { StockPositionCard } from "../components/StockPositionCard";
 import type { RebalancePosition, RebalanceConfig } from "../types";
+import { formatTickerForDisplay } from "@/lib/tickers";
 
 interface StockSelectionTabProps {
   loading: boolean;
@@ -99,6 +100,7 @@ export function StockSelectionTab({
                     {watchlistStocks.map(ticker => {
                       const isSelected = selectedPositions.has(ticker);
                       const isDisabled = !isSelected && maxStocks > 0 && selectedPositions.size >= maxStocks;
+                      const displayTicker = formatTickerForDisplay(ticker);
                       return (
                         <Badge 
                           key={ticker} 
@@ -107,7 +109,7 @@ export function StockSelectionTab({
                           onClick={() => !isDisabled && onTogglePosition(ticker)}
                         >
                           <Eye className="w-3 h-3 mr-1" />
-                          {ticker}
+                          {displayTicker}
                           {isDisabled && <Lock className="w-3 h-3 ml-1" />}
                         </Badge>
                       );
@@ -178,4 +180,4 @@ export function StockSelectionTab({
       )}
     </TabsContent>
   );
-}
+}

src/components/rebalance/types.ts

@@ -7,6 +7,8 @@ export interface RebalancePosition {
   currentValue: number;
   currentAllocation: number;
   avgPrice?: number;
+  assetClass?: string;
+  assetSymbol?: string;
 }
 
 export interface RebalanceConfig {
@@ -37,4 +39,4 @@ export interface PortfolioData {
     currentPrice: number;
     priceChangeFromAvg: number;
   }>;
-}
+}