@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/tests/e2e/usage-mobile.test.ts

@@ -0,0 +1,531 @@
+/**
+ * Usage Dashboard - Mobile Responsive Tests
+ *
+ * Tests mobile-specific behaviour of the Usage Dashboard:
+ * - Card view data transformation
+ * - Mobile layout data structure
+ * - Touch-friendly element properties
+ * - Responsive breakpoint logic
+ *
+ * Note: These tests verify data and logic for mobile views.
+ * Visual/CSS testing would require Playwright with browser context.
+ *
+ * @module tests/e2e/usage-mobile
+ * @created 2026-01-05
+ * @task task-17.24 - Mobile responsive tests
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  type UnifiedResource,
+  type ResourceType,
+  type ResourceStatus,
+  RESOURCE_TYPE_ICONS,
+  RESOURCE_TYPE_LABELS,
+  STATUS_COLOURS,
+  formatCurrency,
+  formatDeltaPct,
+  getDeltaClass,
+} from '../../dashboard/src/components/usage/types';
+import { filterResources, sortResources } from '../../dashboard/src/components/usage/transformers';
+
+// Test data for mobile view scenarios
+const createMobileTestResources = (): UnifiedResource[] => [
+  {
+    id: 'worker-brand-copilot-api',
+    name: 'brand-copilot-api',
+    type: 'worker',
+    project: 'brand-copilot',
+    usage: { value: 100000, unit: 'requests', formatted: '100K' },
+    costCurrent: 5.0,
+    costPrior: 4.0,
+    costDelta: 1.0,
+    costDeltaPct: 25,
+    status: 'healthy',
+  },
+  {
+    id: 'd1-brand-copilot-db',
+    name: 'brand-copilot-db',
+    type: 'd1',
+    project: 'brand-copilot',
+    usage: { value: 500000, unit: 'rows read', formatted: '500K' },
+    costCurrent: 2.5,
+    costPrior: 2.0,
+    costDelta: 0.5,
+    costDeltaPct: 25,
+    status: 'warning',
+  },
+  {
+    id: 'kv-platform-cache',
+    name: 'platform-cache',
+    type: 'kv',
+    project: 'platform',
+    usage: { value: 50000, unit: 'operations', formatted: '50K' },
+    costCurrent: 1.0,
+    costPrior: 0,
+    costDelta: 1.0,
+    costDeltaPct: 'NEW' as const,
+    status: 'healthy',
+  },
+  {
+    id: 'r2-ai-logs',
+    name: 'brand-copilot-ai-logs',
+    type: 'r2',
+    project: 'brand-copilot',
+    // Uses decimal GB (1 GB = 1,000,000,000 bytes) to match Cloudflare billing
+    usage: { value: 1000000000, unit: 'bytes', formatted: '1.00 GB' },
+    costCurrent: 3.0,
+    costPrior: 3.5,
+    costDelta: -0.5,
+    costDeltaPct: -14.3,
+    status: 'healthy',
+  },
+  {
+    id: 'worker-critical-service',
+    name: 'critical-service',
+    type: 'worker',
+    project: 'platform',
+    usage: { value: 25000, unit: 'requests', formatted: '25K' },
+    costCurrent: 8.5,
+    costPrior: 5.0,
+    costDelta: 3.5,
+    costDeltaPct: 70,
+    status: 'critical',
+  },
+];
+
+describe('Mobile Responsive Tests', () => {
+  describe('Resource Type Icons and Labels', () => {
+    it('provides icons for all resource types', () => {
+      const resourceTypes: ResourceType[] = [
+        'worker',
+        'd1',
+        'kv',
+        'r2',
+        'vectorize',
+        'pages',
+        'queues',
+        'workflows',
+        'do',
+        'ai-gateway',
+      ];
+
+      resourceTypes.forEach((type) => {
+        expect(RESOURCE_TYPE_ICONS[type]).toBeDefined();
+        expect(typeof RESOURCE_TYPE_ICONS[type]).toBe('string');
+        expect(RESOURCE_TYPE_ICONS[type].length).toBeGreaterThan(0);
+      });
+    });
+
+    it('provides labels for all resource types', () => {
+      const resourceTypes: ResourceType[] = [
+        'worker',
+        'd1',
+        'kv',
+        'r2',
+        'vectorize',
+        'pages',
+        'queues',
+        'workflows',
+        'do',
+        'ai-gateway',
+      ];
+
+      resourceTypes.forEach((type) => {
+        expect(RESOURCE_TYPE_LABELS[type]).toBeDefined();
+        expect(typeof RESOURCE_TYPE_LABELS[type]).toBe('string');
+        expect(RESOURCE_TYPE_LABELS[type].length).toBeGreaterThan(0);
+      });
+    });
+
+    it('labels are human-readable (not raw type names)', () => {
+      expect(RESOURCE_TYPE_LABELS['d1']).toBe('D1');
+      expect(RESOURCE_TYPE_LABELS['kv']).toBe('KV');
+      expect(RESOURCE_TYPE_LABELS['r2']).toBe('R2');
+      expect(RESOURCE_TYPE_LABELS['do']).toBe('Durable Objects');
+      expect(RESOURCE_TYPE_LABELS['ai-gateway']).toBe('AI Gateway');
+    });
+  });
+
+  describe('Status Colours', () => {
+    it('provides colours for all status levels', () => {
+      const statuses: ResourceStatus[] = ['healthy', 'warning', 'high', 'critical'];
+
+      statuses.forEach((status) => {
+        expect(STATUS_COLOURS[status]).toBeDefined();
+        expect(STATUS_COLOURS[status]).toMatch(/^#[0-9A-Fa-f]{6}$/);
+      });
+    });
+
+    it('uses appropriate colour severity', () => {
+      // Healthy should be green-ish
+      expect(STATUS_COLOURS.healthy).toBe('#10B981');
+
+      // Warning should be yellow/amber
+      expect(STATUS_COLOURS.warning).toBe('#F59E0B');
+
+      // High should be orange
+      expect(STATUS_COLOURS.high).toBe('#F97316');
+
+      // Critical should be red
+      expect(STATUS_COLOURS.critical).toBe('#EF4444');
+    });
+  });
+
+  describe('Currency Formatting for Mobile', () => {
+    it('formats zero as $0.00', () => {
+      expect(formatCurrency(0)).toBe('$0.00');
+    });
+
+    it('formats small amounts with < symbol', () => {
+      expect(formatCurrency(0.005)).toBe('< $0.01');
+      expect(formatCurrency(0.001)).toBe('< $0.01');
+    });
+
+    it('formats normal amounts with 2 decimal places', () => {
+      expect(formatCurrency(5)).toBe('$5.00');
+      expect(formatCurrency(5.5)).toBe('$5.50');
+      expect(formatCurrency(5.556)).toBe('$5.56');
+    });
+
+    it('keeps amounts compact for mobile display', () => {
+      // All formatted values should be reasonably short
+      const testAmounts = [0, 0.001, 1.5, 10.99, 100.5, 999.99];
+      testAmounts.forEach((amount) => {
+        const formatted = formatCurrency(amount);
+        expect(formatted.length).toBeLessThan(15);
+      });
+    });
+  });
+
+  describe('Delta Percentage Formatting for Mobile', () => {
+    it('formats NEW as readable string', () => {
+      expect(formatDeltaPct('NEW')).toBe('NEW');
+    });
+
+    it('formats null as em dash', () => {
+      expect(formatDeltaPct(null)).toBe('—');
+    });
+
+    it('formats zero without sign', () => {
+      expect(formatDeltaPct(0)).toBe('0%');
+    });
+
+    it('formats positive with plus sign', () => {
+      expect(formatDeltaPct(25)).toBe('+25.0%');
+      expect(formatDeltaPct(100)).toBe('+100.0%');
+    });
+
+    it('formats negative with minus sign', () => {
+      expect(formatDeltaPct(-15)).toBe('-15.0%');
+      expect(formatDeltaPct(-50)).toBe('-50.0%');
+    });
+
+    it('outputs compact strings for mobile', () => {
+      const testValues = [0, 25, -25, 100, -100, 'NEW' as const, null];
+      testValues.forEach((value) => {
+        const formatted = formatDeltaPct(value);
+        expect(formatted.length).toBeLessThan(10);
+      });
+    });
+  });
+
+  describe('Delta Class for Visual Styling', () => {
+    it('returns delta-new for NEW resources', () => {
+      expect(getDeltaClass('NEW')).toBe('delta-new');
+    });
+
+    it('returns delta-neutral for zero or null', () => {
+      expect(getDeltaClass(0)).toBe('delta-neutral');
+      expect(getDeltaClass(null)).toBe('delta-neutral');
+    });
+
+    it('returns delta-up for positive changes', () => {
+      expect(getDeltaClass(25)).toBe('delta-up');
+      expect(getDeltaClass(100)).toBe('delta-up');
+      expect(getDeltaClass(0.1)).toBe('delta-up');
+    });
+
+    it('returns delta-down for negative changes', () => {
+      expect(getDeltaClass(-10)).toBe('delta-down');
+      expect(getDeltaClass(-50)).toBe('delta-down');
+      expect(getDeltaClass(-0.1)).toBe('delta-down');
+    });
+  });
+
+  describe('Mobile Card Data Structure', () => {
+    it('all resources have required mobile card fields', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Header row data
+        expect(resource.name).toBeDefined();
+        expect(typeof resource.name).toBe('string');
+        expect(resource.type).toBeDefined();
+        expect(resource.status).toBeDefined();
+
+        // Body metrics
+        expect(resource.project).toBeDefined();
+        expect(resource.usage).toBeDefined();
+        expect(resource.usage.formatted).toBeDefined();
+        expect(resource.usage.unit).toBeDefined();
+        expect(resource.costCurrent).toBeDefined();
+        expect(resource.costDeltaPct).toBeDefined();
+      });
+    });
+
+    it('resource names are not too long for mobile', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Names should be reasonable length (can be truncated with ellipsis)
+        // but very long names could cause layout issues
+        expect(resource.name.length).toBeLessThan(100);
+      });
+    });
+
+    it('formatted usage values are compact', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Formatted values should be human-readable and compact
+        expect(resource.usage.formatted.length).toBeLessThan(20);
+      });
+    });
+  });
+
+  describe('Mobile Sorting Behaviour', () => {
+    it('sorts by cost for easy comparison', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'costCurrent', 'desc');
+
+      // Highest cost first
+      expect(sorted[0].costCurrent).toBe(8.5);
+      expect(sorted[sorted.length - 1].costCurrent).toBe(1.0);
+    });
+
+    it('sorts by status severity for quick triage', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'status', 'desc');
+
+      // Critical first
+      expect(sorted[0].status).toBe('critical');
+    });
+
+    it('sorts by name alphabetically', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'name', 'asc');
+
+      // Alphabetical order
+      for (let i = 0; i < sorted.length - 1; i++) {
+        expect(sorted[i].name.localeCompare(sorted[i + 1].name)).toBeLessThanOrEqual(0);
+      }
+    });
+
+    it('handles NEW in delta percentage sorting', () => {
+      const resources = createMobileTestResources();
+      const sorted = sortResources(resources, 'costDeltaPct', 'desc');
+
+      // NEW should appear first in descending order
+      expect(sorted[0].costDeltaPct).toBe('NEW');
+    });
+  });
+
+  describe('Mobile Filtering Behaviour', () => {
+    it('filters by project for focused view', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { project: 'brand-copilot' });
+
+      expect(filtered.length).toBe(3);
+      expect(filtered.every((r) => r.project === 'brand-copilot')).toBe(true);
+    });
+
+    it('filters by service type', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { serviceTypes: ['worker'] });
+
+      expect(filtered.length).toBe(2);
+      expect(filtered.every((r) => r.type === 'worker')).toBe(true);
+    });
+
+    it('filters by non-zero cost for mobile billing focus', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { nonZeroCost: true });
+
+      expect(filtered.length).toBe(5); // All have costs > 0
+      expect(filtered.every((r) => r.costCurrent > 0)).toBe(true);
+    });
+
+    it('filters by only changed resources', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { onlyChanged: true });
+
+      // Resources with > 5% change or NEW
+      filtered.forEach((r) => {
+        if (typeof r.costDeltaPct === 'number') {
+          expect(Math.abs(r.costDeltaPct)).toBeGreaterThan(5);
+        } else {
+          expect(r.costDeltaPct).toBe('NEW');
+        }
+      });
+    });
+
+    it('supports search query for quick find', () => {
+      const resources = createMobileTestResources();
+      const filtered = filterResources(resources, { searchQuery: 'brand' });
+
+      expect(filtered.length).toBe(3);
+      expect(filtered.every((r) => r.name.toLowerCase().includes('brand'))).toBe(true);
+    });
+  });
+
+  describe('Mobile Touch Target Requirements', () => {
+    // Note: These are data validation tests. CSS would need browser testing.
+    // The component uses tabindex=0 on rows, making them focusable/clickable.
+
+    it('resources have unique IDs for click handling', () => {
+      const resources = createMobileTestResources();
+      const ids = resources.map((r) => r.id);
+      const uniqueIds = new Set(ids);
+
+      expect(uniqueIds.size).toBe(ids.length);
+    });
+
+    it('resources have type for icon display', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        expect(RESOURCE_TYPE_ICONS[resource.type]).toBeDefined();
+      });
+    });
+
+    it('resources have status for colour indicator', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        expect(STATUS_COLOURS[resource.status]).toBeDefined();
+      });
+    });
+  });
+
+  describe('Mobile Breakpoint Data Compatibility', () => {
+    // Verify data works for both table and card views
+
+    it('all fields used in table are available for cards', () => {
+      const resources = createMobileTestResources();
+      const tableFields = [
+        'name',
+        'type',
+        'project',
+        'usage',
+        'costCurrent',
+        'costDeltaPct',
+        'status',
+      ];
+
+      resources.forEach((resource) => {
+        tableFields.forEach((field) => {
+          expect(resource).toHaveProperty(field);
+        });
+      });
+    });
+
+    it('usage has all subfields for mobile display', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        expect(resource.usage).toHaveProperty('value');
+        expect(resource.usage).toHaveProperty('unit');
+        expect(resource.usage).toHaveProperty('formatted');
+      });
+    });
+  });
+
+  describe('Edge Cases for Mobile Display', () => {
+    it('handles empty resource list', () => {
+      const filtered = filterResources([], {});
+      expect(filtered).toHaveLength(0);
+
+      const sorted = sortResources([], 'costCurrent', 'desc');
+      expect(sorted).toHaveLength(0);
+    });
+
+    it('handles single resource', () => {
+      const resources = createMobileTestResources().slice(0, 1);
+
+      const sorted = sortResources(resources, 'costCurrent', 'desc');
+      expect(sorted).toHaveLength(1);
+    });
+
+    it('handles resource with null delta percentage', () => {
+      const resource: UnifiedResource = {
+        id: 'test',
+        name: 'test-resource',
+        type: 'worker',
+        project: 'test',
+        usage: { value: 100, unit: 'requests', formatted: '100' },
+        costCurrent: 1.0,
+        costPrior: 0,
+        costDelta: 1.0,
+        costDeltaPct: null,
+        status: 'healthy',
+      };
+
+      expect(formatDeltaPct(resource.costDeltaPct)).toBe('—');
+      expect(getDeltaClass(resource.costDeltaPct)).toBe('delta-neutral');
+    });
+
+    it('handles very long resource names', () => {
+      const longName = 'this-is-a-very-long-resource-name-that-might-overflow-on-mobile-devices';
+      const formatted = longName; // Component truncates with CSS text-overflow: ellipsis
+
+      expect(formatted.length).toBeGreaterThan(50); // Just verify long names are allowed
+    });
+
+    it('handles large cost values', () => {
+      const largeCost = 9999.99;
+      const formatted = formatCurrency(largeCost);
+
+      expect(formatted).toBe('$9999.99');
+      expect(formatted.length).toBeLessThan(15);
+    });
+
+    it('handles extreme percentage changes', () => {
+      expect(formatDeltaPct(500)).toBe('+500.0%');
+      expect(formatDeltaPct(-99)).toBe('-99.0%');
+      expect(formatDeltaPct(1000)).toBe('+1000.0%');
+    });
+  });
+
+  describe('Accessibility Data for Mobile', () => {
+    it('status values are screenreader-friendly', () => {
+      const statuses: ResourceStatus[] = ['healthy', 'warning', 'high', 'critical'];
+
+      statuses.forEach((status) => {
+        // Status values should be words, not codes
+        expect(status.length).toBeGreaterThan(2);
+        expect(/^[a-z]+$/i.test(status)).toBe(true);
+      });
+    });
+
+    it('type labels are screenreader-friendly', () => {
+      Object.values(RESOURCE_TYPE_LABELS).forEach((label) => {
+        // Labels should be readable words/phrases
+        expect(label.length).toBeGreaterThan(0);
+        expect(/^[A-Za-z0-9\s]+$/.test(label)).toBe(true);
+      });
+    });
+
+    it('formatted values include context', () => {
+      const resources = createMobileTestResources();
+
+      resources.forEach((resource) => {
+        // Formatted values should be numeric-looking for numbers
+        expect(resource.usage.formatted).toBeDefined();
+
+        // Units provide context
+        expect(resource.usage.unit.length).toBeGreaterThan(0);
+      });
+    });
+  });
+});

package/templates/standard/dashboard/src/components/errors/PriorityBadge.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Priority Badge Component
+ * Displays P0-P4 priority with appropriate colour coding
+ */
+interface Props {
+  priority: string;
+  size?: 'sm' | 'md';
+}
+
+const { priority, size = 'md' } = Astro.props;
+
+const colours: Record<string, string> = {
+  P0: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300 border-red-200 dark:border-red-800',
+  P1: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300 border-orange-200 dark:border-orange-800',
+  P2: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800',
+  P3: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-200 dark:border-blue-800',
+  P4: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300 border-gray-200 dark:border-gray-800',
+};
+
+const sizeClasses = size === 'sm' ? 'px-1.5 py-0.5 text-xs' : 'px-2 py-1 text-sm';
+const colourClass = colours[priority] || colours.P4;
+---
+
+<span class={`inline-flex items-center font-semibold rounded border ${colourClass} ${sizeClasses}`}>
+  {priority}
+</span>