@umituz/web-dashboard 2.5.2 → 3.1.0

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/calendar/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Calendar Components Index
+ */
+
+// Placeholder - components will be added in next iteration
+// For now, types, services, hooks, and utils are sufficient
+export {} from './index';

package/src/domains/calendar/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Calendar Hooks Index
+ */
+
+export * from './useCalendar';

package/src/domains/calendar/hooks/useCalendar.ts

@@ -0,0 +1,232 @@
+/**
+ * useCalendar Hook
+ *
+ * React hook for calendar functionality with config support
+ */
+
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import type { CalendarConfig, ContentItem, CalendarFilter } from '../types/calendar.types';
+import { calendarService } from '../services';
+import { DEFAULT_CALENDAR_CONFIG } from '../utils';
+
+interface UseCalendarOptions {
+  /** Calendar configuration */
+  config?: Partial<CalendarConfig>;
+  /** User ID */
+  userId: string;
+  /** Error callback */
+  onError?: (error: Error) => void;
+}
+
+interface UseCalendarReturn {
+  // Data
+  items: ContentItem[];
+  loading: boolean;
+  error: string | null;
+  currentView: CalendarView;
+  currentDate: Date;
+  selectedDate: Date;
+  filter: CalendarFilter;
+
+  // Actions
+  setCurrentView: (view: CalendarView) => void;
+  setCurrentDate: (date: Date) => void;
+  setSelectedDate: (date: Date) => void;
+  setFilter: (filter: Partial<CalendarFilter>) => void;
+  refresh: () => Promise<void>;
+
+  // CRUD
+  createItem: (item: Omit<ContentItem, 'id' | 'created_at' | 'updated_at'>) => Promise<ContentItem>;
+  updateItem: (id: string, updates: Partial<ContentItem>) => Promise<void>;
+  deleteItem: (id: string) => Promise<void>;
+  moveItem: (id: string, newDate: Date) => Promise<void>;
+
+  // Computed
+  filteredItems: ContentItem[];
+  itemsForDate: (date: Date) => ContentItem[];
+}
+
+type CalendarView = 'month' | 'week' | 'day' | 'timeline';
+
+/**
+ * useCalendar hook
+ *
+ * Manages calendar state and operations with config support
+ */
+export function useCalendar(options: UseCalendarOptions): UseCalendarReturn {
+  const { config: userConfig, userId, onError } = options;
+
+  // Merge config with defaults
+  const config = useMemo(() => ({
+    ...DEFAULT_CALENDAR_CONFIG,
+    ...userConfig,
+  }), [userConfig]);
+
+  // State
+  const [items, setItems] = useState<ContentItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [currentView, setCurrentView] = useState<CalendarView>(config.defaultView || 'month');
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [filter, setFilter] = useState<CalendarFilter>({});
+
+  // Fetch items
+  const refresh = useCallback(async () => {
+    if (!userId) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await calendarService.getContentItems(userId, filter);
+      setItems(data);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch calendar items';
+      setError(errorMessage);
+      onError?.(err as Error);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId, filter, onError]);
+
+  // Create item
+  const createItem = useCallback(async (item: Omit<ContentItem, 'id' | 'created_at' | 'updated_at'>): Promise<ContentItem> => {
+    if (!userId) {
+      throw new Error('User ID is required');
+    }
+
+    try {
+      const created = await calendarService.createContentItem(userId, item);
+      await refresh();
+      return created;
+    } catch (err) {
+      onError?.(err as Error);
+      throw err;
+    }
+  }, [userId, refresh, onError]);
+
+  // Update item
+  const updateItem = useCallback(async (id: string, updates: Partial<ContentItem>): Promise<void> => {
+    try {
+      await calendarService.updateContentItem(id, updates);
+      await refresh();
+    } catch (err) {
+      onError?.(err as Error);
+      throw err;
+    }
+  }, [refresh, onError]);
+
+  // Delete item
+  const deleteItem = useCallback(async (id: string): Promise<void> => {
+    try {
+      await calendarService.deleteContentItem(id);
+      await refresh();
+    } catch (err) {
+      onError?.(err as Error);
+      throw err;
+    }
+  }, [refresh, onError]);
+
+  // Move item
+  const moveItem = useCallback(async (id: string, newDate: Date): Promise<void> => {
+    try {
+      await calendarService.moveContentItem(id, newDate);
+      await refresh();
+    } catch (err) {
+      onError?.(err as Error);
+      throw err;
+    }
+  }, [refresh, onError]);
+
+  // Filter update
+  const updateFilter = useCallback((updates: Partial<CalendarFilter>) => {
+    setFilter(prev => ({ ...prev, ...updates }));
+  }, []);
+
+  // Get filtered items
+  const filteredItems = useMemo(() => {
+    return items.filter(item => {
+      // Search filter
+      if (filter.search && !item.title.toLowerCase().includes(filter.search.toLowerCase())) {
+        return false;
+      }
+
+      // Platform filter
+      if (filter.platforms && filter.platforms.length > 0) {
+        if (!item.platforms.some(p => filter.platforms?.includes(p))) {
+          return false;
+        }
+      }
+
+      // Type filter
+      if (filter.types && filter.types.length > 0) {
+        if (!item.type || !filter.types.includes(item.type)) {
+          return false;
+        }
+      }
+
+      // Status filter
+      if (filter.status && item.status !== filter.status) {
+        return false;
+      }
+
+      // Date range filter
+      if (filter.dateRange) {
+        const itemDate = new Date(item.scheduled_at);
+        if (itemDate < filter.dateRange.start || itemDate > filter.dateRange.end) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }, [items, filter]);
+
+  // Get items for specific date
+  const itemsForDate = useCallback((date: Date): ContentItem[] => {
+    const dateStart = new Date(date);
+    dateStart.setHours(0, 0, 0, 0);
+
+    const dateEnd = new Date(date);
+    dateEnd.setHours(23, 59, 59, 999);
+
+    return filteredItems.filter(item => {
+      const itemDate = new Date(item.scheduled_at);
+      return itemDate >= dateStart && itemDate <= dateEnd;
+    });
+  }, [filteredItems]);
+
+  // Initial fetch
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return {
+    // Data
+    items,
+    loading,
+    error,
+    currentView,
+    currentDate,
+    selectedDate,
+    filter,
+
+    // Actions
+    setCurrentView,
+    setCurrentDate,
+    setSelectedDate,
+    setFilter: updateFilter,
+    refresh,
+
+    // CRUD
+    createItem,
+    updateItem,
+    deleteItem,
+    moveItem,
+
+    // Computed
+    filteredItems,
+    itemsForDate,
+  };
+}

package/src/domains/calendar/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Calendar Domain Index
+ */
+
+export * from './types/calendar.types';
+export * from './services';
+export * from './hooks';
+export * from './utils';
+export * from './components';