@littlebearapps/platform-admin-sdk 1.5.0 → 2.1.0

package/templates/shared/dashboard/src/components/infrastructure/UptimeStatus.tsx

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface ServiceStatus {
+  name: string;
+  status: 'healthy' | 'degraded' | 'down' | 'unknown';
+  lastCheck: string;
+  uptimePct?: number;
+}
+
+export function UptimeStatus() {
+  const [services, setServices] = useState<ServiceStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/infrastructure/services')
+      .then((r) => r.json())
+      .then((data: { services: ServiceStatus[] }) => {
+        setServices(data.services ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  const statusColour: Record<string, string> = {
+    healthy: 'bg-green-500',
+    degraded: 'bg-yellow-500',
+    down: 'bg-red-500',
+    unknown: 'bg-gray-400',
+  };
+
+  return (
+    <div className="space-y-2">
+      {services.length === 0 ? (
+        <p className="text-sm text-gray-500 dark:text-gray-400">No service data available.</p>
+      ) : (
+        services.map((s) => (
+          <div
+            key={s.name}
+            className="flex items-center justify-between py-1.5 px-3 bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700"
+          >
+            <div className="flex items-center gap-2">
+              <span className={`w-2 h-2 rounded-full ${statusColour[s.status] ?? statusColour.unknown}`} />
+              <span className="text-sm text-gray-900 dark:text-white">{s.name}</span>
+            </div>
+            {s.uptimePct !== undefined && (
+              <span className="text-xs text-gray-500 dark:text-gray-400">{s.uptimePct.toFixed(1)}%</span>
+            )}
+          </div>
+        ))
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { InfrastructureStats } from './InfrastructureStats';
+export { UptimeStatus } from './UptimeStatus';
+export { ServiceRegistry } from './ServiceRegistry';
+export { AlertHistory } from './AlertHistory';

package/templates/shared/dashboard/src/components/reports/ReportInfoButton.tsx

@@ -0,0 +1,98 @@
+/**
+ * ReportInfoButton Component
+ * Reusable info icon button that toggles a floating panel with report explanation.
+ * Based on PatternInfoButton pattern.
+ */
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+
+interface ReportInfoButtonProps {
+  title: string;
+  children: ReactNode;
+  /** Colour theme: matches the original info panel colours per report */
+  theme?: 'blue' | 'yellow' | 'orange' | 'red' | 'purple' | 'green' | 'teal';
+}
+
+const themeClasses: Record<string, { button: string; panel: string; heading: string }> = {
+  blue: {
+    button: 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900/40 dark:hover:bg-blue-900/60 text-blue-600 dark:text-blue-400',
+    panel: 'bg-blue-50 dark:bg-blue-900/30 border-blue-200 dark:border-blue-800',
+    heading: 'text-blue-800 dark:text-blue-300',
+  },
+  yellow: {
+    button: 'bg-yellow-100 hover:bg-yellow-200 dark:bg-yellow-900/40 dark:hover:bg-yellow-900/60 text-yellow-600 dark:text-yellow-400',
+    panel: 'bg-yellow-50 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800',
+    heading: 'text-yellow-800 dark:text-yellow-300',
+  },
+  orange: {
+    button: 'bg-orange-100 hover:bg-orange-200 dark:bg-orange-900/40 dark:hover:bg-orange-900/60 text-orange-600 dark:text-orange-400',
+    panel: 'bg-orange-50 dark:bg-orange-900/30 border-orange-200 dark:border-orange-800',
+    heading: 'text-orange-800 dark:text-orange-300',
+  },
+  red: {
+    button: 'bg-red-100 hover:bg-red-200 dark:bg-red-900/40 dark:hover:bg-red-900/60 text-red-600 dark:text-red-400',
+    panel: 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-800',
+    heading: 'text-red-800 dark:text-red-300',
+  },
+  purple: {
+    button: 'bg-purple-100 hover:bg-purple-200 dark:bg-purple-900/40 dark:hover:bg-purple-900/60 text-purple-600 dark:text-purple-400',
+    panel: 'bg-purple-50 dark:bg-purple-900/30 border-purple-200 dark:border-purple-800',
+    heading: 'text-purple-800 dark:text-purple-300',
+  },
+  green: {
+    button: 'bg-green-100 hover:bg-green-200 dark:bg-green-900/40 dark:hover:bg-green-900/60 text-green-600 dark:text-green-400',
+    panel: 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-800',
+    heading: 'text-green-800 dark:text-green-300',
+  },
+  teal: {
+    button: 'bg-teal-100 hover:bg-teal-200 dark:bg-teal-900/40 dark:hover:bg-teal-900/60 text-teal-600 dark:text-teal-400',
+    panel: 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-800',
+    heading: 'text-teal-800 dark:text-teal-300',
+  },
+};
+
+export function ReportInfoButton({ title, children, theme = 'blue' }: ReportInfoButtonProps) {
+  const [open, setOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const colours = themeClasses[theme];
+
+  useEffect(() => {
+    if (!open) return;
+
+    function handleClickOutside(event: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={panelRef}>
+      <button
+        onClick={() => setOpen(!open)}
+        className={`inline-flex items-center justify-center w-9 h-9 rounded-full ${colours.button} transition-colors`}
+        title={title}
+        aria-label={title}
+      >
+        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className={`absolute right-0 top-12 z-50 w-96 border rounded-lg p-4 shadow-lg ${colours.panel}`}>
+          <h3 className={`font-semibold ${colours.heading} mb-2`}>{title}</h3>
+          {children}
+          <button
+            onClick={() => setOpen(false)}
+            className={`mt-3 text-xs ${colours.heading} hover:underline`}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/Breadcrumbs.tsx

@@ -0,0 +1,27 @@
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: Crumb[];
+}
+
+export function Breadcrumbs({ items }: Props) {
+  return (
+    <nav className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 mb-4">
+      {items.map((item, i) => (
+        <span key={i} className="flex items-center gap-1.5">
+          {i > 0 && <span className="opacity-40">/</span>}
+          {item.href ? (
+            <a href={item.href} className="hover:text-gray-900 dark:hover:text-white transition-colors">
+              {item.label}
+            </a>
+          ) : (
+            <span className="text-gray-900 dark:text-white font-medium">{item.label}</span>
+          )}
+        </span>
+      ))}
+    </nav>
+  );
+}

package/templates/shared/dashboard/src/components/ui/EmptyState.tsx

@@ -0,0 +1,26 @@
+interface Props {
+  icon?: string;
+  title: string;
+  description?: string;
+  action?: { label: string; href: string };
+}
+
+export function EmptyState({ icon = '\u2205', title, description, action }: Props) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-center">
+      <span className="text-4xl mb-3 opacity-40">{icon}</span>
+      <h3 className="text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
+      {description && (
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-sm">{description}</p>
+      )}
+      {action && (
+        <a
+          href={action.href}
+          className="mt-4 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          {action.label}
+        </a>
+      )}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/ErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    console.error('[ErrorBoundary]', error, errorInfo);
+  }
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      return (
+        this.props.fallback ?? (
+          <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+            <p className="text-sm font-medium text-red-800 dark:text-red-300">Something went wrong</p>
+            <p className="text-xs text-red-600 dark:text-red-400 mt-1">{this.state.error?.message}</p>
+          </div>
+        )
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/shared/dashboard/src/components/ui/LoadingSkeleton.tsx

@@ -0,0 +1,18 @@
+interface Props {
+  lines?: number;
+  className?: string;
+}
+
+export function LoadingSkeleton({ lines = 3, className = '' }: Props) {
+  return (
+    <div className={`animate-pulse space-y-3 ${className}`}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div
+          key={i}
+          className="h-4 bg-gray-200 dark:bg-gray-700 rounded"
+          style={{ width: `${85 - i * 15}%` }}
+        />
+      ))}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/PageShell.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { Breadcrumbs } from './Breadcrumbs';
+
+interface PageShellProps {
+  title: string;
+  description?: string;
+  breadcrumbs?: Array<{ label: string; href?: string }>;
+  actions?: ReactNode;
+  children: ReactNode;
+}
+
+export function PageShell({ title, description, breadcrumbs, actions, children }: PageShellProps) {
+  return (
+    <div className="space-y-4">
+      {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold text-gray-900 dark:text-white">{title}</h1>
+          {description && <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{description}</p>}
+        </div>
+        {actions && <div className="shrink-0">{actions}</div>}
+      </div>
+      {children}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/ui/Toast.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+
+interface Props {
+  type: 'success' | 'error' | 'info';
+  message: string;
+  duration?: number;
+  onDismiss?: () => void;
+}
+
+const styles: Record<Props['type'], string> = {
+  success: 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200',
+  error: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200',
+  info: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200',
+};
+
+export function Toast({ type, message, duration = 5000, onDismiss }: Props) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onDismiss?.();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onDismiss]);
+
+  if (!visible) return null;
+
+  return (
+    <div className={`fixed bottom-4 right-4 z-50 border rounded-lg px-4 py-3 shadow-lg max-w-sm ${styles[type]}`}>
+      <div className="flex items-center justify-between gap-3">
+        <p className="text-sm font-medium">{message}</p>
+        <button
+          onClick={() => { setVisible(false); onDismiss?.(); }}
+          className="text-current opacity-50 hover:opacity-100 shrink-0"
+          aria-label="Dismiss"
+        >
+          x
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,3 +1,9 @@
 export { Sparkline } from './Sparkline';
 export { StatusDot } from './StatusDot';
 export { AlertBanner } from './AlertBanner';
+export { EmptyState } from './EmptyState';
+export { LoadingSkeleton } from './LoadingSkeleton';
+export { Breadcrumbs } from './Breadcrumbs';
+export { Toast } from './Toast';
+export { ErrorBoundary } from './ErrorBoundary';
+export { PageShell } from './PageShell';

package/templates/shared/dashboard/src/components/usage/AnomaliesWidget.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+import { EmptyState } from '../ui/EmptyState';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Anomaly {
+  id: number;
+  project: string;
+  metric: string;
+  current_value: number;
+  baseline_value: number;
+  deviation_pct: number;
+  detected_at: string;
+  status: string;
+}
+
+export function AnomaliesWidget() {
+  const [anomalies, setAnomalies] = useState<Anomaly[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/anomalies')
+      .then(res => res.json())
+      .then((data: { anomalies: Anomaly[] }) => { setAnomalies(data.anomalies); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  if (anomalies.length === 0) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          Anomalies
+        </h3>
+        <EmptyState title="No anomalies detected" description="Usage patterns look normal." />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        Recent Anomalies
+      </h3>
+      <div className="space-y-2">
+        {anomalies.map(a => (
+          <div key={a.id} className="flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-700 last:border-0">
+            <div>
+              <p className="text-sm text-gray-900 dark:text-white">
+                {a.metric.replace(/_/g, ' ')} — {a.project}
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                {new Date(a.detected_at).toLocaleDateString()}
+              </p>
+            </div>
+            <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+              a.deviation_pct > 200
+                ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+            }`}>
+              +{a.deviation_pct}%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/usage/HourlyUsageChart.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { Sparkline } from '../ui/Sparkline';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Snapshot {
+  snapshot_hour: string;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  total_cost_usd: number;
+}
+
+interface Props {
+  hours?: number;
+}
+
+export function HourlyUsageChart({ hours = 24 }: Props) {
+  const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/usage/hourly?hours=${hours}`)
+      .then(res => res.json())
+      .then((data: { snapshots: Snapshot[] }) => { setSnapshots(data.snapshots); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, [hours]);
+
+  if (loading) return <LoadingSkeleton lines={3} />;
+
+  const costData = snapshots.map(s => s.total_cost_usd);
+  const d1WriteData = snapshots.map(s => s.d1_writes);
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        Hourly Usage ({hours}h)
+      </h3>
+      {snapshots.length === 0 ? (
+        <p className="text-sm text-gray-400">No hourly data available yet.</p>
+      ) : (
+        <div className="space-y-4">
+          <div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Cost (USD)</p>
+            <Sparkline data={costData} height={40} color="blue" />
+          </div>
+          <div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">D1 Writes</p>
+            <Sparkline data={d1WriteData} height={40} color="amber" />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/usage/PlanAllowanceDashboard.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+
+interface Allowance {
+  resource: string;
+  allowance: number;
+  used: number;
+  pct: number;
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)}B`;
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return String(n);
+}
+
+function pctColor(pct: number): string {
+  if (pct >= 90) return 'bg-red-500';
+  if (pct >= 75) return 'bg-orange-500';
+  if (pct >= 50) return 'bg-yellow-500';
+  return 'bg-green-500';
+}
+
+export function PlanAllowanceDashboard() {
+  const [allowances, setAllowances] = useState<Allowance[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/allowances')
+      .then(res => res.json())
+      .then((data: { allowances: Allowance[] }) => { setAllowances(data.allowances); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={4} />;
+
+  if (allowances.length === 0) {
+    return <p className="text-sm text-gray-500 dark:text-gray-400">No allowance data available.</p>;
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        Plan Allowances (MTD)
+      </h3>
+      <div className="space-y-3">
+        {allowances.map(a => (
+          <div key={a.resource}>
+            <div className="flex items-center justify-between text-sm mb-1">
+              <span className="text-gray-700 dark:text-gray-300">{a.resource.replace(/_/g, ' ')}</span>
+              <span className="text-gray-500 dark:text-gray-400">
+                {formatNumber(a.used)} / {formatNumber(a.allowance)} ({a.pct}%)
+              </span>
+            </div>
+            <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all ${pctColor(a.pct)}`}
+                style={{ width: `${Math.min(a.pct, 100)}%` }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/shared/dashboard/src/components/usage/ProjectCostBreakdown.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { LoadingSkeleton } from '../ui/LoadingSkeleton';
+import { EmptyState } from '../ui/EmptyState';
+
+interface ProjectCost {
+  project: string;
+  total_cost_usd: number;
+  d1_writes: number;
+  worker_requests: number;
+}
+
+export function ProjectCostBreakdown() {
+  const [projects, setProjects] = useState<ProjectCost[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api/usage/projects')
+      .then((r) => r.json())
+      .then((data: { projects: ProjectCost[] }) => {
+        setProjects(data.projects ?? []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <LoadingSkeleton lines={4} />;
+  if (projects.length === 0) return <EmptyState title="No project data" description="Project cost data will appear after usage collection runs." />;
+
+  const maxCost = Math.max(...projects.map((p) => p.total_cost_usd), 0.01);
+
+  return (
+    <div className="space-y-3">
+      {projects.map((p) => (
+        <div key={p.project} className="bg-white dark:bg-gray-800 rounded border border-gray-200 dark:border-gray-700 p-3">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-sm font-medium text-gray-900 dark:text-white">{p.project}</span>
+            <span className="text-sm font-mono text-gray-700 dark:text-gray-300">
+              ${p.total_cost_usd.toFixed(2)}
+            </span>
+          </div>
+          <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div
+              className="bg-blue-500 h-1.5 rounded-full transition-all"
+              style={{ width: `${Math.min((p.total_cost_usd / maxCost) * 100, 100)}%` }}
+            />
+          </div>
+          <div className="flex gap-4 mt-1 text-xs text-gray-500 dark:text-gray-400">
+            <span>D1 writes: {p.d1_writes.toLocaleString()}</span>
+            <span>Requests: {p.worker_requests.toLocaleString()}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+export { HourlyUsageChart } from './HourlyUsageChart';
+export { PlanAllowanceDashboard } from './PlanAllowanceDashboard';
+export { AnomaliesWidget } from './AnomaliesWidget';
+export { ProjectCostBreakdown } from './ProjectCostBreakdown';