chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(analytics): add tabbed layout with coverage heatmap

Browse Source 
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:
chihlasm
2026-03-20 00:16:09 +00:00
parent ae51e6e83c
commit 647ad0e2d5
4 changed files with 543 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/src/components/analytics/CoverageHeatmap.tsx Normal file
View File

@@ -0,0 +1,133 @@
import { Link } from 'react-router-dom'
import { Plus, MapPin } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { CoverageResponse } from '@/types/flowpilot-analytics'
interface CoverageHeatmapProps {
data: CoverageResponse
}
function getCellStyle(value: number, thresholds: { green: number; amber: number }, inverse?: boolean) {
if (inverse) {
if (value <= thresholds.green) return 'bg-emerald-400/10 text-emerald-400'
if (value <= thresholds.amber) return 'bg-amber-400/10 text-amber-400'
return 'bg-rose-500/10 text-rose-500'
}
if (value >= thresholds.green) return 'bg-emerald-400/10 text-emerald-400'
if (value >= thresholds.amber) return 'bg-amber-400/10 text-amber-400'
return 'bg-rose-500/10 text-rose-500'
}
function getFlowCountStyle(count: number) {
if (count >= 5) return 'bg-emerald-400/10 text-emerald-400'
if (count >= 1) return 'bg-amber-400/10 text-amber-400'
return 'bg-rose-500/10 text-rose-500'
}
export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
if (data.domains.length === 0) {
return (
<div className="glass-card-static p-6">
<div className="flex items-center gap-2 mb-2">
<MapPin size={16} className="text-foreground" />
<h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
</div>
<p className="text-sm text-muted-foreground">
No session data for this period. Start using FlowPilot to see coverage metrics.
</p>
</div>
)
}
return (
<div className="glass-card-static p-3 sm:p-5">
<div className="mb-4">
<div className="flex items-center gap-2 mb-1">
<MapPin size={16} className="text-foreground" />
<h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
</div>
<p className="text-xs text-muted-foreground">
Resolution coverage and knowledge gaps by problem domain
</p>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-border">
<th className="px-3 py-2 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Domain
</th>
<th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Flows
</th>
<th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Sessions
</th>
<th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Resolution %
</th>
<th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Escalation %
</th>
<th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Guided %
</th>
</tr>
</thead>
<tbody>
{data.domains.map((row) => (
<tr key={row.domain} className="border-b border-border">
<td className="px-3 py-2 text-sm text-foreground font-medium">
{row.domain}
</td>
<td className="px-3 py-2 text-sm text-right">
{row.flow_count === 0 ? (
<Link
to="/trees/new"
className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
>
<Plus size={10} />
Create Flow
</Link>
) : (
<span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getFlowCountStyle(row.flow_count))}>
{row.flow_count}
</span>
)}
</td>
<td className="px-3 py-2 text-sm text-right text-muted-foreground">
{row.session_count}
</td>
<td className="px-3 py-2 text-sm text-right">
<span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.resolution_rate, { green: 0.75, amber: 0.5 }))}>
{(row.resolution_rate * 100).toFixed(1)}%
</span>
</td>
<td className="px-3 py-2 text-sm text-right">
<span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.escalation_rate, { green: 0.10, amber: 0.25 }, true))}>
{(row.escalation_rate * 100).toFixed(1)}%
</span>
</td>
<td className="px-3 py-2 text-sm text-right">
<span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getCellStyle(row.guided_rate, { green: 0.60, amber: 0.30 }))}>
{(row.guided_rate * 100).toFixed(1)}%
</span>
</td>
</tr>
))}
</tbody>
{data.unmapped_session_count > 0 && (
<tfoot>
<tr>
<td colSpan={6} className="px-3 py-2 text-xs text-muted-foreground">
{data.unmapped_session_count} sessions had no domain classification
</td>
</tr>
</tfoot>
)}
</table>
</div>
</div>
)
}