@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/state/usageActions.ts

@@ -0,0 +1,439 @@
+/**
+ * Usage Dashboard Actions
+ *
+ * Functions for interacting with the usage store.
+ * Handles API fetching, URL sync, and Melbourne timezone formatting.
+ * Part of task-19: Usage Dashboard Refactor Phase 1 - Foundation
+ *
+ * @example
+ * ```ts
+ * import { syncFromURL, initSubscriptions, fetchDailyData } from './usageActions';
+ *
+ * // On page load
+ * syncFromURL();
+ * initSubscriptions();
+ *
+ * // Manually fetch data
+ * await fetchDailyData();
+ * ```
+ */
+
+import {
+  $period,
+  $project,
+  $customDateRange,
+  $dailyData,
+  $isLoading,
+  $hasLegacyData,
+  $selectedDate,
+  $projects,
+  $allowances,
+  $projectedCost,
+  $projectsLoading,
+  $githubUsage,
+  $error,
+  type Period,
+  type ProjectData,
+  type AllowancesData,
+  type ProjectedCost,
+  type GitHubUsageData,
+} from './usageStore';
+
+// ============================================================================
+// Melbourne Timezone Formatters
+// ============================================================================
+
+/**
+ * Format a date for Melbourne timezone (DD/MM/YYYY)
+ */
+export function formatDateMelbourne(date: Date): string {
+  return date.toLocaleDateString('en-AU', {
+    timeZone: 'Australia/Melbourne',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  });
+}
+
+/**
+ * Format a date-time for Melbourne timezone
+ */
+export function formatDateTimeMelbourne(date: Date): string {
+  return date.toLocaleString('en-AU', {
+    timeZone: 'Australia/Melbourne',
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  });
+}
+
+/**
+ * Format a date for display (e.g., "7 Jan")
+ */
+export function formatDateShort(date: Date): string {
+  return date.toLocaleDateString('en-AU', {
+    timeZone: 'Australia/Melbourne',
+    day: 'numeric',
+    month: 'short',
+  });
+}
+
+/**
+ * Get current Melbourne date as YYYY-MM-DD
+ */
+export function getMelbourneDateString(): string {
+  const now = new Date();
+  return now.toLocaleDateString('en-CA', {
+    timeZone: 'Australia/Melbourne',
+  });
+}
+
+// ============================================================================
+// URL Sync
+// ============================================================================
+
+/**
+ * Sync store state FROM URL (on page load)
+ */
+export function syncFromURL(): void {
+  if (typeof window === 'undefined') return;
+
+  const params = new URLSearchParams(window.location.search);
+
+  // Period
+  const period = params.get('period') as Period | null;
+  if (period && ['24h', '7d', '30d', 'custom'].includes(period)) {
+    $period.set(period);
+  }
+
+  // Project
+  const project = params.get('project');
+  if (project) {
+    $project.set(project);
+  }
+
+  // Custom date range
+  const start = params.get('startDate');
+  const end = params.get('endDate');
+  if (start && end) {
+    $customDateRange.set({ start, end });
+  }
+
+  // Selected date
+  const selectedDate = params.get('selectedDate');
+  if (selectedDate) {
+    $selectedDate.set(selectedDate);
+  }
+}
+
+/**
+ * Sync store state TO URL (on state change)
+ */
+export function syncToURL(): void {
+  if (typeof window === 'undefined') return;
+
+  const url = new URL(window.location.href);
+
+  // Period
+  url.searchParams.set('period', $period.get());
+
+  // Project
+  const project = $project.get();
+  if (project && project !== 'all') {
+    url.searchParams.set('project', project);
+  } else {
+    url.searchParams.delete('project');
+  }
+
+  // Custom date range
+  const { start, end } = $customDateRange.get();
+  if ($period.get() === 'custom' && start && end) {
+    url.searchParams.set('startDate', start);
+    url.searchParams.set('endDate', end);
+  } else {
+    url.searchParams.delete('startDate');
+    url.searchParams.delete('endDate');
+  }
+
+  // Selected date
+  const selected = $selectedDate.get();
+  if (selected) {
+    url.searchParams.set('selectedDate', selected);
+  } else {
+    url.searchParams.delete('selectedDate');
+  }
+
+  window.history.replaceState({}, '', url.toString());
+}
+
+// ============================================================================
+// Data Fetching
+// ============================================================================
+
+/**
+ * Fetch daily data from API
+ *
+ * Uses /api/usage/daily endpoint which returns DailyCostData with:
+ * - days: Array of DailyCostBreakdown (date, services, total)
+ * - summary: { totalCost, averageDailyCost, highestDay, lowestDay }
+ */
+export async function fetchDailyData(options?: { nocache?: boolean }): Promise<void> {
+  $isLoading.set(true);
+
+  try {
+    const params = new URLSearchParams({
+      period: $period.get(),
+    });
+
+    const { start, end } = $customDateRange.get();
+    if ($period.get() === 'custom' && start && end) {
+      params.set('startDate', start);
+      params.set('endDate', end);
+    }
+
+    // Add nocache parameter if requested (bypasses KV cache)
+    if (options?.nocache) {
+      params.set('nocache', 'true');
+    }
+
+    // Fetch from /api/usage/daily endpoint (not /api/usage)
+    // Include credentials to pass Cloudflare Access JWT cookie
+    const response = await fetch(`/api/usage/daily?${params}`, {
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+
+    const json = await response.json();
+
+    // The /api/usage/daily endpoint returns { success, period, data: DailyCostData, cached, timestamp }
+    // DailyCostData has { days: DailyCostBreakdown[], summary: {...}, hasLegacyData?: boolean }
+    if (json.success && json.data?.days) {
+      $dailyData.set(json.data.days);
+      // Set legacy data flag - true if any day has rollupVersion=1 (inflated SUM aggregation)
+      $hasLegacyData.set(json.data.hasLegacyData === true);
+    } else {
+      console.warn('Daily data response missing expected structure:', json);
+      $dailyData.set([]);
+      $hasLegacyData.set(false);
+    }
+  } catch (error) {
+    console.error('Failed to fetch daily data:', error);
+    $dailyData.set([]);
+    $hasLegacyData.set(false);
+  } finally {
+    $isLoading.set(false);
+  }
+}
+
+/**
+ * Fetch projects, allowances, and projected cost from API
+ *
+ * Uses /api/usage/projects endpoint which returns:
+ * - projects: Array of ProjectData with resourceCount
+ * - allowances: Service allowances object
+ * - projectedCost: MTD cost and projection
+ */
+export async function fetchProjects(): Promise<void> {
+  $projectsLoading.set(true);
+  $error.set(null);
+
+  try {
+    const response = await fetch('/api/usage/projects', {
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+
+    const json = await response.json();
+
+    if (json.success) {
+      // Update projects store
+      if (json.projects) {
+        $projects.set(json.projects as ProjectData[]);
+      }
+
+      // Update allowances store
+      if (json.allowances) {
+        $allowances.set(json.allowances as AllowancesData);
+      }
+
+      // Update projected cost store
+      if (json.projectedCost) {
+        $projectedCost.set(json.projectedCost as ProjectedCost);
+      }
+    } else {
+      console.warn('Projects response missing success:', json);
+      $error.set(json.error || 'Failed to fetch projects');
+    }
+  } catch (error) {
+    console.error('Failed to fetch projects:', error);
+    $error.set(error instanceof Error ? error.message : 'Failed to fetch projects');
+  } finally {
+    $projectsLoading.set(false);
+  }
+}
+
+/**
+ * Fetch GitHub usage data from utilisation endpoint
+ *
+ * Uses /api/usage/utilization endpoint which returns:
+ * - github: MTD usage and plan details
+ */
+export async function fetchGitHubUsage(): Promise<void> {
+  try {
+    const response = await fetch('/api/usage/utilization', {
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      console.warn('GitHub usage fetch failed:', response.status);
+      return;
+    }
+
+    const json = await response.json();
+
+    if (json.success && json.github) {
+      $githubUsage.set(json.github as GitHubUsageData);
+    }
+  } catch (error) {
+    console.error('Failed to fetch GitHub usage:', error);
+    // Don't set error state - GitHub data is supplementary
+  }
+}
+
+/**
+ * Fetch all usage data in parallel
+ *
+ * Consolidates multiple API calls for initial page load:
+ * - fetchDailyData(): Daily cost breakdown
+ * - fetchProjects(): Projects, allowances, projected cost
+ * - fetchGitHubUsage(): GitHub MTD usage
+ *
+ * @example
+ * ```ts
+ * // On page load
+ * await fetchAll();
+ * ```
+ */
+export async function fetchAll(): Promise<void> {
+  $isLoading.set(true);
+  $projectsLoading.set(true);
+  $error.set(null);
+
+  try {
+    // Fetch all data in parallel
+    await Promise.all([fetchDailyData(), fetchProjects(), fetchGitHubUsage()]);
+  } catch (error) {
+    console.error('Failed to fetch all usage data:', error);
+    $error.set(error instanceof Error ? error.message : 'Failed to fetch usage data');
+  }
+  // Loading states are managed by individual fetch functions
+}
+
+// ============================================================================
+// Subscriptions
+// ============================================================================
+
+let unsubscribers: (() => void)[] = [];
+
+/**
+ * Initialise store subscriptions for auto-fetching and URL sync.
+ * Call this once on page load.
+ */
+export function initSubscriptions(): void {
+  // Prevent double initialisation
+  if (unsubscribers.length > 0) {
+    return;
+  }
+
+  // Auto-fetch when period changes
+  unsubscribers.push(
+    $period.subscribe(() => {
+      fetchDailyData();
+      syncToURL();
+    })
+  );
+
+  // Auto-fetch when project changes
+  unsubscribers.push(
+    $project.subscribe(() => {
+      fetchDailyData();
+      syncToURL();
+    })
+  );
+
+  // Auto-fetch when custom date range changes (only if period is 'custom')
+  unsubscribers.push(
+    $customDateRange.subscribe(() => {
+      if ($period.get() === 'custom') {
+        fetchDailyData();
+        syncToURL();
+      }
+    })
+  );
+
+  // Sync selected date to URL
+  unsubscribers.push($selectedDate.subscribe(() => syncToURL()));
+}
+
+/**
+ * Clean up subscriptions.
+ * Call this on page unload if needed.
+ */
+export function destroySubscriptions(): void {
+  unsubscribers.forEach((unsub) => unsub());
+  unsubscribers = [];
+}
+
+// ============================================================================
+// Actions (for UI components)
+// ============================================================================
+
+/**
+ * Set the period filter
+ */
+export function setPeriod(period: Period): void {
+  $period.set(period);
+}
+
+/**
+ * Set the project filter
+ */
+export function setProject(project: string): void {
+  $project.set(project);
+}
+
+/**
+ * Set custom date range
+ */
+export function setCustomDateRange(start: string, end: string): void {
+  $customDateRange.set({ start, end });
+}
+
+/**
+ * Select a date (from chart click)
+ */
+export function selectDate(date: string | null): void {
+  $selectedDate.set(date);
+}
+
+/**
+ * Clear the selected date
+ */
+export function clearSelection(): void {
+  $selectedDate.set(null);
+}
+
+/**
+ * Reset all filters to defaults
+ */
+export function resetFilters(): void {
+  $period.set('30d');
+  $project.set('all');
+  $customDateRange.set({ start: '', end: '' });
+  $selectedDate.set(null);
+}