@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/full/dashboard/src/pages/map.astro

@@ -0,0 +1,561 @@
+---
+/**
+ * Infrastructure Map Dashboard
+ *
+ * Interactive topology visualization powered by Cytoscape.js
+ * Shows all Little Bear Apps services, connections, and health status
+ * Auto-refreshes every 60 seconds
+ */
+
+import DashboardLayout from '../layouts/DashboardLayout.astro';
+
+const title = 'Infrastructure Map';
+---
+
+<DashboardLayout title={title}>
+  <div class="infrastructure-map-container">
+    <div class="toolbar">
+      <h2>Infrastructure Topology</h2>
+
+      <div class="toolbar-controls">
+        <button id="btn-fit" class="btn">Fit to Screen</button>
+        <button id="btn-reset" class="btn">Reset Layout</button>
+
+        <select id="layout-select" class="select">
+          <option value="dagre">Hierarchical (Default)</option>
+          <option value="cose">Force-Directed</option>
+          <option value="breadthfirst">Breadth-First</option>
+          <option value="circle">Circle</option>
+        </select>
+      </div>
+
+      <div class="legend">
+        <div class="legend-title">Health Status:</div>
+        <span class="legend-item"><span class="status-dot up"></span> Up</span>
+        <span class="legend-item"><span class="status-dot degraded"></span> Degraded</span>
+        <span class="legend-item"><span class="status-dot down"></span> Down</span>
+        <span class="legend-item"><span class="status-dot unknown"></span> Unknown</span>
+      </div>
+
+      <div class="health-summary">
+        <span id="health-summary-text">Loading...</span>
+      </div>
+    </div>
+
+    <div id="cy" class="cytoscape-container"></div>
+
+    <div id="service-details" class="details-panel hidden">
+      <div class="details-header">
+        <h3>Service Details</h3>
+        <button id="close-details" class="btn-close">×</button>
+      </div>
+      <div id="details-content"></div>
+    </div>
+  </div>
+</DashboardLayout>
+
+<script>
+  // @ts-ignore - Loaded via CDN
+  import cytoscape from 'https://cdn.jsdelivr.net/npm/cytoscape@3.28.1/dist/cytoscape.esm.min.js';
+  // @ts-ignore - Dagre layout
+  import dagre from 'https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js';
+  // @ts-ignore - Cytoscape dagre
+  import cytoscapeDagre from 'https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.js';
+
+  // @ts-ignore
+  cytoscape.use(cytoscapeDagre);
+
+  let cy: any;
+  let refreshInterval: any;
+
+  async function loadTopology() {
+    const response = await fetch('/api/topology');
+
+    if (!response.ok) {
+      console.error('Failed to load topology:', response.status);
+      throw new Error('Topology not available');
+    }
+
+    const topology = await response.json();
+    return topology;
+  }
+
+  async function initializeMap() {
+    try {
+      const topology = await loadTopology();
+
+      const elements = {
+        nodes: topology.services.map((service: any) => ({
+          data: {
+            id: service.id,
+            label: service.name,
+            type: service.type,
+            tier: service.tier,
+            status: service.status,
+            health: service.health_status || 'unknown',
+            version: service.version,
+            metadata: service.metadata,
+          },
+        })),
+        edges: topology.connections.map((conn: any) => ({
+          data: {
+            id: `${conn.from_service}-${conn.to_service}`,
+            source: conn.from_service,
+            target: conn.to_service,
+            type: conn.connection_type,
+            status: conn.status,
+          },
+        })),
+      };
+
+      cy = cytoscape({
+        container: document.getElementById('cy'),
+        elements: elements,
+
+        style: [
+          {
+            selector: 'node',
+            style: {
+              label: 'data(label)',
+              'text-valign': 'center',
+              'text-halign': 'center',
+              'text-wrap': 'wrap',
+              'text-max-width': '80px',
+              'font-size': '10px',
+              width: '60px',
+              height: '60px',
+              'background-color': (ele: any) => getNodeColor(ele.data('health')),
+              'border-width': 3,
+              'border-color': (ele: any) => getTierColor(ele.data('tier')),
+            },
+          },
+          {
+            selector: 'edge',
+            style: {
+              width: 2,
+              'line-color': (ele: any) => getEdgeColor(ele.data('status')),
+              'target-arrow-color': (ele: any) => getEdgeColor(ele.data('status')),
+              'target-arrow-shape': 'triangle',
+              'curve-style': 'bezier',
+              'line-style': (ele: any) => (ele.data('status') === 'planned' ? 'dashed' : 'solid'),
+            },
+          },
+          {
+            selector: ':selected',
+            style: {
+              'border-width': 5,
+              'border-color': '#0066cc',
+            },
+          },
+        ],
+
+        layout: {
+          name: 'dagre',
+          rankDir: 'TB', // Top to bottom
+          spacingFactor: 1.5,
+          nodeSep: 50,
+          rankSep: 100,
+        },
+      });
+
+      // Click handler for service details
+      cy.on('tap', 'node', (evt: any) => {
+        const node = evt.target;
+        showServiceDetails(node.data());
+      });
+
+      // Click outside to close details
+      cy.on('tap', (evt: any) => {
+        if (evt.target === cy) {
+          hideServiceDetails();
+        }
+      });
+
+      // Update health summary
+      updateHealthSummary(topology);
+
+      // Auto-refresh every 60 seconds
+      refreshInterval = setInterval(refreshTopology, 60000);
+
+      console.log('✅ Infrastructure Map initialized:', {
+        services: topology.services.length,
+        connections: topology.connections.length,
+      });
+    } catch (error) {
+      console.error('Failed to initialize map:', error);
+      document.getElementById('cy')!.innerHTML = `
+        <div style="padding: 40px; text-align: center; color: #ef4444;">
+          <h3>Failed to load infrastructure map</h3>
+          <p>Topology discovery worker may not have run yet. Please try again in 15 minutes.</p>
+        </div>
+      `;
+    }
+  }
+
+  function getNodeColor(health: string): string {
+    const colors: Record<string, string> = {
+      up: '#10b981', // Green
+      degraded: '#f59e0b', // Orange
+      down: '#ef4444', // Red
+      unknown: '#9ca3af', // Gray
+    };
+    return colors[health] || colors.unknown;
+  }
+
+  function getTierColor(tier: number): string {
+    const colors: Record<number, string> = {
+      0: '#dc2626', // Critical (red border)
+      1: '#f59e0b', // High (orange border)
+      2: '#6b7280', // Medium (gray border)
+    };
+    return colors[tier] || colors[2];
+  }
+
+  function getEdgeColor(status: string): string {
+    const colors: Record<string, string> = {
+      active: '#10b981', // Green
+      planned: '#9ca3af', // Gray
+      'not-integrated': '#f59e0b', // Orange
+      broken: '#ef4444', // Red
+    };
+    return colors[status] || colors.planned;
+  }
+
+  function showServiceDetails(data: any) {
+    const panel = document.getElementById('service-details')!;
+    const content = document.getElementById('details-content')!;
+
+    const tierLabels = ['Critical', 'High Priority', 'Medium Priority'];
+
+    content.innerHTML = `
+      <div class="detail-row">
+        <strong>ID:</strong>
+        <span>${data.id}</span>
+      </div>
+      <div class="detail-row">
+        <strong>Name:</strong>
+        <span>${data.label}</span>
+      </div>
+      <div class="detail-row">
+        <strong>Type:</strong>
+        <span>${data.type}</span>
+      </div>
+      <div class="detail-row">
+        <strong>Status:</strong>
+        <span class="status-badge ${data.health}">${data.health}</span>
+      </div>
+      <div class="detail-row">
+        <strong>Version:</strong>
+        <span>${data.version || 'N/A'}</span>
+      </div>
+      <div class="detail-row">
+        <strong>Tier:</strong>
+        <span>${data.tier} (${tierLabels[data.tier] || 'Unknown'})</span>
+      </div>
+      ${
+        data.metadata
+          ? `
+        <div class="detail-row full-width">
+          <strong>Metadata:</strong>
+          <pre>${JSON.stringify(data.metadata, null, 2)}</pre>
+        </div>
+      `
+          : ''
+      }
+    `;
+
+    panel.classList.remove('hidden');
+  }
+
+  function hideServiceDetails() {
+    const panel = document.getElementById('service-details')!;
+    panel.classList.add('hidden');
+  }
+
+  async function refreshTopology() {
+    try {
+      const topology = await loadTopology();
+
+      // Update node health status
+      topology.services.forEach((service: any) => {
+        const node = cy.getElementById(service.id);
+        if (node.length) {
+          node.data('health', service.health_status || 'unknown');
+          node.data('version', service.version);
+        }
+      });
+
+      // Update health summary
+      updateHealthSummary(topology);
+
+      console.log('🔄 Topology refreshed');
+    } catch (error) {
+      console.error('Failed to refresh topology:', error);
+    }
+  }
+
+  function updateHealthSummary(topology: any) {
+    const summary = document.getElementById('health-summary-text')!;
+
+    const healthCounts: Record<string, number> = {
+      up: 0,
+      down: 0,
+      degraded: 0,
+      unknown: 0,
+    };
+
+    topology.services.forEach((s: any) => {
+      healthCounts[s.health_status || 'unknown']++;
+    });
+
+    summary.textContent = `${healthCounts.up} up, ${healthCounts.degraded} degraded, ${healthCounts.down} down, ${healthCounts.unknown} unknown`;
+  }
+
+  // Toolbar button handlers
+  document.getElementById('btn-fit')!.addEventListener('click', () => {
+    cy.fit();
+  });
+
+  document.getElementById('btn-reset')!.addEventListener('click', () => {
+    const layoutName = (document.getElementById('layout-select')! as HTMLSelectElement).value;
+    cy.layout({ name: layoutName, rankDir: 'TB', spacingFactor: 1.5 }).run();
+  });
+
+  document.getElementById('layout-select')!.addEventListener('change', (evt: any) => {
+    const layoutName = evt.target.value;
+    cy.layout({ name: layoutName, rankDir: 'TB', spacingFactor: 1.5 }).run();
+  });
+
+  document.getElementById('close-details')!.addEventListener('click', () => {
+    hideServiceDetails();
+  });
+
+  // Initialize on page load
+  initializeMap();
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', () => {
+    if (refreshInterval) {
+      clearInterval(refreshInterval);
+    }
+  });
+</script>
+
+<style>
+  .infrastructure-map-container {
+    padding: 20px;
+    height: calc(100vh - 120px);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .toolbar {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 15px;
+    background-color: #f9fafb;
+    border-radius: 8px;
+    flex-wrap: wrap;
+  }
+
+  .toolbar h2 {
+    margin: 0;
+    font-size: 20px;
+    color: #111827;
+  }
+
+  .toolbar-controls {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .btn {
+    padding: 8px 16px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background-color: white;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s;
+  }
+
+  .btn:hover {
+    background-color: #f3f4f6;
+    border-color: #9ca3af;
+  }
+
+  .select {
+    padding: 8px 12px;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    background-color: white;
+    cursor: pointer;
+    font-size: 14px;
+  }
+
+  .legend {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+    margin-left: auto;
+  }
+
+  .legend-title {
+    font-weight: 600;
+    color: #4b5563;
+    font-size: 14px;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: #6b7280;
+  }
+
+  .status-dot {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+  }
+
+  .status-dot.up {
+    background-color: #10b981;
+  }
+  .status-dot.degraded {
+    background-color: #f59e0b;
+  }
+  .status-dot.down {
+    background-color: #ef4444;
+  }
+  .status-dot.unknown {
+    background-color: #9ca3af;
+  }
+
+  .health-summary {
+    padding: 8px 14px;
+    background-color: white;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #374151;
+  }
+
+  .cytoscape-container {
+    flex: 1;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    background-color: #ffffff;
+    position: relative;
+  }
+
+  .details-panel {
+    position: fixed;
+    right: 30px;
+    top: 120px;
+    width: 350px;
+    max-height: 600px;
+    overflow-y: auto;
+    background: white;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  }
+
+  .details-panel.hidden {
+    display: none;
+  }
+
+  .details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #e5e7eb;
+  }
+
+  .details-header h3 {
+    margin: 0;
+    font-size: 18px;
+    color: #111827;
+  }
+
+  .btn-close {
+    background: none;
+    border: none;
+    font-size: 28px;
+    cursor: pointer;
+    color: #6b7280;
+    line-height: 1;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+  }
+
+  .btn-close:hover {
+    color: #111827;
+  }
+
+  .detail-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid #f3f4f6;
+  }
+
+  .detail-row.full-width {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .detail-row strong {
+    color: #374151;
+    font-size: 13px;
+  }
+
+  .detail-row span {
+    color: #6b7280;
+    font-size: 13px;
+  }
+
+  .detail-row pre {
+    background-color: #f9fafb;
+    padding: 10px;
+    border-radius: 4px;
+    font-size: 11px;
+    overflow-x: auto;
+    margin: 0;
+  }
+
+  .status-badge {
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  .status-badge.up {
+    background-color: #d1fae5;
+    color: #065f46;
+  }
+  .status-badge.degraded {
+    background-color: #fed7aa;
+    color: #92400e;
+  }
+  .status-badge.down {
+    background-color: #fee2e2;
+    color: #991b1b;
+  }
+  .status-badge.unknown {
+    background-color: #f3f4f6;
+    color: #4b5563;
+  }
+</style>

package/templates/full/dashboard/src/pages/revenue.astro

@@ -0,0 +1,72 @@
+---
+import DashboardLayout from '../layouts/DashboardLayout.astro';
+
+interface RevenueRow {
+  metric_type: string;
+  value: number;
+  timestamp: number;
+}
+
+const runtime = (Astro.locals as App.Locals | undefined)?.runtime;
+const db = runtime?.env?.PLATFORM_DB;
+
+let latestMetrics: Record<string, number> = {};
+
+if (db) {
+  const result = await db
+    .prepare(
+      `SELECT metric_type, value, timestamp
+       FROM revenue_metrics
+       WHERE metric_type IN ('mrr', 'arr', 'churn')
+       ORDER BY timestamp DESC
+       LIMIT 100`
+    )
+    .all<RevenueRow>();
+
+  for (const row of result.results ?? []) {
+    if (!(row.metric_type in latestMetrics)) {
+      latestMetrics[row.metric_type] = row.value ?? 0;
+    }
+  }
+}
+
+const mrr = latestMetrics.mrr ?? 0;
+const arr = latestMetrics.arr ?? 0;
+const churn = latestMetrics.churn ?? 0;
+---
+
+<DashboardLayout title="Revenue">
+  <div class="space-y-6">
+    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Revenue Metrics</h2>
+
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+      <div class="metric-card">
+        <div class="metric-title">Monthly Recurring Revenue</div>
+        <div class="metric-value">${mrr.toFixed(2)}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">MRR (current)</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Annual Recurring Revenue</div>
+        <div class="metric-value">${arr.toFixed(2)}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">ARR (annualized)</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Churn Rate</div>
+        <div class="metric-value">{(churn * 100).toFixed(1)}%</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Monthly churn</div>
+      </div>
+    </div>
+
+    <section class="metric-card">
+      <h3 class="mb-4 text-xl font-semibold text-gray-800 dark:text-gray-200">Revenue Trends</h3>
+      <div
+        class="rounded border border-dashed border-gray-300 bg-gray-50 py-12 text-center text-gray-600 dark:border-gray-600 dark:bg-gray-900/50 dark:text-gray-400"
+      >
+        Charts coming soon — integrate Chart.js or a similar library to visualize MRR, ARR, and
+        churn trends.
+      </div>
+    </section>
+  </div>
+</DashboardLayout>