From fd54724edefceb7e01a1930e2136d725c0a58931 Mon Sep 17 00:00:00 2001
From: Adrian Flores Cortes <adrian.flores2.contractor@bbva.com>
Date: Sun, 25 Jan 2026 08:47:46 -0600
Subject: [PATCH] [OQI-008] feat: Add portfolio store with WebSocket real-time
 updates

- Create portfolioStore.ts with Zustand for state management
- Add portfolioWS instance for real-time portfolio updates
- Add usePortfolioUpdates hook for WebSocket subscriptions
- Refactor PortfolioDashboard to use store instead of local state
- Add WebSocket connection status indicator (Live/Offline)
- Add last update timestamp display

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../portfolio/pages/PortfolioDashboard.tsx    | 165 ++++----
 src/services/websocket.service.ts             |  70 ++++
 src/stores/portfolioStore.ts                  | 396 ++++++++++++++++++
 3 files changed, 540 insertions(+), 91 deletions(-)
 create mode 100644 src/stores/portfolioStore.ts

diff --git a/src/modules/portfolio/pages/PortfolioDashboard.tsx b/src/modules/portfolio/pages/PortfolioDashboard.tsx
index df89c73..d7ec413 100644
--- a/src/modules/portfolio/pages/PortfolioDashboard.tsx
+++ b/src/modules/portfolio/pages/PortfolioDashboard.tsx
@@ -3,7 +3,7 @@
  * Main dashboard for portfolio management with allocations, rebalancing, and goals
  */
 
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   PlusIcon,
@@ -13,18 +13,10 @@ import {
   CurrencyDollarIcon,
   ArrowTrendingUpIcon,
   ArrowTrendingDownIcon,
+  SignalIcon,
+  SignalSlashIcon,
 } from '@heroicons/react/24/solid';
-import {
-  getUserPortfolios,
-  getPortfolioStats,
-  getRebalanceRecommendations,
-  executeRebalance,
-  getUserGoals,
-  type Portfolio,
-  type PortfolioStats,
-  type RebalanceRecommendation,
-  type PortfolioGoal,
-} from '../../../services/portfolio.service';
+import { usePortfolioStore } from '../../../stores/portfolioStore';
 import { AllocationChart } from '../components/AllocationChart';
 import { AllocationTable } from '../components/AllocationTable';
 import { RebalanceCard } from '../components/RebalanceCard';
