@umituz/web-dashboard 2.5.2 → 3.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "2.5.2",
-  "description": "Dashboard Layout System - Customizable, themeable dashboard layouts and settings",
+  "version": "3.1.0",
+  "description": "Dashboard Layout System - Comprehensive analytics, calendar, customizable layouts, and config-based architecture",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "sideEffects": false,
@@ -33,6 +33,13 @@
     "./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",
+    "./calendar": "./src/domains/calendar/index.ts",
+    "./calendar/types": "./src/domains/calendar/types/calendar.types",
+    "./calendar/services": "./src/domains/calendar/services/index.ts",
+    "./calendar/hooks": "./src/domains/calendar/hooks/index.ts",
+    "./calendar/utils": "./src/domains/calendar/utils/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 +92,18 @@
     "login",
     "register",
     "analytics",
+    "analytics-services",
+    "cohort-analysis",
+    "funnel-analysis",
+    "user-segmentation",
+    "behavior-prediction",
+    "performance-monitoring",
+    "realtime-metrics",
+    "calendar",
+    "content-calendar",
+    "scheduler",
+    "content-planning",
+    "drag-drop",
     "charts",
     "metrics",
     "kpi",

package/src/domain/config/CalendarConfig.ts

@@ -0,0 +1,22 @@
+/**
+ * Calendar Configuration
+ */
+
+import type { CalendarConfig } from '../../domains/calendar/types/calendar.types';
+
+/**
+ * Default calendar configuration
+ */
+export const DEFAULT_CALENDAR_CONFIG: CalendarConfig = {
+  defaultView: 'month',
+  showWeekends: true,
+  startOfWeek: 0,
+  hourRange: {
+    start: 0,
+    end: 23,
+  },
+  enableDragDrop: true,
+  showPlatformFilters: true,
+  platforms: ['instagram', 'facebook', 'twitter', 'linkedin', 'tiktok', 'youtube'],
+  slotDuration: 30,
+};

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,6 @@
+/**
+ * Domain Config Index
+ */
+
+export * from './DashboardConfig';
+export * from './CalendarConfig';

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();