feat: implement comprehensive Mixpanel analytics integration

This commit implements a privacy-first analytics solution using Mixpanel with explicit consent management and manufacturing-specific KPI tracking.

Key Features:
- Privacy-by-design with granular consent controls
- Manufacturing KPI tracking (MTTD, MTTR, availability metrics)
- Page view and interaction tracking across all major components
- Comprehensive analytics service with PII sanitization
- Integration with existing telemetry consent system

Components Added:
- AnalyticsService: Core privacy-first Mixpanel wrapper
- useAnalyticsConsentInit: Consent-aware initialization hook
- useAnalytics: Enhanced analytics tracking with manufacturing methods
- manufacturingAnalytics: Utility functions for KPI calculations

Page Analytics Integration:
- Dashboard: System metrics and KPI tracking
- History: Performance analysis tracking
- Settings: Privacy controls interaction tracking
- Configuration: YAML config change tracking
- StatusTable: Endpoint interaction tracking

Privacy Compliance:
- Only initializes when explicit consent granted
- No PII collection (sendDefaultPii: false)
- Granular consent for usage vs error diagnostics
- Data sanitization for all tracked properties
- Opt-out by default with explicit opt-in required

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: hemanandr

thingconnect.pulse.client/package-lock.json

@@ -23,6 +23,7 @@
     "lodash": "^4.17.21",
     "lucide-react": "^0.541.0",
     "luxon": "^3.7.1",
+    "mixpanel-browser": "^2.70.0",
     "monaco-editor": "^0.52.2",
     "next-themes": "^0.4.6",
     "react": "^19.1.1",

thingconnect.pulse.client/package.json

@@ -2,6 +2,7 @@ import { Box, Text, Badge, HStack, Skeleton } from '@chakra-ui/react';
 import { Table } from '@chakra-ui/react';
 import { formatDistanceToNow } from 'date-fns';
 import { useNavigate } from 'react-router-dom';
+import { useAnalytics } from '@/hooks/useAnalytics';
 import type { LiveStatusItem } from '@/api/types';
 import TrendBlocks from './TrendBlocks';
 
