chihlasm
2ed8a2af15
- Fix AISession.ticket_id → psa_ticket_id in list_sessions filter query - Add Gallery nav item (LayoutGrid icon) to AdminSidebar navItems array - Remove ForeignKey from FileUpload.session_id (Python model) + migration b8d2f4a6c091 to drop DB constraint, allowing column to reference either session type - Add 400ms debounce on AI session search input in SessionHistoryPage (aiSearchInput state + useRef timeout pattern) - Show friendly 503 error message in RichTextInput upload error handler (both initial upload and retry paths) - Add overflow-x-auto to FlowPilotAnalyticsPage tab bar container Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
561 lines
21 KiB
TypeScript
561 lines
21 KiB
TypeScript
import { useState, useEffect, useRef } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import {
|
|
BarChart3, Clock, Star, CheckCircle2, ArrowUpRight,
|
|
AlertTriangle, Lightbulb, Loader2, Ticket, RotateCcw,
|
|
} from 'lucide-react'
|
|
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 CoverageHeatmap from '@/components/analytics/CoverageHeatmap'
|
|
import FlowQualityTable from '@/components/analytics/FlowQualityTable'
|
|
import PsaMetricsPanel from '@/components/analytics/PsaMetricsPanel'
|
|
import type {
|
|
FlowPilotDashboard, KnowledgeGapReport, KnowledgeGap,
|
|
CoverageResponse, FlowQualityResponse, EnhancedPsaMetrics,
|
|
} from '@/types/flowpilot-analytics'
|
|
|
|
const PERIOD_OPTIONS = [
|
|
{ value: '7d', label: 'Last 7 days' },
|
|
{ value: '30d', label: 'Last 30 days' },
|
|
{ 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',
|
|
low: 'bg-blue-400/10 text-blue-400 border-blue-400/20',
|
|
}
|
|
|
|
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)
|
|
|
|
// Error states per tab
|
|
const [coverageError, setCoverageError] = useState(false)
|
|
const [qualityError, setQualityError] = useState(false)
|
|
const [psaError, setPsaError] = useState(false)
|
|
const [retryKey, setRetryKey] = useState(0)
|
|
|
|
// 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([
|
|
flowpilotAnalyticsApi.getDashboard(period),
|
|
flowpilotAnalyticsApi.getKnowledgeGaps(period),
|
|
])
|
|
.then(([d, g]) => {
|
|
setDashboard(d)
|
|
setGaps(g)
|
|
})
|
|
.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)
|
|
setCoverageLoading(true)
|
|
setQualityLoading(true)
|
|
setPsaLoading(true)
|
|
setCoverageError(false)
|
|
setQualityError(false)
|
|
setPsaError(false)
|
|
}, [period])
|
|
|
|
// Lazy-load tab data on tab switch or period change
|
|
useEffect(() => {
|
|
if (activeTab === 'coverage' && coveragePeriodRef.current !== period) {
|
|
setCoverageLoading(true)
|
|
setCoverageError(false)
|
|
flowpilotAnalyticsApi.getCoverage(period)
|
|
.then((data) => {
|
|
setCoverageData(data)
|
|
coveragePeriodRef.current = period
|
|
})
|
|
.catch(() => {
|
|
toast.error('Failed to load coverage data')
|
|
setCoverageError(true)
|
|
})
|
|
.finally(() => setCoverageLoading(false))
|
|
}
|
|
if (activeTab === 'quality' && qualityPeriodRef.current !== period) {
|
|
setQualityLoading(true)
|
|
setQualityError(false)
|
|
flowpilotAnalyticsApi.getFlowQuality(period)
|
|
.then((data) => {
|
|
setQualityData(data)
|
|
qualityPeriodRef.current = period
|
|
})
|
|
.catch(() => {
|
|
toast.error('Failed to load flow quality data')
|
|
setQualityError(true)
|
|
})
|
|
.finally(() => setQualityLoading(false))
|
|
}
|
|
if (activeTab === 'psa' && psaPeriodRef.current !== period) {
|
|
setPsaLoading(true)
|
|
setPsaError(false)
|
|
flowpilotAnalyticsApi.getPsaMetrics(period)
|
|
.then((data) => {
|
|
setPsaData(data)
|
|
psaPeriodRef.current = period
|
|
})
|
|
.catch(() => {
|
|
toast.error('Failed to load PSA metrics')
|
|
setPsaError(true)
|
|
})
|
|
.finally(() => setPsaLoading(false))
|
|
}
|
|
}, [activeTab, period, retryKey])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<Loader2 size={24} className="animate-spin text-muted-foreground" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!dashboard) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[60vh]">
|
|
<p className="text-sm text-muted-foreground">Failed to load analytics</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const conf = dashboard.confidence_breakdown
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span title="FlowPilot Analytics">
|
|
<BarChart3 size={24} className="text-foreground" />
|
|
</span>
|
|
<h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">FlowPilot Analytics</h1>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
to="/analytics"
|
|
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
Team Analytics
|
|
</Link>
|
|
<select
|
|
value={period}
|
|
onChange={(e) => setPeriod(e.target.value)}
|
|
className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-primary/20 [&>option]:bg-[#1a1c21] [&>option]:text-foreground"
|
|
>
|
|
{PERIOD_OPTIONS.map((opt) => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tab bar */}
|
|
<div className="flex gap-1 border-b border-border overflow-x-auto">
|
|
{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>
|
|
|
|
{/* 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}
|
|
/>
|
|
<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>
|
|
</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>
|
|
) : gaps && (
|
|
<div className="glass-card-static p-4 flex items-center gap-3">
|
|
<CheckCircle2 size={20} className="text-emerald-400 shrink-0" />
|
|
<div>
|
|
<p className="text-sm text-foreground">No knowledge gaps detected</p>
|
|
<p className="text-xs text-muted-foreground">Your flow coverage looks healthy for this period.</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'coverage' && (
|
|
<div>
|
|
{coverageError ? (
|
|
<ErrorRetry label="coverage data" onRetry={() => { setCoverageError(false); coveragePeriodRef.current = null; setRetryKey((k) => k + 1) }} />
|
|
) : 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} />
|
|
) : null}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'quality' && (
|
|
<div>
|
|
{qualityError ? (
|
|
<ErrorRetry label="flow quality data" onRetry={() => { setQualityError(false); qualityPeriodRef.current = null; setRetryKey((k) => k + 1) }} />
|
|
) : qualityLoading ? (
|
|
<div className="flex items-center justify-center min-h-[200px]">
|
|
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : qualityData ? (
|
|
<FlowQualityTable data={qualityData} />
|
|
) : null}
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'psa' && (
|
|
<div>
|
|
{psaError ? (
|
|
<ErrorRetry label="PSA metrics" onRetry={() => { setPsaError(false); psaPeriodRef.current = null; setRetryKey((k) => k + 1) }} />
|
|
) : psaLoading ? (
|
|
<div className="flex items-center justify-center min-h-[200px]">
|
|
<Loader2 size={20} className="animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : psaData ? (
|
|
<PsaMetricsPanel data={psaData} />
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Sub-components ──
|
|
|
|
function MetricCard({
|
|
icon: Icon,
|
|
label,
|
|
value,
|
|
iconColor,
|
|
}: {
|
|
icon: typeof BarChart3
|
|
label: string
|
|
value: string | number
|
|
iconColor: string
|
|
}) {
|
|
return (
|
|
<div className="glass-card-static p-3 sm:p-4">
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
|
|
style={{ background: `${iconColor}15` }}
|
|
>
|
|
<Icon size={16} style={{ color: iconColor }} />
|
|
</span>
|
|
<div>
|
|
<p className="font-label text-[0.5625rem] uppercase tracking-wider text-[#5a6170]">{label}</p>
|
|
<p className="text-lg font-semibold text-foreground">{value}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ConfidenceTierRow({
|
|
label,
|
|
count,
|
|
rate,
|
|
color,
|
|
total,
|
|
}: {
|
|
label: string
|
|
count: number
|
|
rate: number
|
|
color: string
|
|
total: number
|
|
}) {
|
|
const pct = total > 0 ? (count / total) * 100 : 0
|
|
return (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="text-foreground font-medium">{label}</span>
|
|
<span className="text-muted-foreground">
|
|
{count} sessions · {rate.toFixed(1)}% resolved
|
|
</span>
|
|
</div>
|
|
<div className="h-2 rounded-full bg-card/80 overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all"
|
|
style={{ width: `${pct}%`, background: color }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ErrorRetry({ label, onRetry }: { label: string; onRetry: () => void }) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<AlertTriangle size={24} className="mb-2 text-amber-400" />
|
|
<p className="text-sm mb-3">Failed to load {label}</p>
|
|
<button
|
|
onClick={onRetry}
|
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-[10px] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
|
|
>
|
|
<RotateCcw size={12} />
|
|
Retry
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function GapCard({ gap }: { gap: KnowledgeGap }) {
|
|
const severityStyle = SEVERITY_STYLES[gap.severity as keyof typeof SEVERITY_STYLES] ?? SEVERITY_STYLES.low
|
|
return (
|
|
<div className="glass-card-static p-4 space-y-2">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-sm font-semibold text-foreground">{gap.title}</p>
|
|
<span className={`shrink-0 rounded-md border px-1.5 py-0.5 font-label text-[0.5625rem] uppercase tracking-wider ${severityStyle}`}>
|
|
{gap.severity}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">{gap.description}</p>
|
|
<div className="flex items-start gap-1.5 pt-1">
|
|
<Lightbulb size={12} className="text-primary shrink-0 mt-0.5" />
|
|
<p className="text-xs text-primary">{gap.suggested_action}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|