import { useState, useEffect, useCallback } from 'react'; import { analyticsClient } from '../analytics/client'; import type { DateRangeParams } from '../types'; export interface UseAnalyticsDashboardOptions { dateRange?: DateRangeParams; autoRefresh?: boolean; refreshInterval?: number; // in milliseconds } export const useAnalyticsDashboard = (options: UseAnalyticsDashboardOptions = {}) => { const { dateRange = analyticsClient.getLastNDaysRange(30), autoRefresh = false, refreshInterval = 60000, // 1 minute } = options; const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [lastUpdated, setLastUpdated] = useState(null); const fetchData = useCallback(async () => { try { setLoading(true); setError(null); const result = await analyticsClient.getBatchAnalytics(dateRange); setData(result); setLastUpdated(new Date()); } catch (err) { setError(err as Error); console.error('Failed to fetch analytics:', err); } finally { setLoading(false); } }, [dateRange]); useEffect(() => { fetchData(); if (autoRefresh) { const interval = setInterval(fetchData, refreshInterval); return () => clearInterval(interval); } }, [fetchData, autoRefresh, refreshInterval]); const refresh = useCallback(() => { analyticsClient.clearCache(); return fetchData(); }, [fetchData]); return { data, loading, error, lastUpdated, refresh, }; }; /** * Hook for product recommendations based on affinity */ export const useProductRecommendations = (productId: number, limit: number = 10) => { const [recommendations, setRecommendations] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchRecommendations = async () => { try { setLoading(true); const response = await analyticsClient.getProductAffinity(productId, limit); setRecommendations(response.data || []); } catch (err) { setError(err as Error); } finally { setLoading(false); } }; if (productId) { fetchRecommendations(); } }, [productId, limit]); return { recommendations, loading, error }; }; /** * Hook for customer journey visualization */ export const useCustomerJourney = (sessionId: string | null) => { const [journey, setJourney] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchJourney = async () => { if (!sessionId) return; try { setLoading(true); const response = await analyticsClient.getCustomerJourney(sessionId); setJourney(response.data || []); } catch (err) { setError(err as Error); } finally { setLoading(false); } }; fetchJourney(); }, [sessionId]); return { journey, loading, error }; }; /** * Hook for real-time conversion funnel */ export const useConversionFunnel = (dateRange?: DateRangeParams) => { const [funnel, setFunnel] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const fetchFunnel = useCallback(async () => { try { setLoading(true); const response = await analyticsClient.getConversionFunnel(dateRange); setFunnel(response.data); } catch (err) { setError(err as Error); } finally { setLoading(false); } }, [dateRange]); useEffect(() => { fetchFunnel(); }, [fetchFunnel]); const refresh = useCallback(() => { analyticsClient.clearCache(); return fetchFunnel(); }, [fetchFunnel]); return { funnel, loading, error, refresh }; };