feat(ui): redesign analytics page — stat cards, styled charts, git-log activity feed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 00:10:46 -05:00
parent 0ea3fcfa6d
commit 8461bf788c
4 changed files with 87 additions and 44 deletions
@@ -44,7 +44,7 @@ export default function CategoryBreakdown({ minutes: _minutes, taskId: _taskId }
if (isLoading) {
return (
<div className="flex items-center justify-center h-64 text-[#94a3b8] text-sm">
<div className="flex items-center justify-center h-64 text-[var(--color-text-secondary)] text-sm">
Loading category breakdown...
</div>
)
@@ -52,7 +52,7 @@ export default function CategoryBreakdown({ minutes: _minutes, taskId: _taskId }
if (categories.length === 0) {
return (
<div className="flex items-center justify-center h-64 text-[#94a3b8] text-sm">
<div className="flex items-center justify-center h-64 text-[var(--color-text-secondary)] text-sm">
No category data available.
</div>
)
@@ -88,14 +88,14 @@ export default function CategoryBreakdown({ minutes: _minutes, taskId: _taskId }
return (
<div
style={{
backgroundColor: '#1e293b',
border: '1px solid rgba(255,255,255,0.1)',
backgroundColor: 'var(--color-elevated)',
border: '1px solid var(--color-border)',
borderRadius: 8,
padding: '8px 12px',
}}
>
<div className="text-white text-sm font-medium">{d.name}</div>
<div className="text-[#94a3b8] text-xs mt-0.5">
<div className="text-[var(--color-text-primary)] text-sm font-medium">{d.name}</div>
<div className="text-[var(--color-text-secondary)] text-xs mt-0.5">
{d.count} events ({d.percentage}%)
</div>
</div>
@@ -119,13 +119,13 @@ export default function CategoryBreakdown({ minutes: _minutes, taskId: _taskId }
{/* Name + bar + stats */}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between mb-1">
<span className="text-sm text-white font-medium truncate">{cat.name}</span>
<span className="text-xs text-[#94a3b8] ml-2 shrink-0">
<span className="text-sm text-[var(--color-text-primary)] font-medium truncate">{cat.name}</span>
<span className="text-xs text-[var(--color-text-secondary)] ml-2 shrink-0">
{cat.count} ({cat.percentage}%)
</span>
</div>
{/* Progress bar */}
<div className="h-1.5 rounded-full bg-white/5 overflow-hidden">
<div className="h-1.5 rounded-full bg-[var(--color-border)] overflow-hidden">
<div
className="h-full rounded-full transition-all duration-300"
style={{