@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/scripts/tabs-filters-controller.ts

@@ -0,0 +1,464 @@
+/**
+ * Tabs & Filters Controller
+ *
+ * Handles tab switching, filter state management, export functionality,
+ * and auto-refresh for the Usage Dashboard.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+import {
+  renderResourceTable,
+  updateResourceCount,
+  type UnifiedResource,
+} from './resource-table-builder';
+import { getSSRConfig } from './constants';
+
+// ========== Types ==========
+
+export interface FilterState {
+  period: string;
+  project: string;
+  serviceTypes: string[];
+  searchQuery: string;
+  onlyChanged: boolean;
+  nonZeroCost: boolean;
+  compareMode: 'sequential' | 'same-period';
+}
+
+// ========== State ==========
+
+let allResources: UnifiedResource[] = [];
+let filteredResources: UnifiedResource[] = [];
+
+const filterState: FilterState = {
+  period: '30d',
+  project: 'all',
+  serviceTypes: [],
+  searchQuery: '',
+  onlyChanged: false,
+  nonZeroCost: false,
+  compareMode: 'sequential',
+};
+
+// ========== Tab Switching ==========
+
+function initTabSwitching(): void {
+  const tabButtons = document.querySelectorAll('.tab-button');
+  const tabPanels = document.querySelectorAll('.tab-panel');
+
+  tabButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      const tabId = button.getAttribute('data-tab');
+      if (!tabId) return;
+
+      // Update active states (using Tailwind hidden class)
+      tabButtons.forEach((btn) => {
+        btn.classList.remove('active');
+        btn.removeAttribute('data-active');
+      });
+      tabPanels.forEach((panel) => {
+        panel.classList.add('hidden');
+      });
+
+      button.classList.add('active');
+      button.setAttribute('data-active', '');
+      const targetPanel = document.getElementById(`tab-${tabId}`);
+      if (targetPanel) {
+        targetPanel.classList.remove('hidden');
+      }
+    });
+  });
+}
+
+// ========== Filter Event Listeners ==========
+
+function initFilterListeners(): void {
+  // Period selector
+  const periodButtons = document.querySelectorAll('[data-period]');
+  periodButtons.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const period = btn.getAttribute('data-period');
+      if (period) {
+        filterState.period = period;
+        updateURL();
+        // nanostores will handle data refresh via store subscriptions
+      }
+    });
+  });
+
+  // Project filter
+  const projectSelect = document.getElementById('project-filter') as HTMLSelectElement;
+  if (projectSelect) {
+    projectSelect.addEventListener('change', () => {
+      filterState.project = projectSelect.value;
+      updateURL();
+      applyFiltersAndRender();
+    });
+  }
+
+  // Search filter
+  const searchInput = document.getElementById('resource-search') as HTMLInputElement;
+  if (searchInput) {
+    searchInput.addEventListener(
+      'input',
+      debounce(() => {
+        filterState.searchQuery = searchInput.value;
+        applyFiltersAndRender();
+      }, 300)
+    );
+  }
+
+  // Toggle filters (only changed, non-zero cost)
+  const onlyChangedToggle = document.getElementById('only-changed-toggle') as HTMLInputElement;
+  if (onlyChangedToggle) {
+    onlyChangedToggle.addEventListener('change', () => {
+      filterState.onlyChanged = onlyChangedToggle.checked;
+      applyFiltersAndRender();
+    });
+  }
+
+  const nonZeroCostToggle = document.getElementById('non-zero-cost-toggle') as HTMLInputElement;
+  if (nonZeroCostToggle) {
+    nonZeroCostToggle.addEventListener('change', () => {
+      filterState.nonZeroCost = nonZeroCostToggle.checked;
+      applyFiltersAndRender();
+    });
+  }
+
+  // Compare mode selector
+  const compareModeSelect = document.getElementById('compare-mode') as HTMLSelectElement;
+  if (compareModeSelect) {
+    compareModeSelect.addEventListener('change', () => {
+      filterState.compareMode = compareModeSelect.value as 'sequential' | 'same-period';
+      updateURL();
+    });
+  }
+}
+
+// ========== URL Sync ==========
+
+function updateURL(): void {
+  const params = new URLSearchParams(window.location.search);
+  params.set('period', filterState.period);
+  if (filterState.project !== 'all') {
+    params.set('project', filterState.project);
+  } else {
+    params.delete('project');
+  }
+  params.set('compare', filterState.compareMode);
+
+  const newURL = `${window.location.pathname}?${params.toString()}`;
+  window.history.replaceState({}, '', newURL);
+}
+
+// ========== Filter & Render ==========
+
+function applyFiltersAndRender(): void {
+  filteredResources = allResources.filter((resource) => {
+    // Project filter
+    if (
+      filterState.project &&
+      filterState.project !== 'all' &&
+      resource.project !== filterState.project
+    ) {
+      return false;
+    }
+
+    // Search filter
+    if (filterState.searchQuery) {
+      const query = filterState.searchQuery.toLowerCase();
+      if (!resource.name.toLowerCase().includes(query)) {
+        return false;
+      }
+    }
+
+    // Only changed filter (>5% change or NEW)
+    if (filterState.onlyChanged) {
+      if (resource.costDeltaPct === 'NEW') return true;
+      if (typeof resource.costDeltaPct !== 'number') return false;
+      if (Math.abs(resource.costDeltaPct) <= 5) return false;
+    }
+
+    // Non-zero cost filter
+    if (filterState.nonZeroCost && resource.costCurrent === 0) {
+      return false;
+    }
+
+    return true;
+  });
+
+  renderResourceTable(filteredResources);
+  updateResourceCount(filteredResources.length);
+}
+
+// ========== Export Functionality (Task-17.15) ==========
+
+function getExportFilename(ext: string): string {
+  const now = new Date();
+  const month = now.toLocaleString('en-AU', { month: 'short' }).toLowerCase();
+  const year = now.getFullYear();
+  const project = filterState.project === 'all' ? 'all-projects' : filterState.project;
+  // Format: usage-brandcopilot-jan2026.csv
+  return `usage-${project}-${month}${year}.${ext}`;
+}
+
+function downloadFile(content: string, filename: string, mimeType: string): void {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+function exportToCsv(): void {
+  if (filteredResources.length === 0) {
+    alert('No data to export');
+    return;
+  }
+
+  const headers = [
+    'Name',
+    'Type',
+    'Project',
+    'Usage',
+    'Unit',
+    '% of Limit',
+    'Current Cost ($)',
+    'Prior Cost ($)',
+    'Change (%)',
+    'Status',
+  ];
+  const rows = filteredResources.map((r) => [
+    r.name,
+    r.type,
+    r.project,
+    r.usage.value.toString(),
+    r.usage.unit,
+    r.limitPct != null ? r.limitPct.toFixed(1) : '',
+    r.costCurrent.toFixed(4),
+    r.costPrior.toFixed(4),
+    r.costDeltaPct === 'NEW' ? 'NEW' : (r.costDeltaPct?.toFixed(1) ?? '0'),
+    r.status,
+  ]);
+
+  const csvContent = [headers, ...rows]
+    .map((row) => row.map((cell) => `"${cell.toString().replace(/"/g, '""')}"`).join(','))
+    .join('\n');
+
+  downloadFile(csvContent, getExportFilename('csv'), 'text/csv;charset=utf-8;');
+}
+
+function exportToJson(): void {
+  if (filteredResources.length === 0) {
+    alert('No data to export');
+    return;
+  }
+
+  const exportData = {
+    exportedAt: new Date().toISOString(),
+    filters: {
+      period: filterState.period,
+      project: filterState.project,
+      serviceTypes: filterState.serviceTypes,
+      searchQuery: filterState.searchQuery,
+      onlyChanged: filterState.onlyChanged,
+      nonZeroCost: filterState.nonZeroCost,
+      compareMode: filterState.compareMode,
+    },
+    summary: {
+      totalResources: filteredResources.length,
+      totalCurrentCost: filteredResources.reduce((sum, r) => sum + r.costCurrent, 0),
+      totalPriorCost: filteredResources.reduce((sum, r) => sum + r.costPrior, 0),
+      resourcesByType: filteredResources.reduce(
+        (acc, r) => {
+          acc[r.type] = (acc[r.type] || 0) + 1;
+          return acc;
+        },
+        {} as Record<string, number>
+      ),
+    },
+    resources: filteredResources.map((r) => ({
+      id: r.id,
+      name: r.name,
+      type: r.type,
+      project: r.project,
+      repoUrl: r.repoUrl,
+      usage: r.usage,
+      limitPct: r.limitPct,
+      costCurrent: r.costCurrent,
+      costPrior: r.costPrior,
+      costDelta: r.costDelta,
+      costDeltaPct: r.costDeltaPct,
+      status: r.status,
+    })),
+  };
+
+  const jsonContent = JSON.stringify(exportData, null, 2);
+  downloadFile(jsonContent, getExportFilename('json'), 'application/json;charset=utf-8;');
+}
+
+function initExportButtons(): void {
+  const exportCsvBtn = document.getElementById('export-csv');
+  const exportJsonBtn = document.getElementById('export-json');
+
+  if (exportCsvBtn) {
+    exportCsvBtn.addEventListener('click', exportToCsv);
+  }
+
+  if (exportJsonBtn) {
+    exportJsonBtn.addEventListener('click', exportToJson);
+  }
+}
+
+// ========== Auto-Refresh Functionality (Task-17.17) ==========
+
+const REFRESH_INTERVAL = 30; // seconds
+let autoRefreshTimer: ReturnType<typeof setInterval> | null = null;
+let countdownTimer: ReturnType<typeof setInterval> | null = null;
+let countdownValue = REFRESH_INTERVAL;
+
+function updateCountdown(): void {
+  const refreshCountdown = document.getElementById('refresh-countdown');
+  if (refreshCountdown) {
+    refreshCountdown.textContent = `${countdownValue}s`;
+  }
+  countdownValue--;
+  if (countdownValue < 0) {
+    countdownValue = REFRESH_INTERVAL;
+  }
+}
+
+async function refreshData(): Promise<void> {
+  try {
+    const params = new URLSearchParams();
+    params.set('period', filterState.period);
+    if (filterState.project !== 'all') {
+      params.set('project', filterState.project);
+    }
+    params.set('compare', filterState.compareMode);
+
+    // Include credentials to pass Cloudflare Access JWT cookie
+    const response = await fetch(`/api/usage?${params.toString()}`, {
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      console.error('Failed to refresh usage data');
+      return;
+    }
+
+    const data = await response.json();
+    if (data.resources && Array.isArray(data.resources)) {
+      allResources = data.resources;
+      applyFiltersAndRender();
+    }
+  } catch (error) {
+    console.error('Error refreshing data:', error);
+  }
+}
+
+function startAutoRefresh(): void {
+  if (autoRefreshTimer) return;
+
+  const refreshCountdown = document.getElementById('refresh-countdown');
+  countdownValue = REFRESH_INTERVAL;
+  if (refreshCountdown) {
+    refreshCountdown.classList.remove('hidden');
+    updateCountdown();
+  }
+
+  countdownTimer = setInterval(updateCountdown, 1000);
+  autoRefreshTimer = setInterval(async () => {
+    await refreshData();
+    countdownValue = REFRESH_INTERVAL;
+  }, REFRESH_INTERVAL * 1000);
+}
+
+function stopAutoRefresh(): void {
+  if (autoRefreshTimer) {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
+  const refreshCountdown = document.getElementById('refresh-countdown');
+  if (refreshCountdown) {
+    refreshCountdown.classList.add('hidden');
+  }
+}
+
+function initAutoRefresh(): void {
+  const autoRefreshToggle = document.getElementById('auto-refresh-toggle') as HTMLInputElement;
+  if (!autoRefreshToggle) return;
+
+  // Restore from localStorage
+  const savedAutoRefresh = localStorage.getItem('usage-auto-refresh');
+  if (savedAutoRefresh === 'true') {
+    autoRefreshToggle.checked = true;
+    startAutoRefresh();
+  }
+
+  autoRefreshToggle.addEventListener('change', () => {
+    if (autoRefreshToggle.checked) {
+      startAutoRefresh();
+      localStorage.setItem('usage-auto-refresh', 'true');
+    } else {
+      stopAutoRefresh();
+      localStorage.setItem('usage-auto-refresh', 'false');
+    }
+  });
+
+  // Stop auto-refresh when page is hidden
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden && autoRefreshToggle.checked) {
+      stopAutoRefresh();
+    } else if (!document.hidden && autoRefreshToggle.checked) {
+      startAutoRefresh();
+    }
+  });
+}
+
+// ========== Utility Functions ==========
+
+function debounce<T extends (...args: unknown[]) => void>(fn: T, delay: number): T {
+  let timeoutId: ReturnType<typeof setTimeout>;
+  return ((...args: unknown[]) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn(...args), delay);
+  }) as T;
+}
+
+// ========== Resource Management ==========
+
+export function setResources(resources: UnifiedResource[]): void {
+  allResources = resources;
+  applyFiltersAndRender();
+}
+
+export function getFilterState(): FilterState {
+  return { ...filterState };
+}
+
+// ========== Main Initialization ==========
+
+export function initTabsAndFilters(): void {
+  // Load initial config from SSR data attributes
+  const config = getSSRConfig();
+  filterState.period = config.period;
+  filterState.project = config.project;
+
+  // Initialize all subsystems
+  initTabSwitching();
+  initFilterListeners();
+  initExportButtons();
+  initAutoRefresh();
+
+  // Expose setResources globally for data loading
+  (window as unknown as { usagePageSetResources: typeof setResources }).usagePageSetResources =
+    setResources;
+}

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

@@ -0,0 +1,55 @@
+/**
+ * Usage Dashboard State
+ *
+ * Re-exports all store atoms, computed values, and actions.
+ * Part of task-19: Usage Dashboard Refactor Phase 1 - Foundation
+ *
+ * @example
+ * ```ts
+ * import {
+ *   $period, $dailyData, $isLoading,
+ *   fetchDailyData, syncFromURL, setPeriod
+ * } from './state';
+ * ```
+ */
+
+// Store atoms
+export {
+  $period,
+  $project,
+  $customDateRange,
+  $timezone,
+  $dailyData,
+  $isLoading,
+  $selectedDate,
+  $totalCost,
+  $dateRangeDisplay,
+  $dayCount,
+  $averageDailyCost,
+  $resourceTotals,
+  type Period,
+} from './usageStore';
+
+// Actions
+export {
+  // Melbourne formatters
+  formatDateMelbourne,
+  formatDateTimeMelbourne,
+  formatDateShort,
+  getMelbourneDateString,
+  // URL sync
+  syncFromURL,
+  syncToURL,
+  // Data fetching
+  fetchDailyData,
+  // Subscriptions
+  initSubscriptions,
+  destroySubscriptions,
+  // UI actions
+  setPeriod,
+  setProject,
+  setCustomDateRange,
+  selectDate,
+  clearSelection,
+  resetFilters,
+} from './usageActions';