chelsea/Synculous-2
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
chelsea
2026-02-15 23:11:33 -06:00
parent e97347ff65
commit d8fde5b516
18 changed files with 543 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
synculous-client/src/app/dashboard/stats/page.tsx
View File

@@ -122,7 +122,7 @@ export default function StatsPage() {
return (
<div className="p-4 space-y-6">
<h1 className="text-2xl font-bold text-gray-900">Your Progress</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Your Progress</h1>
{/* Weekly Summary */}
{weeklySummary && (
@@ -148,11 +148,11 @@ export default function StatsPage() {
{/* Wins This Month */}
{victories.length > 0 && (
<div>
<h2 className="text-lg font-semibold text-gray-900 mb-3">Wins This Month</h2>
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Wins This Month</h2>
<div className="space-y-2">
{victories.map((victory, i) => (
<div key={i} className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-green-100 to-emerald-100 rounded-xl flex items-center justify-center">
<div key={i} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-3">
<div className="w-10 h-10 bg-gradient-to-br from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 rounded-xl flex items-center justify-center">
<span className="text-lg">
{victory.type === 'comeback' ? '💪' :
victory.type === 'weekend' ? '🎉' :
@@ -160,7 +160,7 @@ export default function StatsPage() {
victory.type === 'consistency' ? '🔥' : '⭐'}
</span>
</div>
<p className="text-sm text-gray-700 flex-1">{victory.message}</p>
<p className="text-sm text-gray-700 dark:text-gray-300 flex-1">{victory.message}</p>
</div>
))}
</div>
@@ -170,16 +170,16 @@ export default function StatsPage() {
{/* Consistency (formerly Streaks) */}
{streaks.length > 0 && (
<div>
<h2 className="text-lg font-semibold text-gray-900 mb-3">Your Consistency</h2>
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Your Consistency</h2>
<div className="space-y-2">
{streaks.map((streak) => (
<div key={streak.routine_id} className="bg-white rounded-xl p-4 shadow-sm flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-red-100 rounded-xl flex items-center justify-center">
<div key={streak.routine_id} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center gap-4">
<div className="w-12 h-12 bg-gradient-to-br from-orange-100 to-red-100 dark:from-orange-900/30 dark:to-red-900/30 rounded-xl flex items-center justify-center">
<FlameIcon className="text-orange-500" size={24} />
</div>
<div className="flex-1">
<p className="font-medium text-gray-900">{streak.routine_name}</p>
<p className="text-sm text-gray-500">
<p className="font-medium text-gray-900 dark:text-gray-100">{streak.routine_name}</p>
<p className="text-sm text-gray-500 dark:text-gray-400">
{getStreakMessage(streak.current_streak)}
</p>
</div>
@@ -187,17 +187,17 @@ export default function StatsPage() {
{streak.current_streak > 0 ? (
<>
<p className="text-2xl font-bold text-orange-500">{streak.current_streak}</p>
<p className="text-xs text-gray-500">days</p>
<p className="text-xs text-gray-500 dark:text-gray-400">days</p>
</>
) : (
<p className="text-sm text-gray-400">Ready</p>
<p className="text-sm text-gray-400 dark:text-gray-500">Ready</p>
)}
</div>
</div>
))}
{/* Longest streak callout */}
{streaks.some(s => s.longest_streak > 0) && (
<p className="text-sm text-gray-400 text-center mt-2">
<p className="text-sm text-gray-400 dark:text-gray-500 text-center mt-2">
Your personal best: {Math.max(...streaks.map(s => s.longest_streak))} days — you&apos;ve done it before
</p>
)}
@@ -208,11 +208,11 @@ export default function StatsPage() {
{/* Per-Routine Stats */}
{routines.length > 0 && (
<div>
<h2 className="text-lg font-semibold text-gray-900 mb-3">Routine Details</h2>
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Routine Details</h2>
<select
value={selectedRoutine}
onChange={(e) => setSelectedRoutine(e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-xl bg-white mb-4"
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 mb-4"
>
{routines.map((routine) => (
<option key={routine.id} value={routine.id}>
@@ -223,34 +223,34 @@ export default function StatsPage() {
{routineStats && (
<div className="grid grid-cols-2 gap-3">
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<TargetIcon className="text-indigo-500 mb-2" size={24} />
<p className={`text-lg font-bold ${getCompletionLabel(routineStats.completion_rate_percent).color}`}>
{getCompletionLabel(routineStats.completion_rate_percent).label}
</p>
<p className="text-sm text-gray-400">{routineStats.completion_rate_percent}%</p>
<p className="text-sm text-gray-400 dark:text-gray-500">{routineStats.completion_rate_percent}%</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<ClockIcon className="text-purple-500 mb-2" size={24} />
<p className="text-2xl font-bold text-gray-900">{formatTime(routineStats.avg_duration_minutes)}</p>
<p className="text-sm text-gray-500">Avg Duration</p>
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatTime(routineStats.avg_duration_minutes)}</p>
<p className="text-sm text-gray-500 dark:text-gray-400">Avg Duration</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<StarIcon className="text-green-500 mb-2" size={24} />
<p className="text-2xl font-bold text-gray-900">{routineStats.completed}</p>
<p className="text-sm text-gray-500">Completed</p>
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{routineStats.completed}</p>
<p className="text-sm text-gray-500 dark:text-gray-400">Completed</p>
</div>
<div className="bg-white rounded-xl p-4 shadow-sm">
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
<ActivityIcon className="text-pink-500 mb-2" size={24} />
<p className="text-2xl font-bold text-gray-900">{routineStats.total_sessions}</p>
<p className="text-sm text-gray-500">Total Sessions</p>
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{routineStats.total_sessions}</p>
<p className="text-sm text-gray-500 dark:text-gray-400">Total Sessions</p>
</div>
</div>
)}
{/* Plateau messaging */}
{routineStats && routineStats.total_sessions >= 5 && (
<p className="text-sm text-gray-400 text-center mt-3">
<p className="text-sm text-gray-400 dark:text-gray-500 text-center mt-3">
{routineStats.completion_rate_percent >= 60
? "You're showing up consistently — that's the hard part. The exact rate doesn't matter."
: "Life has seasons. The fact that you're checking in shows this matters to you."}