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

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/components/analytics/FlowAnalyticsPanel.tsx
View File

@@ -54,14 +54,14 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
if (loading) {
return (
<div className="flex items-center justify-center py-12">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
</div>
)
}
if (error || !data) {
return (
<div className="text-center py-12 text-muted-foreground">
<div className="text-center py-12 text-[#848b9b]">
No analytics data available for this flow.
</div>
)
@@ -73,11 +73,11 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
<div className="space-y-6">
{/* Period selector */}
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-foreground">Flow Analytics</h3>
<h3 className="text-lg font-semibold text-[#e2e5eb]">Flow Analytics</h3>
<select
value={period}
onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
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-ring"
className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:outline-hidden focus:ring-1 focus:ring-ring"
>
{PERIOD_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>
@@ -107,8 +107,8 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
{/* Area chart - Sessions over time */}
{time_series.length > 0 && (
<div className="bg-card border border-border rounded-xl p-4">
<p className="text-sm font-semibold text-foreground mb-3">Sessions Over Time</p>
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
<p className="text-sm font-semibold text-[#e2e5eb] mb-3">Sessions Over Time</p>
<ResponsiveContainer width="100%" height={180}>
<AreaChart data={time_series}>
<CartesianGrid
@@ -192,7 +192,7 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
className="h-2 w-2 rounded-full"
style={{ backgroundColor: color }}
/>
<span className="text-xs text-muted-foreground capitalize">
<span className="text-xs text-[#848b9b] capitalize">
{key}
</span>
</div>
@@ -203,16 +203,16 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
{/* Step Feedback Table with Dropoff Metrics */}
{step_feedback.length > 0 && (
<div className="bg-card border border-border rounded-xl p-4">
<p className="text-sm font-semibold text-foreground mb-3">Step Performance</p>
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
<p className="text-sm font-semibold text-[#e2e5eb] mb-3">Step Performance</p>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border">
<th className="text-left py-2 pr-4 text-foreground font-medium">Step</th>
<th className="text-right py-2 pr-4 text-foreground font-medium">Visits</th>
<th className="text-right py-2 pr-4 text-foreground font-medium">Dropoffs</th>
<th className="text-right py-2 text-foreground font-medium">Dropoff Rate</th>
<tr className="border-b border-[#1e2130]">
<th className="text-left py-2 pr-4 text-[#e2e5eb] font-medium">Step</th>
<th className="text-right py-2 pr-4 text-[#e2e5eb] font-medium">Visits</th>
<th className="text-right py-2 pr-4 text-[#e2e5eb] font-medium">Dropoffs</th>
<th className="text-right py-2 text-[#e2e5eb] font-medium">Dropoff Rate</th>
</tr>
</thead>
<tbody>
@@ -220,23 +220,23 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
<tr
key={step.node_id}
className={cn(
'border-b border-border last:border-0',
'border-b border-[#1e2130] last:border-0',
step.dropoff_rate > 0.2 && 'bg-red-400/5'
)}
>
<td className="py-2 pr-4 text-muted-foreground truncate max-w-[200px]">
<td className="py-2 pr-4 text-[#848b9b] truncate max-w-[200px]">
{step.node_title}
</td>
<td className="py-2 pr-4 text-right text-muted-foreground">
<td className="py-2 pr-4 text-right text-[#848b9b]">
{step.visit_count}
</td>
<td className="py-2 pr-4 text-right text-muted-foreground">
<td className="py-2 pr-4 text-right text-[#848b9b]">
{step.dropoff_count}
</td>
<td
className={cn(
'py-2 text-right font-medium',
step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-muted-foreground'
step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-[#848b9b]'
)}
>
{(step.dropoff_rate * 100).toFixed(1)}%
@@ -251,13 +251,13 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
{/* Recent Comments (Anonymous) */}
{recent_comments.length > 0 && (
<div className="bg-card border border-border rounded-xl p-4">
<p className="text-sm font-semibold text-foreground mb-3">Recent Feedback</p>
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
<p className="text-sm font-semibold text-[#e2e5eb] mb-3">Recent Feedback</p>
<div className="space-y-3">
{recent_comments.map((item, i) => (
<div
key={i}
className="flex items-start gap-3 border-b border-border/50 pb-3 last:border-0 last:pb-0"
className="flex items-start gap-3 border-b border-[#1e2130]/50 pb-3 last:border-0 last:pb-0"
>
<div className="flex items-center gap-0.5 shrink-0 pt-0.5">
{[1, 2, 3, 4, 5].map((v) => (
@@ -267,16 +267,16 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
className={cn(
v <= item.rating
? 'fill-yellow-400 text-yellow-400'
: 'fill-none text-muted-foreground'
: 'fill-none text-[#848b9b]'
)}
/>
))}
</div>
<div className="min-w-0">
{item.comment && (
<p className="text-sm text-foreground">{item.comment}</p>
<p className="text-sm text-[#e2e5eb]">{item.comment}</p>
)}
<p className="text-xs text-muted-foreground mt-0.5">
<p className="text-xs text-[#848b9b] mt-0.5">
{new Date(item.created_at).toLocaleDateString()}
</p>
</div>
@@ -299,11 +299,11 @@ function StatCard({
subtitle?: string
}) {
return (
<div className="bg-card border border-border rounded-xl p-4">
<p className="text-xs text-muted-foreground">{label}</p>
<p className="text-xl font-bold text-foreground mt-1">{value}</p>
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
<p className="text-xs text-[#848b9b]">{label}</p>
<p className="text-xl font-bold text-[#e2e5eb] mt-1">{value}</p>
{subtitle && (
<p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
<p className="text-xs text-[#848b9b] mt-0.5">{subtitle}</p>
)}
</div>
)