feat: analytics dashboards & two-tier feedback system (#78)
* docs: add analytics & user feedback design document Covers team analytics, personal analytics, flow analytics, step-level thumbs up/down feedback, and flow CSAT ratings. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add analytics & feedback implementation plan 12-task TDD plan covering session ratings, step feedback, team/personal/flow analytics endpoints, and frontend pages. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add session_ratings table and analytics indexes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add SessionRating model and analytics schemas Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add session CSAT rating endpoint with tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add step thumbs feedback and /ratings alias routes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add team, personal, and flow analytics endpoints Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add recharts, analytics types, and API client Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add inline step thumbs up/down feedback during sessions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add CSAT rating modal after session completion Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Team Analytics page with charts and leaderboards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add Flow Analytics panel with step dropoff and CSAT data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * feat: add My Analytics page with personal stats and charts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit was merged in pull request #78.
This commit is contained in:
chihlasm
348
frontend/src/pages/MyAnalyticsPage.tsx
Normal file
348
frontend/src/pages/MyAnalyticsPage.tsx
Normal file
@@ -0,0 +1,348 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { BarChart3, Loader2, Target, Clock, TrendingUp, CheckCircle } from 'lucide-react'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import type { PersonalAnalyticsResponse, AnalyticsPeriod } from '@/types'
|
||||
|
||||
const OUTCOME_COLORS: Record<string, string> = {
|
||||
resolved: '#34d399',
|
||||
escalated: '#f87171',
|
||||
workaround: '#fbbf24',
|
||||
unresolved: '#94a3b8',
|
||||
}
|
||||
|
||||
const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
{ value: '30d', label: 'Last 30 days' },
|
||||
{ value: '90d', label: 'Last 90 days' },
|
||||
]
|
||||
|
||||
export default function MyAnalyticsPage() {
|
||||
const { isAccountOwner, isSuperAdmin } = usePermissions()
|
||||
const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
|
||||
const [data, setData] = useState<PersonalAnalyticsResponse | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
analyticsApi
|
||||
.getPersonalAnalytics(period)
|
||||
.then(setData)
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [period])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<Loader2 size={32} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-muted-foreground">Failed to load analytics data.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { summary, time_series, top_flows } = data
|
||||
const outcomeBreakdown = summary.outcome_breakdown
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span title="My Analytics">
|
||||
<BarChart3 size={24} className="text-foreground" />
|
||||
</span>
|
||||
<h1 className="text-2xl font-bold text-foreground">My Analytics</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{(isAccountOwner || isSuperAdmin) && (
|
||||
<Link
|
||||
to="/analytics"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Team Analytics
|
||||
</Link>
|
||||
)}
|
||||
<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-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
{PERIOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="My Sessions"
|
||||
value={summary.total_sessions.toLocaleString()}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Target}
|
||||
label="My Completion Rate"
|
||||
value={`${(summary.completion_rate * 100).toFixed(1)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label="Median Duration"
|
||||
value={`${summary.median_duration_minutes} min`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={CheckCircle}
|
||||
label="Outcomes Resolved"
|
||||
value={outcomeBreakdown.resolved.toLocaleString()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Area Chart — Sessions over Time */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
My Sessions Over Time
|
||||
</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
tickFormatter={(value: string) => {
|
||||
const d = new Date(value)
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="resolved"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.resolved}
|
||||
fill={OUTCOME_COLORS.resolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="escalated"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.escalated}
|
||||
fill={OUTCOME_COLORS.escalated}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="workaround"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.workaround}
|
||||
fill={OUTCOME_COLORS.workaround}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="unresolved"
|
||||
stackId="1"
|
||||
stroke={OUTCOME_COLORS.unresolved}
|
||||
fill={OUTCOME_COLORS.unresolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center gap-6 mt-3 justify-center">
|
||||
{Object.entries(OUTCOME_COLORS).map(([key, color]) => (
|
||||
<div key={key} className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-Column: Top Flows & Outcome Distribution */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* My Top Flows */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
My Top Flows
|
||||
</h2>
|
||||
{top_flows.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No flow data for this period.</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 text-foreground font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{top_flows.map((flow) => (
|
||||
<tr
|
||||
key={flow.tree_id}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
{flow.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{(flow.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Outcome Distribution */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Outcome Distribution
|
||||
</h2>
|
||||
{summary.total_sessions === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No session data for this period.</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{(
|
||||
Object.entries(outcomeBreakdown) as [string, number][]
|
||||
).map(([outcome, count]) => {
|
||||
const total = Object.values(outcomeBreakdown).reduce(
|
||||
(sum, v) => sum + v,
|
||||
0
|
||||
)
|
||||
const pct = total > 0 ? (count / total) * 100 : 0
|
||||
|
||||
return (
|
||||
<div key={outcome}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full flex-shrink-0"
|
||||
style={{
|
||||
backgroundColor:
|
||||
OUTCOME_COLORS[outcome] ?? '#94a3b8',
|
||||
}}
|
||||
/>
|
||||
<span className="text-sm text-muted-foreground capitalize">
|
||||
{outcome}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm text-foreground font-medium">
|
||||
{count} ({pct.toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-2 rounded-full bg-border overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${pct}%`,
|
||||
backgroundColor:
|
||||
OUTCOME_COLORS[outcome] ?? '#94a3b8',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>
|
||||
label: string
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon size={16} className="text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">{label}</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-foreground">{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -11,6 +11,8 @@ import { ProgressBar } from '@/components/procedural/ProgressBar'
|
||||
import { CompletionSummary } from '@/components/procedural/CompletionSummary'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { StepFeedback } from '@/components/session/StepFeedback'
|
||||
import { CSATModal, hasBeenRated } from '@/components/session/CSATModal'
|
||||
|
||||
interface StepState {
|
||||
notes: string
|
||||
@@ -35,6 +37,7 @@ export function ProceduralNavigationPage() {
|
||||
const [completedAt, setCompletedAt] = useState<string>('')
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
const [paramsOpen, setParamsOpen] = useState(false)
|
||||
const [showCsatModal, setShowCsatModal] = useState(false)
|
||||
const [elapsedMinutes, setElapsedMinutes] = useState(0)
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||
|
||||
@@ -244,6 +247,9 @@ export function ProceduralNavigationPage() {
|
||||
})
|
||||
setCompletedAt(completedTime)
|
||||
setIsComplete(true)
|
||||
if (!hasBeenRated(session.id)) {
|
||||
setShowCsatModal(true)
|
||||
}
|
||||
} else {
|
||||
setCurrentStepIndex(currentStepIndex + 1)
|
||||
}
|
||||
@@ -274,6 +280,10 @@ export function ProceduralNavigationPage() {
|
||||
})
|
||||
}
|
||||
|
||||
const handleCsatClose = () => {
|
||||
setShowCsatModal(false)
|
||||
}
|
||||
|
||||
// Loading state
|
||||
if (isLoading) {
|
||||
return (
|
||||
@@ -406,9 +416,23 @@ export function ProceduralNavigationPage() {
|
||||
isLast={currentStepIndex === procedureSteps.length - 1}
|
||||
/>
|
||||
)}
|
||||
{session && currentStep && (
|
||||
<div className="mt-3 flex justify-end">
|
||||
<StepFeedback stepId={currentStep.id} sessionId={session.id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CSAT Modal */}
|
||||
{session && (
|
||||
<CSATModal
|
||||
isOpen={showCsatModal}
|
||||
onClose={handleCsatClose}
|
||||
sessionId={session.id}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Parameters popover */}
|
||||
{paramsOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
|
||||
366
frontend/src/pages/TeamAnalyticsPage.tsx
Normal file
366
frontend/src/pages/TeamAnalyticsPage.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { BarChart3, Loader2, Users, Target, Clock, TrendingUp, ShieldX } from 'lucide-react'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts'
|
||||
import { analyticsApi } from '@/api'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import type { TeamAnalyticsResponse, AnalyticsPeriod } from '@/types'
|
||||
|
||||
const CHART_COLORS = {
|
||||
resolved: '#34d399',
|
||||
escalated: '#f87171',
|
||||
workaround: '#fbbf24',
|
||||
unresolved: '#94a3b8',
|
||||
}
|
||||
|
||||
const PERIOD_OPTIONS: { value: AnalyticsPeriod; label: string }[] = [
|
||||
{ value: '7d', label: 'Last 7 days' },
|
||||
{ value: '30d', label: 'Last 30 days' },
|
||||
{ value: '90d', label: 'Last 90 days' },
|
||||
]
|
||||
|
||||
export default function TeamAnalyticsPage() {
|
||||
const { isAccountOwner, isSuperAdmin } = usePermissions()
|
||||
const [period, setPeriod] = useState<AnalyticsPeriod>('30d')
|
||||
const [data, setData] = useState<TeamAnalyticsResponse | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAccountOwner && !isSuperAdmin) return
|
||||
|
||||
setLoading(true)
|
||||
analyticsApi
|
||||
.getTeamAnalytics(period)
|
||||
.then(setData)
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [period, isAccountOwner, isSuperAdmin])
|
||||
|
||||
// Permission guard
|
||||
if (!isAccountOwner && !isSuperAdmin) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center min-h-[60vh] gap-4 p-6">
|
||||
<ShieldX size={48} className="text-muted-foreground" />
|
||||
<h2 className="text-xl font-semibold text-foreground">Access Denied</h2>
|
||||
<p className="text-muted-foreground text-center max-w-md">
|
||||
Team Analytics is only available to account owners and administrators.
|
||||
You can view your personal stats instead.
|
||||
</p>
|
||||
<Link
|
||||
to="/analytics/me"
|
||||
className="mt-2 inline-flex items-center gap-2 rounded-lg bg-white text-black px-4 py-2 text-sm font-medium hover:bg-white/90 transition-colors"
|
||||
>
|
||||
<TrendingUp size={16} />
|
||||
View My Stats
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<Loader2 size={32} className="animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<p className="text-muted-foreground">Failed to load analytics data.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const { summary, time_series, top_flows, top_engineers } = data
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6 max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span title="Team Analytics">
|
||||
<BarChart3 size={24} className="text-foreground" />
|
||||
</span>
|
||||
<h1 className="text-2xl font-bold text-foreground">Team Analytics</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
to="/analytics/me"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
My Stats
|
||||
</Link>
|
||||
<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-none focus:ring-1 focus:ring-ring"
|
||||
>
|
||||
{PERIOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stat Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard
|
||||
icon={TrendingUp}
|
||||
label="Total Sessions"
|
||||
value={summary.total_sessions.toLocaleString()}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Target}
|
||||
label="Completion Rate"
|
||||
value={`${(summary.completion_rate * 100).toFixed(1)}%`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Clock}
|
||||
label="Median Duration"
|
||||
value={`${summary.median_duration_minutes} min`}
|
||||
/>
|
||||
<StatCard
|
||||
icon={Users}
|
||||
label="Active Engineers"
|
||||
value={summary.active_engineers.toLocaleString()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Area Chart — Sessions over Time */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Sessions Over Time
|
||||
</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={time_series}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="hsl(var(--border))"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={{ stroke: 'hsl(var(--border))' }}
|
||||
tickFormatter={(value: string) => {
|
||||
const d = new Date(value)
|
||||
return `${d.getMonth() + 1}/${d.getDate()}`
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: 'hsl(var(--card))',
|
||||
border: '1px solid hsl(var(--border))',
|
||||
borderRadius: '8px',
|
||||
color: 'hsl(var(--foreground))',
|
||||
fontSize: '13px',
|
||||
}}
|
||||
labelFormatter={(value) => {
|
||||
const d = new Date(String(value))
|
||||
return d.toLocaleDateString(undefined, {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="resolved"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.resolved}
|
||||
fill={CHART_COLORS.resolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="escalated"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.escalated}
|
||||
fill={CHART_COLORS.escalated}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="workaround"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.workaround}
|
||||
fill={CHART_COLORS.workaround}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="unresolved"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.unresolved}
|
||||
fill={CHART_COLORS.unresolved}
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center gap-6 mt-3 justify-center">
|
||||
{Object.entries(CHART_COLORS).map(([key, color]) => (
|
||||
<div key={key} className="flex items-center gap-1.5">
|
||||
<div
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two-Column: Top Flows & Top Engineers */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Top Flows */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Top Flows
|
||||
</h2>
|
||||
{top_flows.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No flow data for this period.</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 text-foreground font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{top_flows.map((flow) => (
|
||||
<tr
|
||||
key={flow.tree_id}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
{flow.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{(flow.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{flow.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Top Engineers */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
Top Engineers
|
||||
</h2>
|
||||
{top_engineers.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No engineer data for this period.</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 text-foreground font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{top_engineers.map((eng) => (
|
||||
<tr
|
||||
key={eng.user_id}
|
||||
className="border-b border-border last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
{eng.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{eng.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{(eng.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
{eng.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StatCard({
|
||||
icon: Icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ComponentType<{ size?: number; className?: string }>
|
||||
label: string
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Icon size={16} className="text-muted-foreground" />
|
||||
<span className="text-sm text-muted-foreground">{label}</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-foreground">{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { useParams, useNavigate, useBlocker } from 'react-router-dom'
|
||||
import { useStore } from 'zustand'
|
||||
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList } from 'lucide-react'
|
||||
import { Undo2, Redo2, Save, CheckCircle2, Monitor, FileText, Code2, LayoutList, BarChart3 } from 'lucide-react'
|
||||
import { getMonacoEditor } from '@/components/tree-editor/code-mode'
|
||||
import { treesApi } from '@/api/trees'
|
||||
import { treeMarkdownApi } from '@/api/treeMarkdown'
|
||||
@@ -13,6 +13,7 @@ import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts'
|
||||
import { usePermissions } from '@/hooks/usePermissions'
|
||||
import { cn, safeGetItem } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import { FlowAnalyticsPanel } from '@/components/analytics/FlowAnalyticsPanel'
|
||||
|
||||
export function TreeEditorPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
@@ -46,6 +47,7 @@ export function TreeEditorPage() {
|
||||
|
||||
const [showDraftPrompt, setShowDraftPrompt] = useState(false)
|
||||
const [treeStatus, setTreeStatus] = useState<TreeStatus>('draft')
|
||||
const [showAnalytics, setShowAnalytics] = useState(false)
|
||||
|
||||
// Mobile detection
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
@@ -538,6 +540,23 @@ export function TreeEditorPage() {
|
||||
|
||||
<div className="mx-2 h-6 w-px bg-border" />
|
||||
|
||||
{/* Analytics toggle (only for existing trees) */}
|
||||
{isEditMode && (
|
||||
<button
|
||||
onClick={() => setShowAnalytics(!showAnalytics)}
|
||||
title="Toggle flow analytics panel"
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors',
|
||||
showAnalytics
|
||||
? 'bg-accent text-foreground'
|
||||
: 'bg-card text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<BarChart3 className="h-4 w-4" />
|
||||
Analytics
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Validate */}
|
||||
<button
|
||||
onClick={handleManualValidate}
|
||||
@@ -594,6 +613,13 @@ export function TreeEditorPage() {
|
||||
|
||||
{/* Main Editor */}
|
||||
<TreeEditorLayout isMobile={isMobile} />
|
||||
|
||||
{/* Flow Analytics Panel (collapsible) */}
|
||||
{showAnalytics && id && (
|
||||
<div className="border-t border-border p-6 overflow-y-auto max-h-[50vh]">
|
||||
<FlowAnalyticsPanel treeId={id} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -14,6 +14,8 @@ import { Plus, CheckCircle, ArrowRight, Clock, Terminal, Clipboard, Check, Copy,
|
||||
import { toast } from '@/lib/toast'
|
||||
import { Modal } from '@/components/common/Modal'
|
||||
import { ShareSessionModal } from '@/components/session/ShareSessionModal'
|
||||
import { CSATModal, hasBeenRated } from '@/components/session/CSATModal'
|
||||
import { StepFeedback } from '@/components/session/StepFeedback'
|
||||
import { buildSessionShareUrl, getLatestActiveShareForSession } from '@/lib/sessionShare'
|
||||
|
||||
interface LocationState {
|
||||
@@ -52,6 +54,7 @@ export function TreeNavigationPage() {
|
||||
const [isCopyingForTicket, setIsCopyingForTicket] = useState(false)
|
||||
const [showSharePopover, setShowSharePopover] = useState(false)
|
||||
const [showShareModal, setShowShareModal] = useState(false)
|
||||
const [showCsatModal, setShowCsatModal] = useState(false)
|
||||
const [copiedShareLink, setCopiedShareLink] = useState(false)
|
||||
const [isCopyingShareLink, setIsCopyingShareLink] = useState(false)
|
||||
const sharePopoverRef = useRef<HTMLDivElement>(null)
|
||||
@@ -195,6 +198,13 @@ export function TreeNavigationPage() {
|
||||
setCompletionSource('standard')
|
||||
}
|
||||
|
||||
const handleCsatClose = () => {
|
||||
setShowCsatModal(false)
|
||||
if (session) {
|
||||
navigate(`/sessions/${session.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
// Custom step flow (creation, post-step actions, continuation, branching, forking)
|
||||
const customStepFlow = useCustomStepFlow({
|
||||
tree,
|
||||
@@ -450,6 +460,8 @@ export function TreeNavigationPage() {
|
||||
setPendingCompletionDecision(null)
|
||||
if (completionSource === 'custom' && customStepFlow.customSteps.length > 0) {
|
||||
customStepFlow.setShowForkModal(true)
|
||||
} else if (!hasBeenRated(session.id)) {
|
||||
setShowCsatModal(true)
|
||||
} else {
|
||||
navigate(`/sessions/${session.id}`)
|
||||
}
|
||||
@@ -1089,6 +1101,13 @@ export function TreeNavigationPage() {
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Step Feedback */}
|
||||
{session && (currentNode || currentCustomStep) && (
|
||||
<div className="mt-3 flex justify-end border-t border-border pt-3">
|
||||
<StepFeedback stepId={currentCustomStep?.id || currentNodeId} sessionId={session.id} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Notes */}
|
||||
<div className="mt-6 border-t border-border pt-4">
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
@@ -1180,6 +1199,14 @@ export function TreeNavigationPage() {
|
||||
isSubmitting={isCompleting}
|
||||
/>
|
||||
|
||||
{session && (
|
||||
<CSATModal
|
||||
isOpen={showCsatModal}
|
||||
onClose={handleCsatClose}
|
||||
sessionId={session.id}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Keyboard Shortcuts Modal */}
|
||||
<Modal
|
||||
isOpen={shortcutsModalOpen}
|
||||
|
||||
Reference in New Issue
Block a user