@@ -74,90 +66,52 @@ const StatCard: React.FC<StatCardProps> = ({ label, value, change, icon, color }
 // ============================================================================
 
 export default function PortfolioDashboard() {
-  const [portfolios, setPortfolios] = useState<Portfolio[]>([]);
-  const [selectedPortfolio, setSelectedPortfolio] = useState<Portfolio | null>(null);
-  const [stats, setStats] = useState<PortfolioStats | null>(null);
-  const [recommendations, setRecommendations] = useState<RebalanceRecommendation[]>([]);
-  const [goals, setGoals] = useState<PortfolioGoal[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isRebalancing, setIsRebalancing] = useState(false);
   const [activeTab, setActiveTab] = useState<'overview' | 'goals'>('overview');
 
-  // Fetch all data
-  const fetchData = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-
-      const [portfolioData, goalsData] = await Promise.all([
-        getUserPortfolios(),
-        getUserGoals(),
-      ]);
-
-      setPortfolios(portfolioData);
-      setGoals(goalsData);
-
-      if (portfolioData.length > 0) {
-        const primary = portfolioData[0];
-        setSelectedPortfolio(primary);
-
-        const [statsData, rebalanceData] = await Promise.all([
-          getPortfolioStats(primary.id),
-          getRebalanceRecommendations(primary.id),
-        ]);
-
-        setStats(statsData);
-        setRecommendations(rebalanceData);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Error loading data');
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  // Store state
+  const {
+    portfolios,
+    selectedPortfolio,
+    stats,
+    recommendations,
+    goals,
+    loading,
+    isRebalancing,
+    error,
+    wsConnected,
+    lastUpdate,
+    fetchPortfolios,
+    selectPortfolio,
+    executeRebalance,
+    deleteGoal,
+    connectWebSocket,
+    disconnectWebSocket,
+    clearError,
+  } = usePortfolioStore();
 
+  // Initial data fetch and WebSocket connection
   useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+    fetchPortfolios();
+    connectWebSocket();
 
-  // Handle portfolio selection
-  const handlePortfolioSelect = async (portfolio: Portfolio) => {
-    setSelectedPortfolio(portfolio);
-    try {
-      const [statsData, rebalanceData] = await Promise.all([
-        getPortfolioStats(portfolio.id),
-        getRebalanceRecommendations(portfolio.id),
-      ]);
-      setStats(statsData);
-      setRecommendations(rebalanceData);
-    } catch (err) {
-      console.error('Error loading portfolio data:', err);
-    }
-  };
+    return () => {
+      disconnectWebSocket();
+    };
+  }, [fetchPortfolios, connectWebSocket, disconnectWebSocket]);
 
   // Handle rebalance execution
   const handleRebalance = async () => {
-    if (!selectedPortfolio) return;
-
-    try {
-      setIsRebalancing(true);
-      await executeRebalance(selectedPortfolio.id);
-      await fetchData();
-    } catch (err) {
-      console.error('Error executing rebalance:', err);
-    } finally {
-      setIsRebalancing(false);
-    }
+    await executeRebalance();
   };
 
   // Handle goal deletion
   const handleDeleteGoal = async (goalId: string) => {
-    // TODO: Implement delete confirmation modal
-    console.log('Delete goal:', goalId);
+    if (confirm('¿Estás seguro de eliminar esta meta?')) {
+      await deleteGoal(goalId);
+    }
   };
 
-  if (loading) {
+  if (loading && portfolios.length === 0) {
     return (
       <div className="flex items-center justify-center min-h-96">
         <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
@@ -165,12 +119,15 @@ export default function PortfolioDashboard() {
     );
   }
 
-  if (error) {
+  if (error && portfolios.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center min-h-96">
         <p className="text-red-500 mb-4">{error}</p>
         <button
-          onClick={fetchData}
+          onClick={() => {
+            clearError();
+            fetchPortfolios();
+          }}
           className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
         >
           Reintentar
@@ -187,16 +144,35 @@ export default function PortfolioDashboard() {
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
             Portfolio Manager
           </h1>
-          <p className="text-gray-600 dark:text-gray-400 mt-1">
-            Gestiona tus activos y alcanza tus metas financieras
-          </p>
+          <div className="flex items-center gap-3 mt-1">
+            <p className="text-gray-600 dark:text-gray-400">
+              Gestiona tus activos y alcanza tus metas financieras
+            </p>
+            {/* WebSocket status indicator */}
+            <div
+              className={`flex items-center gap-1 text-xs px-2 py-1 rounded-full ${
+                wsConnected
+                  ? 'bg-green-100 dark:bg-green-900/30 text-green-600'
+                  : 'bg-gray-100 dark:bg-gray-700 text-gray-500'
+              }`}
+              title={wsConnected ? 'Conectado en tiempo real' : 'Sin conexión en tiempo real'}
+            >
+              {wsConnected ? (
+                <SignalIcon className="w-3 h-3" />
+              ) : (
+                <SignalSlashIcon className="w-3 h-3" />
+              )}
+              {wsConnected ? 'Live' : 'Offline'}
+            </div>
+          </div>
         </div>
         <div className="flex gap-3">
           <button
-            onClick={fetchData}
-            className="p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
+            onClick={fetchPortfolios}
+            disabled={loading}
+            className="p-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors disabled:opacity-50"
           >
-            <ArrowPathIcon className="w-5 h-5 text-gray-600 dark:text-gray-300" />
+            <ArrowPathIcon className={`w-5 h-5 text-gray-600 dark:text-gray-300 ${loading ? 'animate-spin' : ''}`} />
           </button>
           <Link
             to="/portfolio/new"
@@ -208,13 +184,20 @@ export default function PortfolioDashboard() {
         </div>
       </div>
 
+      {/* Last update indicator */}
+      {lastUpdate && (
+        <div className="text-xs text-gray-400 mb-4">
+          Última actualización: {new Date(lastUpdate).toLocaleTimeString()}
+        </div>
+      )}
+
       {/* Portfolio Selector (if multiple) */}
       {portfolios.length > 1 && (
         <div className="flex gap-2 mb-6 overflow-x-auto pb-2">
           {portfolios.map((p) => (
             <button
               key={p.id}
-              onClick={() => handlePortfolioSelect(p)}
+              onClick={() => selectPortfolio(p)}
               className={`px-4 py-2 rounded-lg whitespace-nowrap transition-colors ${
                 selectedPortfolio?.id === p.id
                   ? 'bg-blue-600 text-white'
diff --git a/src/services/websocket.service.ts b/src/services/websocket.service.ts
index 34d4a2f..8bda02a 100644
--- a/src/services/websocket.service.ts
+++ b/src/services/websocket.service.ts
@@ -144,6 +144,13 @@ export const mlSignalsWS = new WebSocketService({
   maxReconnectAttempts: 10,
 });
 
+// Portfolio WebSocket - for real-time portfolio updates
+export const portfolioWS = new WebSocketService({
+  url: `${WS_BASE_URL}/ws/portfolio`,
+  reconnectInterval: 5000,
+  maxReconnectAttempts: 15,
+});
+
 // ============================================================================
 // Signal Types
 // ============================================================================
@@ -184,6 +191,21 @@ export interface TradeNotification {
   timestamp: string;
 }
 
+export interface PortfolioUpdate {
+  portfolioId: string;
+  totalValue: number;
+  unrealizedPnl: number;
+  unrealizedPnlPercent: number;
+  allocations: {
+    asset: string;
+    value: number;
+    currentPercent: number;
+    pnl: number;
+    pnlPercent: number;
+  }[];
+  timestamp: string;
+}
+
 // ============================================================================
 // React Hooks for WebSocket
 // ============================================================================
@@ -346,8 +368,56 @@ export function usePositionUpdates() {
   return { positions };
 }
 
+/**
+ * Hook for real-time portfolio updates
+ */
+export function usePortfolioUpdates(portfolioId: string | null) {
+  const [portfolioData, setPortfolioData] = useState<PortfolioUpdate | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  useEffect(() => {
+    if (!portfolioId) return;
+
+    portfolioWS.connect();
+
+    const unsubConnect = portfolioWS.onConnect(() => {
+      setConnected(true);
+      // Subscribe to portfolio updates
+      portfolioWS.send('portfolio:subscribe', { portfolioId });
+    });
+
+    const unsubDisconnect = portfolioWS.onDisconnect(() => {
+      setConnected(false);
+    });
+
+    const unsubUpdate = portfolioWS.subscribe('portfolio:update', (data) => {
+      const update = data as PortfolioUpdate;
+      if (update.portfolioId === portfolioId) {
+        setPortfolioData(update);
+      }
+    });
+
+    return () => {
+      // Unsubscribe when unmounting
+      portfolioWS.send('portfolio:unsubscribe', { portfolioId });
+      unsubConnect();
+      unsubDisconnect();
+      unsubUpdate();
+    };
+  }, [portfolioId]);
+
+  const refresh = useCallback(() => {
+    if (portfolioId) {
+      portfolioWS.send('portfolio:refresh', { portfolioId });
+    }
+  }, [portfolioId]);
+
+  return { portfolioData, connected, refresh };
+}
+
 export default {
   tradingWS,
   mlSignalsWS,
+  portfolioWS,
   WebSocketService,
 };
diff --git a/src/stores/portfolioStore.ts b/src/stores/portfolioStore.ts
new file mode 100644
index 0000000..85227b9
--- /dev/null
+++ b/src/stores/portfolioStore.ts
@@ -0,0 +1,396 @@
+/**
+ * Portfolio Store
+ * Zustand store for portfolio management with real-time updates
+ */
+
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import {
+  getUserPortfolios,
+  getPortfolio,
+  getPortfolioStats,
+  getRebalanceRecommendations,
+  executeRebalance,
+  updateAllocations,
+  getUserGoals,
+  createGoal,
+  deleteGoal,
+  type Portfolio,
+  type PortfolioStats,
+  type RebalanceRecommendation,
+  type PortfolioGoal,
+  type CreateGoalInput,
+} from '../services/portfolio.service';
+import { portfolioWS, type PortfolioUpdate } from '../services/websocket.service';
+
+// ============================================================================
+// State Interface
+// ============================================================================
+
+interface PortfolioState {
+  // Portfolio data
+  portfolios: Portfolio[];
+  selectedPortfolio: Portfolio | null;
+  stats: PortfolioStats | null;
+  recommendations: RebalanceRecommendation[];
+  goals: PortfolioGoal[];
+
+  // Loading states
+  loading: boolean;
+  loadingStats: boolean;
+  loadingRecommendations: boolean;
+  loadingGoals: boolean;
+  isRebalancing: boolean;
+
+  // Error state
+  error: string | null;
+
+  // WebSocket state
+  wsConnected: boolean;
+  lastUpdate: string | null;
+
+  // Actions
+  fetchPortfolios: () => Promise<void>;
+  selectPortfolio: (portfolio: Portfolio) => Promise<void>;
+  selectPortfolioById: (portfolioId: string) => Promise<void>;
+  refreshStats: () => Promise<void>;
+  refreshRecommendations: () => Promise<void>;
+  executeRebalance: () => Promise<void>;
+  updateAllocations: (allocations: { asset: string; targetPercent: number }[]) => Promise<void>;
+
+  // Goal actions
+  fetchGoals: () => Promise<void>;
+  createGoal: (input: CreateGoalInput) => Promise<void>;
+  deleteGoal: (goalId: string) => Promise<void>;
+
+  // WebSocket actions
+  connectWebSocket: () => void;
+  disconnectWebSocket: () => void;
+  handlePortfolioUpdate: (update: PortfolioUpdate) => void;
+
+  // Utility actions
+  clearError: () => void;
+  reset: () => void;
+}
+
+// ============================================================================
+// Initial State
+// ============================================================================
+
+const initialState = {
+  portfolios: [],
+  selectedPortfolio: null,
+  stats: null,
+  recommendations: [],
+  goals: [],
+  loading: false,
+  loadingStats: false,
+  loadingRecommendations: false,
+  loadingGoals: false,
+  isRebalancing: false,
+  error: null,
+  wsConnected: false,
+  lastUpdate: null,
+};
+
+// ============================================================================
+// Store
+// ============================================================================
+
+export const usePortfolioStore = create<PortfolioState>()(
+  devtools(
+    (set, get) => ({
+      ...initialState,
+
+      // ========================================================================
+      // Portfolio Actions
+      // ========================================================================
+
+      fetchPortfolios: async () => {
+        set({ loading: true, error: null });
+
+        try {
+          const [portfolios, goals] = await Promise.all([
+            getUserPortfolios(),
+            getUserGoals(),
+          ]);
+
+          set({ portfolios, goals, loading: false });
+
+          // Auto-select first portfolio if none selected
+          if (portfolios.length > 0 && !get().selectedPortfolio) {
+            await get().selectPortfolio(portfolios[0]);
+          }
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Error loading portfolios';
+          set({ error: message, loading: false });
+        }
+      },
+
+      selectPortfolio: async (portfolio: Portfolio) => {
+        set({ selectedPortfolio: portfolio, loadingStats: true, loadingRecommendations: true });
+
+        // Disconnect from previous portfolio WebSocket
+        const prevPortfolio = get().selectedPortfolio;
+        if (prevPortfolio && prevPortfolio.id !== portfolio.id) {
+          portfolioWS.send('portfolio:unsubscribe', { portfolioId: prevPortfolio.id });
+        }
+
+        // Subscribe to new portfolio WebSocket
+        if (get().wsConnected) {
+          portfolioWS.send('portfolio:subscribe', { portfolioId: portfolio.id });
+        }
+
+        try {
+          const [stats, recommendations] = await Promise.all([
+            getPortfolioStats(portfolio.id),
+            getRebalanceRecommendations(portfolio.id),
+          ]);
+
+          set({
+            stats,
+            recommendations,
+            loadingStats: false,
+            loadingRecommendations: false,
+          });
+        } catch (error) {
+          console.error('Error loading portfolio data:', error);
+          set({ loadingStats: false, loadingRecommendations: false });
+        }
+      },
+
+      selectPortfolioById: async (portfolioId: string) => {
+        set({ loading: true, error: null });
+
+        try {
+          const portfolio = await getPortfolio(portfolioId);
+          await get().selectPortfolio(portfolio);
+          set({ loading: false });
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Portfolio not found';
+          set({ error: message, loading: false });
+        }
+      },
+
+      refreshStats: async () => {
+        const { selectedPortfolio } = get();
+        if (!selectedPortfolio) return;
+
+        set({ loadingStats: true });
+
+        try {
+          const stats = await getPortfolioStats(selectedPortfolio.id);
+          set({ stats, loadingStats: false });
+        } catch (error) {
+          console.error('Error refreshing stats:', error);
+          set({ loadingStats: false });
+        }
+      },
+
+      refreshRecommendations: async () => {
+        const { selectedPortfolio } = get();
+        if (!selectedPortfolio) return;
+
+        set({ loadingRecommendations: true });
+
+        try {
+          const recommendations = await getRebalanceRecommendations(selectedPortfolio.id);
+          set({ recommendations, loadingRecommendations: false });
+        } catch (error) {
+          console.error('Error refreshing recommendations:', error);
+          set({ loadingRecommendations: false });
+        }
+      },
+
+      executeRebalance: async () => {
+        const { selectedPortfolio } = get();
+        if (!selectedPortfolio) return;
+
+        set({ isRebalancing: true, error: null });
+
+        try {
+          const updated = await executeRebalance(selectedPortfolio.id);
+          set({
+            selectedPortfolio: updated,
+            isRebalancing: false,
+          });
+
+          // Refresh recommendations after rebalance
+          await get().refreshRecommendations();
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Error executing rebalance';
+          set({ error: message, isRebalancing: false });
+        }
+      },
+
+      updateAllocations: async (allocations) => {
+        const { selectedPortfolio } = get();
+        if (!selectedPortfolio) return;
+
+        set({ loading: true, error: null });
+
+        try {
+          const updated = await updateAllocations(selectedPortfolio.id, allocations);
+          set({
+            selectedPortfolio: updated,
+            loading: false,
+          });
+
+          // Refresh recommendations after update
+          await get().refreshRecommendations();
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Error updating allocations';
+          set({ error: message, loading: false });
+          throw error;
+        }
+      },
+
+      // ========================================================================
+      // Goal Actions
+      // ========================================================================
+
+      fetchGoals: async () => {
+        set({ loadingGoals: true, error: null });
+
+        try {
+          const goals = await getUserGoals();
+          set({ goals, loadingGoals: false });
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Error loading goals';
+          set({ error: message, loadingGoals: false });
+        }
+      },
+
+      createGoal: async (input: CreateGoalInput) => {
+        set({ loadingGoals: true, error: null });
+
+        try {
+          const newGoal = await createGoal(input);
+          set((state) => ({
+            goals: [...state.goals, newGoal],
+            loadingGoals: false,
+          }));
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Error creating goal';
+          set({ error: message, loadingGoals: false });
+          throw error;
+        }
+      },
+
+      deleteGoal: async (goalId: string) => {
+        set({ error: null });
+
+        try {
+          await deleteGoal(goalId);
+          set((state) => ({
+            goals: state.goals.filter((g) => g.id !== goalId),
+          }));
+        } catch (error) {
+          const message = error instanceof Error ? error.message : 'Error deleting goal';
+          set({ error: message });
+          throw error;
+        }
+      },
+
+      // ========================================================================
+      // WebSocket Actions
+      // ========================================================================
+
+      connectWebSocket: () => {
+        portfolioWS.connect();
+
+        portfolioWS.onConnect(() => {
+          set({ wsConnected: true });
+
+          // Subscribe to selected portfolio if any
+          const { selectedPortfolio } = get();
+          if (selectedPortfolio) {
+            portfolioWS.send('portfolio:subscribe', { portfolioId: selectedPortfolio.id });
+          }
+        });
+
+        portfolioWS.onDisconnect(() => {
+          set({ wsConnected: false });
+        });
+
+        // Handle portfolio updates
+        portfolioWS.subscribe('portfolio:update', (data) => {
+          get().handlePortfolioUpdate(data as PortfolioUpdate);
+        });
+      },
+
+      disconnectWebSocket: () => {
+        const { selectedPortfolio } = get();
+        if (selectedPortfolio) {
+          portfolioWS.send('portfolio:unsubscribe', { portfolioId: selectedPortfolio.id });
+        }
+        portfolioWS.disconnect();
+        set({ wsConnected: false });
+      },
+
+      handlePortfolioUpdate: (update: PortfolioUpdate) => {
+        const { selectedPortfolio } = get();
+
+        if (selectedPortfolio && update.portfolioId === selectedPortfolio.id) {
+          // Update portfolio with real-time data
+          set((state) => ({
+            selectedPortfolio: state.selectedPortfolio
+              ? {
+                  ...state.selectedPortfolio,
+                  totalValue: update.totalValue,
+                  unrealizedPnl: update.unrealizedPnl,
+                  unrealizedPnlPercent: update.unrealizedPnlPercent,
+                  allocations: state.selectedPortfolio.allocations.map((alloc) => {
+                    const updated = update.allocations.find((a) => a.asset === alloc.asset);
+                    if (updated) {
+                      return {
+                        ...alloc,
+                        value: updated.value,
+                        currentPercent: updated.currentPercent,
+                        pnl: updated.pnl,
+                        pnlPercent: updated.pnlPercent,
+                      };
+                    }
+                    return alloc;
+                  }),
+                }
+              : null,
+            lastUpdate: update.timestamp,
+          }));
+        }
+      },
+
+      // ========================================================================
+      // Utility Actions
+      // ========================================================================
+
+      clearError: () => {
+        set({ error: null });
+      },
+
+      reset: () => {
+        get().disconnectWebSocket();
+        set(initialState);
+      },
+    }),
+    {
+      name: 'portfolio-store',
+    }
+  )
+);
+
+// ============================================================================
+// Selectors
+// ============================================================================
+
+export const usePortfolios = () => usePortfolioStore((state) => state.portfolios);
+export const useSelectedPortfolio = () => usePortfolioStore((state) => state.selectedPortfolio);
+export const usePortfolioStats = () => usePortfolioStore((state) => state.stats);
+export const useRecommendations = () => usePortfolioStore((state) => state.recommendations);
+export const useGoals = () => usePortfolioStore((state) => state.goals);
+export const usePortfolioLoading = () => usePortfolioStore((state) => state.loading);
+export const usePortfolioError = () => usePortfolioStore((state) => state.error);
+export const useWsConnected = () => usePortfolioStore((state) => state.wsConnected);
+export const useIsRebalancing = () => usePortfolioStore((state) => state.isRebalancing);
+
+export default usePortfolioStore;