feat(analytics): add tabbed layout with coverage heatmap
Add Phase 5 types (CoverageResponse, FlowQualityResponse, EnhancedPsaMetrics) and API methods. Refactor FlowPilotAnalyticsPage with tab bar (Overview, Coverage, Flow Quality, PSA) with lazy data loading. Create CoverageHeatmap component with color-coded resolution/escalation/guided rate cells. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
BarChart3, Clock, Star, CheckCircle2, ArrowUpRight,
|
||||
@@ -8,9 +8,14 @@ import {
|
||||
AreaChart, Area, BarChart, Bar,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { flowpilotAnalyticsApi } from '@/api'
|
||||
import { toast } from '@/lib/toast'
|
||||
import type { FlowPilotDashboard, KnowledgeGapReport, KnowledgeGap } from '@/types/flowpilot-analytics'
|
||||
import CoverageHeatmap from '@/components/analytics/CoverageHeatmap'
|
||||
import type {
|
||||
FlowPilotDashboard, KnowledgeGapReport, KnowledgeGap,
|
||||
CoverageResponse, FlowQualityResponse, EnhancedPsaMetrics,
|
||||
} from '@/types/flowpilot-analytics'
|
||||
|
||||
const PERIOD_OPTIONS = [
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
@@ -18,6 +23,15 @@ const PERIOD_OPTIONS = [
|
||||
{ value: '90d', label: 'Last 90 days' },
|
||||
]
|
||||
|
||||
const TABS = [
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'coverage', label: 'Coverage' },
|
||||
{ id: 'quality', label: 'Flow Quality' },
|
||||
{ id: 'psa', label: 'PSA' },
|
||||
] as const
|
||||
|
||||
type TabId = typeof TABS[number]['id']
|
||||
|
||||
const SEVERITY_STYLES = {
|
||||
high: 'bg-rose-500/10 text-rose-500 border-rose-500/20',
|
||||
medium: 'bg-amber-400/10 text-amber-400 border-amber-400/20',
|
||||
@@ -26,10 +40,25 @@ const SEVERITY_STYLES = {
|
||||
|
||||
export default function FlowPilotAnalyticsPage() {
|
||||
const [period, setPeriod] = useState('30d')
|
||||
const [activeTab, setActiveTab] = useState<TabId>('overview')
|
||||
const [dashboard, setDashboard] = useState<FlowPilotDashboard | null>(null)
|
||||
const [gaps, setGaps] = useState<KnowledgeGapReport | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// Lazy-loaded tab data
|
||||
const [coverageData, setCoverageData] = useState<CoverageResponse | null>(null)
|
||||
const [coverageLoading, setCoverageLoading] = useState(false)
|
||||
const [qualityData, setQualityData] = useState<FlowQualityResponse | null>(null)
|
||||
const [qualityLoading, setQualityLoading] = useState(false)
|
||||
const [psaData, setPsaData] = useState<EnhancedPsaMetrics | null>(null)
|
||||
const [psaLoading, setPsaLoading] = useState(false)
|
||||
|
||||
// Track which period each tab was loaded for
|
||||
const coveragePeriodRef = useRef<string | null>(null)
|
||||
const qualityPeriodRef = useRef<string | null>(null)
|
||||
const psaPeriodRef = useRef<string | null>(null)
|
||||
|
||||
// Load overview data
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
Promise.all([
|
||||
@@ -42,8 +71,50 @@ export default function FlowPilotAnalyticsPage() {
|
||||
})
|
||||
.catch(() => toast.error('Failed to load analytics'))
|
||||
.finally(() => setLoading(false))
|
||||
|
||||
// Reset lazy-loaded data when period changes
|
||||
coveragePeriodRef.current = null
|
||||
qualityPeriodRef.current = null
|
||||
psaPeriodRef.current = null
|
||||
setCoverageData(null)
|
||||
setQualityData(null)
|
||||
setPsaData(null)
|
||||
}, [period])
|
||||
|
||||
// Lazy-load tab data on tab switch or period change
|
||||
useEffect(() => {
|
||||
if (activeTab === 'coverage' && coveragePeriodRef.current !== period) {
|
||||
setCoverageLoading(true)
|
||||
flowpilotAnalyticsApi.getCoverage(period)
|
||||
.then((data) => {
|
||||
setCoverageData(data)
|
||||
coveragePeriodRef.current = period
|
||||
})
|
||||
.catch(() => toast.error('Failed to load coverage data'))
|
||||
.finally(() => setCoverageLoading(false))
|
||||
}
|
||||
if (activeTab === 'quality' && qualityPeriodRef.current !== period) {
|
||||
setQualityLoading(true)
|
||||
flowpilotAnalyticsApi.getFlowQuality(period)
|
||||
.then((data) => {
|
||||
setQualityData(data)
|
||||
qualityPeriodRef.current = period
|
||||
})
|
||||
.catch(() => toast.error('Failed to load flow quality data'))
|
||||
.finally(() => setQualityLoading(false))
|
||||
}
|
||||
if (activeTab === 'psa' && psaPeriodRef.current !== period) {
|
||||
setPsaLoading(true)
|
||||
flowpilotAnalyticsApi.getPsaMetrics(period)
|
||||
.then((data) => {
|
||||
setPsaData(data)
|
||||
psaPeriodRef.current = period
|
||||
})
|
||||
.catch(() => toast.error('Failed to load PSA metrics'))
|
||||
.finally(() => setPsaLoading(false))
|
||||
}
|
||||
}, [activeTab, period])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
@@ -91,201 +162,284 @@ export default function FlowPilotAnalyticsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top row — Key metrics */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<MetricCard
|
||||
icon={BarChart3}
|
||||
label="Total Sessions"
|
||||
value={dashboard.total_sessions}
|
||||
iconColor="#22d3ee"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={CheckCircle2}
|
||||
label="Resolution Rate"
|
||||
value={`${dashboard.resolution_rate}%`}
|
||||
iconColor="#34d399"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Clock}
|
||||
label="Avg MTTR"
|
||||
value={dashboard.mttr_minutes ? `${Math.round(dashboard.mttr_minutes)}m` : '—'}
|
||||
iconColor="#60a5fa"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Star}
|
||||
label="Avg Rating"
|
||||
value={dashboard.avg_rating ? `${dashboard.avg_rating.toFixed(1)}/5` : '—'}
|
||||
iconColor="#fbbf24"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Ticket}
|
||||
label="PSA Link Rate"
|
||||
value={dashboard.psa_metrics ? `${dashboard.psa_metrics.ticket_link_rate}%` : '—'}
|
||||
iconColor="#e879f9"
|
||||
/>
|
||||
{/* Tab bar */}
|
||||
<div className="flex gap-1 border-b border-border mb-6">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={cn(
|
||||
'px-4 py-2 text-sm transition-colors',
|
||||
activeTab === tab.id
|
||||
? 'border-b-2 border-primary text-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Second row — Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* MTTR Trend */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
MTTR Trend
|
||||
</h3>
|
||||
{dashboard.mttr_trend.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<AreaChart data={dashboard.mttr_trend}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: '#8891a0', fontSize: 10 }}
|
||||
tickFormatter={(d) => new Date(d).toLocaleDateString([], { month: 'short', day: 'numeric' })}
|
||||
{/* Tab content */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
{/* Top row — Key metrics */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
|
||||
<MetricCard
|
||||
icon={BarChart3}
|
||||
label="Total Sessions"
|
||||
value={dashboard.total_sessions}
|
||||
iconColor="#22d3ee"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={CheckCircle2}
|
||||
label="Resolution Rate"
|
||||
value={`${dashboard.resolution_rate}%`}
|
||||
iconColor="#34d399"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Clock}
|
||||
label="Avg MTTR"
|
||||
value={dashboard.mttr_minutes ? `${Math.round(dashboard.mttr_minutes)}m` : '—'}
|
||||
iconColor="#60a5fa"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Star}
|
||||
label="Avg Rating"
|
||||
value={dashboard.avg_rating ? `${dashboard.avg_rating.toFixed(1)}/5` : '—'}
|
||||
iconColor="#fbbf24"
|
||||
/>
|
||||
<MetricCard
|
||||
icon={Ticket}
|
||||
label="PSA Link Rate"
|
||||
value={dashboard.psa_metrics ? `${dashboard.psa_metrics.ticket_link_rate}%` : '—'}
|
||||
iconColor="#e879f9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Second row — Charts */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* MTTR Trend */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
MTTR Trend
|
||||
</h3>
|
||||
{dashboard.mttr_trend.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<AreaChart data={dashboard.mttr_trend}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: '#8891a0', fontSize: 10 }}
|
||||
tickFormatter={(d) => new Date(d).toLocaleDateString([], { month: 'short', day: 'numeric' })}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: '#8891a0', fontSize: 10 }}
|
||||
tickFormatter={(v) => `${Math.round(v)}m`}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
|
||||
labelStyle={{ color: '#f8fafc' }}
|
||||
formatter={(v: number | undefined) => [`${Math.round(v ?? 0)}m`, 'MTTR']}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="mttr_minutes"
|
||||
stroke="#22d3ee"
|
||||
fill="url(#mttrGradient)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="mttrGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#22d3ee" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
|
||||
No data for this period
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Domain Breakdown */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
Sessions by Domain
|
||||
</h3>
|
||||
{dashboard.sessions_by_domain.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<BarChart data={dashboard.sessions_by_domain} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
|
||||
<XAxis type="number" tick={{ fill: '#8891a0', fontSize: 10 }} />
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="domain"
|
||||
tick={{ fill: '#8891a0', fontSize: 10 }}
|
||||
width={100}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
|
||||
labelStyle={{ color: '#f8fafc' }}
|
||||
/>
|
||||
<Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
|
||||
<Bar dataKey="escalated" name="Escalated" fill="#fbbf24" radius={[0, 4, 4, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
|
||||
No domain data
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Third row — Confidence + Knowledge Coverage */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Confidence Breakdown */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
Confidence Tiers
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<ConfidenceTierRow
|
||||
label="Guided"
|
||||
count={conf.guided_sessions}
|
||||
rate={conf.guided_resolution_rate}
|
||||
color="#34d399"
|
||||
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: '#8891a0', fontSize: 10 }}
|
||||
tickFormatter={(v) => `${Math.round(v)}m`}
|
||||
<ConfidenceTierRow
|
||||
label="Exploring"
|
||||
count={conf.exploring_sessions}
|
||||
rate={conf.exploring_resolution_rate}
|
||||
color="#fbbf24"
|
||||
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
|
||||
labelStyle={{ color: '#f8fafc' }}
|
||||
formatter={(v: number | undefined) => [`${Math.round(v ?? 0)}m`, 'MTTR']}
|
||||
<ConfidenceTierRow
|
||||
label="Discovery"
|
||||
count={conf.discovery_sessions}
|
||||
rate={conf.discovery_resolution_rate}
|
||||
color="#f87171"
|
||||
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="mttr_minutes"
|
||||
stroke="#22d3ee"
|
||||
fill="url(#mttrGradient)"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="mttrGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#22d3ee" stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor="#22d3ee" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Knowledge Coverage */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
Knowledge Coverage
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">Total Flows</p>
|
||||
<p className="text-lg font-semibold text-foreground">{dashboard.knowledge_coverage.total_flows}</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">AI-Generated</p>
|
||||
<p className="text-lg font-semibold text-gradient-brand">{dashboard.knowledge_coverage.ai_generated_flows}</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">Pending Review</p>
|
||||
<p className="text-lg font-semibold text-amber-400">{dashboard.knowledge_coverage.total_proposals_pending}</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">Approved This Period</p>
|
||||
<p className="text-lg font-semibold text-emerald-400">{dashboard.knowledge_coverage.proposals_approved_this_period}</p>
|
||||
</div>
|
||||
</div>
|
||||
{dashboard.knowledge_coverage.total_proposals_pending > 0 && (
|
||||
<Link
|
||||
to="/review-queue"
|
||||
className="flex items-center gap-2 text-xs text-primary hover:underline"
|
||||
>
|
||||
<ArrowUpRight size={12} />
|
||||
Review {dashboard.knowledge_coverage.total_proposals_pending} pending proposals
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fourth row — Knowledge Gaps */}
|
||||
{gaps && gaps.gaps.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 px-1">
|
||||
<AlertTriangle size={14} className="text-amber-400" />
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground">
|
||||
Knowledge Gaps ({gaps.gaps.length})
|
||||
</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
{gaps.gaps.map((gap, i) => (
|
||||
<GapCard key={i} gap={gap} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'coverage' && (
|
||||
<div>
|
||||
{coverageLoading ? (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : coverageData ? (
|
||||
<CoverageHeatmap data={coverageData} />
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
|
||||
No data for this period
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<p className="text-sm text-muted-foreground">No coverage data available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Domain Breakdown */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
Sessions by Domain
|
||||
</h3>
|
||||
{dashboard.sessions_by_domain.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={220}>
|
||||
<BarChart data={dashboard.sessions_by_domain} layout="vertical">
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
|
||||
<XAxis type="number" tick={{ fill: '#8891a0', fontSize: 10 }} />
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="domain"
|
||||
tick={{ fill: '#8891a0', fontSize: 10 }}
|
||||
width={100}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{ background: '#18191f', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 8, fontSize: 12 }}
|
||||
labelStyle={{ color: '#f8fafc' }}
|
||||
/>
|
||||
<Bar dataKey="resolved" name="Resolved" fill="#34d399" radius={[0, 4, 4, 0]} />
|
||||
<Bar dataKey="escalated" name="Escalated" fill="#fbbf24" radius={[0, 4, 4, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
{activeTab === 'quality' && (
|
||||
<div>
|
||||
{qualityLoading ? (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
) : qualityData ? (
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">Flow Quality</h3>
|
||||
<p className="text-xs text-muted-foreground mb-4">Quality scores and performance metrics for your flows</p>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{qualityData.flows.length} flows analyzed
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-[220px] text-sm text-muted-foreground">
|
||||
No domain data
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<p className="text-sm text-muted-foreground">No flow quality data available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Third row — Confidence + Knowledge Coverage */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
{/* Confidence Breakdown */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
Confidence Tiers
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<ConfidenceTierRow
|
||||
label="Guided"
|
||||
count={conf.guided_sessions}
|
||||
rate={conf.guided_resolution_rate}
|
||||
color="#34d399"
|
||||
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
|
||||
/>
|
||||
<ConfidenceTierRow
|
||||
label="Exploring"
|
||||
count={conf.exploring_sessions}
|
||||
rate={conf.exploring_resolution_rate}
|
||||
color="#fbbf24"
|
||||
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
|
||||
/>
|
||||
<ConfidenceTierRow
|
||||
label="Discovery"
|
||||
count={conf.discovery_sessions}
|
||||
rate={conf.discovery_resolution_rate}
|
||||
color="#f87171"
|
||||
total={conf.guided_sessions + conf.exploring_sessions + conf.discovery_sessions}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Knowledge Coverage */}
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">
|
||||
Knowledge Coverage
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">Total Flows</p>
|
||||
<p className="text-lg font-semibold text-foreground">{dashboard.knowledge_coverage.total_flows}</p>
|
||||
{activeTab === 'psa' && (
|
||||
<div>
|
||||
{psaLoading ? (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">AI-Generated</p>
|
||||
<p className="text-lg font-semibold text-gradient-brand">{dashboard.knowledge_coverage.ai_generated_flows}</p>
|
||||
) : psaData ? (
|
||||
<div className="glass-card-static p-3 sm:p-5">
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground mb-4">PSA Metrics</h3>
|
||||
<p className="text-xs text-muted-foreground mb-4">Time entry and ticket integration metrics</p>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{psaData.total_time_entries} time entries logged ({psaData.total_hours_logged.toFixed(1)} hours)
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">Pending Review</p>
|
||||
<p className="text-lg font-semibold text-amber-400">{dashboard.knowledge_coverage.total_proposals_pending}</p>
|
||||
) : (
|
||||
<div className="flex items-center justify-center min-h-[200px]">
|
||||
<p className="text-sm text-muted-foreground">No PSA data available</p>
|
||||
</div>
|
||||
<div className="rounded-lg bg-card/50 p-3">
|
||||
<p className="text-xs text-muted-foreground">Approved This Period</p>
|
||||
<p className="text-lg font-semibold text-emerald-400">{dashboard.knowledge_coverage.proposals_approved_this_period}</p>
|
||||
</div>
|
||||
</div>
|
||||
{dashboard.knowledge_coverage.total_proposals_pending > 0 && (
|
||||
<Link
|
||||
to="/review-queue"
|
||||
className="flex items-center gap-2 text-xs text-primary hover:underline"
|
||||
>
|
||||
<ArrowUpRight size={12} />
|
||||
Review {dashboard.knowledge_coverage.total_proposals_pending} pending proposals
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Fourth row — Knowledge Gaps */}
|
||||
{gaps && gaps.gaps.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2 px-1">
|
||||
<AlertTriangle size={14} className="text-amber-400" />
|
||||
<h3 className="font-heading text-sm font-semibold text-foreground">
|
||||
Knowledge Gaps ({gaps.gaps.length})
|
||||
</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
{gaps.gaps.map((gap, i) => (
|
||||
<GapCard key={i} gap={gap} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user