164 lines
7.5 KiB
TypeScript
164 lines
7.5 KiB
TypeScript
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 getCellTitle(value: number, label: string, thresholds: { green: number; amber: number }, inverse?: boolean): string {
|
|
const pct = (value * 100).toFixed(1)
|
|
if (inverse) {
|
|
if (value <= thresholds.green) return `${label}: ${pct}% (Good — below ${(thresholds.green * 100).toFixed(0)}%)`
|
|
if (value <= thresholds.amber) return `${label}: ${pct}% (Needs Improvement — below ${(thresholds.amber * 100).toFixed(0)}%)`
|
|
return `${label}: ${pct}% (Critical — above ${(thresholds.amber * 100).toFixed(0)}%)`
|
|
}
|
|
if (value >= thresholds.green) return `${label}: ${pct}% (Good — above ${(thresholds.green * 100).toFixed(0)}%)`
|
|
if (value >= thresholds.amber) return `${label}: ${pct}% (Needs Improvement — above ${(thresholds.amber * 100).toFixed(0)}%)`
|
|
return `${label}: ${pct}% (Critical — below ${(thresholds.amber * 100).toFixed(0)}%)`
|
|
}
|
|
|
|
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))}
|
|
title={`${row.flow_count} flow${row.flow_count !== 1 ? 's' : ''} — ${row.flow_count >= 5 ? 'Good' : row.flow_count >= 1 ? 'Needs Improvement' : 'Critical'}`}
|
|
>
|
|
{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 }))}
|
|
title={getCellTitle(row.resolution_rate, 'Resolution', { 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))}
|
|
title={getCellTitle(row.escalation_rate, 'Escalation', { 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 }))}
|
|
title={getCellTitle(row.guided_rate, 'Guided', { 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 className="flex flex-wrap gap-4 mt-3 text-[0.625rem] font-label text-muted-foreground">
|
|
<span><span className="inline-block w-2 h-2 rounded-full bg-emerald-400 mr-1" />Good</span>
|
|
<span><span className="inline-block w-2 h-2 rounded-full bg-amber-400 mr-1" />Needs Improvement</span>
|
|
<span><span className="inline-block w-2 h-2 rounded-full bg-rose-500 mr-1" />Critical</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|