@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/CostBreakdownChart.astro

@@ -0,0 +1,381 @@
+---
+/**
+ * CostBreakdownChart.astro
+ *
+ * Horizontal bar chart showing cost breakdown by resource type.
+ * - Sorted by cost descending
+ * - Percentage labels and absolute values
+ * - Click bar to filter table to that resource type
+ * - Theme-aware colours using CSS custom properties
+ */
+
+interface CostItem {
+  type: string;
+  label: string;
+  cost: number;
+  percentage: number;
+}
+
+interface Props {
+  costs: CostItem[];
+  totalCost: number;
+  class?: string;
+}
+
+const { costs = [], totalCost = 0, class: className = '' } = Astro.props;
+
+// Sort by cost descending
+const sortedCosts = [...costs].sort((a, b) => b.cost - a.cost);
+
+// Resource type to color mapping (matches design tokens)
+const typeColors: Record<string, string> = {
+  worker: 'var(--usage-accent-blue, #0969da)',
+  d1: 'var(--usage-accent-purple, #8250df)',
+  kv: 'var(--usage-accent-green, #1a7f37)',
+  r2: 'var(--usage-accent-yellow, #9a6700)',
+  pages: 'var(--usage-accent-red, #cf222e)',
+  vectorize: '#06b6d4',
+  'ai-gateway': '#ec4899',
+  queues: '#f97316',
+  workflows: '#84cc16',
+  'durable-objects': '#6366f1',
+};
+
+function getTypeColor(type: string): string {
+  return typeColors[type.toLowerCase()] || 'var(--usage-text-muted, #8c959f)';
+}
+
+function formatCost(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function formatPercentage(value: number): string {
+  return `${value.toFixed(1)}%`;
+}
+---
+
+<div class:list={['cost-breakdown-chart', className]} data-component="cost-breakdown-chart">
+  <div class="chart-header">
+    <h3 class="chart-title">Cost Breakdown</h3>
+    <span class="chart-total">{formatCost(totalCost)} total</span>
+  </div>
+
+  <div class="chart-bars">
+    {
+      sortedCosts.length === 0 ? (
+        <div class="empty-state">
+          <svg
+            class="empty-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"
+            />
+          </svg>
+          <span class="empty-text">No cost data available</span>
+        </div>
+      ) : (
+        sortedCosts.map((item) => (
+          <button
+            type="button"
+            class="bar-row"
+            data-type={item.type}
+            title={`Click to filter by ${item.label}`}
+          >
+            <div class="bar-label">
+              <span class="type-indicator" style={`--bar-color: ${getTypeColor(item.type)}`} />
+              <span class="type-name">{item.label}</span>
+            </div>
+            <div class="bar-track">
+              <div
+                class="bar-fill"
+                style={`--bar-width: ${item.percentage}%; --bar-color: ${getTypeColor(item.type)}`}
+              >
+                <span class="bar-value">{formatCost(item.cost)}</span>
+              </div>
+            </div>
+            <div class="bar-percentage">{formatPercentage(item.percentage)}</div>
+          </button>
+        ))
+      )
+    }
+  </div>
+
+  {
+    sortedCosts.length > 0 && (
+      <div class="chart-legend">
+        <span class="legend-hint">Click a bar to filter the table</span>
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .cost-breakdown-chart {
+    background: var(--usage-bg-secondary, #f6f8fa);
+    border: 1px solid var(--usage-border-default, #d1d9e0);
+    border-radius: var(--usage-radius-lg, 8px);
+    padding: var(--usage-spacing-lg, 1.5rem);
+    transition:
+      background-color var(--usage-transition-normal, 200ms ease),
+      border-color var(--usage-transition-normal, 200ms ease);
+  }
+
+  .chart-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: var(--usage-spacing-lg, 1.5rem);
+    padding-bottom: var(--usage-spacing-md, 1rem);
+    border-bottom: 1px solid var(--usage-border-subtle, #e8ecef);
+  }
+
+  .chart-title {
+    margin: 0;
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--usage-text-primary, #1f2328);
+    letter-spacing: -0.01em;
+  }
+
+  .chart-total {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary, #656d76);
+  }
+
+  .chart-bars {
+    display: flex;
+    flex-direction: column;
+    gap: var(--usage-spacing-sm, 0.5rem);
+  }
+
+  .bar-row {
+    display: grid;
+    grid-template-columns: 140px 1fr 60px;
+    align-items: center;
+    gap: var(--usage-spacing-md, 1rem);
+    padding: var(--usage-spacing-sm, 0.5rem) var(--usage-spacing-sm, 0.5rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--usage-radius-md, 6px);
+    cursor: pointer;
+    transition: background-color var(--usage-transition-fast, 150ms ease);
+    text-align: left;
+    width: 100%;
+  }
+
+  .bar-row:hover {
+    background: var(--usage-bg-hover, #eaeef2);
+  }
+
+  .bar-row:focus {
+    outline: 2px solid var(--usage-accent-blue, #0969da);
+    outline-offset: 2px;
+  }
+
+  .bar-row:active {
+    transform: scale(0.995);
+  }
+
+  .bar-label {
+    display: flex;
+    align-items: center;
+    gap: var(--usage-spacing-sm, 0.5rem);
+    min-width: 0;
+  }
+
+  .type-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    background: var(--bar-color);
+    flex-shrink: 0;
+  }
+
+  .type-name {
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--usage-text-primary, #1f2328);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .bar-track {
+    height: 24px;
+    background: var(--usage-bg-tertiary, #f0f2f4);
+    border-radius: var(--usage-radius-sm, 4px);
+    overflow: hidden;
+    position: relative;
+  }
+
+  .bar-fill {
+    height: 100%;
+    width: var(--bar-width);
+    min-width: fit-content;
+    background: var(--bar-color);
+    border-radius: var(--usage-radius-sm, 4px);
+    display: flex;
+    align-items: center;
+    padding: 0 var(--usage-spacing-sm, 0.5rem);
+    transition: width var(--usage-transition-slow, 300ms ease);
+    position: relative;
+  }
+
+  .bar-value {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: white;
+    white-space: nowrap;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  /* For very small bars, show value outside */
+  .bar-fill[style*='--bar-width: 0'] .bar-value,
+  .bar-fill[style*='--bar-width: 1%'] .bar-value,
+  .bar-fill[style*='--bar-width: 2%'] .bar-value,
+  .bar-fill[style*='--bar-width: 3%'] .bar-value,
+  .bar-fill[style*='--bar-width: 4%'] .bar-value,
+  .bar-fill[style*='--bar-width: 5%'] .bar-value {
+    position: absolute;
+    left: 100%;
+    padding-left: var(--usage-spacing-xs, 0.25rem);
+    color: var(--usage-text-secondary, #656d76);
+    text-shadow: none;
+  }
+
+  .bar-percentage {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--usage-text-muted, #8c959f);
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .chart-legend {
+    margin-top: var(--usage-spacing-md, 1rem);
+    padding-top: var(--usage-spacing-sm, 0.5rem);
+    border-top: 1px solid var(--usage-border-subtle, #e8ecef);
+  }
+
+  .legend-hint {
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted, #8c959f);
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--usage-spacing-xl, 2rem);
+    gap: var(--usage-spacing-sm, 0.5rem);
+  }
+
+  .empty-icon {
+    width: 48px;
+    height: 48px;
+    color: var(--usage-text-muted, #8c959f);
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-family: var(--usage-font-sans, 'Inter', sans-serif);
+    font-size: 0.875rem;
+    color: var(--usage-text-muted, #8c959f);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    .bar-row {
+      grid-template-columns: 100px 1fr 50px;
+      gap: var(--usage-spacing-sm, 0.5rem);
+    }
+
+    .type-name {
+      font-size: 0.75rem;
+    }
+
+    .bar-value {
+      font-size: 0.625rem;
+    }
+
+    .bar-percentage {
+      font-size: 0.6875rem;
+    }
+  }
+</style>
+
+<script>
+  // Handle bar clicks to filter the table by resource type
+  document.addEventListener('DOMContentLoaded', () => {
+    const chart = document.querySelector('[data-component="cost-breakdown-chart"]');
+    if (!chart) return;
+
+    chart.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement;
+      const barRow = target.closest('.bar-row') as HTMLElement;
+
+      if (barRow) {
+        const type = barRow.dataset.type;
+        if (type) {
+          // Dispatch custom event to filter the table
+          document.dispatchEvent(
+            new CustomEvent('usage:filter-type', {
+              detail: { type },
+              bubbles: true,
+            })
+          );
+
+          // Also update URL params
+          const url = new URL(window.location.href);
+          const currentTypes = url.searchParams.get('types')?.split(',').filter(Boolean) || [];
+
+          if (currentTypes.includes(type)) {
+            // Already filtered by this type, remove it
+            const newTypes = currentTypes.filter((t) => t !== type);
+            if (newTypes.length > 0) {
+              url.searchParams.set('types', newTypes.join(','));
+            } else {
+              url.searchParams.delete('types');
+            }
+          } else {
+            // Add this type to filter (replace existing)
+            url.searchParams.set('types', type);
+          }
+
+          window.history.replaceState({}, '', url.toString());
+
+          // Visual feedback - add active state
+          chart.querySelectorAll('.bar-row').forEach((row) => row.classList.remove('active'));
+          barRow.classList.add('active');
+        }
+      }
+    });
+  });
+</script>
+
+<style>
+  /* Active state for selected bar */
+  .bar-row.active {
+    background: var(--usage-bg-hover, #eaeef2);
+    box-shadow: inset 0 0 0 2px var(--usage-accent-blue, #0969da);
+  }
+</style>

package/templates/shared/dashboard/src/components/usage/CostBreakdownTable.astro

@@ -0,0 +1,210 @@
+---
+/**
+ * CostBreakdownTable Component
+ *
+ * Displays cost breakdown by project with resource type breakdown.
+ */
+
+interface ProjectCost {
+  project: string;
+  workers: number;
+  d1: number;
+  kv: number;
+  r2: number;
+  vectorize: number;
+  aiGateway: number;
+  durableObjects: number;
+  total: number;
+}
+
+interface Props {
+  projectCosts: ProjectCost[];
+}
+
+const { projectCosts } = Astro.props;
+
+function formatCurrency(amount: number): string {
+  if (amount === 0) return '$0.00';
+  if (amount < 0.01) return '<$0.01';
+  return `$${amount.toFixed(2)}`;
+}
+
+function getProjectLabel(project: string): string {
+  const labels: Record<string, string> = {
+    'brand-copilot': 'Brand Copilot',
+    scout: 'Scout',
+    platform: 'Platform',
+    other: 'Other',
+  };
+  return labels[project] || project;
+}
+
+function getProjectIcon(project: string): string {
+  const icons: Record<string, string> = {
+    'brand-copilot': '&#x1F43B;',
+    scout: '&#x1F50D;',
+    platform: '&#x2699;&#xFE0F;',
+    other: '&#x1F4E6;',
+  };
+  return icons[project] || '&#x1F4C1;';
+}
+
+// Calculate totals
+const totals = projectCosts.reduce(
+  (acc, p) => ({
+    workers: acc.workers + p.workers,
+    d1: acc.d1 + p.d1,
+    kv: acc.kv + p.kv,
+    r2: acc.r2 + p.r2,
+    vectorize: acc.vectorize + p.vectorize,
+    aiGateway: acc.aiGateway + p.aiGateway,
+    durableObjects: acc.durableObjects + p.durableObjects,
+    total: acc.total + p.total,
+  }),
+  { workers: 0, d1: 0, kv: 0, r2: 0, vectorize: 0, aiGateway: 0, durableObjects: 0, total: 0 }
+);
+---
+
+<div class="table-container">
+  <table class="cost-table">
+    <thead>
+      <tr>
+        <th>Project</th>
+        <th>Workers</th>
+        <th>D1</th>
+        <th>KV</th>
+        <th>R2</th>
+        <th>Vectorize</th>
+        <th>AI Gateway</th>
+        <th class="total-col">Total</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        projectCosts.map((project) => (
+          <tr>
+            <td class="project-cell">
+              <span class="project-icon" set:html={getProjectIcon(project.project)} />
+              <span class="project-name">{getProjectLabel(project.project)}</span>
+            </td>
+            <td>{formatCurrency(project.workers)}</td>
+            <td>{formatCurrency(project.d1)}</td>
+            <td>{formatCurrency(project.kv)}</td>
+            <td>{formatCurrency(project.r2)}</td>
+            <td>{formatCurrency(project.vectorize)}</td>
+            <td>{formatCurrency(project.aiGateway)}</td>
+            <td class="total-col">{formatCurrency(project.total)}</td>
+          </tr>
+        ))
+      }
+    </tbody>
+    <tfoot>
+      <tr class="totals-row">
+        <td class="project-cell">
+          <span class="project-icon">&#x2211;</span>
+          <span class="project-name">Total</span>
+        </td>
+        <td>{formatCurrency(totals.workers)}</td>
+        <td>{formatCurrency(totals.d1)}</td>
+        <td>{formatCurrency(totals.kv)}</td>
+        <td>{formatCurrency(totals.r2)}</td>
+        <td>{formatCurrency(totals.vectorize)}</td>
+        <td>{formatCurrency(totals.aiGateway)}</td>
+        <td class="total-col grand-total">{formatCurrency(totals.total)}</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+<style>
+  .table-container {
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+  }
+
+  .cost-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .cost-table thead {
+    background-color: #f9fafb;
+  }
+
+  .cost-table th {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .cost-table td {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+    color: #374151;
+    border-bottom: 1px solid #f3f4f6;
+  }
+
+  .cost-table tbody tr:hover {
+    background-color: #f9fafb;
+  }
+
+  .project-cell {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .project-icon {
+    font-size: 1rem;
+    width: 1.5rem;
+    text-align: center;
+  }
+
+  .project-name {
+    font-weight: 500;
+  }
+
+  .total-col {
+    font-weight: 600;
+    color: #1f2937;
+    background-color: #f9fafb;
+  }
+
+  .totals-row {
+    background-color: #f3f4f6;
+    font-weight: 600;
+  }
+
+  .totals-row td {
+    border-bottom: none;
+    border-top: 2px solid #e5e7eb;
+    color: #1f2937;
+  }
+
+  .grand-total {
+    color: #1d4ed8 !important;
+    font-size: 1rem;
+  }
+
+  @media (max-width: 768px) {
+    .cost-table th,
+    .cost-table td {
+      padding: 0.5rem;
+      font-size: 0.75rem;
+    }
+
+    .project-name {
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>