@littlebearapps/platform-admin-sdk 2.0.0 → 2.1.0

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

@@ -0,0 +1,251 @@
+/**
+ * Project Health Table Component
+ * Shows per-project gap analysis coverage scores
+ */
+import { useState, useEffect } from 'react';
+
+interface ResourceBreakdown {
+  resourceType: string;
+  hoursWithData: number;
+  coveragePct: number;
+}
+
+interface ProjectHealth {
+  project: string;
+  coveragePct: number;
+  hoursWithData: number;
+  expectedHours: number;
+  status: 'healthy' | 'warning' | 'critical';
+  lastDataHour: string | null;
+  resourceBreakdown?: ResourceBreakdown[];
+}
+
+interface ProjectHealthResponse {
+  projects: ProjectHealth[];
+  summary: {
+    total: number;
+    healthy: number;
+    warning: number;
+    critical: number;
+    averageCoverage: number;
+  };
+  generatedAt: string;
+}
+
+function StatusBadge({ status }: { status: 'healthy' | 'warning' | 'critical' }) {
+  const colours: Record<string, string> = {
+    healthy: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300',
+    warning: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300',
+    critical: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300',
+  };
+  const labels: Record<string, string> = {
+    healthy: '✓ Healthy',
+    warning: '⚠ Warning',
+    critical: '✗ Critical',
+  };
+  return (
+    <span className={`px-2 py-0.5 text-xs font-semibold rounded ${colours[status]}`}>
+      {labels[status]}
+    </span>
+  );
+}
+
+function CoverageBar({ percent }: { percent: number }) {
+  const getColour = (pct: number) => {
+    if (pct >= 90) return 'bg-green-500';
+    if (pct >= 70) return 'bg-yellow-500';
+    return 'bg-red-500';
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div
+          className={`h-full ${getColour(percent)} transition-all`}
+          style={{ width: `${Math.min(percent, 100)}%` }}
+        />
+      </div>
+      <span className={`text-sm font-medium ${
+        percent >= 90 ? 'text-green-600 dark:text-green-400' :
+        percent >= 70 ? 'text-yellow-600 dark:text-yellow-400' :
+        'text-red-600 dark:text-red-400'
+      }`}>
+        {percent.toFixed(0)}%
+      </span>
+    </div>
+  );
+}
+
+export function ProjectHealthTable() {
+  const [data, setData] = useState<ProjectHealthResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedProject, setExpandedProject] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const res = await fetch('/api/usage/gaps/projects');
+        if (!res.ok) throw new Error('Failed to fetch project health data');
+        const json = await res.json();
+        // API wraps response in { success, data: { projects, summary } }
+        const responseData = json.data || json;
+        setData(responseData);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[...Array(4)].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 className="bg-white dark:bg-gray-800 rounded-lg border p-4 animate-pulse">
+          <div className="h-48 bg-gray-200 dark:bg-gray-700 rounded"></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 project health data: {error}
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  const { projects, summary } = data;
+
+  return (
+    <div className="space-y-6">
+      {/* Summary Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-blue-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Total Projects</p>
+          <p className="text-2xl font-bold mt-1">{summary.total}</p>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-green-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Healthy</p>
+          <p className="text-2xl font-bold mt-1 text-green-600">{summary.healthy}</p>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-yellow-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Warning</p>
+          <p className="text-2xl font-bold mt-1 text-yellow-600">{summary.warning}</p>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-red-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Critical</p>
+          <p className="text-2xl font-bold mt-1 text-red-600">{summary.critical}</p>
+        </div>
+        <div className="bg-white dark:bg-gray-800 rounded-lg border p-4 border-l-4 border-l-purple-500">
+          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">Avg Coverage</p>
+          <p className="text-2xl font-bold mt-1">{summary.averageCoverage.toFixed(0)}%</p>
+        </div>
+      </div>
+
+      {/* Project Health Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border overflow-hidden">
+        <div className="px-4 py-3 border-b">
+          <h3 className="font-semibold text-gray-900 dark:text-white">Per-Project Health</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Resource coverage: active resources in last 24h vs total known. Healthy ≥90%, Warning 70-90%, Critical &lt;70%
+          </p>
+        </div>
+        {projects.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">No projects found in registry</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">Project</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Coverage</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Resources</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Last Data</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {projects.map((project) => (
+                  <>
+                    <tr
+                      key={project.project}
+                      className="border-b hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+                      onClick={() => setExpandedProject(
+                        expandedProject === project.project ? null : project.project
+                      )}
+                    >
+                      <td className="px-4 py-3 text-sm font-medium">{project.project}</td>
+                      <td className="px-4 py-3">
+                        <CoverageBar percent={Math.min(project.coveragePct, 100)} />
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                        {project.hoursWithData}/{project.expectedHours}
+                      </td>
+                      <td className="px-4 py-3">
+                        <StatusBadge status={project.status} />
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
+                        {project.lastDataHour
+                          ? new Date(project.lastDataHour).toLocaleString('en-AU', {
+                              dateStyle: 'short',
+                              timeStyle: 'short'
+                            })
+                          : 'No data'}
+                      </td>
+                      <td className="px-4 py-3 text-sm text-gray-400">
+                        {project.resourceBreakdown && project.resourceBreakdown.length > 0 && (
+                          <span>{expandedProject === project.project ? '▼' : '▶'}</span>
+                        )}
+                      </td>
+                    </tr>
+                    {/* Expanded resource breakdown */}
+                    {expandedProject === project.project && project.resourceBreakdown && (
+                      <tr key={`${project.project}-breakdown`}>
+                        <td colSpan={6} className="px-4 py-3 bg-gray-50 dark:bg-gray-900/30">
+                          <div className="pl-4">
+                            <p className="text-xs font-medium text-gray-500 uppercase mb-2">Resource Breakdown</p>
+                            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+                              {project.resourceBreakdown.map((resource) => (
+                                <div
+                                  key={resource.resourceType}
+                                  className="bg-white dark:bg-gray-800 rounded border p-2"
+                                >
+                                  <p className="text-xs font-medium text-gray-600 dark:text-gray-400 truncate">
+                                    {resource.resourceType}
+                                  </p>
+                                  <div className="flex items-center justify-between mt-1">
+                                    <span className="text-sm">{resource.hoursWithData}</span>
+                                    <CoverageBar percent={Math.min(resource.coveragePct, 100)} />
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,298 @@
+/**
+ * Warning Digests Table Component
+ * Interactive table with filtering and expandable rows
+ */
+import { useState, useEffect } from 'react';
+import type { WarningDigest, DigestFilter } from '../../lib/reports/types';
+
+interface WarningDigestsTableProps {
+  initialFilter?: DigestFilter;
+}
+
+function formatTimestamp(ts: number): string {
+  const date = new Date(ts * 1000);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('en-AU', { weekday: 'short', month: 'short', day: 'numeric' });
+}
+
+function ScriptBadge({ script }: { script: string }) {
+  // Assign colours based on project prefix
+  let colour = 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300';
+  if (script.startsWith('project-')) {
+    colour = 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300';
+  } else if (script.startsWith('platform') || script.includes('platform')) {
+    colour = 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
+  } else if (script.startsWith('error-collector')) {
+    colour = 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
+  }
+
+  return (
+    <span className={`px-2 py-0.5 text-xs font-medium rounded ${colour}`}>
+      {script}
+    </span>
+  );
+}
+
+function DigestRow({ digest, onExpand, expanded }: { digest: WarningDigest; onExpand: () => void; expanded: boolean }) {
+  return (
+    <>
+      <tr
+        className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
+        onClick={onExpand}
+      >
+        <td className="px-4 py-3">
+          <span className="text-sm font-medium text-gray-900 dark:text-white">
+            {formatDate(digest.digest_date)}
+          </span>
+        </td>
+        <td className="px-4 py-3">
+          <ScriptBadge script={digest.script_name} />
+        </td>
+        <td className="px-4 py-3 max-w-md">
+          <div className="text-sm text-gray-700 dark:text-gray-300 truncate">
+            {digest.normalized_message}
+          </div>
+        </td>
+        <td className="px-4 py-3 text-center">
+          <span className="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300">
+            {digest.occurrence_count}
+          </span>
+        </td>
+        <td className="px-4 py-3">
+          {digest.github_issue_url ? (
+            <a
+              href={digest.github_issue_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="text-blue-600 dark:text-blue-400 hover:underline text-sm"
+            >
+              #{digest.github_issue_number}
+            </a>
+          ) : (
+            <span className="text-gray-400 dark:text-gray-500 text-sm">-</span>
+          )}
+        </td>
+      </tr>
+      {expanded && (
+        <tr className="bg-gray-50 dark:bg-gray-800/30">
+          <td colSpan={5} className="px-4 py-4">
+            <div className="space-y-3">
+              {/* Warning Details */}
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                <div>
+                  <span className="text-gray-500 dark:text-gray-400">Fingerprint:</span>
+                  <span className="ml-2 font-mono text-xs text-gray-900 dark:text-white">
+                    {digest.fingerprint.slice(0, 12)}...
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-500 dark:text-gray-400">First Seen:</span>
+                  <span className="ml-2 text-gray-900 dark:text-white">
+                    {formatTimestamp(digest.first_occurrence_at)}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-500 dark:text-gray-400">Last Seen:</span>
+                  <span className="ml-2 text-gray-900 dark:text-white">
+                    {formatTimestamp(digest.last_occurrence_at)}
+                  </span>
+                </div>
+                <div>
+                  <span className="text-gray-500 dark:text-gray-400">Repository:</span>
+                  <span className="ml-2 text-gray-900 dark:text-white">{digest.github_repo}</span>
+                </div>
+              </div>
+
+              {/* Full Message */}
+              <div>
+                <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Message</h4>
+                <pre className="bg-gray-900 text-gray-100 p-3 rounded text-xs overflow-x-auto whitespace-pre-wrap">
+                  {digest.normalized_message}
+                </pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
+
+export function WarningDigestsTable({ initialFilter = {} }: WarningDigestsTableProps) {
+  const [digests, setDigests] = useState<WarningDigest[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [total, setTotal] = useState(0);
+  const [expandedRow, setExpandedRow] = useState<string | null>(null);
+
+  // Filter state
+  const [filter, setFilter] = useState<DigestFilter>({
+    limit: 25,
+    offset: 0,
+    days: 30,
+    ...initialFilter,
+  });
+
+  useEffect(() => {
+    async function fetchDigests() {
+      setLoading(true);
+      try {
+        const params = new URLSearchParams();
+        if (filter.script) params.set('script', filter.script);
+        if (filter.days) params.set('days', String(filter.days));
+        if (filter.limit) params.set('limit', String(filter.limit));
+        if (filter.offset) params.set('offset', String(filter.offset));
+
+        const response = await fetch(`/api/reports/digests?${params.toString()}`);
+        if (!response.ok) throw new Error('Failed to fetch digests');
+        const data = await response.json();
+        setDigests(data.digests);
+        setTotal(data.total);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchDigests();
+  }, [filter]);
+
+  const updateFilter = (key: keyof DigestFilter, value: string | number | undefined) => {
+    setFilter((prev) => ({
+      ...prev,
+      [key]: value || undefined,
+      offset: key !== 'offset' ? 0 : (value as number), // Reset offset on filter change
+    }));
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="flex flex-wrap gap-3 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+        <select
+          value={filter.days || 30}
+          onChange={(e) => updateFilter('days', parseInt(e.target.value, 10))}
+          className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+        >
+          <option value="7">Last 7 days</option>
+          <option value="14">Last 14 days</option>
+          <option value="30">Last 30 days</option>
+          <option value="60">Last 60 days</option>
+          <option value="90">Last 90 days</option>
+        </select>
+
+        <select
+          value={filter.script || ''}
+          onChange={(e) => updateFilter('script', e.target.value)}
+          className="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+        >
+          <option value="">All workers</option>
+        </select>
+
+        <div className="ml-auto text-sm text-gray-500 dark:text-gray-400 self-center">
+          {total} digests
+        </div>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        {loading ? (
+          <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+            Loading warning digests...
+          </div>
+        ) : error ? (
+          <div className="p-8 text-center text-red-500">
+            Error: {error}
+          </div>
+        ) : digests.length === 0 ? (
+          <div className="p-8 text-center text-gray-500 dark:text-gray-400">
+            No warning digests found for the selected period
+          </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 dark:text-gray-400 uppercase tracking-wider">
+                    Date
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Script
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Warning Message
+                  </th>
+                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Count
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                    Issue
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {digests.map((digest) => (
+                  <DigestRow
+                    key={digest.id}
+                    digest={digest}
+                    expanded={expandedRow === digest.id}
+                    onExpand={() => setExpandedRow(expandedRow === digest.id ? null : digest.id)}
+                  />
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+
+        {/* Pagination */}
+        <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-700">
+          <button
+            disabled={!filter.offset || filter.offset === 0}
+            onClick={() => updateFilter('offset', Math.max(0, (filter.offset || 0) - (filter.limit || 25)))}
+            className="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50"
+          >
+            Previous
+          </button>
+          <div className="flex items-center gap-3">
+            <select
+              value={filter.limit || 25}
+              onChange={(e) => updateFilter('limit', parseInt(e.target.value, 10))}
+              className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+            >
+              <option value={25}>25 per page</option>
+              <option value={50}>50 per page</option>
+              <option value={100}>100 per page</option>
+            </select>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              {total > 0
+                ? `${(filter.offset || 0) + 1}-${Math.min((filter.offset || 0) + (filter.limit || 25), total)} of ${total}`
+                : `${total} digests`}
+            </span>
+          </div>
+          <button
+            disabled={(filter.offset || 0) + (filter.limit || 25) >= total}
+            onClick={() => updateFilter('offset', (filter.offset || 0) + (filter.limit || 25))}
+            className="px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}