@umituz/web-dashboard 2.5.1 → 3.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.5.1",
-  "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
+  "version": "3.0.0",
+  "description": "Dashboard Layout System - Comprehensive analytics services, customizable layouts, and config-based architecture",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "sideEffects": false,
@@ -33,6 +33,8 @@
     "./analytics/hooks": "./src/domains/analytics/hooks/index.ts",
     "./analytics/utils": "./src/domains/analytics/utils/index.ts",
     "./analytics/types": "./src/domains/analytics/types/index.ts",
+    "./analytics/services": "./src/domains/analytics/services/index.ts",
+    "./config": "./src/domain/config/index.ts",
     "./billing": "./src/domains/billing/index.ts",
     "./billing/components": "./src/domains/billing/components/index.ts",
     "./billing/hooks": "./src/domains/billing/hooks/index.ts",
@@ -85,6 +87,13 @@
     "login",
     "register",
     "analytics",
+    "analytics-services",
+    "cohort-analysis",
+    "funnel-analysis",
+    "user-segmentation",
+    "behavior-prediction",
+    "performance-monitoring",
+    "realtime-metrics",
     "charts",
     "metrics",
     "kpi",

package/src/domain/config/DashboardConfig.ts

@@ -0,0 +1,116 @@
+/**
+ * Dashboard Configuration
+ * Config-based dashboard system
+ */
+
+import type { ChartType } from '../../domains/analytics/types/analytics';
+
+/**
+ * Analytics service types
+ */
+export type AnalyticsServiceType = 'traffic' | 'cohort' | 'funnel' | 'growth' | 'performance';
+
+/**
+ * Export format
+ */
+export type ExportFormat = 'pdf' | 'excel' | 'csv' | 'json';
+
+/**
+ * Analytics configuration
+ */
+export interface AnalyticsConfig {
+  /** Enable analytics */
+  enabled?: boolean;
+  /** Analytics services to include */
+  services?: AnalyticsServiceType[];
+  /** Real-time updates */
+  realtime?: boolean;
+  /** Export configuration */
+  export?: {
+    enabled?: boolean;
+    formats?: ExportFormat[];
+  };
+}
+
+/**
+ * Data refresh configuration
+ */
+export interface DataConfig {
+  /** Refresh interval in milliseconds */
+  refreshInterval?: number;
+  /** Cache duration in milliseconds */
+  cacheDuration?: number;
+  /** Retry attempts for failed requests */
+  retryAttempts?: number;
+}
+
+/**
+ * Charts configuration
+ */
+export interface ChartsConfig {
+  /** Default chart type */
+  defaultType?: ChartType;
+  /** Chart theme */
+  theme?: 'light' | 'dark' | 'auto';
+  /** Enable animations */
+  animations?: boolean;
+  /** Color palette */
+  colors?: string[];
+}
+
+/**
+ * Performance configuration
+ */
+export interface PerformanceConfig {
+  /** Enable lazy loading */
+  lazyLoad?: boolean;
+  /** Enable virtual scrolling */
+  virtualScrolling?: boolean;
+  /** Pagination size */
+  paginationSize?: number;
+}
+
+/**
+ * Dashboard configuration
+ */
+export interface DashboardConfig {
+  /** Analytics configuration */
+  analytics?: AnalyticsConfig;
+  /** Data configuration */
+  data?: DataConfig;
+  /** Charts configuration */
+  charts?: ChartsConfig;
+  /** Performance configuration */
+  performance?: PerformanceConfig;
+}
+
+/**
+ * Default dashboard configuration
+ */
+export const DEFAULT_DASHBOARD_CONFIG: DashboardConfig = {
+  analytics: {
+    enabled: true,
+    services: ['traffic', 'cohort', 'funnel', 'growth'],
+    realtime: true,
+    export: {
+      enabled: true,
+      formats: ['pdf', 'excel', 'csv'],
+    },
+  },
+  data: {
+    refreshInterval: 30000, // 30 seconds
+    cacheDuration: 300000, // 5 minutes
+    retryAttempts: 3,
+  },
+  charts: {
+    defaultType: 'line',
+    theme: 'auto',
+    animations: true,
+    colors: ['#6366f1', '#a855f7', '#f59e0b', '#10b981'],
+  },
+  performance: {
+    lazyLoad: true,
+    virtualScrolling: true,
+    paginationSize: 20,
+  },
+};

