refactor: migrate page components to Design System v4
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
@@ -89,7 +89,7 @@ export default function TeamAnalyticsPage() {
|
||||
action={
|
||||
<Link
|
||||
to="/trees"
|
||||
className="inline-flex items-center gap-2 rounded-[10px] bg-gradient-brand px-5 py-2.5 text-sm font-semibold text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] 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>
|
||||
@@ -108,22 +108,22 @@ export default function TeamAnalyticsPage() {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<span title="Team Analytics">
|
||||
<BarChart3 size={24} className="text-foreground" />
|
||||
<BarChart3 size={24} className="text-[#e2e5eb]" />
|
||||
</span>
|
||||
<h1 className="text-2xl font-bold font-heading text-foreground">Team Analytics</h1>
|
||||
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb]">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"
|
||||
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] 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-hidden focus:ring-1 focus:ring-primary/20"
|
||||
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-primary/20"
|
||||
>
|
||||
{PERIOD_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
@@ -159,8 +159,8 @@ export default function TeamAnalyticsPage() {
|
||||
</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">
|
||||
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
|
||||
Sessions Over Time
|
||||
</h2>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
@@ -246,7 +246,7 @@ export default function TeamAnalyticsPage() {
|
||||
className="h-2.5 w-2.5 rounded-full"
|
||||
style={{ backgroundColor: color }}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground capitalize">
|
||||
<span className="text-xs text-[#848b9b] capitalize">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
@@ -257,27 +257,27 @@ export default function TeamAnalyticsPage() {
|
||||
{/* 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">
|
||||
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
|
||||
Top Flows
|
||||
</h2>
|
||||
{top_flows.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No flow data for this period.</p>
|
||||
<p className="text-sm text-[#848b9b]">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">
|
||||
<tr className="border-b border-[#1e2130]">
|
||||
<th className="text-left py-2 text-[#e2e5eb] font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
<th className="text-right py-2 text-[#e2e5eb] font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
<th className="text-right py-2 text-[#e2e5eb] font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
<th className="text-right py-2 text-[#e2e5eb] font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
@@ -286,18 +286,18 @@ export default function TeamAnalyticsPage() {
|
||||
{top_flows.map((flow) => (
|
||||
<tr
|
||||
key={flow.tree_id}
|
||||
className="border-b border-border last:border-0"
|
||||
className="border-b border-[#1e2130] last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
<td className="py-2 text-[#848b9b] truncate max-w-[200px]">
|
||||
{flow.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
<td className="py-2 text-right text-[#848b9b]">
|
||||
{flow.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
<td className="py-2 text-right text-[#848b9b]">
|
||||
{(flow.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
<td className="py-2 text-right text-[#848b9b]">
|
||||
{flow.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
@@ -309,27 +309,27 @@ export default function TeamAnalyticsPage() {
|
||||
</div>
|
||||
|
||||
{/* Top Engineers */}
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-foreground mb-4">
|
||||
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
|
||||
<h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
|
||||
Top Engineers
|
||||
</h2>
|
||||
{top_engineers.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No engineer data for this period.</p>
|
||||
<p className="text-sm text-[#848b9b]">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">
|
||||
<tr className="border-b border-[#1e2130]">
|
||||
<th className="text-left py-2 text-[#e2e5eb] font-medium">
|
||||
Name
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
<th className="text-right py-2 text-[#e2e5eb] font-medium">
|
||||
Sessions
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
<th className="text-right py-2 text-[#e2e5eb] font-medium">
|
||||
Completion
|
||||
</th>
|
||||
<th className="text-right py-2 text-foreground font-medium">
|
||||
<th className="text-right py-2 text-[#e2e5eb] font-medium">
|
||||
Median
|
||||
</th>
|
||||
</tr>
|
||||
@@ -338,18 +338,18 @@ export default function TeamAnalyticsPage() {
|
||||
{top_engineers.map((eng) => (
|
||||
<tr
|
||||
key={eng.user_id}
|
||||
className="border-b border-border last:border-0"
|
||||
className="border-b border-[#1e2130] last:border-0"
|
||||
>
|
||||
<td className="py-2 text-muted-foreground truncate max-w-[200px]">
|
||||
<td className="py-2 text-[#848b9b] truncate max-w-[200px]">
|
||||
{eng.name}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
<td className="py-2 text-right text-[#848b9b]">
|
||||
{eng.sessions}
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
<td className="py-2 text-right text-[#848b9b]">
|
||||
{(eng.completion_rate * 100).toFixed(1)}%
|
||||
</td>
|
||||
<td className="py-2 text-right text-muted-foreground">
|
||||
<td className="py-2 text-right text-[#848b9b]">
|
||||
{eng.median_duration_minutes} min
|
||||
</td>
|
||||
</tr>
|
||||
@@ -374,12 +374,12 @@ function StatCard({
|
||||
value: string
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-card border border-border rounded-xl p-6">
|
||||
<div className="bg-[#14161d] border border-[#1e2130] 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>
|
||||
<Icon size={16} className="text-[#848b9b]" />
|
||||
<span className="text-sm text-[#848b9b]">{label}</span>
|
||||
</div>
|
||||
<p className="text-3xl font-bold text-foreground">{value}</p>
|
||||
<p className="text-3xl font-bold text-[#e2e5eb]">{value}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user