[WIP] Add analytics dashboard for wishlist behavior insights

[Copilot]

• Install recharts in frontend
• Create backend analytics service (api/src/services/analytics.ts)
• Create backend analytics routes (api/src/routes/analytics.ts)
• Register analytics routes in api/src/index.ts
• Create frontend/src/components/analytics/KPICards.tsx
• Create frontend/src/components/analytics/ProductRankingTable.tsx
• Create frontend/src/components/analytics/ConversionFunnel.tsx
• Create frontend/src/components/analytics/TrendChart.tsx
• Create frontend/src/components/analytics/CategoryBreakdown.tsx
• Create frontend/src/components/analytics/InsightsPanel.tsx
• Create frontend/src/components/admin/WishlistAnalytics.tsx
• Update frontend/src/api/config.ts with analytics endpoints
• Update frontend/src/App.tsx with analytics route
• Update frontend/src/components/Navigation.tsx with Analytics link
• Verify build passes

Original prompt

Create an analytics dashboard for admins to track wishlist behavior, popular products, conversion metrics, and business insights.

Goal: Provide data-driven insights about customer wishlist behavior to inform business decisions, inventory planning, and marketing strategies.

Requirements:

1. Analytics Data Model:

   interface WishlistAnalytics {
     // Product Metrics
     mostWishlistedProducts: ProductWishlistStats[];
     fastestGrowingProducts: ProductTrend[];
     wishlistConversionRate: number;
     averageWishlistSize: number;
     
     // User Metrics
     totalActiveWishlists: number;
     totalWishlistItems: number;
     averageDaysUntilPurchase: number;
     wishlistRetentionRate: number;
     
     // Time-based Metrics
     wishlistActivityByHour: HourlyActivity[];
     wishlistActivityByDay: DailyActivity[];
     seasonalTrends: SeasonalData[];
     
     // Category Metrics
     popularCategories: CategoryStats[];
     categoryConversion: CategoryConversion[];
   }
   
   interface ProductWishlistStats {
     productId: number;
     productName: string;
     wishlistCount: number;
     addRate: number;              // Additions per day
     removeRate: number;           // Removals per day
     conversionRate: number;       // % that led to purchase
     averageDaysOnWishlist: number;
     priceElasticity: number;      // How discount affects conversion
   }
   
   interface ProductTrend {
     productId: number;
     productName: string;
     currentWishlistCount: number;
     previousWishlistCount: number;
     growthRate: number;           // % change
     trendDirection: 'up' | 'down' | 'stable';
   }

2. Backend Analytics Service:

   • api/src/services/analytics.ts:
     • calculateProductWishlistStats() - Product-level metrics
     • calculateUserWishlistMetrics() - User behavior metrics
     • calculateConversionRates() - Purchase conversion analysis
     • generateHeatmaps() - Time-based activity patterns
     • analyzeSeasonalTrends() - Seasonal pattern detection
     • calculatePriceElasticity() - Price sensitivity analysis
     • generateRecommendations() - Business recommendations

3. API Endpoints:

   • GET /api/analytics/wishlist/overview - Overall statistics
   • GET /api/analytics/wishlist/products - Product-level data
   • GET /api/analytics/wishlist/trends - Trending products
   • GET /api/analytics/wishlist/conversion - Conversion funnel
   • GET /api/analytics/wishlist/heatmap - Activity heatmap data
   • GET /api/analytics/wishlist/categories - Category analysis
   • GET /api/analytics/wishlist/users - User behavior metrics
   • POST /api/analytics/wishlist/export - Export data to CSV

4. Admin Dashboard Component:

   • Components/admin/WishlistAnalytics.tsx:
     • Executive summary cards (KPIs)
     • Product popularity rankings
     • Trend charts and graphs
     • Conversion funnel visualization
     • Activity heatmap
     • Category breakdown
     • Time range selector (7d, 30d, 90d, 1y, custom)
     • Export to CSV/Excel button
     • Refresh data button
     • Last updated timestamp

5. Visualization Components:

   • Components/analytics/KPICards.tsx:

     • Total wishlists
     • Total items
     • Avg conversion rate
     • Most wishlisted product
     • Trend indicators (↑↓)

   • Components/analytics/ProductRankingTable.tsx:

     • Top 50 wishlisted products
     • Sortable columns
     • Growth indicators
     • Quick actions (view product, create promo)

   • Components/analytics/ConversionFunnel.tsx:

     • Funnel chart showing: Browse → Wishlist → Cart → Purchase
     • Drop-off rates at each stage
     • Compare across categories

   • Components/analytics/ActivityHeatmap.tsx:

     • Calendar heatmap showing daily activity
     • Hour-of-day heatmap
     • Day-of-week patterns
     • Interactive tooltips

   • Components/analytics/TrendChart.tsx:

     • Line chart showing wishlist additions over time
     • Multiple product comparison
     • Highlight major events (sales, promotions)
     • Zoom and pan controls

   • Components/analytics/CategoryBreakdown.tsx:

     • Pie/donut chart of category distribution
     • Category performance table
     • Category conversion rates
     • Category growth trends

   • Components/analytics/PriceElasticityChart.tsx:

     • Scatter plot: discount % vs. conversion rate
     • Identify optimal discount levels
     • Product clustering by price sensitivity

6. Insights & Recommendations Panel:

   • Components/analytics/InsightsPanel.tsx:
     • "Products likely to convert soon" (high add rate)
     • "Products losing interest" (high remove rate)
     • "Optimal discount suggestions" (price elasticity)
     • "Stock up alerts" (high wishlist demand)
     • "Seasonal planning tips"
     • "Category opportunities"

7. Real-time Dashboard Features:

   • Live wishlist activity feed (la...