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

66
frontend/src/components/analytics/FlowQualityTable.tsx
View File

@@ -1,7 +1,8 @@
import { useState, useMemo } from 'react'
import { Link } from 'react-router-dom'
import { ArrowUpDown } from 'lucide-react'
import { ArrowUpDown, ArrowUp, ArrowDown, Info } from 'lucide-react'
import { cn } from '@/lib/utils'
import { getTreeEditorPath } from '@/lib/routing'
import type { FlowQualityResponse, FlowQualityRow } from '@/types/flowpilot-analytics'
interface FlowQualityTableProps {
@@ -113,21 +114,29 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
)
}
const columns: { key: SortColumn; label: string }[] = [
const columns: { key: SortColumn; label: string; title?: string }[] = [
{ key: 'name', label: 'Flow Name' },
{ key: 'usage_count', label: 'Usage' },
{ key: 'success_rate', label: 'Success Rate' },
{ key: 'last_matched_at', label: 'Last Used' },
{ key: 'avg_confidence', label: 'Avg Confidence' },
{ key: 'quality_score', label: 'Quality Score' },
{ key: 'quality_score', label: 'Quality Score', title: 'Combines success rate (50%), AI confidence (30%), and recent usage (20%)' },
]
return (
<div className="glass-card-static p-3 sm:p-5">
<div className="mb-4">
<h3 className="font-heading text-sm font-semibold text-foreground">
Flow Quality Scores
</h3>
<div className="flex items-center gap-2">
<h3 className="font-heading text-sm font-semibold text-foreground">
Flow Quality Scores
</h3>
<span className="group relative">
<Info size={14} className="text-muted-foreground cursor-help" />
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-card border border-border text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
Quality score combines success rate (50%), AI confidence level (30%), and recent usage (20%). Higher is better.
</div>
</span>
</div>
<p className="text-xs text-muted-foreground mt-1">
Performance and usage metrics for your troubleshooting flows
</p>
@@ -137,24 +146,31 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border">
{columns.map((col) => (
<th
key={col.key}
className="text-left py-2 px-2 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
onClick={() => handleSort(col.key)}
>
<span className="flex items-center gap-1">
{col.label}
<ArrowUpDown
size={10}
className={cn(
'transition-opacity',
sortCol === col.key ? 'opacity-100' : 'opacity-30',
)}
/>
</span>
</th>
))}
{columns.map((col) => {
const isActive = sortCol === col.key
const SortIcon = isActive
? sortDir === 'asc' ? ArrowUp : ArrowDown
: ArrowUpDown
return (
<th
key={col.key}
className="text-left py-2 px-2 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
onClick={() => handleSort(col.key)}
title={col.title}
>
<span className="flex items-center gap-1">
{col.label}
<SortIcon
size={10}
className={cn(
'transition-opacity',
isActive ? 'opacity-100' : 'opacity-30',
)}
/>
</span>
</th>
)
})}
</tr>
</thead>
<tbody>
@@ -194,7 +210,7 @@ function FlowRow({
<td className="py-2.5 px-2">
<div className="flex items-center gap-2">
<Link
to={`/trees/${flow.flow_id}/edit`}
to={getTreeEditorPath(flow.flow_id, flow.tree_type)}
className="text-foreground hover:text-primary transition-colors font-medium truncate max-w-[200px]"
>
{flow.name}