package/src/domain/config/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Domain Config Index
+ */
+
+export * from './DashboardConfig';

package/src/domains/analytics/hooks/useAnalytics.ts

@@ -2,9 +2,10 @@
  * useAnalytics Hook
  *
  * Core analytics hook for fetching and managing analytics data
+ * Enhanced with config support and advanced analytics services
  */
 
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import type {
   KPIs,
   TimeSeriesData,
@@ -13,6 +14,8 @@ import type {
   AnalyticsExportOptions,
 } from "../types/analytics";
 import { createKPI } from "../utils/analytics";
+import { analyticsEngineService, performanceService } from "../services";
+import type { DashboardConfig } from "../../../domain/config";
 
 interface UseAnalyticsOptions {
   /** Analytics API base URL */
@@ -21,6 +24,10 @@ interface UseAnalyticsOptions {
   initialDateRange?: DateRangeValue;
   /** Auto-refresh interval in ms (0 to disable) */
   refreshInterval?: number;
+  /** Dashboard configuration */
+  config?: DashboardConfig;
+  /** Error callback */
+  onError?: (error: Error) => void;
 }
 
 interface AnalyticsData {
@@ -43,7 +50,19 @@ interface AnalyticsData {
  * @returns Analytics data and actions
  */
 export function useAnalytics(options: UseAnalyticsOptions = {}) {
-  const { apiUrl = "/api/analytics", initialDateRange, refreshInterval = 0 } = options;
+  const {
+    apiUrl = "/api/analytics",
+    initialDateRange,
+    refreshInterval = 0,
+    config,
+    onError,
+  } = options;
+
+  // Apply config defaults
+  const effectiveRefreshInterval = useMemo(
+    () => refreshInterval || config?.data?.refreshInterval || 0,
+    [refreshInterval, config]
+  );
 
   // State
   const [dateRange, setDateRange] = useState<DateRangeValue>(
@@ -162,11 +181,81 @@ export function useAnalytics(options: UseAnalyticsOptions = {}) {
 
   // Auto-refresh
   useEffect(() => {
-    if (refreshInterval > 0) {
-      const interval = setInterval(fetchAnalytics, refreshInterval);
+    if (effectiveRefreshInterval > 0) {
+      const interval = setInterval(fetchAnalytics, effectiveRefreshInterval);
       return () => clearInterval(interval);
     }
-  }, [fetchAnalytics, refreshInterval]);
+  }, [fetchAnalytics, effectiveRefreshInterval]);
+
+  // Advanced analytics methods
+  const calculateRetention = useCallback(
+    (userData: any[]) => {
+      try {
+        return analyticsEngineService.calculateRetention(userData);
+      } catch (err) {
+        onError?.(err as Error);
+        return [];
+      }
+    },
+    [onError]
+  );
+
+  const calculateFunnel = useCallback(
+    (data: any[], steps: string[]) => {
+      try {
+        return analyticsEngineService.calculateFunnel(data, steps);
+      } catch (err) {
+        onError?.(err as Error);
+        return null;
+      }
+    },
+    [onError]
+  );
+
+  const segmentUsers = useCallback(
+    (userData: any[]) => {
+      try {
+        return analyticsEngineService.segmentUsers(userData);
+      } catch (err) {
+        onError?.(err as Error);
+        return [];
+      }
+    },
+    [onError]
+  );
+
+  const predictUserBehavior = useCallback(
+    (user: any, historicalData: any[]) => {
+      try {
+        return analyticsEngineService.predictUserBehavior(user, historicalData);
+      } catch (err) {
+        onError?.(err as Error);
+        return null;
+      }
+    },
+    [onError]
+  );
+
+  const getPerformanceMetrics = useCallback(() => {
+    try {
+      return performanceService.getDashboardMetrics();
+    } catch (err) {
+      onError?.(err as Error);
+      return null;
+    }
+  }, [onError]);
+
+  const getRealtimeMetrics = useCallback(
+    (previous?: any) => {
+      try {
+        return performanceService.simulateRealtimeMetrics(previous);
+      } catch (err) {
+        onError?.(err as Error);
+        return null;
+      }
+    },
+    [onError]
+  );
 
   return {
     ...data,
@@ -174,5 +263,12 @@ export function useAnalytics(options: UseAnalyticsOptions = {}) {
     updateDateRange,
     refresh,
     exportData,
+    // Advanced analytics
+    calculateRetention,
+    calculateFunnel,
+    segmentUsers,
+    predictUserBehavior,
+    getPerformanceMetrics,
+    getRealtimeMetrics,
   };
 }

package/src/domains/analytics/index.ts

@@ -17,6 +17,26 @@ export {
   useAnalytics,
 } from "./hooks";
 
+// Services
+export {
+  AnalyticsEngineService,
+  analyticsEngineService,
+  PerformanceService,
+  performanceService,
+} from "./services";
+export type {
+  ConversionPath,
+  HeatmapData,
+  UserBehaviorPrediction,
+  UserData,
+  ConversionData,
+  FunnelItem,
+  ActivityItem,
+  PerformanceMetric,
+  DashboardMetrics,
+  RealtimeMetrics,
+} from "./services";
+
 // Utils
 export {
   formatNumber,

package/src/domains/analytics/services/AnalyticsEngineService.ts

@@ -0,0 +1,319 @@
+/**
+ * Analytics Engine Service
+ *
+ * Advanced analytics operations including cohort analysis, funnel analysis,
+ * user segmentation, behavior prediction, and conversion path analysis.
+ */
+
+import type {
+  CohortAnalysis,
+  FunnelData,
+  UserSegment,
+} from '../types/analytics';
+
+export interface ConversionPath {
+  path: string[];
+  conversions: number;
+  value: number;
+  abandonmentRate: number;
+}
+
+export interface HeatmapData {
+  day: string;
+  hour: number;
+  value: number;
+}
+
+export interface UserBehaviorPrediction {
+  churnProbability: number;
+  lifetimeValue: number;
+  nextAction: string;
+  confidence: number;
+}
+
+export interface UserData {
+  signup_date?: string | Date;
+  last_activity?: string | Date;
+  last_login_days?: number;
+  session_duration?: number;
+  pages_per_session?: number;
+  bounce_rate?: number;
+  age?: number;
+  location?: string;
+  churned?: boolean;
+  lifetime_value?: number;
+  last_action?: string;
+}
+
+export interface ConversionData {
+  path?: string[];
+  value?: number;
+}
+
+export interface FunnelItem {
+  [key: string]: boolean | number | undefined;
+  time_spent?: number;
+}
+
+export interface ActivityItem {
+  timestamp: string | Date;
+}
+
+/**
+ * Analytics Engine Service
+ *
+ * Singleton service for advanced analytics calculations
+ */
+export class AnalyticsEngineService {
+  private static instance: AnalyticsEngineService;
+
+  private constructor() {}
+
+  public static getInstance(): AnalyticsEngineService {
+    if (!AnalyticsEngineService.instance) {
+      AnalyticsEngineService.instance = new AnalyticsEngineService();
+    }
+    return AnalyticsEngineService.instance;
+  }
+
+  /**
+   * Calculate cohort retention analysis
+   *
+   * @param data - User data with signup and activity dates
+   * @returns Cohort analysis with retention rates
+   */
+  public calculateRetention(data: UserData[]): CohortAnalysis[] {
+    const cohorts: Map<string, UserData[]> = new Map();
+
+    data.forEach((user) => {
+      if (!user.signup_date) return;
+      const signupMonth = new Date(user.signup_date).toISOString().slice(0, 7);
+      if (!cohorts.has(signupMonth)) {
+        cohorts.set(signupMonth, []);
+      }
+      const cohort = cohorts.get(signupMonth);
+      if (cohort) {
+        cohort.push(user);
+      }
+    });
+
+    const cohortAnalysis: CohortAnalysis[] = [];
+
+    cohorts.forEach((users, cohort) => {
+      const retention: number[] = [];
+      for (let month = 0; month < 12; month++) {
+        const activeUsersCount = users.filter((user) => {
+          if (!user.last_activity) return false;
+          const signupDate = new Date(user.signup_date!);
+          const targetDate = new Date(signupDate.getFullYear(), signupDate.getMonth() + month, 1);
+          return new Date(user.last_activity) >= targetDate;
+        }).length;
+
+        retention.push((activeUsersCount / users.length) * 100);
+      }
+
+      cohortAnalysis.push({
+        cohort,
+        size: users.length,
+        retention,
+        averageRetention: retention.reduce((a, b) => a + b, 0) / retention.length,
+      });
+    });
+
+    return cohortAnalysis;
+  }
+
+  /**
+   * Analyze conversion paths
+   *
+   * @param data - Conversion data with paths and values
+   * @returns Conversion path analysis
+   */
+  public analyzeConversionPaths(data: ConversionData[]): ConversionPath[] {
+    const paths: Map<string, { count: number; value: number }> = new Map();
+    let totalConversions = 0;
+
+    data.forEach((conversion) => {
+      if (!conversion.path) return;
+      const pathKey = conversion.path.join(' → ');
+      if (!paths.has(pathKey)) {
+        paths.set(pathKey, { count: 0, value: 0 });
+      }
+
+      const path = paths.get(pathKey);
+      if (path) {
+        path.count++;
+        path.value += conversion.value || 0;
+        totalConversions++;
+      }
+    });
+
+    return Array.from(paths.entries())
+      .map(([pathString, path]) => ({
+        path: pathString.split(' → '),
+        conversions: path.count,
+        value: path.value,
+        abandonmentRate:
+          totalConversions > 0 ? ((totalConversions - path.count) / totalConversions) * 100 : 0,
+      }))
+      .sort((a, b) => b.conversions - a.conversions);
+  }
+
+  /**
+   * Calculate funnel analysis
+   *
+   * @param data - Funnel data with step indicators
+   * @param steps - Funnel step names
+   * @returns Funnel analysis data
+   */
+  public calculateFunnel(data: FunnelItem[], steps: string[]): FunnelData {
+    let previousCount = data.length;
+    const funnelSteps = steps.map((step, index) => {
+      const stepCount = data.filter((item) => item[step]).length;
+      const conversionRate =
+        index === 0 ? 100 : previousCount > 0 ? (stepCount / previousCount) * 100 : 0;
+      previousCount = stepCount;
+
+      const stepData = data.filter((item) => item[step]);
+      const avgTime =
+        stepData.length > 0
+          ? stepData.reduce((sum, item) => sum + (item.time_spent || 0), 0) / stepData.length
+          : 0;
+
+      return {
+        name: step,
+        count: stepCount,
+        conversionRate,
+        dropOffRate: 100 - conversionRate,
+        averageTime: avgTime,
+      };
+    });
+
+    return {
+      title: 'Conversion Funnel',
+      steps: funnelSteps,
+      totalUsers: data.length,
+      finalConversion: funnelSteps[funnelSteps.length - 1]?.conversionRate || 0,
+    };
+  }
+
+  /**
+   * Generate activity heatmap
+   *
+   * @param data - Activity data with timestamps
+   * @returns Heatmap data by day and hour
+   */
+  public generateActivityHeatmap(data: ActivityItem[]): HeatmapData[] {
+    const heatmap: HeatmapData[] = [];
+    const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+    for (let day = 0; day < 7; day++) {
+      for (let hour = 0; hour < 24; hour++) {
+        const count = data.filter((item) => {
+          const d = new Date(item.timestamp);
+          return d.getDay() === day && d.getHours() === hour;
+        }).length;
+
+        heatmap.push({ day: days[day], hour, value: count });
+      }
+    }
+    return heatmap;
+  }
+
+  /**
+   * Segment users by behavior
+   *
+   * @param data - User data
+   * @returns User segments
+   */
+  public segmentUsers(data: UserData[]): UserSegment[] {
+    const defineSegment = (
+      name: string,
+      filter: (u: UserData) => boolean,
+      chars: string[]
+    ) => {
+      const users = data.filter(filter);
+      const avg = (field: string) =>
+        users.length === 0
+          ? 0
+          : users.reduce((s, i) => s + ((i as any)[field] || 0), 0) / users.length;
+
+      return {
+        name,
+        count: users.length,
+        percentage: (users.length / data.length) * 100,
+        characteristics: chars,
+        behavior: {
+          avgSessionDuration: avg('session_duration'),
+          pagesPerSession: avg('pages_per_session'),
+          bounceRate: avg('bounce_rate'),
+        },
+      };
+    };
+
+    return [
+      defineSegment('Active', (u) => u.last_login_days! <= 7, [
+        'Recent login',
+        'High engagement',
+      ]),
+      defineSegment('Moderate', (u) => u.last_login_days! > 7 && u.last_login_days! <= 30, [
+        'Occasional login',
+      ]),
+      defineSegment('Inactive', (u) => u.last_login_days! > 30, [
+        'Churn risk',
+        'Low activity',
+      ]),
+    ];
+  }
+
+  /**
+   * Predict user behavior
+   *
+   * @param user - Target user
+   * @param historicalData - Historical user data
+   * @returns Behavior prediction
+   */
+  public predictUserBehavior(
+    user: UserData,
+    historicalData: UserData[]
+  ): UserBehaviorPrediction {
+    const similarUsers = historicalData.filter(
+      (u) => Math.abs((u.age || 0) - (user.age || 0)) < 5 && u.location === user.location
+    );
+
+    if (similarUsers.length === 0) {
+      return {
+        churnProbability: 0,
+        lifetimeValue: 0,
+        nextAction: 'none',
+        confidence: 0,
+      };
+    }
+
+    const churnCount = similarUsers.filter((u) => u.churned).length;
+    const totalLTV = similarUsers.reduce((s, u) => s + (u.lifetime_value || 0), 0);
+
+    // Predict next action based on frequency in similar users
+    const actions = similarUsers.map((u) => u.last_action).filter(Boolean) as string[];
+    const actionCounts = actions.reduce((c: Record<string, number>, a) => {
+      c[a] = (c[a] || 0) + 1;
+      return c;
+    }, {});
+    const nextAction = Object.keys(actionCounts).reduce(
+      (a, b) => (actionCounts[a] > actionCounts[b] ? a : b),
+      'unknown'
+    );
+
+    return {
+      churnProbability: churnCount / similarUsers.length,
+      lifetimeValue: totalLTV / similarUsers.length,
+      nextAction,
+      confidence: Math.min(0.9, similarUsers.length / 100),
+    };
+  }
+}
+
+/**
+ * Singleton instance
+ */
+export const analyticsEngineService = AnalyticsEngineService.getInstance();

package/src/domains/analytics/services/PerformanceService.ts

@@ -0,0 +1,321 @@
+/**
+ * Performance Service
+ *
+ * Real-time metrics and dashboard performance monitoring
+ */
+
+export interface PerformanceMetric {
+  name: string;
+  value: number;
+  unit: string;
+  timestamp: number;
+  threshold?: number;
+  status: 'good' | 'warning' | 'critical';
+}
+
+export interface DashboardMetrics {
+  loadTime: number;
+  renderTime: number;
+  apiResponseTime: number;
+  memoryUsage: number;
+  errorRate: number;
+  activeUsers: number;
+}
+
+export interface KPIData {
+  current: number;
+  previous: number;
+  growth: number;
+}
+
+export interface RealtimeMetrics {
+  timestamp: number;
+  users: number;
+  sessions: number;
+  pageViews: number;
+  conversions: number;
+  revenue: number;
+}
+
+/**
+ * Performance Service
+ *
+ * Monitors dashboard performance and provides real-time metrics
+ */
+export class PerformanceService {
+  private metrics: Map<string, PerformanceMetric[]> = new Map();
+  private observers: PerformanceObserver[] = [];
+
+  constructor() {
+    if (typeof window !== 'undefined') {
+      this.initializeObservers();
+    }
+  }
+
+  /**
+   * Initialize performance observers
+   */
+  private initializeObservers(): void {
+    if ('PerformanceObserver' in window) {
+      // Observe layout shifts
+      try {
+        const observer = new PerformanceObserver((list) => {
+          for (const entry of list.getEntries()) {
+            if (entry.entryType === 'layout-shift') {
+              this.recordMetric('CLS', (entry as any).value, 'score', 0.1);
+            }
+          }
+        });
+        observer.observe({ entryTypes: ['layout-shift'] });
+        this.observers.push(observer);
+      } catch (e) {
+        // Layout Shift API not supported
+      }
+
+      // Observe largest contentful paint
+      try {
+        const observer = new PerformanceObserver((list) => {
+          for (const entry of list.getEntries()) {
+            if (entry.entryType === 'largest-contentful-paint') {
+              this.recordMetric('LCP', entry.startTime, 'ms', 2500);
+            }
+          }
+        });
+        observer.observe({ entryTypes: ['largest-contentful-paint'] });
+        this.observers.push(observer);
+      } catch (e) {
+        // LCP API not supported
+      }
+
+      // Observe first input delay
+      try {
+        const observer = new PerformanceObserver((list) => {
+          for (const entry of list.getEntries()) {
+            if (entry.entryType === 'first-input') {
+              this.recordMetric('FID', (entry as any).processingStart - entry.startTime, 'ms', 100);
+            }
+          }
+        });
+        observer.observe({ entryTypes: ['first-input'] });
+        this.observers.push(observer);
+      } catch (e) {
+        // FID API not supported
+      }
+    }
+  }
+
+  /**
+   * Record a performance metric
+   *
+   * @param name - Metric name
+   * @param value - Metric value
+   * @param unit - Unit of measurement
+   * @param threshold - Warning threshold
+   */
+  public recordMetric(name: string, value: number, unit: string, threshold?: number): void {
+    const status = threshold
+      ? value > threshold * 2
+        ? 'critical'
+        : value > threshold
+        ? 'warning'
+        : 'good'
+      : 'good';
+
+    const metric: PerformanceMetric = {
+      name,
+      value,
+      unit,
+      timestamp: Date.now(),
+      threshold,
+      status,
+    };
+
+    if (!this.metrics.has(name)) {
+      this.metrics.set(name, []);
+    }
+
+    const metrics = this.metrics.get(name)!;
+    metrics.push(metric);
+
+    // Keep only last 100 metrics per name
+    if (metrics.length > 100) {
+      metrics.shift();
+    }
+  }
+
+  /**
+   * Get metrics by name
+   *
+   * @param name - Metric name
+   * @returns Array of metrics
+   */
+  public getMetrics(name: string): PerformanceMetric[] {
+    return this.metrics.get(name) || [];
+  }
+
+  /**
+   * Get latest metric value
+   *
+   * @param name - Metric name
+   * @returns Latest metric or undefined
+   */
+  public getLatestMetric(name: string): PerformanceMetric | undefined {
+    const metrics = this.getMetrics(name);
+    return metrics[metrics.length - 1];
+  }
+
+  /**
+   * Get all metrics
+   *
+   * @returns Map of all metrics
+   */
+  public getAllMetrics(): Map<string, PerformanceMetric[]> {
+    return new Map(this.metrics);
+  }
+
+  /**
+   * Clear all metrics
+   */
+  public clearMetrics(): void {
+    this.metrics.clear();
+  }
+
+  /**
+   * Calculate dashboard performance metrics
+   *
+   * @returns Dashboard performance data
+   */
+  public getDashboardMetrics(): DashboardMetrics {
+    const timing = typeof window !== 'undefined' ? window.performance?.timing : null;
+    const navigation = typeof window !== 'undefined' ? window.performance?.navigation : null;
+
+    const loadTime = timing
+      ? timing.loadEventEnd - timing.navigationStart
+      : this.getLatestMetric('loadTime')?.value || 0;
+
+    const renderTime = this.getLatestMetric('renderTime')?.value || 0;
+    const apiResponseTime = this.getLatestMetric('apiResponseTime')?.value || 0;
+    const memoryUsage =
+      typeof (performance as any).memory !== 'undefined'
+        ? (performance as any).memory.usedJSHeapSize / 1048576
+        : 0;
+
+    const errorRate = this.calculateErrorRate();
+
+    return {
+      loadTime,
+      renderTime,
+      apiResponseTime,
+      memoryUsage,
+      errorRate,
+      activeUsers: 0, // To be implemented with real data
+    };
+  }
+
+  /**
+   * Calculate error rate from metrics
+   *
+   * @returns Error rate percentage
+   */
+  private calculateErrorRate(): number {
+    const errors = this.getMetrics('error');
+    if (errors.length === 0) return 0;
+
+    const recentErrors = errors.filter((e) => e.timestamp > Date.now() - 60000); // Last minute
+    return recentErrors.length;
+  }
+
+  /**
+   * Simulate real-time metrics
+   *
+   * @param previous - Previous metrics
+   * @returns Simulated real-time metrics
+   */
+  public simulateRealtimeMetrics(previous?: RealtimeMetrics): RealtimeMetrics {
+    const now = Date.now();
+
+    if (previous) {
+      // Simulate changes
+      const userChange = Math.floor(Math.random() * 20) - 10;
+      const sessionChange = Math.floor(Math.random() * 30) - 15;
+      const pageViewChange = Math.floor(Math.random() * 50) - 20;
+      const conversionCount = Math.random() > 0.8 ? Math.floor(Math.random() * 3) : 0;
+      const revenueAdd = conversionCount * (Math.random() * 100 + 50);
+
+      return {
+        timestamp: now,
+        users: Math.max(0, previous.users + userChange),
+        sessions: Math.max(0, previous.sessions + sessionChange),
+        pageViews: Math.max(0, previous.pageViews + pageViewChange),
+        conversions: previous.conversions + conversionCount,
+        revenue: previous.revenue + revenueAdd,
+      };
+    }
+
+    // Initial values
+    return {
+      timestamp: now,
+      users: Math.floor(Math.random() * 1000) + 500,
+      sessions: Math.floor(Math.random() * 1500) + 800,
+      pageViews: Math.floor(Math.random() * 5000) + 2000,
+      conversions: Math.floor(Math.random() * 50),
+      revenue: Math.floor(Math.random() * 5000) + 2000,
+    };
+  }
+
+  /**
+   * Calculate growth KPI
+   *
+   * @param current - Current value
+   * @param previous - Previous value
+   * @returns KPI data
+   */
+  public calculateKPI(current: number, previous: number): KPIData {
+    const growth = previous > 0 ? ((current - previous) / previous) * 100 : 0;
+    return {
+      current,
+      previous,
+      growth,
+    };
+  }
+
+  /**
+   * Measure page load time
+   */
+  public measurePageLoad(): void {
+    if (typeof window === 'undefined' || !window.performance) return;
+
+    window.addEventListener('load', () => {
+      setTimeout(() => {
+        const timing = window.performance?.timing;
+        if (timing) {
+          const loadTime = timing.loadEventEnd - timing.navigationStart;
+          this.recordMetric('loadTime', loadTime, 'ms', 3000);
+        }
+      }, 0);
+    });
+  }
+
+  /**
+   * Measure API response time
+   *
+   * @param startTime - Request start time
+   */
+  public measureAPIResponse(startTime: number): void {
+    const duration = Date.now() - startTime;
+    this.recordMetric('apiResponseTime', duration, 'ms', 1000);
+  }
+
+  /**
+   * Disconnect all observers
+   */
+  public disconnect(): void {
+    this.observers.forEach((observer) => observer.disconnect());
+    this.observers = [];
+  }
+}
+
+/**
+ * Create singleton instance
+ */
+export const performanceService = new PerformanceService();

package/src/domains/analytics/services/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Analytics Services Index
+ */
+
+export * from './AnalyticsEngineService';
+export * from './PerformanceService';

package/src/domains/analytics/utils/analytics.ts

@@ -219,7 +219,7 @@ export function getDateRangePresets(): DateRangePreset[] {
 export function aggregateByPeriod(
   data: Array<{ date: string; [key: string]: number | string }>,
   period: "day" | "week" | "month" = "day"
-): Array<{ date: string; [key: string]: number }> {
+): Array<{ date: string; [key: string]: string | number }> {
   const grouped = new Map<string, Array<typeof data[0]>>();
 
   data.forEach((item) => {

package/src/domains/billing/utils/billing.ts

@@ -9,12 +9,33 @@ import type {
   Currency,
   PlanTier,
   Subscription,
+  SubscriptionStatus,
   PaymentMethod,
   Invoice,
   InvoiceStatus,
   UsageMetric,
 } from "../types/billing";
 
+/**
+ * Format number with K/M/B suffixes
+ *
+ * @param num - Number to format
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted string
+ */
+export function formatNumber(num: number, decimals: number = 1): string {
+  if (num >= 1_000_000_000) {
+    return (num / 1_000_000_000).toFixed(decimals) + "B";
+  }
+  if (num >= 1_000_000) {
+    return (num / 1_000_000).toFixed(decimals) + "M";
+  }
+  if (num >= 1_000) {
+    return (num / 1_000).toFixed(decimals) + "K";
+  }
+  return num.toFixed(decimals);
+}
+
 /**
  * Format price with currency
  *

package/src/index.ts

@@ -0,0 +1,108 @@
+/**
+ * @umituz/web-dashboard
+ *
+ * Dashboard Layout System - Customizable, themeable dashboard layouts
+ * with comprehensive analytics services and config-based architecture.
+ *
+ * @version 3.0.0
+ */
+
+// Export all domains
+export * from './domains/layouts';
+export * from './domains/settings';
+export * from './domains/billing';
+
+// Auth and Onboarding with conflict resolution
+export {
+  OnboardingWizard,
+  useOnboarding,
+  useOnboardingStep,
+} from './domains/onboarding';
+
+export type {
+  OnboardingStep,
+  OnboardingState,
+  OnboardingConfig,
+} from './domains/onboarding';
+
+export {
+  AuthLayout,
+  LoginForm,
+  RegisterForm,
+  useAuth,
+  type LoginCredentials,
+  type RegisterData,
+  type User,
+} from './domains/auth';
+
+// Analytics with conflict resolution
+export {
+  useAnalytics,
+  MetricCard,
+  AnalyticsChart,
+  AnalyticsCard,
+  AnalyticsLayout,
+  formatNumber,
+  formatPercentage,
+  formatCurrency,
+  calculateGrowth,
+  getTrend,
+  createKPI,
+  createMetric,
+  formatMetricValue,
+  calculateConversionRate,
+  calculateDropOffRate,
+  createDateRangePreset,
+  getDateRangePresets,
+  aggregateByPeriod,
+  calculateMovingAverage,
+  detectOutliers,
+  roundTo,
+  generateColor,
+  generateChartColors,
+  // Services
+  AnalyticsEngineService,
+  analyticsEngineService,
+  PerformanceService,
+  performanceService,
+  // Types
+  type Metric,
+  type TimeSeriesData,
+  type ChartData,
+  type FunnelStep,
+  type FunnelData,
+  type CohortAnalysis,
+  type UserSegment,
+  type KPIData,
+  type KPIs,
+  type ChartType,
+  type ChartConfig,
+  type MetricCardProps,
+  type AnalyticsCardProps,
+  type AnalyticsLayoutProps,
+  type DateRangePreset,
+  type DateRangeValue,
+  type AnalyticsExportOptions,
+  type ConversionPath,
+  type HeatmapData,
+  type UserBehaviorPrediction,
+  type UserData,
+  type ConversionData,
+  type FunnelItem,
+  type ActivityItem,
+  type PerformanceMetric,
+  type DashboardMetrics,
+  type RealtimeMetrics,
+} from './domains/analytics';
+
+// Config with renamed exports to avoid conflicts
+export {
+  DEFAULT_DASHBOARD_CONFIG,
+  type AnalyticsServiceType,
+  type ExportFormat as DashboardExportFormat,
+  type AnalyticsConfig as DashboardAnalyticsConfig,
+  type DataConfig,
+  type ChartsConfig,
+  type PerformanceConfig as DashboardPerformanceConfig,
+  type DashboardConfig as DashboardConfigType,
+} from './domain/config';