@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/standard/dashboard/src/components/reports/CostTrendsReport.tsx

@@ -0,0 +1,229 @@
+/**
+ * Cost Trends Report Component
+ * Shows cost breakdown by resource type and project
+ */
+import { useState, useEffect } from 'react';
+
+interface DailyCost {
+  date: string;
+  workers_cost: number;
+  d1_cost: number;
+  kv_cost: number;
+  r2_cost: number;
+  ai_cost: number;
+  queue_cost: number;
+  total_cost: number;
+}
+
+function StatCard({ label, value, colour, subValue }: { label: string; value: number | string; colour: string; subValue?: string }) {
+  return (
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour}`}>
+      <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</p>
+      <p className="text-2xl font-bold mt-1">{value}</p>
+      {subValue && <p className="text-xs text-gray-500 mt-0.5">{subValue}</p>}
+    </div>
+  );
+}
+
+function formatCost(n: number): string {
+  if (n === 0) return '$0.00';
+  if (n < 0.01) return '<$0.01';
+  return `$${n.toFixed(2)}`;
+}
+
+function CostBar({ label, value, maxValue, colour }: { label: string; value: number; maxValue: number; colour: string }) {
+  const percentage = maxValue > 0 ? (value / maxValue) * 100 : 0;
+  return (
+    <div className="flex items-center gap-3">
+      <span className="w-20 text-sm text-gray-600 dark:text-gray-400">{label}</span>
+      <div className="flex-1 h-4 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div className={`h-full ${colour} transition-all duration-300`} style={{ width: `${percentage}%` }} />
+      </div>
+      <span className="w-16 text-sm font-medium text-gray-900 dark:text-white text-right">{formatCost(value)}</span>
+    </div>
+  );
+}
+
+export function CostTrendsReport() {
+  const [dailyCosts, setDailyCosts] = useState<DailyCost[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [days, setDays] = useState(30);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        // Use /api/usage/daily which returns daily cost breakdown
+        const response = await fetch(`/api/usage/daily?period=${days}d`);
+
+        if (!response.ok) throw new Error('Failed to fetch daily costs');
+
+        const data = await response.json();
+
+        // API returns { success, data: { days: DailyCostBreakdown[], totals, period } }
+        // DailyCostBreakdown has: date, workers, d1, kv, r2, aiGateway, workersAI, queues, total, etc.
+        const responseData = data.data || data;
+        const costs: DailyCost[] = (responseData.days || []).map((d: Record<string, unknown>) => ({
+          date: (d.date as string) || '',
+          workers_cost: (d.workers as number) || 0,
+          d1_cost: (d.d1 as number) || 0,
+          kv_cost: (d.kv as number) || 0,
+          r2_cost: (d.r2 as number) || 0,
+          ai_cost: ((d.aiGateway as number) || 0) + ((d.workersAI as number) || 0),
+          queue_cost: (d.queues as number) || 0,
+          total_cost: (d.total as number) || 0,
+        }));
+
+        setDailyCosts(costs);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [days]);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border p-4 animate-pulse">
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading cost data: {error}
+      </div>
+    );
+  }
+
+  // Calculate totals
+  const totals = dailyCosts.reduce(
+    (acc, d) => ({
+      workers: acc.workers + d.workers_cost,
+      d1: acc.d1 + d.d1_cost,
+      kv: acc.kv + d.kv_cost,
+      r2: acc.r2 + d.r2_cost,
+      ai: acc.ai + d.ai_cost,
+      queue: acc.queue + d.queue_cost,
+      total: acc.total + d.total_cost,
+    }),
+    { workers: 0, d1: 0, kv: 0, r2: 0, ai: 0, queue: 0, total: 0 }
+  );
+
+  const maxCostType = Math.max(totals.workers, totals.d1, totals.kv, totals.r2, totals.ai, totals.queue);
+  const avgDaily = dailyCosts.length > 0 ? totals.total / dailyCosts.length : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Filter */}
+      <div className="flex items-center gap-4">
+        <label className="text-sm text-gray-600 dark:text-gray-400">Time range:</label>
+        <select
+          value={days}
+          onChange={(e) => setDays(Number(e.target.value))}
+          className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+        >
+          <option value={7}>Last 7 days</option>
+          <option value={30}>Last 30 days</option>
+          <option value={90}>Last 90 days</option>
+        </select>
+      </div>
+
+      {/* Summary Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <StatCard label="Total Cost" value={formatCost(totals.total)} colour="border-l-4 border-l-purple-500" />
+        <StatCard label="Avg Daily" value={formatCost(avgDaily)} colour="border-l-4 border-l-blue-500" />
+        <StatCard label="Workers" value={formatCost(totals.workers)} colour="border-l-4 border-l-orange-500" />
+        <StatCard label="D1 Database" value={formatCost(totals.d1)} colour="border-l-4 border-l-green-500" />
+        <StatCard label="AI Gateway" value={formatCost(totals.ai)} colour="border-l-4 border-l-pink-500" />
+        <StatCard label="KV + R2 + Queue" value={formatCost(totals.kv + totals.r2 + totals.queue)} colour="border-l-4 border-l-teal-500" />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Cost by Type */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Cost by Resource Type</h3>
+          <div className="space-y-3">
+            <CostBar label="Workers" value={totals.workers} maxValue={maxCostType} colour="bg-orange-500" />
+            <CostBar label="D1" value={totals.d1} maxValue={maxCostType} colour="bg-green-500" />
+            <CostBar label="AI" value={totals.ai} maxValue={maxCostType} colour="bg-pink-500" />
+            <CostBar label="KV" value={totals.kv} maxValue={maxCostType} colour="bg-blue-500" />
+            <CostBar label="R2" value={totals.r2} maxValue={maxCostType} colour="bg-purple-500" />
+            <CostBar label="Queue" value={totals.queue} maxValue={maxCostType} colour="bg-teal-500" />
+          </div>
+        </div>
+
+        {/* Additional Cost Details */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Cost Summary</h3>
+          <div className="space-y-3">
+            {[
+              { label: 'Workers', value: totals.workers, colour: 'text-orange-600' },
+              { label: 'D1 Database', value: totals.d1, colour: 'text-green-600' },
+              { label: 'AI (Gateway + Workers AI)', value: totals.ai, colour: 'text-pink-600' },
+              { label: 'KV Store', value: totals.kv, colour: 'text-blue-600' },
+              { label: 'R2 Storage', value: totals.r2, colour: 'text-purple-600' },
+              { label: 'Queues', value: totals.queue, colour: 'text-teal-600' },
+            ]
+              .sort((a, b) => b.value - a.value)
+              .map(({ label, value, colour }) => (
+                <div key={label} className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded">
+                  <span className="text-sm text-gray-700 dark:text-gray-300">{label}</span>
+                  <span className={`font-bold ${colour}`}>{formatCost(value)}</span>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Daily Cost Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="font-semibold text-gray-900 dark:text-white">Daily Cost Breakdown</h3>
+        </div>
+        {dailyCosts.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">No daily cost data available</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-900/50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Workers</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">D1</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">AI</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Other</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {dailyCosts.slice(0, 30).map((d) => (
+                  <tr key={d.date} className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                    <td className="px-4 py-3 font-medium text-gray-900 dark:text-white">{d.date}</td>
+                    <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatCost(d.workers_cost)}</td>
+                    <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatCost(d.d1_cost)}</td>
+                    <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatCost(d.ai_cost)}</td>
+                    <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatCost(d.kv_cost + d.r2_cost + d.queue_cost)}</td>
+                    <td className="px-4 py-3 text-right font-bold text-gray-900 dark:text-white">{formatCost(d.total_cost)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/standard/dashboard/src/components/reports/ErrorTrendsReport.tsx

@@ -0,0 +1,244 @@
+/**
+ * Error Trends Report Component
+ * Shows error occurrence trends by priority, with clickable drilldowns to /errors
+ */
+import { useState, useEffect } from 'react';
+
+interface ErrorStats {
+  byPriority: Record<string, number>;
+  byStatus: Record<string, number>;
+  byType: Record<string, number>;
+  byProject: Record<string, number>;
+  recentCount: number;
+  todayOccurrences: number;
+  totalOpen: number;
+}
+
+function ClickableStatCard({ label, value, colour, href, subValue }: {
+  label: string;
+  value: number | string;
+  colour: string;
+  href: string;
+  subValue?: string;
+}) {
+  return (
+    <a
+      href={href}
+      className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour} block hover:ring-2 ring-blue-300 dark:ring-blue-600 transition-all cursor-pointer`}
+    >
+      <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</p>
+      <p className="text-2xl font-bold mt-1">{value}</p>
+      {subValue && <p className="text-xs text-gray-500 mt-0.5">{subValue}</p>}
+    </a>
+  );
+}
+
+function PriorityBar({ priority, count, maxCount }: { priority: string; count: number; maxCount: number }) {
+  const colours: Record<string, string> = {
+    P0: 'bg-red-500',
+    P1: 'bg-orange-500',
+    P2: 'bg-yellow-500',
+    P3: 'bg-blue-500',
+    P4: 'bg-gray-400',
+  };
+  const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;
+
+  return (
+    <a
+      href={`/errors?priority=${priority}`}
+      className="flex items-center gap-3 hover:bg-gray-100 dark:hover:bg-gray-700/50 rounded p-1 -m-1 transition-colors"
+    >
+      <span className="w-8 text-sm font-medium text-gray-700 dark:text-gray-300">{priority}</span>
+      <div className="flex-1 h-6 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div
+          className={`h-full ${colours[priority] || colours.P4} transition-all duration-300`}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      <span className="w-12 text-sm font-medium text-gray-900 dark:text-white text-right">{count}</span>
+    </a>
+  );
+}
+
+export function ErrorTrendsReport() {
+  const [stats, setStats] = useState<ErrorStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await fetch('/api/errors/stats');
+        if (!response.ok) throw new Error('Failed to fetch error stats');
+        const data = await response.json();
+        setStats(data);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border p-4 animate-pulse">
+            <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+            <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading stats: {error}
+      </div>
+    );
+  }
+
+  if (!stats) return null;
+
+  const priorityCounts = stats.byPriority || {};
+  const maxPriorityCount = Math.max(...Object.values(priorityCounts), 1);
+  const statusCounts = stats.byStatus || {};
+  const typeCounts = stats.byType || {};
+  const projectCounts = stats.byProject || {};
+
+  return (
+    <div className="space-y-6">
+      {/* Summary Stats — all clickable */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <ClickableStatCard
+          label="P0 Critical"
+          value={priorityCounts.P0 || 0}
+          colour={`border-l-4 ${(priorityCounts.P0 || 0) > 0 ? 'border-l-red-500' : 'border-l-green-500'}`}
+          href="/errors?priority=P0"
+        />
+        <ClickableStatCard
+          label="P1 High"
+          value={priorityCounts.P1 || 0}
+          colour="border-l-4 border-l-orange-500"
+          href="/errors?priority=P1"
+        />
+        <ClickableStatCard
+          label="P2 Medium"
+          value={priorityCounts.P2 || 0}
+          colour="border-l-4 border-l-yellow-500"
+          href="/errors?priority=P2"
+        />
+        <ClickableStatCard
+          label="P3 Low"
+          value={priorityCounts.P3 || 0}
+          colour="border-l-4 border-l-blue-500"
+          href="/errors?priority=P3"
+        />
+        <ClickableStatCard
+          label="Total Open"
+          value={stats.totalOpen}
+          colour="border-l-4 border-l-purple-500"
+          href="/errors?status=open"
+        />
+        <ClickableStatCard
+          label="Last 24h"
+          value={stats.recentCount}
+          colour="border-l-4 border-l-teal-500"
+          href="/errors?recent=24h"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Priority Distribution */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">Priority Distribution</h3>
+          <div className="space-y-3">
+            {['P0', 'P1', 'P2', 'P3', 'P4'].map(p => (
+              <PriorityBar key={p} priority={p} count={priorityCounts[p] || 0} maxCount={maxPriorityCount} />
+            ))}
+          </div>
+        </div>
+
+        {/* By Status — clickable */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">By Status</h3>
+          <div className="space-y-2">
+            {Object.entries(statusCounts).map(([status, count]) => (
+              <a
+                key={status}
+                href={`/errors?status=${status}`}
+                className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded hover:ring-2 ring-blue-300 dark:ring-blue-600 transition-all block"
+              >
+                <span className="capitalize text-gray-700 dark:text-gray-300">{status.replace('_', ' ')}</span>
+                <span className="font-bold text-gray-900 dark:text-white">{count}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+
+        {/* By Error Type — clickable, with "View all" link */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">By Error Type</h3>
+          <div className="space-y-2">
+            {Object.entries(typeCounts).map(([type, count]) => (
+              <a
+                key={type}
+                href={`/errors?error_type=${type}`}
+                className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded hover:ring-2 ring-blue-300 dark:ring-blue-600 transition-all block"
+              >
+                <span className="text-gray-700 dark:text-gray-300">{type.replace(/_/g, ' ')}</span>
+                <span className="font-bold text-gray-900 dark:text-white">{count}</span>
+              </a>
+            ))}
+          </div>
+          <a href="/errors" className="text-blue-600 dark:text-blue-400 text-sm mt-3 block hover:underline">
+            View all errors &rarr;
+          </a>
+        </div>
+
+        {/* By Project — clickable, no slice limit */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4">
+          <h3 className="font-semibold text-gray-900 dark:text-white mb-4">By Project</h3>
+          <div className="space-y-2">
+            {Object.entries(projectCounts)
+              .sort(([, a], [, b]) => b - a)
+              .map(([project, count]) => (
+                <a
+                  key={project}
+                  href={`/errors?project=${project}`}
+                  className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-700/50 rounded hover:ring-2 ring-blue-300 dark:ring-blue-600 transition-all block"
+                >
+                  <span className="text-gray-700 dark:text-gray-300">{project}</span>
+                  <span className="font-bold text-gray-900 dark:text-white">{count}</span>
+                </a>
+              ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Today's Activity with explainer */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border p-4">
+        <div className="flex items-center gap-2 mb-2">
+          <h3 className="font-semibold text-gray-900 dark:text-white">Today's Activity</h3>
+          <span
+            className="inline-flex items-center justify-center w-4 h-4 rounded-full bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 text-xs cursor-help"
+            title="Total Occurrences = sum of occurrence_count across all errors updated today. One error recurring 100 times counts as 100 occurrences. Total Open = distinct error records with status 'open'. Last 24h = distinct error records updated in the last 24 hours."
+          >
+            ?
+          </span>
+        </div>
+        <p className="text-3xl font-bold text-gray-900 dark:text-white">
+          {stats.todayOccurrences.toLocaleString()}
+          <span className="text-sm font-normal text-gray-500 ml-2">total occurrences</span>
+        </p>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          Each occurrence is one invocation of an error. A single error issue can have many occurrences.
+        </p>
+      </div>
+    </div>
+  );
+}