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

refactor: migrate page components to Design System v4

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/pages/MyAnalyticsPage.tsx
View File

@@ -76,7 +76,7 @@ export default function MyAnalyticsPage() {
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>
@@ -96,16 +96,16 @@ export default function MyAnalyticsPage() {
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span title="My Analytics">
<BarChart3 size={24} className="text-foreground" />
<BarChart3 size={24} className="text-[#e2e5eb]" />
</span>
<h1 className="text-2xl font-bold font-heading text-foreground">My Analytics</h1>
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb]">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"
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
>
Team Analytics
</Link>
@@ -113,7 +113,7 @@ export default function MyAnalyticsPage() {
<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}>
@@ -149,8 +149,8 @@ export default function MyAnalyticsPage() {
</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">
My Sessions Over Time
</h2>
<ResponsiveContainer width="100%" height={300}>
@@ -236,7 +236,7 @@ export default function MyAnalyticsPage() {
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>
@@ -247,27 +247,27 @@ export default function MyAnalyticsPage() {
{/* 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">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-6">
<h2 className="text-sm font-semibold text-[#e2e5eb] mb-4">
My 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>
@@ -276,18 +276,18 @@ export default function MyAnalyticsPage() {
{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>
@@ -299,12 +299,12 @@ export default function MyAnalyticsPage() {
</div>
{/* Outcome Distribution */}
<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">
Outcome Distribution
</h2>
{summary.total_sessions === 0 ? (
<p className="text-sm text-muted-foreground">No session data for this period.</p>
<p className="text-sm text-[#848b9b]">No session data for this period.</p>
) : (
<div className="space-y-3">
{(
@@ -327,11 +327,11 @@ export default function MyAnalyticsPage() {
OUTCOME_COLORS[outcome] ?? '#94a3b8',
}}
/>
<span className="text-sm text-muted-foreground capitalize">
<span className="text-sm text-[#848b9b] capitalize">
{outcome}
</span>
</div>
<span className="text-sm text-foreground font-medium">
<span className="text-sm text-[#e2e5eb] font-medium">
{count} ({pct.toFixed(1)}%)
</span>
</div>
@@ -366,12 +366,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>
)
}