ui update and some backend functionality adding in accordance with research on adhd and ux design

synculous-client/src/app/dashboard/stats/page.tsx

@@ -35,26 +35,50 @@ interface WeeklySummary {
   }[];
 }
 
+function getStreakMessage(streak: number): string {
+  if (streak === 0) return 'Ready for a fresh start';
+  if (streak === 1) return "You're back! Day 1";
+  if (streak <= 3) return `${streak} days of showing up`;
+  if (streak <= 7) return `${streak} days — building momentum`;
+  return `${streak} days — you're someone who shows up`;
+}
+
+function getCompletionLabel(rate: number): { label: string; color: string } {
+  if (rate >= 80) return { label: 'Rock solid', color: 'text-green-600' };
+  if (rate >= 60) return { label: 'Strong habit', color: 'text-indigo-600' };
+  if (rate >= 30) return { label: 'Building momentum', color: 'text-amber-600' };
+  return { label: 'Getting started', color: 'text-gray-600' };
+}
+
+interface Victory {
+  type: string;
+  message: string;
+  date?: string;
+}
+
 export default function StatsPage() {
   const [routines, setRoutines] = useState<{ id: string; name: string }[]>([]);
   const [selectedRoutine, setSelectedRoutine] = useState<string>('');
   const [routineStats, setRoutineStats] = useState<RoutineStats | null>(null);
   const [streaks, setStreaks] = useState<Streak[]>([]);
   const [weeklySummary, setWeeklySummary] = useState<WeeklySummary | null>(null);
+  const [victories, setVictories] = useState<Victory[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [routinesData, streaksData, summaryData] = await Promise.all([
+        const [routinesData, streaksData, summaryData, victoriesData] = await Promise.all([
           api.routines.list(),
           api.stats.getStreaks(),
           api.stats.getWeeklySummary(),
+          api.victories.get(30).catch(() => []),
         ]);
         setRoutines(routinesData);
         setStreaks(streaksData);
         setWeeklySummary(summaryData);
-        
+        setVictories(victoriesData);
+
         if (routinesData.length > 0) {
           setSelectedRoutine(routinesData[0].id);
         }
@@ -97,7 +121,7 @@ export default function StatsPage() {
 
   return (
     <div className="p-4 space-y-6">
-      <h1 className="text-2xl font-bold text-gray-900">Stats</h1>
+      <h1 className="text-2xl font-bold text-gray-900">Your Progress</h1>
 
       {/* Weekly Summary */}
       {weeklySummary && (
@@ -110,20 +134,42 @@ export default function StatsPage() {
           <div className="bg-gradient-to-br from-pink-500 to-rose-600 rounded-2xl p-4 text-white">
             <ClockIcon className="text-white/80 mb-2" size={24} />
             <p className="text-3xl font-bold">{formatTime(weeklySummary.total_time_minutes)}</p>
-            <p className="text-white/80 text-sm">Time</p>
+            <p className="text-white/80 text-sm">Invested</p>
           </div>
           <div className="bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl p-4 text-white">
             <ActivityIcon className="text-white/80 mb-2" size={24} />
             <p className="text-3xl font-bold">{weeklySummary.routines_started}</p>
-            <p className="text-white/80 text-sm">Started</p>
+            <p className="text-white/80 text-sm">Active</p>
           </div>
         </div>
       )}
 
-      {/* Streaks */}
+      {/* Wins This Month */}
+      {victories.length > 0 && (
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 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">
+                  <span className="text-lg">
+                    {victory.type === 'comeback' ? '💪' :
+                     victory.type === 'weekend' ? '🎉' :
+                     victory.type === 'variety' ? '🌈' :
+                     victory.type === 'consistency' ? '🔥' : '⭐'}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-700 flex-1">{victory.message}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Consistency (formerly Streaks) */}
       {streaks.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Streaks</h2>
+          <h2 className="text-lg font-semibold text-gray-900 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">
@@ -133,15 +179,27 @@ export default function StatsPage() {
                 <div className="flex-1">
                   <p className="font-medium text-gray-900">{streak.routine_name}</p>
                   <p className="text-sm text-gray-500">
-                    Last: {streak.last_completed_date ? new Date(streak.last_completed_date).toLocaleDateString() : 'Never'}
+                    {getStreakMessage(streak.current_streak)}
                   </p>
                 </div>
                 <div className="text-right">
-                  <p className="text-2xl font-bold text-orange-500">{streak.current_streak}</p>
-                  <p className="text-xs text-gray-500">day streak</p>
+                  {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-sm text-gray-400">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">
+                Your personal best: {Math.max(...streaks.map(s => s.longest_streak))} days — you&apos;ve done it before
+              </p>
+            )}
           </div>
         </div>
       )}
@@ -149,7 +207,7 @@ export default function StatsPage() {
       {/* Per-Routine Stats */}
       {routines.length > 0 && (
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 mb-3">Routine Stats</h2>
+          <h2 className="text-lg font-semibold text-gray-900 mb-3">Routine Details</h2>
           <select
             value={selectedRoutine}
             onChange={(e) => setSelectedRoutine(e.target.value)}
@@ -166,8 +224,10 @@ export default function StatsPage() {
             <div className="grid grid-cols-2 gap-3">
               <div className="bg-white rounded-xl p-4 shadow-sm">
                 <TargetIcon className="text-indigo-500 mb-2" size={24} />
-                <p className="text-2xl font-bold text-gray-900">{routineStats.completion_rate_percent}%</p>
-                <p className="text-sm text-gray-500">Completion Rate</p>
+                <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>
               </div>
               <div className="bg-white rounded-xl p-4 shadow-sm">
                 <ClockIcon className="text-purple-500 mb-2" size={24} />
@@ -186,6 +246,15 @@ export default function StatsPage() {
               </div>
             </div>
           )}
+
+          {/* Plateau messaging */}
+          {routineStats && routineStats.total_sessions >= 5 && (
+            <p className="text-sm text-gray-400 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."}
+            </p>
+          )}
         </div>
       )}
     </div>