ff985fb755
Swap accent color from cyan (#22d3ee) to ember orange (#f97316) site-wide. Cyan caused contrast issues and felt generic — orange brings warmth and urgency fitting for a troubleshooting tool. Changes: - CSS variables: accent, accent-hover, accent-dim, accent-text, primary, ring - Warning color shifted from amber (#fbbf24) to yellow (#eab308) for semantic separation from orange accent - Brand SVGs: logo gradient updated to orange - 50+ component files: all hardcoded cyan hex values, Tailwind cyan-* classes, and rgba(34,211,238,...) glow values replaced - landing.css: all 45+ cyan references + 5 old border color fixes - DESIGN-SYSTEM.md bumped to v5 with decisions log - CLAUDE.md: all color references synced to charcoal palette + orange accent - PWA theme-color meta tag updated to match sidebar (#10121a) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
378 lines
13 KiB
TypeScript
378 lines
13 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { BarChart3, Target, Clock, TrendingUp, CheckCircle } from 'lucide-react'
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts'
|
|
import { Spinner } from '@/components/common/Spinner'
|
|
import { EmptyState } from '@/components/common/EmptyState'
|
|
import { AnalyticsIllustration } from '@/components/common/EmptyStateIllustrations'
|
|
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: '#eab308',
|
|
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(() => {
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
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]">
|
|
<Spinner />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!data) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
|
|
<EmptyState
|
|
illustration={<AnalyticsIllustration />}
|
|
title="Analytics unavailable"
|
|
description="Failed to load analytics data. Please try again."
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (data.summary.total_sessions === 0) {
|
|
return (
|
|
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
|
|
<EmptyState
|
|
illustration={<AnalyticsIllustration />}
|
|
title="Track your troubleshooting performance"
|
|
description="Analytics show resolution times, common paths, and team efficiency. Data appears automatically as you complete sessions."
|
|
action={
|
|
<Link
|
|
to="/trees"
|
|
className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white hover:brightness-110 active:scale-[0.98] transition-all"
|
|
>
|
|
Run Your First Session
|
|
</Link>
|
|
}
|
|
learnMoreLink="/guides/analytics"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const { summary, time_series, top_flows } = data
|
|
const outcomeBreakdown = summary.outcome_breakdown
|
|
|
|
return (
|
|
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8 space-y-6">
|
|
{/* 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 font-heading 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-hidden focus:ring-1 focus:ring-primary/20"
|
|
>
|
|
{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="var(--color-border)"
|
|
vertical={false}
|
|
/>
|
|
<XAxis
|
|
dataKey="date"
|
|
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: 'var(--color-border)' }}
|
|
tickFormatter={(value: string) => {
|
|
const d = new Date(value)
|
|
return `${d.getMonth() + 1}/${d.getDate()}`
|
|
}}
|
|
/>
|
|
<YAxis
|
|
tick={{ fill: 'var(--color-muted-foreground)', fontSize: 12 }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
allowDecimals={false}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'var(--color-card)',
|
|
border: '1px solid var(--color-border)',
|
|
borderRadius: '8px',
|
|
color: 'var(--color-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 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>
|
|
)
|
|
}
|