@littlebearapps/platform-admin-sdk 1.4.2 → 2.0.0

package/templates/shared/dashboard/src/components/overview/CostQuadrant.tsx

@@ -0,0 +1,131 @@
+/**
+ * Cost Quadrant - Mission Control
+ * Shows MTD spend, daily burn rate, projected monthly, sparkline, vs budget gauge
+ */
+import { Sparkline } from '../ui/Sparkline';
+
+interface CostData {
+  mtdSpend: number;
+  dailyBurnRate: number;
+  projectedMonthly: number;
+  budgetPct: number;
+  monthlyBudget: number;
+  dailyTrend: number[];
+}
+
+interface Props {
+  data: CostData;
+  loading: boolean;
+}
+
+export function CostQuadrant({ data, loading }: Props) {
+  if (loading) {
+    return <QuadrantSkeleton />;
+  }
+
+  const budgetStatus =
+    data.budgetPct > 150
+      ? { label: 'Over Budget', colour: 'text-red-600 dark:text-red-400' }
+      : data.budgetPct > 100
+        ? { label: 'Warning', colour: 'text-yellow-600 dark:text-yellow-400' }
+        : { label: 'On Track', colour: 'text-green-600 dark:text-green-400' };
+
+  const gaugeColour =
+    data.budgetPct > 150
+      ? 'bg-red-500'
+      : data.budgetPct > 100
+        ? 'bg-yellow-500'
+        : 'bg-green-500';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Cost Status
+        </h3>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        {/* MTD Spend */}
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">
+            ${data.mtdSpend.toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            MTD Spend
+          </div>
+        </div>
+
+        {/* Daily Burn */}
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">
+            ${data.dailyBurnRate.toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            Daily Burn
+          </div>
+        </div>
+
+        {/* Projected */}
+        <div>
+          <div className="text-lg font-semibold text-gray-900 dark:text-white">
+            ${data.projectedMonthly.toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            Projected
+          </div>
+        </div>
+
+        {/* Budget Status */}
+        <div>
+          <div className={`text-lg font-semibold ${budgetStatus.colour}`}>
+            {budgetStatus.label}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">
+            {data.budgetPct}% of ${data.monthlyBudget ?? 100}
+          </div>
+        </div>
+      </div>
+
+      {/* 7-day cost trend sparkline */}
+      {data.dailyTrend.length >= 2 && (
+        <div className="flex items-center gap-2 mb-3 px-1">
+          <span className="text-xs text-gray-400 dark:text-gray-500">7d</span>
+          <Sparkline
+            data={data.dailyTrend}
+            width={120}
+            height={24}
+            color={data.budgetPct > 100 ? '#f59e0b' : '#10b981'}
+            strokeWidth={1.5}
+            showFill
+          />
+        </div>
+      )}
+
+      {/* Budget gauge bar */}
+      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div
+          className={`${gaugeColour} h-2 rounded-full transition-all duration-500`}
+          style={{ width: `${Math.min(data.budgetPct, 100)}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+        <div className="grid grid-cols-2 gap-4">
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+        <div className="h-2 bg-gray-200 dark:bg-gray-700 rounded-full" />
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/ErrorsQuadrant.tsx

@@ -0,0 +1,113 @@
+/**
+ * Errors Quadrant - Mission Control
+ * Shows P0/P1 count, P2/P3 count, new today, sparkline, top 3 errors
+ */
+import { Sparkline } from '../ui/Sparkline';
+
+interface ErrorData {
+  p0Count: number;
+  p1Count: number;
+  p2Count: number;
+  p3Count: number;
+  p4Count: number;
+  newToday: number;
+  dailyTrend: number[];
+  topErrors: Array<{
+    fingerprint: string;
+    message: string;
+    script_name: string;
+    priority: string;
+    occurrence_count: number;
+  }>;
+}
+
+interface Props {
+  data: ErrorData;
+  loading: boolean;
+}
+
+const priorityColours: Record<string, string> = {
+  P0: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
+  P1: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-300',
+  P2: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
+  P3: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-300',
+  P4: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+};
+
+export function ErrorsQuadrant({ data, loading }: Props) {
+  if (loading) return <QuadrantSkeleton />;
+
+  const criticalCount = data.p0Count + data.p1Count;
+  const otherCount = data.p2Count + data.p3Count;
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          Active Errors
+        </h3>
+      </div>
+      <div className="grid grid-cols-3 gap-3 mb-4">
+        <div>
+          <div className={`text-2xl font-bold ${criticalCount > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white'}`}>
+            {criticalCount}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">P0/P1</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{otherCount}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">P2/P3</div>
+        </div>
+        <div>
+          <div className="text-2xl font-bold text-gray-900 dark:text-white">{data.newToday}</div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Today</div>
+        </div>
+      </div>
+      {data.dailyTrend.length >= 2 && (
+        <div className="flex items-center gap-2 mb-3 px-1">
+          <span className="text-xs text-gray-400 dark:text-gray-500">7d</span>
+          <Sparkline data={data.dailyTrend} width={120} height={24} color={criticalCount > 0 ? '#ef4444' : '#6b7280'} strokeWidth={1.5} showFill />
+        </div>
+      )}
+      {data.topErrors.length > 0 && (
+        <div className="space-y-2 border-t border-gray-100 dark:border-gray-700 pt-3">
+          {data.topErrors.map((error) => (
+            <div key={error.fingerprint} className="flex items-center gap-2">
+              <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${priorityColours[error.priority] ?? priorityColours.P4}`}>
+                {error.priority}
+              </span>
+              <span className="text-xs text-gray-600 dark:text-gray-400 truncate flex-1">
+                {error.message || error.script_name}
+              </span>
+              <span className="text-xs text-gray-400 flex-shrink-0">x{error.occurrence_count}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      {data.topErrors.length === 0 && criticalCount === 0 && otherCount === 0 && (
+        <div className="text-center py-2">
+          <div className="text-green-600 dark:text-green-400 text-sm font-medium">No open errors</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+        <div className="grid grid-cols-3 gap-3">
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+        <div className="space-y-2">
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/HealthQuadrant.tsx

@@ -0,0 +1,87 @@
+/**
+ * Health Quadrant - Mission Control
+ * Shows uptime %, services status
+ */
+
+interface HealthData {
+  servicesTotal: number;
+  servicesUp: number;
+  servicesDown: number;
+  uptimePct: number;
+  lastAuditScore: number | null;
+  lastAuditDate: string | null;
+}
+
+interface Props {
+  data: HealthData;
+  loading: boolean;
+}
+
+export function HealthQuadrant({ data, loading }: Props) {
+  if (loading) return <QuadrantSkeleton />;
+
+  const healthScore = data.lastAuditScore ?? 0;
+  const scoreColour =
+    healthScore >= 90 ? 'text-green-600 dark:text-green-400'
+      : healthScore >= 70 ? 'text-yellow-600 dark:text-yellow-400'
+        : 'text-red-600 dark:text-red-400';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+          System Health
+        </h3>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <div className={`text-3xl font-bold ${scoreColour}`}>
+            {data.lastAuditScore !== null ? data.lastAuditScore : '\u2014'}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Audit Score</div>
+        </div>
+        <div>
+          <div className="text-3xl font-bold text-gray-900 dark:text-white">
+            {data.uptimePct.toFixed(1)}%
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">Uptime (24h)</div>
+        </div>
+        <div>
+          <div className="text-lg font-semibold text-gray-900 dark:text-white">
+            {data.servicesUp}/{data.servicesTotal}
+          </div>
+          <div className="text-xs text-gray-500 dark:text-gray-400">Services Up</div>
+        </div>
+        <div>
+          {data.servicesDown > 0 ? (
+            <>
+              <div className="text-lg font-semibold text-red-600 dark:text-red-400">{data.servicesDown}</div>
+              <div className="text-xs text-red-500 dark:text-red-400">Down</div>
+            </>
+          ) : (
+            <>
+              <div className="text-lg font-semibold text-green-600 dark:text-green-400">All Clear</div>
+              <div className="text-xs text-gray-500 dark:text-gray-400">No issues</div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuadrantSkeleton() {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+      <div className="animate-pulse space-y-4">
+        <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+        <div className="grid grid-cols-2 gap-4">
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+          <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/overview/MissionControl.tsx

@@ -0,0 +1,139 @@
+/**
+ * Mission Control - Overview Page Main Component
+ * Fetches /api/overview/summary and renders 4 quadrants + alert banner
+ */
+import { useState, useEffect } from 'react';
+import { HealthQuadrant } from './HealthQuadrant';
+import { ErrorsQuadrant } from './ErrorsQuadrant';
+import { CostQuadrant } from './CostQuadrant';
+import { ActivityFeed } from './ActivityFeed';
+
+interface OverviewSummary {
+  health: {
+    servicesTotal: number;
+    servicesUp: number;
+    servicesDown: number;
+    uptimePct: number;
+    lastAuditScore: number | null;
+    lastAuditDate: string | null;
+  };
+  errors: {
+    p0Count: number;
+    p1Count: number;
+    p2Count: number;
+    p3Count: number;
+    p4Count: number;
+    newToday: number;
+    dailyTrend: number[];
+    topErrors: Array<{
+      fingerprint: string;
+      message: string;
+      script_name: string;
+      priority: string;
+      occurrence_count: number;
+    }>;
+  };
+  costs: {
+    mtdSpend: number;
+    dailyBurnRate: number;
+    projectedMonthly: number;
+    budgetPct: number;
+    monthlyBudget: number;
+    dailyTrend: number[];
+  };
+  activity: {
+    notifications: Array<{
+      id: string;
+      title: string;
+      category: string;
+      priority: string;
+      source: string;
+      created_at: number;
+      action_url: string | null;
+    }>;
+    pendingPatterns: number;
+  };
+  alerts: {
+    hasP0P1: boolean;
+    trippedBreakers: number;
+    warningBreakers: number;
+    servicesDown: number;
+  };
+  dataQuality?: {
+    latestSnapshot: string | null;
+    snapshotAgeMinutes: number;
+    status: 'fresh' | 'stale' | 'unknown';
+  };
+}
+
+export function MissionControl() {
+  const [data, setData] = useState<OverviewSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch('/api/overview/summary')
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((summary: OverviewSummary) => {
+        setData(summary);
+        setLoading(false);
+      })
+      .catch(err => {
+        setError(err instanceof Error ? err.message : 'Failed to load overview');
+        setLoading(false);
+      });
+  }, []);
+
+  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">
+        <div className="flex items-center gap-2">
+          <div>
+            <strong className="text-red-800 dark:text-red-200">Error loading overview</strong>
+            <p className="text-sm text-red-600 dark:text-red-300 mt-1">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const dq = data?.dataQuality;
+  const dqDot = dq?.status === 'fresh' ? 'bg-green-500' : dq?.status === 'stale' ? 'bg-yellow-500' : 'bg-gray-400';
+  const dqText = dq?.status === 'fresh'
+    ? `Data ${dq.snapshotAgeMinutes}m ago`
+    : dq?.status === 'stale'
+      ? `Data ${Math.round((dq.snapshotAgeMinutes ?? 0) / 60)}h old`
+      : 'Data age unknown';
+
+  return (
+    <div className="space-y-2">
+      {!loading && (
+        <div className="flex items-center justify-end gap-1.5 text-xs text-gray-400 dark:text-gray-500">
+          <span className={`inline-block w-1.5 h-1.5 rounded-full ${dqDot}`} />
+          {dqText}
+        </div>
+      )}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <HealthQuadrant
+          data={data?.health ?? { servicesTotal: 0, servicesUp: 0, servicesDown: 0, uptimePct: 100, lastAuditScore: null, lastAuditDate: null }}
+          loading={loading}
+        />
+        <ErrorsQuadrant
+          data={data?.errors ?? { p0Count: 0, p1Count: 0, p2Count: 0, p3Count: 0, p4Count: 0, newToday: 0, dailyTrend: [], topErrors: [] }}
+          loading={loading}
+        />
+        <CostQuadrant
+          data={data?.costs ?? { mtdSpend: 0, dailyBurnRate: 0, projectedMonthly: 0, budgetPct: 0, monthlyBudget: 100, dailyTrend: [] }}
+          loading={loading}
+        />
+        <ActivityFeed
+          data={data?.activity ?? { notifications: [], pendingPatterns: 0 }}
+          loading={loading}
+        />
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/resources/AllowanceStatus.tsx

@@ -0,0 +1,44 @@
+interface Allowance {
+  service: string;
+  metric: string;
+  used: number;
+  included: number;
+  unit: string;
+}
+
+interface Props {
+  allowances: Allowance[];
+}
+
+export function AllowanceStatus({ allowances }: Props) {
+  if (allowances.length === 0) {
+    return (
+      <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
+        No allowance data available yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {allowances.map((a) => {
+        const pct = a.included > 0 ? Math.min((a.used / a.included) * 100, 100) : 0;
+        const colour = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-yellow-500' : 'bg-green-500';
+
+        return (
+          <div key={`${a.service}-${a.metric}`}>
+            <div className="flex justify-between text-sm mb-1">
+              <span className="text-gray-700 dark:text-gray-300">{a.service} — {a.metric}</span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {a.used.toLocaleString()} / {a.included.toLocaleString()} {a.unit}
+              </span>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+              <div className={`${colour} h-2 rounded-full transition-all`} style={{ width: `${pct}%` }} />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/resources/CostCentreOverview.tsx

@@ -0,0 +1,42 @@
+interface CostRow {
+  service: string;
+  mtdCost: number;
+  pctOfTotal: number;
+}
+
+interface Props {
+  costs: CostRow[];
+}
+
+export function CostCentreOverview({ costs }: Props) {
+  if (costs.length === 0) {
+    return (
+      <div className="text-center py-4 text-sm text-gray-500 dark:text-gray-400">
+        No cost data available yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-gray-200 dark:border-gray-700">
+            <th className="text-left py-2 px-3 text-gray-500 dark:text-gray-400 font-medium">Service</th>
+            <th className="text-right py-2 px-3 text-gray-500 dark:text-gray-400 font-medium">MTD Cost</th>
+            <th className="text-right py-2 px-3 text-gray-500 dark:text-gray-400 font-medium">% of Total</th>
+          </tr>
+        </thead>
+        <tbody>
+          {costs.map((row) => (
+            <tr key={row.service} className="border-b border-gray-100 dark:border-gray-800">
+              <td className="py-2 px-3 text-gray-900 dark:text-white">{row.service}</td>
+              <td className="py-2 px-3 text-right text-gray-900 dark:text-white">${row.mtdCost.toFixed(2)}</td>
+              <td className="py-2 px-3 text-right text-gray-500 dark:text-gray-400">{row.pctOfTotal}%</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/resources/ResourceTabs.tsx

@@ -0,0 +1,69 @@
+import { useState, useEffect } from 'react';
+
+type Tab = 'overview' | 'workers' | 'databases' | 'storage';
+
+export function ResourceTabs() {
+  const [activeTab, setActiveTab] = useState<Tab>('overview');
+  const [status, setStatus] = useState<{ latestSnapshot: string | null; trackedFeatures: number } | null>(null);
+
+  useEffect(() => {
+    fetch('/api/usage/status')
+      .then(res => res.json())
+      .then(setStatus)
+      .catch(() => {});
+  }, []);
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'workers', label: 'Workers' },
+    { id: 'databases', label: 'Databases' },
+    { id: 'storage', label: 'Storage' },
+  ];
+
+  return (
+    <div>
+      <div className="border-b border-gray-200 dark:border-gray-700 mb-4">
+        <nav className="flex gap-4">
+          {tabs.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`py-2 px-1 text-sm font-medium border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                  : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      <div className="space-y-4">
+        {activeTab === 'overview' && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="metric-card">
+              <div className="metric-title">Last Snapshot</div>
+              <div className="metric-value text-lg">{status?.latestSnapshot ?? 'N/A'}</div>
+            </div>
+            <div className="metric-card">
+              <div className="metric-title">Tracked Features</div>
+              <div className="metric-value">{status?.trackedFeatures ?? 0}</div>
+            </div>
+            <div className="metric-card">
+              <div className="metric-title">Status</div>
+              <div className="metric-value text-lg text-green-600 dark:text-green-400">Active</div>
+            </div>
+          </div>
+        )}
+        {activeTab !== 'overview' && (
+          <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+            <p>Resource details for {activeTab} will appear here once data is collected.</p>
+            <p className="text-sm mt-2">Configure collectors in services.yaml and run sync:config.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/resources/index.ts

@@ -0,0 +1,3 @@
+export { ResourceTabs } from './ResourceTabs';
+export { CostCentreOverview } from './CostCentreOverview';
+export { AllowanceStatus } from './AllowanceStatus';

package/templates/shared/dashboard/src/components/settings/SettingsCard.tsx

@@ -0,0 +1,21 @@
+interface Props {
+  label: string;
+  value: string;
+  description: string;
+}
+
+export function SettingsCard({ label, value, description }: Props) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-medium text-gray-900 dark:text-white">{label}</h3>
+          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{description}</p>
+        </div>
+        <span className="text-sm font-mono text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+          {value}
+        </span>
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/settings/index.ts

@@ -0,0 +1 @@
+export { SettingsCard } from './SettingsCard';