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

fix(analytics): fix 8 frontend UX issues — routing, accessibility, error states, sort indicators

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-20 00:39:44 +00:00
parent 94fbb38f84
commit 9a1dba0e5f
4 changed files with 139 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/analytics/CoverageHeatmap.tsx
View File

@@ -18,6 +18,18 @@ function getCellStyle(value: number, thresholds: { green: number; amber: number
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'
@@ -91,7 +103,10 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
Create Flow
</Link>
) : (
<span className={cn('inline-block rounded px-1.5 py-0.5 text-xs font-medium', getFlowCountStyle(row.flow_count))}>
<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>
)}
@@ -100,17 +115,26 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
{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 }))}>
<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))}>
<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 }))}>
<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>
@@ -128,6 +152,12 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
)}
</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>
)
}