feat: enhance dashboard with real streak calculation, answered prayers section, and more stats

src/components/HomePage.tsx

@@ -10,6 +10,7 @@ interface Prayer {
   text: string;
   prayFor?: string;
   answered?: boolean;
+  answerDetails?: string;
 }
 
 interface HomePageProps {
@@ -26,7 +27,53 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
   const totalPrayers = prayers.length;
   const uniqueDays = new Set(prayers.map(p => p.date)).size;
   const answeredPrayers = prayers.filter(p => p.answered).length;
-  const streak = Math.floor(Math.random() * 30) + 1; // Calculate actual streak
+  
+  // Calculate actual streak - consecutive days with prayers
+  const calculateStreak = () => {
+    if (prayers.length === 0) return 0;
+    
+    const prayerDates = Array.from(new Set(prayers.map(p => p.date))).sort().reverse();
+    let streak = 0;
+    let checkDate = new Date(today);
+    
+    for (let i = 0; i < 365; i++) {
+      const dateStr = checkDate.toISOString().split('T')[0];
+      if (prayerDates.includes(dateStr)) {
+        streak++;
+      } else if (i === 0) {
+        // If today has no prayer, streak is broken (unless we haven't prayed today yet, which is ok)
+        break;
+      } else {
+        break;
+      }
+      checkDate.setDate(checkDate.getDate() - 1);
+    }
+    
+    return streak;
+  };
+  
+  const streak = calculateStreak();
+  
+  // Calculate more stats
+  const avgPrayerLength = totalPrayers > 0 
+    ? Math.round(prayers.reduce((sum, p) => sum + p.text.length, 0) / totalPrayers)
+    : 0;
+  
+  const answeredPercentage = totalPrayers > 0 
+    ? Math.round((answeredPrayers / totalPrayers) * 100)
+    : 0;
+  
+  // Get most prayed for person/topic
+  const prayerForCounts: Record<string, number> = {};
+  prayers.forEach(p => {
+    if (p.prayFor) {
+      prayerForCounts[p.prayFor] = (prayerForCounts[p.prayFor] || 0) + 1;
+    }
+  });
+  const mostPrayedFor = Object.entries(prayerForCounts).sort((a, b) => b[1] - a[1])[0];
+  
+  // Recent answered prayers
+  const recentAnswered = prayers.filter(p => p.answered).slice(0, 3);
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-4 pb-32">
@@ -67,7 +114,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
             </div>
           </div>
 
-          {/* Stats Grid */}
+          {/* Main Stats Grid */}
           <div className="grid grid-cols-2 gap-4 mb-8">
             {/* Total Prayers */}
             <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
@@ -83,20 +130,39 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
               <div className="text-xs text-slate-500 mt-2">Consistent</div>
             </div>
 
-            {/* Answered */}
+            {/* Answered Prayers */}
             <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
               <div className="text-slate-400 text-xs font-semibold mb-2">✅ Answered</div>
               <div className="text-3xl font-bold text-green-400">{answeredPrayers}</div>
-              <div className="text-xs text-slate-500 mt-2">Blessings</div>
+              <div className="text-xs text-slate-500 mt-2">{answeredPercentage}% answered</div>
             </div>
 
             {/* Streak */}
             <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
               <div className="text-slate-400 text-xs font-semibold mb-2">🔥 Streak</div>
-              <div className="text-3xl font-bold text-orange-400">{streak} days</div>
+              <div className="text-3xl font-bold text-orange-400">{streak}</div>
-              <div className="text-xs text-slate-500 mt-2">Keep going!</div>
+              <div className="text-xs text-slate-500 mt-2">consecutive days</div>
             </div>
           </div>
+
+          {/* Secondary Stats */}
+          <div className="grid grid-cols-2 gap-4 mb-8">
+            {/* Avg Prayer Length */}
+            <div className="bg-purple-900/20 backdrop-blur-xl rounded-xl p-4 border border-purple-500/30">
+              <div className="text-purple-300 text-xs font-semibold mb-2">📊 Avg Length</div>
+              <div className="text-2xl font-bold text-purple-200">{avgPrayerLength}</div>
+              <div className="text-xs text-purple-400 mt-2">characters</div>
+            </div>
+
+            {/* Most Prayed For */}
+            {mostPrayedFor && (
+              <div className="bg-pink-900/20 backdrop-blur-xl rounded-xl p-4 border border-pink-500/30">
+                <div className="text-pink-300 text-xs font-semibold mb-2">💝 Most Prayed For</div>
+                <div className="text-sm font-bold text-pink-200 line-clamp-1">{mostPrayedFor[0]}</div>
+                <div className="text-xs text-pink-400 mt-2">{mostPrayedFor[1]} times</div>
+              </div>
+            )}
+          </div>
         </div>
 
         {/* CTA Button */}
@@ -112,7 +178,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
 
         {/* Recent Prayers */}
         {recentPrayers.length > 0 && (
-          <div className="max-w-md mx-auto">
+          <div className="max-w-md mx-auto mb-12">
             <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
               <span>📖</span> Recent Prayers
             </h2>
@@ -144,6 +210,43 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
           </div>
         )}
 
+        {/* Recent Answered Prayers */}
+        {recentAnswered.length > 0 && (
+          <div className="max-w-md mx-auto mb-12">
+            <h2 className="text-lg font-bold text-green-400 mb-4 flex items-center gap-2">
+              <span>✨</span> Recently Answered
+            </h2>
+            <div className="space-y-3">
+              {recentAnswered.map((prayer) => (
+                <div
+                  key={prayer.id}
+                  className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 hover:border-green-400/50 transition-all"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="text-2xl">✅</div>
+                    <div className="flex-1 min-w-0">
+                      {prayer.prayFor && (
+                        <div className="text-xs font-bold text-green-300 mb-1 uppercase tracking-wider">
+                          🙏 {prayer.prayFor}
+                        </div>
+                      )}
+                      <p className="text-sm text-slate-300 line-clamp-2">{prayer.text}</p>
+                      {prayer.answerDetails && (
+                        <p className="text-xs text-green-400 mt-2 italic">
+                          💬 "{prayer.answerDetails.substring(0, 60)}..."
+                        </p>
+                      )}
+                      <div className="text-xs text-slate-500 mt-2">
+                        {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
         {/* Empty State */}
         {prayers.length === 0 && (
           <div className="max-w-md mx-auto text-center py-12">