Add date filter to TradeHistoryTable and improve analysis progress tracking

BWJ2310 · BWJ2310 · commit 5d7092d8e16e · 2025-09-13T02:30:59.000-06:00
Introduces a date filter with navigation controls to the TradeHistoryTable, allowing users to view trades by specific day. Enhances UnifiedAnalysisHistory by improving agent completion percentage calculation, supporting both workflow_steps and agent_insights data. Adds initial loading state to analysis controls and updates workflow state management for better UX during analysis startup.
diff --git a/src/components/TradeHistoryTable.tsx b/src/components/TradeHistoryTable.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ArrowUpRight, ArrowDownRight, Clock, CheckCircle, XCircle, TrendingUp, RefreshCw, Loader2, ExternalLink, FileText, BarChart3, Calendar, Package } from "lucide-react";
+import { ArrowUpRight, ArrowDownRight, Clock, CheckCircle, XCircle, TrendingUp, RefreshCw, Loader2, ExternalLink, FileText, BarChart3, Calendar, Package, ChevronLeft, ChevronRight, CalendarIcon } from "lucide-react";
 import { useAuth } from "@/lib/auth";
 import { supabase } from "@/lib/supabase";
 import { getCachedSession } from "@/lib/cachedAuth";
@@ -51,17 +51,73 @@ export default function TradeHistoryTable() {
   const { apiSettings, user } = useAuth();
   const { toast } = useToast();
 
+  // Date filter states - default to today (using local date to avoid timezone issues)
+  const today = new Date();
+  const todayString = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+  const [selectedDate, setSelectedDate] = useState<string>(todayString);
+
+  // Helper to format date display
+  const getDateDisplay = () => {
+    const today = new Date();
+    const todayString = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const yesterdayString = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, '0')}-${String(yesterday.getDate()).padStart(2, '0')}`;
+
+    if (selectedDate === todayString) return "Today";
+    if (selectedDate === yesterdayString) return "Yesterday";
+
+    // Parse the date parts to avoid timezone issues
+    const [year, month, day] = selectedDate.split('-').map(Number);
+    const date = new Date(year, month - 1, day);
+
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  // Navigate date helper functions
+  const navigateDate = (direction: 'prev' | 'next') => {
+    const [year, month, day] = selectedDate.split('-').map(Number);
+    const currentDate = new Date(year, month - 1, day);
+    
+    if (direction === 'prev') {
+      currentDate.setDate(currentDate.getDate() - 1);
+    } else {
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+    
+    const newDateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;
+    setSelectedDate(newDateString);
+  };
+
+  const jumpToToday = () => {
+    const today = new Date();
+    const todayString = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+    setSelectedDate(todayString);
+  };
+
   // Fetch all trades from trading_actions table
   const fetchAllTrades = async () => {
     if (!user?.id) return;
 
     setLoading(true);
     try {
-      // Get all trading actions for this user
+      // Build date range for the selected date using local date parsing
+      const [year, month, day] = selectedDate.split('-').map(Number);
+      const startOfDay = new Date(year, month - 1, day, 0, 0, 0, 0);
+      const endOfDay = new Date(year, month - 1, day, 23, 59, 59, 999);
+
+      // Get trading actions for this user within the selected date
       const { data, error } = await supabase
         .from('trading_actions')
         .select('*')
         .eq('user_id', user.id)
+        .gte('created_at', startOfDay.toISOString())
+        .lte('created_at', endOfDay.toISOString())
         .order('created_at', { ascending: false });
 
       if (error) throw error;
@@ -262,7 +318,7 @@ export default function TradeHistoryTable() {
     } else {
       console.log('No Alpaca credentials found, skipping order status update');
     }
-  }, [apiSettings, user]);
+  }, [apiSettings, user, selectedDate]); // Added selectedDate dependency
 
   // Periodically update Alpaca order status
   useEffect(() => {
@@ -757,27 +813,61 @@ export default function TradeHistoryTable() {
         <div className="flex items-center justify-between">
           <CardTitle className="text-foreground flex items-center gap-2">
             <TrendingUp className="h-5 w-5 text-primary" />
-            Complete Trade History
+            Trade History
           </CardTitle>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={() => {
-              fetchAllTrades();
-              const hasCredentials = apiSettings?.alpaca_paper_api_key || apiSettings?.alpaca_live_api_key;
-              if (hasCredentials) {
-                updateAlpacaOrderStatus();
-              }
-            }}
-            disabled={loading}
-          >
-            {loading ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <RefreshCw className="h-4 w-4" />
-            )}
-          </Button>
+          
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigateDate('prev')}
+              className="h-8 w-8 p-0 hover:bg-[#fc0]/10 hover:text-[#fc0]"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            
+            <Button
+              variant="outline"
+              size="sm"
+              className="px-3 min-w-[140px] hover:border-[#fc0] hover:bg-[#fc0]/10 hover:text-[#fc0] transition-all duration-200"
+              onClick={jumpToToday}
+            >
+              <CalendarIcon className="h-4 w-4 mr-2" />
+              {getDateDisplay()}
+            </Button>
+            
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigateDate('next')}
+              disabled={selectedDate === todayString}
+              className="h-8 w-8 p-0 hover:bg-[#fc0]/10 hover:text-[#fc0] disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+            
+            <div className="ml-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8"
+                onClick={() => {
+                  fetchAllTrades();
+                  const hasCredentials = apiSettings?.alpaca_paper_api_key || apiSettings?.alpaca_live_api_key;
+                  if (hasCredentials) {
+                    updateAlpacaOrderStatus();
+                  }
+                }}
+                disabled={loading}
+              >
+                {loading ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+              </Button>
+            </div>
+          </div>
         </div>
       </CardHeader>
       
diff --git a/src/components/UnifiedAnalysisHistory.tsx b/src/components/UnifiedAnalysisHistory.tsx
@@ -68,6 +68,7 @@ interface RunningAnalysisItem {
   ticker: string;
   created_at: string;
   full_analysis?: any;  // Add to store progress data
+  agent_insights?: any;  // Add to access agent completion data
   rebalance_request_id?: string;  // To check if part of rebalance
   status?: AnalysisStatus;  // To distinguish between pending and running
 }
@@ -80,42 +81,66 @@ interface RebalanceAnalysisGroup {
 }
 
 // Calculate agent completion percentage for a single analysis
-const calculateAgentCompletion = (fullAnalysis: any, isRebalanceAnalysis: boolean = false): number => {
-  if (!fullAnalysis?.messages) return 0;
-
-  // Define expected agents (including macro-analyst)
-  // For rebalance analyses, exclude portfolio-manager as it runs at rebalance level
-  const expectedAgents = [
-    'macro-analyst', 'market-analyst', 'news-analyst', 'social-media-analyst', 'fundamentals-analyst',
-    'bull-researcher', 'bear-researcher', 'research-manager',
-    'risky-analyst', 'safe-analyst', 'neutral-analyst', 'risk-manager',
-    'trader'
-  ];
-
-  // Only add portfolio-manager for standalone analyses (not part of rebalance)
-  if (!isRebalanceAnalysis) {
-    expectedAgents.push('portfolio-manager');
-  }
-
-  const messages = fullAnalysis.messages || [];
-  const completedAgents = new Set<string>();
-
-  messages.forEach((msg: any) => {
-    if (msg.agent && msg.timestamp) {
-      const normalizedAgent = msg.agent.toLowerCase().replace(/\s+/g, '-');
-      completedAgents.add(normalizedAgent);
+// Similar to how GitHub Actions tracks workflow steps
+const calculateAgentCompletion = (analysisItem: any, isRebalanceAnalysis: boolean = false): number => {
+  if (!analysisItem) return 0;
+
+  let totalAgents = 0;
+  let completedAgents = 0;
+
+  // Primary method: Check workflow_steps structure (similar to GitHub Actions)
+  // This is the most reliable way as it mirrors the workflow visualization
+  if (analysisItem.full_analysis?.workflow_steps) {
+    const workflowSteps = analysisItem.full_analysis.workflow_steps;
+    
+    // Iterate through all phases and count agents
+    Object.keys(workflowSteps).forEach(phase => {
+      // Skip portfolio phase for rebalance analyses
+      if (phase === 'portfolio' && isRebalanceAnalysis) {
+        return;
+      }
+      
+      const phaseData = workflowSteps[phase];
+      if (phaseData?.agents && Array.isArray(phaseData.agents)) {
+        phaseData.agents.forEach((agent: any) => {
+          totalAgents++;
+          // Check if agent is completed (similar to GitHub Actions step status)
+          if (agent.status === 'completed' || agent.status === 'complete') {
+            completedAgents++;
+          }
+        });
+      }
+    });
+    
+    // Return percentage if we found agents
+    if (totalAgents > 0) {
+      return Math.round((completedAgents / totalAgents) * 100);
     }
-  });
+  }
 
-  // Count matches
-  let matchedAgents = 0;
-  expectedAgents.forEach(agentKey => {
-    if (completedAgents.has(agentKey)) {
-      matchedAgents++;
+  // Fallback method: Count agent_insights (for when workflow_steps is not available)
+  // This counts completed agents by checking which ones have insights
+  if (analysisItem.agent_insights && typeof analysisItem.agent_insights === 'object') {
+    const insightKeys = Object.keys(analysisItem.agent_insights);
+    
+    // Count valid agent insights (non-empty values)
+    completedAgents = insightKeys.filter(key => {
+      const value = analysisItem.agent_insights[key];
+      return value !== null && value !== undefined && value !== '';
+    }).length;
+    
+    // Use a reasonable estimate for total agents
+    // Based on the workflow: 5 analysis + 3 research + 1 trader + 4 risk + 1 portfolio
+    totalAgents = isRebalanceAnalysis ? 13 : 14;
+    
+    if (completedAgents > 0) {
+      // Don't exceed 100%
+      return Math.min(Math.round((completedAgents / totalAgents) * 100), 100);
     }
-  });
+  }
 
-  return expectedAgents.length > 0 ? (matchedAgents / expectedAgents.length) * 100 : 0;
+  // If no data available, return 0
+  return 0;
 };
 
 export default function UnifiedAnalysisHistory() {
@@ -232,6 +257,7 @@ export default function UnifiedAnalysisHistory() {
               ticker: item.ticker,
               created_at: item.created_at,
               full_analysis: item.full_analysis,
+              agent_insights: item.agent_insights,  // Add this!
               rebalance_request_id: item.rebalance_request_id,
               status: status
             });
@@ -851,18 +877,18 @@ export default function UnifiedAnalysisHistory() {
 
                         <div className="flex items-center justify-between">
                           <div className="flex-1">
-                            {item.status === ANALYSIS_STATUS.RUNNING && item.full_analysis && (
+                            {item.status === ANALYSIS_STATUS.RUNNING && (item.full_analysis || item.agent_insights) && (
                               <div className="flex items-center gap-2 mr-4">
                                 <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
                                   <div
                                     className="h-full bg-yellow-500 animate-pulse transition-all"
                                     style={{
-                                      width: `${calculateAgentCompletion(item.full_analysis, !!item.rebalance_request_id)}%`
+                                      width: `${calculateAgentCompletion(item, !!item.rebalance_request_id)}%`
                                     }}
                                   />
                                 </div>
                                 <span className="text-xs text-yellow-600 dark:text-yellow-400">
-                                  {Math.round(calculateAgentCompletion(item.full_analysis, !!item.rebalance_request_id))}%
+                                  {Math.round(calculateAgentCompletion(item, !!item.rebalance_request_id))}%
                                 </span>
                               </div>
                             )}
@@ -1127,12 +1153,12 @@ export default function UnifiedAnalysisHistory() {
                                 <div
                                   className="h-full bg-yellow-500 animate-pulse transition-all"
                                   style={{
-                                    width: `${calculateAgentCompletion(item.full_analysis, !!item.rebalance_request_id)}%`
+                                    width: `${calculateAgentCompletion(item, !!item.rebalance_request_id)}%`
                                   }}
                                 />
                               </div>
                               <span className="text-xs text-yellow-600 dark:text-yellow-400">
-                                {Math.round(calculateAgentCompletion(item.full_analysis, !!item.rebalance_request_id))}%
+                                {Math.round(calculateAgentCompletion(item, !!item.rebalance_request_id))}%
                               </span>
                             </div>
                           )}
diff --git a/src/components/workflow/components/AnalysisControls.tsx b/src/components/workflow/components/AnalysisControls.tsx
@@ -2,7 +2,7 @@
  * Analysis controls component for starting and viewing analyses
  */
 
-import { Activity, Info, Play } from 'lucide-react';
+import { Activity, Info, Loader2, Play } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import StockTickerAutocomplete from '@/components/StockTickerAutocomplete';
 
@@ -13,6 +13,7 @@ interface AnalysisControlsProps {
   setSearchTicker: (value: string) => void;
   handleStartAnalysis: () => void;
   setShowAnalysisDetail: (value: boolean) => void;
+  isInitialLoading?: boolean;
 }
 
 export function AnalysisControls({
@@ -21,11 +22,20 @@ export function AnalysisControls({
   searchTicker,
   setSearchTicker,
   handleStartAnalysis,
-  setShowAnalysisDetail
+  setShowAnalysisDetail,
+  isInitialLoading = false
 }: AnalysisControlsProps) {
   return (
     <div className="flex items-center justify-center p-2 rounded-lg mb-2 min-h-[36px]">
-      {activeAnalysisTicker && isAnalyzing ? (
+      {isInitialLoading ? (
+        // Show loading state while checking for running analyses
+        <div className="flex items-center justify-center w-full">
+          <Loader2 className="w-4 h-4 mr-2 animate-spin text-muted-foreground" />
+          <span className="text-sm text-muted-foreground">
+            Checking for running analyses...
+          </span>
+        </div>
+      ) : activeAnalysisTicker && isAnalyzing ? (
         <div className="flex items-center justify-between w-full">
           <div className="flex items-center">
             <Activity className="w-4 h-4 mr-2 animate-pulse text-primary" />
diff --git a/src/components/workflow/hooks/useAnalysisState.ts b/src/components/workflow/hooks/useAnalysisState.ts
@@ -14,6 +14,7 @@ export function useAnalysisState(updateWorkflowFromAnalysis: (analysis: any) =>
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const [runningAnalysesCount, setRunningAnalysesCount] = useState(0);
   const [isRebalanceContext, setIsRebalanceContext] = useState(false);
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
   const previousRunningRef = useRef<Set<string>>(new Set());
 
   useEffect(() => {
@@ -28,6 +29,11 @@ export function useAnalysisState(updateWorkflowFromAnalysis: (analysis: any) =>
         setIsAnalyzing,
         setRunningAnalysesCount
       });
+      
+      // Mark initial loading as complete after first check
+      if (isInitialLoading) {
+        setIsInitialLoading(false);
+      }
     };
 
     handleCheckRunningAnalyses();
@@ -87,6 +93,7 @@ export function useAnalysisState(updateWorkflowFromAnalysis: (analysis: any) =>
     setIsAnalyzing,
     runningAnalysesCount,
     isRebalanceContext,
-    setIsRebalanceContext
+    setIsRebalanceContext,
+    isInitialLoading
   };
 }
diff --git a/src/components/workflow/index.tsx b/src/components/workflow/index.tsx
