feat(I): I-ONB/I-UI/I-DASH frontend — SetupWizard, WorkstreamBlockRenderer, Dashboard platform section, API hooks, i18n, tsc clean, 11/11 dashboard tests
This commit is contained in:
Agent Zero
@@ -0,0 +1,153 @@
|
||||
/**
|
||||
* Platform API hooks — Phase I.6/I.7 (I-ONB, I-DASH, I-COST, I-USE).
|
||||
*
|
||||
* Provides hooks for the setup wizard (onboarding) and the platform dashboard
|
||||
* (agent status, workflow stats, search metrics, knowledge coverage, cost
|
||||
* tracking, system health). Backend routes may not be wired yet, so all hooks
|
||||
* degrade gracefully to an "unavailable" state instead of throwing.
|
||||
*/
|
||||
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { apiGet } from './client';
|
||||
|
||||
// ── Onboarding ──────────────────────────────────────────────────────────────
|
||||
|
||||
export interface OnboardingStepStatus {
|
||||
completed: boolean;
|
||||
required: boolean;
|
||||
}
|
||||
|
||||
export interface OnboardingStatus {
|
||||
steps: Record<string, OnboardingStepStatus>;
|
||||
progress_pct: number;
|
||||
}
|
||||
|
||||
export interface OnboardingGuideStep {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon?: string;
|
||||
action_url?: string;
|
||||
}
|
||||
|
||||
export interface OnboardingGuide {
|
||||
steps: OnboardingGuideStep[];
|
||||
}
|
||||
|
||||
export function useOnboardingStatus() {
|
||||
return useQuery({
|
||||
queryKey: ['onboardingStatus'],
|
||||
queryFn: () => apiGet<OnboardingStatus>('/onboarding/status'),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
export function useOnboardingGuide() {
|
||||
return useQuery({
|
||||
queryKey: ['onboardingGuide'],
|
||||
queryFn: () => apiGet<OnboardingGuide>('/onboarding/guide'),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Platform dashboard ──────────────────────────────────────────────────────
|
||||
|
||||
export interface PlatformDashboardData {
|
||||
agents?: {
|
||||
active_agents?: number;
|
||||
total_runs?: number;
|
||||
recent_runs_7d?: number;
|
||||
error?: string;
|
||||
};
|
||||
workflows?: {
|
||||
active_workflows?: number;
|
||||
running_instances?: number;
|
||||
completed_instances?: number;
|
||||
error?: string;
|
||||
};
|
||||
search?: {
|
||||
total_queries?: number;
|
||||
avg_latency_ms?: number;
|
||||
error?: string;
|
||||
};
|
||||
knowledge?: {
|
||||
wiki_articles?: number;
|
||||
coverage_pct?: number;
|
||||
error?: string;
|
||||
};
|
||||
workstream?: {
|
||||
messages?: number;
|
||||
error?: string;
|
||||
};
|
||||
system_health?: {
|
||||
redis?: string;
|
||||
status?: string;
|
||||
error?: string;
|
||||
};
|
||||
generated_at?: string;
|
||||
}
|
||||
|
||||
export function usePlatformDashboard() {
|
||||
return useQuery({
|
||||
queryKey: ['platformDashboard'],
|
||||
queryFn: () => apiGet<PlatformDashboardData>('/dashboard/platform'),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Cost tracking ───────────────────────────────────────────────────────────
|
||||
|
||||
export interface CostDashboardData {
|
||||
period_days?: number;
|
||||
total_cost_usd?: number;
|
||||
by_agent?: Record<string, { cost_usd: number; runs: number }>;
|
||||
budget?: {
|
||||
monthly_limit_usd?: number;
|
||||
utilization_pct?: number;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function useCostDashboard(days = 30) {
|
||||
return useQuery({
|
||||
queryKey: ['costDashboard', days],
|
||||
queryFn: () => apiGet<CostDashboardData>(`/dashboard/cost?days=${days}`),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Usage analytics ─────────────────────────────────────────────────────────
|
||||
|
||||
export interface UsageAnalyticsData {
|
||||
period_days?: number;
|
||||
agent_runs?: {
|
||||
total?: number;
|
||||
completed?: number;
|
||||
failed?: number;
|
||||
success_rate?: number;
|
||||
error?: string;
|
||||
};
|
||||
workflow_executions?: {
|
||||
total?: number;
|
||||
completed?: number;
|
||||
error?: string;
|
||||
};
|
||||
search_queries?: {
|
||||
total?: number;
|
||||
error?: string;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function useUsageAnalytics(days = 30) {
|
||||
return useQuery({
|
||||
queryKey: ['usageAnalytics', days],
|
||||
queryFn: () => apiGet<UsageAnalyticsData>(`/dashboard/usage?days=${days}`),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/**
|
||||
* SetupWizard — Phase I.6 (I-ONB) setup wizard.
|
||||
*
|
||||
* Guides users through 4 steps: Welcome, Create first Agent,
|
||||
* Create first Workflow, Enable Knowledge & Workstream.
|
||||
*
|
||||
* Uses lucide-react icons, Tailwind, and i18n via `t()`.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Sparkles,
|
||||
Bot,
|
||||
Workflow,
|
||||
BookOpen,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
|
||||
interface SetupWizardProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
const STEP_ICONS = [Sparkles, Bot, Workflow, BookOpen];
|
||||
|
||||
/**
|
||||
* Setup wizard with 4 steps. Each step shows a title, description and an
|
||||
* optional action button that deep-links to the relevant setup page.
|
||||
*/
|
||||
export function SetupWizard({ open, onClose, onComplete }: SetupWizardProps) {
|
||||
const { t } = useTranslation();
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const totalSteps = 4;
|
||||
const isLast = step === totalSteps - 1;
|
||||
const Icon = STEP_ICONS[step];
|
||||
|
||||
const handleNext = () => {
|
||||
if (isLast) {
|
||||
onComplete?.();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
setStep((s) => s + 1);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 0) setStep((s) => s - 1);
|
||||
};
|
||||
|
||||
const stepKey = `setupWizard.step${step + 1}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-secondary-900/50 p-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t('setupWizard.title')}
|
||||
data-testid="setup-wizard"
|
||||
>
|
||||
<Card className="w-full max-w-lg">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-secondary-200">
|
||||
<h2 className="text-lg font-semibold text-secondary-900">
|
||||
{t('setupWizard.title')}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
||||
aria-label={t('setupWizard.close')}
|
||||
>
|
||||
<X className="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-6">
|
||||
{/* Progress indicator */}
|
||||
<div className="flex items-center gap-2 mb-6" aria-hidden="true">
|
||||
{Array.from({ length: totalSteps }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`h-1.5 flex-1 rounded-full transition-colors ${
|
||||
i <= step ? 'bg-primary-500' : 'bg-secondary-200'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary-100 text-primary-700 flex items-center justify-center">
|
||||
<Icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-secondary-900">
|
||||
{t(`${stepKey}.title`)}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-secondary-600">
|
||||
{t(`${stepKey}.description`)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4 border-t border-secondary-200 flex items-center justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
disabled={step === 0}
|
||||
icon={<ChevronLeft className="h-4 w-4" />}
|
||||
>
|
||||
{t('setupWizard.back')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleNext}
|
||||
icon={isLast ? undefined : <ChevronRight className="h-4 w-4" />}
|
||||
>
|
||||
{isLast ? t('setupWizard.finish') : t('setupWizard.next')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SetupWizard;
|
||||
@@ -0,0 +1,260 @@
|
||||
/**
|
||||
* WorkstreamBlockRenderer — Phase I.7 (I-UI) universal block renderer.
|
||||
*
|
||||
* Renders every workstream block type (text, entity_card, action_card,
|
||||
* evidence_card, approval_card, miniapp, workflow_status, workflow_handoff,
|
||||
* error) with consistent loading / error / empty states.
|
||||
*
|
||||
* Reuses MiniAppBlock and the MiniAppSDK building blocks.
|
||||
*
|
||||
* Backend: app/ai/workstream_contract.py
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Link2,
|
||||
AlertTriangle,
|
||||
Workflow,
|
||||
ArrowRight,
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
} from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { MiniAppBlock } from '@/components/workstream/MiniAppBlock';
|
||||
import {
|
||||
EntityCard,
|
||||
ActionButtons,
|
||||
ApprovalCard,
|
||||
ProgressIndicator,
|
||||
DeepLink,
|
||||
type ActionButtonItem,
|
||||
} from '@/components/workstream/MiniAppSDK';
|
||||
import type { WorkstreamBlock } from '@/api/miniapps';
|
||||
|
||||
interface WorkstreamBlockRendererProps {
|
||||
block: WorkstreamBlock;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a single workstream block by type.
|
||||
*/
|
||||
export function WorkstreamBlockRenderer({
|
||||
block,
|
||||
onApprove,
|
||||
onReject,
|
||||
onAction,
|
||||
}: WorkstreamBlockRendererProps) {
|
||||
const { t } = useTranslation();
|
||||
const meta = block.metadata ?? {};
|
||||
|
||||
switch (block.type) {
|
||||
case 'text':
|
||||
return (
|
||||
<div className="text-sm whitespace-pre-wrap break-words text-secondary-800">
|
||||
{block.content || String(meta.text ?? '')}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'entity_card':
|
||||
return (
|
||||
<EntityCard
|
||||
entityType={String(meta.entity_type ?? '')}
|
||||
entityId={String(meta.entity_id ?? '')}
|
||||
title={String(meta.title ?? block.content)}
|
||||
subtitle={String(meta.subtitle ?? '')}
|
||||
url={String(meta.url ?? '')}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'action_card': {
|
||||
const actions: ActionButtonItem[] = Array.isArray(meta.actions)
|
||||
? (meta.actions as ActionButtonItem[])
|
||||
: [];
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm space-y-2">
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.title ?? block.content)}
|
||||
</h4>
|
||||
{meta.description ? (
|
||||
<p className="text-sm text-secondary-600">
|
||||
{String(meta.description)}
|
||||
</p>
|
||||
) : null}
|
||||
<ActionButtons actions={actions} onAction={onAction} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case 'evidence_card':
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.title ?? block.content)}
|
||||
</h4>
|
||||
{typeof meta.confidence === 'number' && (
|
||||
<Badge variant="secondary">
|
||||
{Math.round(meta.confidence * 100)}%
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{meta.snippet ? (
|
||||
<p className="mt-2 text-xs text-secondary-500">
|
||||
{String(meta.snippet)}
|
||||
</p>
|
||||
) : null}
|
||||
{meta.url ? (
|
||||
<div className="mt-2">
|
||||
<DeepLink
|
||||
href={String(meta.url)}
|
||||
label={t('workstream.block.openSource')}
|
||||
external
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'approval_card':
|
||||
return (
|
||||
<ApprovalCard
|
||||
approvalId={String(meta.approval_id ?? '')}
|
||||
action={String(meta.action ?? block.content)}
|
||||
description={String(meta.description ?? '')}
|
||||
onApprove={onApprove}
|
||||
onReject={onReject}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'miniapp':
|
||||
return <MiniAppBlock block={block} />;
|
||||
|
||||
case 'workflow_status':
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Workflow className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.workflow_name ?? block.content)}
|
||||
</h4>
|
||||
<Badge variant="info">{String(meta.status ?? '')}</Badge>
|
||||
</div>
|
||||
{meta.step_name ? (
|
||||
<p className="mt-2 text-xs text-secondary-500">
|
||||
{t('workstream.block.step')}: {String(meta.step_name)}
|
||||
</p>
|
||||
) : null}
|
||||
{typeof meta.step_index === 'number' && (
|
||||
<div className="mt-3">
|
||||
<ProgressIndicator
|
||||
label={t('workstream.block.progress')}
|
||||
value={Math.min(100, (meta.step_index + 1) * 10)}
|
||||
status="in_progress"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'workflow_handoff':
|
||||
return (
|
||||
<div className="border border-warning-200 rounded-lg p-4 bg-warning-50 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowRight className="h-4 w-4 text-warning-700" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{t('workstream.block.handoff')}: {String(meta.handoff_type ?? '')}
|
||||
</h4>
|
||||
</div>
|
||||
{meta.description ? (
|
||||
<p className="mt-2 text-xs text-secondary-600">
|
||||
{String(meta.description)}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'error':
|
||||
return (
|
||||
<div className="border border-danger-200 rounded-lg p-4 bg-danger-50 shadow-sm flex items-start gap-2">
|
||||
<AlertTriangle
|
||||
className="h-4 w-4 text-danger-600 mt-0.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="text-sm text-danger-700">
|
||||
{block.content || String(meta.error ?? '')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="text-xs text-secondary-400 italic p-2 rounded bg-secondary-50">
|
||||
{t('workstream.block.unknown', { type: block.type })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface WorkstreamBlockListProps {
|
||||
blocks: WorkstreamBlock[];
|
||||
isLoading?: boolean;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a list of blocks with consistent loading / empty states.
|
||||
*/
|
||||
export function WorkstreamBlockList({
|
||||
blocks,
|
||||
isLoading = false,
|
||||
onApprove,
|
||||
onReject,
|
||||
onAction,
|
||||
}: WorkstreamBlockListProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2
|
||||
className="animate-spin h-6 w-6 text-primary-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!blocks || blocks.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<MessageSquare className="h-8 w-8" aria-hidden="true" />}
|
||||
title={t('workstream.empty.title')}
|
||||
description={t('workstream.empty.description')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{blocks.map((block, idx) => (
|
||||
<WorkstreamBlockRenderer
|
||||
key={idx}
|
||||
block={block}
|
||||
onApprove={onApprove}
|
||||
onReject={onReject}
|
||||
onAction={onAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkstreamBlockRenderer;
|
||||
@@ -107,7 +107,35 @@
|
||||
"overdueTasks": "überfällig",
|
||||
"highPriorityTasks": "hohe Priorität",
|
||||
"noOpenTasks": "Keine offenen Aufgaben.",
|
||||
"noUpcomingEvents": "Keine anstehenden Termine."
|
||||
"noUpcomingEvents": "Keine anstehenden Termine.",
|
||||
"platform": {
|
||||
"title": "Plattform-Übersicht",
|
||||
"unavailable": "Daten sind derzeit nicht verfügbar.",
|
||||
"agents": "Agent-Status",
|
||||
"activeAgents": "Aktive Agenten",
|
||||
"totalRuns": "Läufe gesamt",
|
||||
"recentRuns7d": "Läufe (7 Tage)",
|
||||
"workflows": "Workflow-Statistiken",
|
||||
"activeWorkflows": "Aktive Workflows",
|
||||
"runningInstances": "Laufende Instanzen",
|
||||
"completedInstances": "Abgeschlossene Instanzen",
|
||||
"search": "Such-Metriken",
|
||||
"totalQueries": "Suchanfragen gesamt",
|
||||
"avgLatency": "Ø Latenz",
|
||||
"knowledge": "Wissensabdeckung",
|
||||
"wikiArticles": "Wiki-Artikel",
|
||||
"coverage": "Abdeckung",
|
||||
"cost": "Kosten-Tracking",
|
||||
"totalCost": "Gesamtkosten (30 Tage)",
|
||||
"budgetUtilization": "Budget-Auslastung",
|
||||
"systemHealth": "System-Status",
|
||||
"health": {
|
||||
"healthy": "Gesund",
|
||||
"degraded": "Eingeschränkt",
|
||||
"down": "Nicht verfügbar",
|
||||
"unknown": "Unbekannt"
|
||||
}
|
||||
}
|
||||
},
|
||||
"companies": {
|
||||
"title": "Firmen",
|
||||
@@ -1302,5 +1330,28 @@
|
||||
"urgent": "Dringend"
|
||||
}
|
||||
}
|
||||
},
|
||||
"setupWizard": {
|
||||
"title": "Setup-Assistent",
|
||||
"close": "Schließen",
|
||||
"back": "Zurück",
|
||||
"next": "Weiter",
|
||||
"finish": "Fertigstellen",
|
||||
"step1": {
|
||||
"title": "Willkommen bei LeoCRM",
|
||||
"description": "Starten Sie mit Ihrer KI-gestützten CRM-Plattform."
|
||||
},
|
||||
"step2": {
|
||||
"title": "Ersten Agenten erstellen",
|
||||
"description": "Richten Sie einen KI-Agenten ein, der bei E-Mail-Triage, Kontaktanreicherung oder Follow-ups hilft."
|
||||
},
|
||||
"step3": {
|
||||
"title": "Ersten Workflow erstellen",
|
||||
"description": "Automatisieren Sie wiederkehrende Aufgaben mit Workflows. Starten Sie mit einer Vorlage oder erstellen Sie eigene."
|
||||
},
|
||||
"step4": {
|
||||
"title": "Knowledge & Workstream aktivieren",
|
||||
"description": "Erstellen Sie Wiki-Artikel und verbinden Sie Menschen, Agenten und Workflows in einem einheitlichen Stream."
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -107,7 +107,35 @@
|
||||
"overdueTasks": "overdue",
|
||||
"highPriorityTasks": "high priority",
|
||||
"noOpenTasks": "No open tasks.",
|
||||
"noUpcomingEvents": "No upcoming events."
|
||||
"noUpcomingEvents": "No upcoming events.",
|
||||
"platform": {
|
||||
"title": "Platform Overview",
|
||||
"unavailable": "Data is currently unavailable.",
|
||||
"agents": "Agent Status",
|
||||
"activeAgents": "Active agents",
|
||||
"totalRuns": "Total runs",
|
||||
"recentRuns7d": "Runs (7 days)",
|
||||
"workflows": "Workflow Stats",
|
||||
"activeWorkflows": "Active workflows",
|
||||
"runningInstances": "Running instances",
|
||||
"completedInstances": "Completed instances",
|
||||
"search": "Search Metrics",
|
||||
"totalQueries": "Total queries",
|
||||
"avgLatency": "Avg. latency",
|
||||
"knowledge": "Knowledge Coverage",
|
||||
"wikiArticles": "Wiki articles",
|
||||
"coverage": "Coverage",
|
||||
"cost": "Cost Tracking",
|
||||
"totalCost": "Total cost (30d)",
|
||||
"budgetUtilization": "Budget utilization",
|
||||
"systemHealth": "System Health",
|
||||
"health": {
|
||||
"healthy": "Healthy",
|
||||
"degraded": "Degraded",
|
||||
"down": "Down",
|
||||
"unknown": "Unknown"
|
||||
}
|
||||
}
|
||||
},
|
||||
"companies": {
|
||||
"title": "Companies",
|
||||
@@ -1302,5 +1330,28 @@
|
||||
"urgent": "Urgent"
|
||||
}
|
||||
}
|
||||
},
|
||||
"setupWizard": {
|
||||
"title": "Setup Wizard",
|
||||
"close": "Close",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"finish": "Finish",
|
||||
"step1": {
|
||||
"title": "Welcome to LeoCRM",
|
||||
"description": "Get started with your AI-powered CRM platform."
|
||||
},
|
||||
"step2": {
|
||||
"title": "Create Your First Agent",
|
||||
"description": "Set up an AI agent to help with email triage, contact enrichment, or follow-ups."
|
||||
},
|
||||
"step3": {
|
||||
"title": "Create Your First Workflow",
|
||||
"description": "Automate repetitive tasks with workflows. Start with a template or build your own."
|
||||
},
|
||||
"step4": {
|
||||
"title": "Enable Knowledge & Workstream",
|
||||
"description": "Create wiki articles and connect humans, agents, and workflows in a unified stream."
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,26 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Bot,
|
||||
Workflow,
|
||||
Search,
|
||||
BookOpen,
|
||||
DollarSign,
|
||||
HeartPulse,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { StatCard } from '@/components/shared/StatCard';
|
||||
import { ActivityFeed, ActivityItem } from '@/components/shared/ActivityFeed';
|
||||
import { DashboardGrid } from '@/components/dashboard/DashboardGrid';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { useUnifiedContacts, useAuditLog } from '@/api/hooks';
|
||||
import { useDashboardWidgets } from '@/api/dashboard';
|
||||
import {
|
||||
usePlatformDashboard,
|
||||
useCostDashboard,
|
||||
useUsageAnalytics,
|
||||
} from '@/api/platform';
|
||||
import { formatDateTime } from '@/utils/date';
|
||||
|
||||
export function DashboardPage() {
|
||||
@@ -14,6 +30,22 @@ export function DashboardPage() {
|
||||
const { data: auditData, isError: auditError } = useAuditLog(1, 5);
|
||||
const { data: widgetsData, isError: widgetsError } = useDashboardWidgets();
|
||||
|
||||
const {
|
||||
data: platformData,
|
||||
isLoading: platformLoading,
|
||||
isError: platformError,
|
||||
} = usePlatformDashboard();
|
||||
const {
|
||||
data: costData,
|
||||
isLoading: costLoading,
|
||||
isError: costError,
|
||||
} = useCostDashboard(30);
|
||||
const {
|
||||
data: usageData,
|
||||
isLoading: usageLoading,
|
||||
isError: usageError,
|
||||
} = useUsageAnalytics(30);
|
||||
|
||||
const totalCompanies = companiesData?.total ?? 0;
|
||||
const totalContacts = contactsData?.total ?? 0;
|
||||
|
||||
@@ -46,6 +78,20 @@ export function DashboardPage() {
|
||||
|
||||
const widgets = widgetsData?.items ?? [];
|
||||
|
||||
const agents = platformData?.agents;
|
||||
const workflows = platformData?.workflows;
|
||||
const search = platformData?.search;
|
||||
const knowledge = platformData?.knowledge;
|
||||
const systemHealth = platformData?.system_health;
|
||||
const searchQueries = usageData?.search_queries;
|
||||
|
||||
const costUsd = costData?.total_cost_usd ?? 0;
|
||||
const budget = costData?.budget;
|
||||
const budgetUtilization = budget?.utilization_pct ?? 0;
|
||||
|
||||
const healthLabel = systemHealth?.status ?? 'unknown';
|
||||
const healthVariant = healthStatusVariant(healthLabel);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto" data-testid="dashboard-page">
|
||||
<h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('dashboard.title')}</h1>
|
||||
@@ -73,6 +119,155 @@ export function DashboardPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Platform Dashboard — Phase I.7 (I-DASH) */}
|
||||
<section className="mb-8" aria-label={t('dashboard.platform.title')}>
|
||||
<h2 className="text-lg font-semibold text-secondary-800 mb-4">
|
||||
{t('dashboard.platform.title')}
|
||||
</h2>
|
||||
|
||||
{platformLoading || costLoading || usageLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="animate-spin h-6 w-6 text-primary-500" aria-hidden="true" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Agent status */}
|
||||
<Card title={t('dashboard.platform.agents')}>
|
||||
{agents?.error || platformError ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<Bot className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.activeAgents')}
|
||||
value={agents?.active_agents ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Bot className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.totalRuns')}
|
||||
value={agents?.total_runs ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Bot className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.recentRuns7d')}
|
||||
value={agents?.recent_runs_7d ?? 0}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Workflow stats */}
|
||||
<Card title={t('dashboard.platform.workflows')}>
|
||||
{workflows?.error || platformError ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<Workflow className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.activeWorkflows')}
|
||||
value={workflows?.active_workflows ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Workflow className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.runningInstances')}
|
||||
value={workflows?.running_instances ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Workflow className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.completedInstances')}
|
||||
value={workflows?.completed_instances ?? 0}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Search metrics */}
|
||||
<Card title={t('dashboard.platform.search')}>
|
||||
{usageError || searchQueries?.error ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<Search className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.totalQueries')}
|
||||
value={searchQueries?.total ?? search?.total_queries ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Search className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.avgLatency')}
|
||||
value={
|
||||
typeof search?.avg_latency_ms === 'number'
|
||||
? `${search.avg_latency_ms} ms`
|
||||
: '—'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Knowledge coverage */}
|
||||
<Card title={t('dashboard.platform.knowledge')}>
|
||||
{platformError || knowledge?.error ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<BookOpen className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.wikiArticles')}
|
||||
value={knowledge?.wiki_articles ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<BookOpen className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.coverage')}
|
||||
value={
|
||||
typeof knowledge?.coverage_pct === 'number'
|
||||
? `${knowledge.coverage_pct}%`
|
||||
: '—'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Cost tracking */}
|
||||
<Card title={t('dashboard.platform.cost')}>
|
||||
{costError || costData?.error ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<DollarSign className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.totalCost')}
|
||||
value={`$${costUsd.toFixed(2)}`}
|
||||
/>
|
||||
{budget?.monthly_limit_usd ? (
|
||||
<MetricRow
|
||||
icon={<DollarSign className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.budgetUtilization')}
|
||||
value={`${budgetUtilization.toFixed(1)}%`}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* System health */}
|
||||
<Card title={t('dashboard.platform.systemHealth')}>
|
||||
{platformError ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<HeartPulse className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<Badge variant={healthVariant} dot>
|
||||
{t(`dashboard.platform.health.${healthLabel}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Dynamic Plugin Widgets */}
|
||||
{widgetsError ? (
|
||||
<p className="text-sm text-secondary-500 mb-6" data-testid="dashboard-widgets-unavailable">
|
||||
@@ -95,3 +290,32 @@ export function DashboardPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string | number;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2 text-sm text-secondary-600">
|
||||
<span className="text-primary-500" aria-hidden="true">{icon}</span>
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-secondary-900">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function healthStatusVariant(status: string): 'success' | 'warning' | 'danger' | 'secondary' {
|
||||
if (status === 'healthy') return 'success';
|
||||
if (status === 'degraded') return 'warning';
|
||||
if (status === 'down') return 'danger';
|
||||
return 'secondary';
|
||||
}
|
||||
|
||||
export default DashboardPage;
|
||||
|
||||
Reference in New Issue
Block a user