@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/scripts/resource-table-builder.ts

@@ -0,0 +1,294 @@
+/**
+ * Resource Table Builder
+ *
+ * Builds the unified resource table and mobile cards view.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+// ========== Types ==========
+
+export interface UnifiedResource {
+  id: string;
+  name: string;
+  type: string;
+  project: string;
+  /** GitHub repository URL for the project (if available) */
+  repoUrl?: string | null;
+  usage: {
+    value: number;
+    formatted: string;
+    unit: string;
+  };
+  /** Percentage of monthly limit used (0-100+) */
+  limitPct?: number | null;
+  costCurrent: number;
+  costPrior: number;
+  costDelta: number;
+  costDeltaPct: number | 'NEW';
+  status: 'healthy' | 'warning' | 'high' | 'critical';
+}
+
+// ========== Constants ==========
+
+const TYPE_LABELS: Record<string, string> = {
+  worker: 'Worker',
+  d1: 'D1 Database',
+  kv: 'KV Namespace',
+  r2: 'R2 Bucket',
+  vectorize: 'Vectorize',
+  pages: 'Pages',
+  do: 'Durable Object',
+  'ai-gateway': 'AI Gateway',
+  queues: 'Queues',
+  workflows: 'Workflows',
+};
+
+const STATUS_LABELS: Record<string, string> = {
+  healthy: 'Healthy',
+  warning: 'Warning',
+  high: 'High',
+  critical: 'Critical',
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  healthy: 'status-healthy',
+  warning: 'status-warning',
+  high: 'status-high',
+  critical: 'status-critical',
+};
+
+const TABLE_HEADERS = [
+  { key: 'project', label: 'Project', align: 'left' },
+  { key: 'type', label: 'Type', align: 'left' },
+  { key: 'usage', label: 'Usage', align: 'right' },
+  { key: 'costCurrent', label: 'Est. Cost', align: 'right' },
+  { key: 'costDeltaPct', label: 'vs Prior', align: 'right' },
+  { key: 'status', label: 'Status', align: 'left' },
+];
+
+// ========== DOM Helpers ==========
+
+function clearElement(el: HTMLElement): void {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
+
+function createEmptyState(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'empty-state';
+  div.textContent = message;
+  return div;
+}
+
+// ========== Table Building ==========
+
+function createTableHeader(): HTMLElement {
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+
+  TABLE_HEADERS.forEach((header) => {
+    const th = document.createElement('th');
+    th.className = 'sortable';
+    th.setAttribute('data-sort', header.key);
+    if (header.align === 'right') {
+      th.style.textAlign = 'right';
+    }
+    th.textContent = header.label;
+    headerRow.appendChild(th);
+  });
+
+  thead.appendChild(headerRow);
+  return thead;
+}
+
+function createDeltaBadge(deltaPct: number | 'NEW'): HTMLElement {
+  const badge = document.createElement('span');
+
+  if (deltaPct === 'NEW') {
+    badge.className = 'delta-badge delta-new';
+    badge.textContent = 'NEW';
+  } else if (typeof deltaPct === 'number') {
+    // Show dash for unchanged values (within ±0.5%)
+    if (Math.abs(deltaPct) < 0.5) {
+      badge.className = 'delta-badge delta-neutral';
+      badge.textContent = '—';
+    } else {
+      const sign = deltaPct >= 0 ? '+' : '';
+      const colorClass = deltaPct > 5 ? 'delta-up' : deltaPct < -5 ? 'delta-down' : 'delta-neutral';
+      badge.className = 'delta-badge ' + colorClass;
+      badge.textContent = sign + deltaPct.toFixed(1) + '%';
+    }
+  }
+
+  return badge;
+}
+
+function createStatusBadge(status: string): HTMLElement {
+  const badge = document.createElement('span');
+  badge.className = 'status-badge ' + (STATUS_COLORS[status] || '');
+  badge.textContent = STATUS_LABELS[status] || status;
+  return badge;
+}
+
+function createTableRow(resource: UnifiedResource): HTMLElement {
+  const row = document.createElement('tr');
+
+  // Add data-status for critical row highlighting
+  row.setAttribute('data-status', resource.status);
+
+  // Project cell (monospace for project IDs)
+  const projectCell = document.createElement('td');
+  projectCell.className = 'script-name';
+  projectCell.textContent = resource.name || resource.project || resource.id || 'Unknown';
+  row.appendChild(projectCell);
+
+  // Type cell
+  const typeCell = document.createElement('td');
+  typeCell.textContent = TYPE_LABELS[resource.type] || resource.type;
+  row.appendChild(typeCell);
+
+  // Usage cell (right-aligned)
+  const usageCell = document.createElement('td');
+  usageCell.className = 'text-right';
+  usageCell.textContent = resource.usage.formatted + ' ' + resource.usage.unit;
+  row.appendChild(usageCell);
+
+  // Cost cell (right-aligned)
+  const costCell = document.createElement('td');
+  costCell.className = 'font-semibold text-right';
+  costCell.textContent = '$' + resource.costCurrent.toFixed(2);
+  row.appendChild(costCell);
+
+  // Delta cell (right-aligned)
+  const deltaCell = document.createElement('td');
+  deltaCell.className = 'text-right';
+  if (resource.costDeltaPct === 'NEW' || typeof resource.costDeltaPct === 'number') {
+    deltaCell.appendChild(createDeltaBadge(resource.costDeltaPct));
+  } else {
+    deltaCell.textContent = '—';
+  }
+  row.appendChild(deltaCell);
+
+  // Status cell
+  const statusCell = document.createElement('td');
+  statusCell.appendChild(createStatusBadge(resource.status));
+  row.appendChild(statusCell);
+
+  return row;
+}
+
+function createTableBody(resources: UnifiedResource[]): HTMLElement {
+  const tbody = document.createElement('tbody');
+
+  resources.forEach((resource) => {
+    tbody.appendChild(createTableRow(resource));
+  });
+
+  return tbody;
+}
+
+// ========== Mobile Cards ==========
+
+function createMobileCard(resource: UnifiedResource): HTMLElement {
+  const card = document.createElement('div');
+  card.className = 'mobile-card';
+
+  // Add data-status for critical card highlighting
+  card.setAttribute('data-status', resource.status);
+
+  const cardHeader = document.createElement('div');
+  cardHeader.className = 'mobile-card-header';
+  cardHeader.textContent = resource.name || resource.project || resource.id || 'Unknown';
+  card.appendChild(cardHeader);
+
+  const cardBody = document.createElement('div');
+  cardBody.className = 'mobile-card-body';
+
+  const rows = [
+    { label: 'Type', value: TYPE_LABELS[resource.type] || resource.type },
+    { label: 'Usage', value: resource.usage.formatted + ' ' + resource.usage.unit },
+    { label: 'Est. Cost', value: '$' + resource.costCurrent.toFixed(2) },
+    { label: 'Status', value: STATUS_LABELS[resource.status] || resource.status },
+  ];
+
+  rows.forEach((rowData) => {
+    const row = document.createElement('div');
+    row.className = 'mobile-card-row';
+
+    const label = document.createElement('span');
+    label.className = 'mobile-card-label';
+    label.textContent = rowData.label;
+    row.appendChild(label);
+
+    const value = document.createElement('span');
+    value.className = 'mobile-card-value';
+    value.textContent = rowData.value;
+    row.appendChild(value);
+
+    cardBody.appendChild(row);
+  });
+
+  card.appendChild(cardBody);
+  return card;
+}
+
+function createMobileCards(resources: UnifiedResource[]): HTMLElement {
+  const mobileCards = document.createElement('div');
+  mobileCards.className = 'mobile-cards';
+
+  resources.forEach((resource) => {
+    mobileCards.appendChild(createMobileCard(resource));
+  });
+
+  return mobileCards;
+}
+
+// ========== Main Render Function ==========
+
+export function renderResourceTable(resources: UnifiedResource[]): void {
+  const container = document.getElementById('unified-table-container');
+  if (!container) return;
+
+  // Clear container
+  clearElement(container);
+
+  if (resources.length === 0) {
+    container.appendChild(createEmptyState('No resources match the current filters.'));
+    return;
+  }
+
+  // Create table
+  const tableWrapper = document.createElement('div');
+  tableWrapper.className = 'table-container responsive-table';
+
+  const tableDiv = document.createElement('div');
+  tableDiv.className = 'table-wrapper';
+
+  const table = document.createElement('table');
+  table.className = 'detail-table sortable-table';
+
+  table.appendChild(createTableHeader());
+  table.appendChild(createTableBody(resources));
+
+  tableDiv.appendChild(table);
+  tableWrapper.appendChild(tableDiv);
+
+  // Add mobile cards view
+  tableWrapper.appendChild(createMobileCards(resources));
+
+  container.appendChild(tableWrapper);
+}
+
+// ========== Resource Count Update ==========
+
+export function updateResourceCount(count: number): void {
+  const countEl = document.getElementById('resource-count-value');
+  if (countEl) {
+    countEl.textContent = String(count);
+  }
+}
+
+// ========== Type/Status Label Exports ==========
+
+export { TYPE_LABELS, STATUS_LABELS, STATUS_COLORS };