@@ -12,6 +13,7 @@ interface StatusTableProps {
 
 export function StatusTable({ items, isLoading }: StatusTableProps) {
   const navigate = useNavigate();
+  const analytics = useAnalytics();
 
   const getStatusColor = (status: string) => {
     switch (status.toLowerCase()) {
@@ -40,6 +42,13 @@ export function StatusTable({ items, isLoading }: StatusTableProps) {
   };
 
   const handleRowClick = (id: string) => {
+    // Track endpoint selection
+    analytics.trackDashboardInteraction('endpoint_details_click', {
+      table_type: 'status_overview',
+      endpoint_id: id,
+      source: 'main_dashboard'
+    });
+    
     void navigate(`/endpoints/${id}`);
   };
   console.log('isLoading in StatusTable:', items);

thingconnect.pulse.client/src/components/status/StatusTable.tsx

@@ -7,6 +7,7 @@ import {
   type RegisterRequest,
 } from '../services/authService';
 import { useSentryConsentInit } from '../../../hooks/useSentryConsentInit';
+import { useAnalyticsConsentInit } from '../../../hooks/useAnalyticsConsentInit';
 
 interface AuthContextType {
   user: UserInfo | null;
@@ -35,6 +36,9 @@ export function AuthProvider({ children }: AuthProviderProps) {
   // Initialize Sentry based on user consent when authenticated
   useSentryConsentInit(isAuthenticated);
 
+  // Initialize Analytics based on user consent when authenticated
+  const { analytics } = useAnalyticsConsentInit(isAuthenticated);
+
   const checkSession = async () => {
     try {
       setIsLoading(true);
@@ -69,6 +73,14 @@ export function AuthProvider({ children }: AuthProviderProps) {
       const userData = await authService.login(credentials);
       setUser(userData);
       setSetupRequired(false);
+
+      // Track successful login (after analytics is initialized)
+      setTimeout(() => {
+        analytics.track('User Login', {
+          user_role: userData.role,
+          login_method: 'password'
+        });
+      }, 1000);
     } catch (error) {
       console.error('Login failed:', error);
       throw error;
@@ -80,6 +92,14 @@ export function AuthProvider({ children }: AuthProviderProps) {
       const newUser = await authService.register(userData);
       setUser(newUser);
       setSetupRequired(false);
+
+      // Track user registration (after analytics is initialized)
+      setTimeout(() => {
+        analytics.track('User Registered', {
+          user_role: newUser.role,
+          registration_method: 'onboarding_flow'
+        });
+      }, 1000);
     } catch (error) {
       console.error('Registration failed:', error);
       throw error;
@@ -88,11 +108,18 @@ export function AuthProvider({ children }: AuthProviderProps) {
 
   const logout = async () => {
     try {
+      // Track logout before clearing session
+      analytics.track('User Logout');
+      
       await authService.logout();
     } catch (error) {
       console.error('Logout error:', error);
     } finally {
       setUser(null);
+      
+      // Reset analytics session
+      analytics.reset();
+      
       // After logout, check if setup is needed
       try {
         const needsSetup = await authService.isSetupRequired();

thingconnect.pulse.client/src/features/auth/context/AuthContext.tsx

@@ -0,0 +1,147 @@
+import { getAnalyticsService } from './useAnalyticsConsentInit';
+
+export function useAnalytics() {
+  const analytics = getAnalyticsService();
+
+  const trackPageView = (pageName: string, properties?: Record<string, unknown>) => {
+    analytics.track('Page View', {
+      page_name: pageName,
+      timestamp: new Date().toISOString(),
+      session_duration: performance.now(),
+      ...properties
+    });
+  };
+
+  const trackFeatureUsage = (featureName: string, action: string, properties?: Record<string, unknown>) => {
+    analytics.track('Feature Used', {
+      feature_name: featureName,
+      action,
+      timestamp: new Date().toISOString(),
+      ...properties
+    });
+  };
+
+  const trackMonitoringAction = (action: string, properties?: Record<string, unknown>) => {
+    analytics.track('Monitoring Action', {
+      action,
+      timestamp: new Date().toISOString(),
+      ...properties
+    });
+  };
+
+  const trackConfigurationChange = (changeType: string, properties?: Record<string, unknown>) => {
+    analytics.track('Configuration Changed', {
+      change_type: changeType,
+      timestamp: new Date().toISOString(),
+      ...properties
+    });
+  };
+
+  const trackDashboardInteraction = (interactionType: string, properties?: Record<string, unknown>) => {
+    analytics.track('Dashboard Interaction', {
+      interaction_type: interactionType,
+      timestamp: new Date().toISOString(),
+      ...properties
+    });
+  };
+
+  // Manufacturing-specific tracking methods
+  const trackEndpointManagement = (action: string, endpointData?: Record<string, unknown>) => {
+    analytics.track('Endpoint Management', {
+      action, // 'create', 'update', 'delete', 'test'
+      endpoint_type: endpointData?.type,
+      probe_interval: endpointData?.interval,
+      timeout_seconds: endpointData?.timeout,
+      has_authentication: !!endpointData?.authentication,
+      timestamp: new Date().toISOString(),
+      ...endpointData
+    });
+  };
+
+  const trackAlertInteraction = (action: string, alertData?: Record<string, unknown>) => {
+    analytics.track('Alert Interaction', {
+      action, // 'acknowledge', 'resolve', 'escalate', 'view_details'
+      alert_severity: alertData?.severity,
+      alert_type: alertData?.type,
+      response_time_seconds: alertData?.responseTime,
+      resolution_method: alertData?.resolutionMethod,
+      timestamp: new Date().toISOString()
+    });
+  };
+
+  const trackSystemMetrics = (metrics: Record<string, unknown>) => {
+    analytics.track('System Metrics', {
+      total_endpoints: metrics.totalEndpoints,
+      active_alerts: metrics.activeAlerts,
+      overall_availability: metrics.overallAvailability,
+      monitored_services: metrics.monitoredServices,
+      data_retention_days: metrics.dataRetentionDays,
+      uptime_percentage: metrics.uptimePercentage,
+      timestamp: new Date().toISOString()
+    });
+  };
+
+  const trackPerformanceMetrics = (pageName: string, metrics?: Record<string, unknown>) => {
+    analytics.track('Performance Metrics', {
+      page_name: pageName,
+      load_time_ms: metrics?.loadTime,
+      data_fetch_time_ms: metrics?.dataFetchTime,
+      render_time_ms: metrics?.renderTime,
+      memory_usage_mb: 'memory' in performance ? Math.round((performance as any).memory.usedJSHeapSize / 1024 / 1024) : undefined,
+      timestamp: new Date().toISOString()
+    });
+  };
+
+  const trackManufacturingKPIs = (kpiData: Record<string, unknown>) => {
+    analytics.track('Manufacturing KPIs', {
+      monitoring_coverage_percentage: kpiData.monitoringCoverage,
+      mean_time_to_detection_seconds: kpiData.mttd,
+      mean_time_to_recovery_seconds: kpiData.mttr,
+      false_positive_rate: kpiData.falsePositiveRate,
+      network_segments_monitored: kpiData.networkSegments,
+      critical_endpoints_count: kpiData.criticalEndpoints,
+      timestamp: new Date().toISOString()
+    });
+  };
+
+  const trackConfigurationComplexity = (configData: Record<string, unknown>) => {
+    analytics.track('Configuration Complexity', {
+      total_rules: configData.totalRules,
+      unique_probe_types: configData.uniqueProbeTypes,
+      custom_intervals_count: configData.customIntervals,
+      advanced_features_used: configData.advancedFeatures,
+      configuration_size_kb: configData.configSizeKb,
+      validation_errors: configData.validationErrors,
+      timestamp: new Date().toISOString()
+    });
+  };
+
+  const trackUserEfficiency = (efficiencyData: Record<string, unknown>) => {
+    analytics.track('User Efficiency', {
+      tasks_completed_per_session: efficiencyData.tasksCompleted,
+      average_task_duration_seconds: efficiencyData.avgTaskDuration,
+      navigation_depth: efficiencyData.navigationDepth,
+      help_usage_count: efficiencyData.helpUsage,
+      keyboard_shortcuts_used: efficiencyData.keyboardShortcuts,
+      timestamp: new Date().toISOString()
+    });
+  };
+
+  return {
+    track: analytics.track.bind(analytics),
+    trackPageView,
+    trackFeatureUsage,
+    trackMonitoringAction,
+    trackConfigurationChange,
+    trackDashboardInteraction,
+    // Manufacturing-specific methods
+    trackEndpointManagement,
+    trackAlertInteraction,
+    trackSystemMetrics,
+    trackPerformanceMetrics,
+    trackManufacturingKPIs,
+    trackConfigurationComplexity,
+    trackUserEfficiency,
+    isInitialized: analytics.isInitialized()
+  };
+}

thingconnect.pulse.client/src/hooks/useAnalytics.ts

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { analytics, privacyFirstAnalytics } from '../services/analytics.service';
+
+let analyticsInitialized = false;
+let currentAnalyticsService = analytics; // Start with no-op
+
+export function useAnalyticsConsentInit(isAuthenticated: boolean) {
+  const [initializationAttempted, setInitializationAttempted] = useState(false);
+
+  useEffect(() => {
+    const initializeAnalyticsIfConsented = async () => {
+      // Only attempt initialization once and when user is authenticated
+      if (!isAuthenticated || initializationAttempted || analyticsInitialized) {
+        return;
+      }
+
+      setInitializationAttempted(true);
+
+      try {
+        // Check if user has consented to usage analytics
+        const consentResponse = await fetch('/api/auth/telemetry-consent', {
+          credentials: 'include' // Include cookies for authentication
+        });
+        
+        if (consentResponse.ok) {
+          const consent = await consentResponse.json() as { errorDiagnostics: boolean; usageAnalytics: boolean };
+          
+          if (consent.usageAnalytics) {
+            // Initialize privacy-first analytics service
+            privacyFirstAnalytics.init();
+            currentAnalyticsService = privacyFirstAnalytics;
+            analyticsInitialized = true;
+            
+            // Track initial session start
+            currentAnalyticsService.track('Session Started', {
+              authentication_method: 'web_login',
+              platform: 'web',
+              is_mobile: window.innerWidth < 768
+            });
+
+            console.log('Analytics initialized with user consent for usage analytics');
+          } else {
+            console.log('Analytics not initialized - user has not consented to usage analytics');
+          }
+        } else {
+          console.log('Analytics not initialized - could not verify consent');
+        }
+      } catch (error) {
+        console.log('Analytics initialization skipped - consent verification failed:', error);
+      }
+    };
+
+    void initializeAnalyticsIfConsented();
+  }, [isAuthenticated, initializationAttempted]);
+
+  return { 
+    analyticsInitialized,
+    analytics: currentAnalyticsService
+  };
+}
+
+// Export the current analytics service for use throughout the app
+export const getAnalyticsService = () => currentAnalyticsService;

thingconnect.pulse.client/src/hooks/useAnalyticsConsentInit.ts

@@ -1,14 +1,30 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Text } from '@chakra-ui/react';
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { ConfigurationEditor } from '@/components/config/ConfigurationEditor';
 import { ConfigurationVersions } from '@/components/config/ConfigurationVersions';
 import { Page } from '@/components/layout/Page';
+import { useAnalytics } from '@/hooks/useAnalytics';
 
 export default function Configuration() {
+  const analytics = useAnalytics();
   const [refreshTrigger, setRefreshTrigger] = useState(0);
+  
+  useEffect(() => {
+    analytics.trackPageView('Configuration', {
+      view_type: 'yaml_configuration',
+      section: 'monitoring_setup'
+    });
+  }, []);
+
   const handleConfigurationApplied = () => {
     setRefreshTrigger(prev => prev + 1);
+    
+    // Track configuration change
+    analytics.trackConfigurationChange('yaml_config_applied', {
+      source: 'manual_edit',
+      validation_passed: true
+    });
   };
 
   return (