@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/scripts/constants.ts

@@ -0,0 +1,60 @@
+/**
+ * Usage Dashboard Constants
+ *
+ * Static label mappings and configuration.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+// Period display labels
+export const PERIOD_LABELS: Record<string, string> = {
+  '24h': 'Last 24 Hours',
+  '7d': 'Last 7 Days',
+  '30d': 'Last 30 Days',
+  custom: 'Custom Range',
+};
+
+// Project display labels
+export const PROJECT_LABELS: Record<string, string> = {
+  all: 'All Projects',
+  'brand-copilot': 'Brand Copilot',
+  scout: 'Scout',
+  platform: 'Platform',
+};
+
+// Valid period values
+export const VALID_PERIODS = ['24h', '7d', '30d', 'custom'] as const;
+export type Period = (typeof VALID_PERIODS)[number];
+
+// Valid project values
+export const VALID_PROJECTS = ['all', 'brand-copilot', 'scout', 'platform'] as const;
+export type Project = (typeof VALID_PROJECTS)[number];
+
+// Valid compare mode values
+export const VALID_COMPARE_MODES = ['none', 'lastMonth', 'custom'] as const;
+export type CompareMode = (typeof VALID_COMPARE_MODES)[number];
+
+// Get SSR config from data attributes (set by Astro template)
+export function getSSRConfig(): { period: string; project: string; compare: CompareMode } {
+  const configEl = document.getElementById('usage-ssr-config');
+  if (!configEl) {
+    return { period: '30d', project: 'all', compare: 'none' };
+  }
+  const compareValue = configEl.dataset.compare || 'none';
+  return {
+    period: configEl.dataset.period || '30d',
+    project: configEl.dataset.project || 'all',
+    compare: (VALID_COMPARE_MODES.includes(compareValue as CompareMode)
+      ? compareValue
+      : 'none') as CompareMode,
+  };
+}
+
+// Get period label
+export function getPeriodLabel(period: string): string {
+  return PERIOD_LABELS[period] || 'Last 30 Days';
+}
+
+// Get project label
+export function getProjectLabel(project: string): string {
+  return PROJECT_LABELS[project] || 'All Projects';
+}

package/templates/shared/dashboard/src/components/usage/scripts/formatters.ts

@@ -0,0 +1,62 @@
+/**
+ * Usage Dashboard - Format Utilities
+ *
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+/**
+ * Format a number with K/M/B suffixes
+ */
+export function formatNumber(num: number | undefined | null): string {
+  if (num === undefined || num === null || isNaN(num)) return '0';
+  if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(2)}B`;
+  if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(2)}M`;
+  if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+  return num.toLocaleString();
+}
+
+/**
+ * Format bytes to human-readable string using decimal (SI) units.
+ *
+ * IMPORTANT: Uses decimal (SI) units because Cloudflare bills in decimal GB:
+ * - 1 GB = 1,000,000,000 bytes (decimal/SI - used for billing)
+ * - 1 GiB = 1,073,741,824 bytes (binary - NOT used by Cloudflare)
+ *
+ * This ensures displayed values match Cloudflare billing/CSV exports.
+ */
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(2)} GB`;
+  if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(2)} MB`;
+  if (bytes >= 1_000) return `${(bytes / 1_000).toFixed(2)} KB`;
+  return `${bytes} B`;
+}
+
+/**
+ * Format currency value
+ */
+export function formatCurrency(amount: number, decimals = 2): string {
+  return '$' + amount.toFixed(decimals);
+}
+
+/**
+ * Format percentage
+ */
+export function formatPercent(value: number): string {
+  return value.toFixed(1) + '%';
+}
+
+/**
+ * Format AI-specific numbers with appropriate precision
+ */
+export function formatAINumber(num: number): string {
+  if (num >= 1_000_000) return (num / 1_000_000).toFixed(2) + 'M';
+  if (num >= 1_000) return (num / 1_000).toFixed(1) + 'K';
+  return num.toLocaleString();
+}
+
+/**
+ * Format AI currency (higher precision)
+ */
+export function formatAICurrency(amount: number): string {
+  return '$' + amount.toFixed(4);
+}