v0.4.0: Dashboard navigation, enhanced Today's Prayers, fresh compose form

src/components/HomePage.tsx

@@ -4,6 +4,14 @@ import { useState, useEffect } from 'react';
 import Clock from './Clock';
 import { HandHeart, CheckCircle2, PenSquare, BookOpen, Sparkles, Flame, BarChart3, MessageSquare } from 'lucide-react';
 
+const getLocalISODate = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+};
+
 interface Prayer {
   id: string;
   userId: string;
@@ -19,20 +27,47 @@ interface Prayer {
 
 interface HomePageProps {
   prayers: Prayer[];
-  todayCount: number;
   onStartPraying: () => void;
   onSelectPrayer: (prayer: Prayer) => void;
+  onGoToPraying: () => void;
+  onGoToAnswered: () => void;
+  onGoToJournal: () => void;
+  onGoToReflections: () => void;
   userName?: string;
   mostPrayedFor?: string;
 }
 
-export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer, userName, mostPrayedFor }: HomePageProps) {
-  const today = new Date().toISOString().split('T')[0];
-  const todayPrayers = prayers.filter(p => p.date === today);
+export default function HomePage({ prayers, onStartPraying, onSelectPrayer, onGoToPraying, onGoToAnswered, onGoToJournal, onGoToReflections, userName, mostPrayedFor }: HomePageProps) {
+  const today = getLocalISODate();
   const recentPrayers = prayers.slice(0, 5);
   const totalPrayers = prayers.length;
   const uniqueDays = new Set(prayers.map(p => p.date)).size;
   const answeredPrayers = prayers.filter(p => p.answered).length;
+
+  const prayedTodayDetails = prayers
+    .map(prayer => {
+      const dates = prayer.prayedDates && prayer.prayedDates.length > 0
+        ? prayer.prayedDates
+        : prayer.lastPrayedFor
+          ? [prayer.lastPrayedFor]
+          : [];
+
+      const todayOccurrences = dates.filter(d => d === today).length;
+      if (todayOccurrences === 0) return null;
+
+      return {
+        id: prayer.id,
+        title: prayer.prayFor || prayer.text || 'Prayer',
+        count: todayOccurrences,
+      };
+    })
+    .filter(Boolean) as { id: string; title: string; count: number }[];
+
+  const todaysUniquePrayers = prayedTodayDetails.length;
+  const todaysTotalTaps = prayedTodayDetails.reduce((sum, item) => sum + item.count, 0);
+  const topTodayPrayers = [...prayedTodayDetails]
+    .sort((a, b) => b.count - a.count || a.title.localeCompare(b.title))
+    .slice(0, 3);
   
   // Get greeting based on time of day
   const getGreeting = () => {
@@ -57,12 +92,15 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
   const activePrayerCount = prayers.filter(p => !p.answered).length;
   
   // Count how many active prayers were prayed for today
-  const prayedTodayCount = prayers.filter(p => 
-    !p.answered && (
-      p.prayedDates?.includes(today) || 
-      p.lastPrayedFor === today
-    )
-  ).length;
+  const prayedTodayCount = prayers.filter(p => {
+    if (p.answered) return false;
+    const dates = p.prayedDates && p.prayedDates.length > 0
+      ? p.prayedDates
+      : p.lastPrayedFor
+        ? [p.lastPrayedFor]
+        : [];
+    return dates.some(d => d === today);
+  }).length;
   
   // Calculate actual streak - consecutive days with prayers
   const calculateStreak = () => {
@@ -162,37 +200,99 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
         <div className="max-w-md mx-auto mb-12">
           {/* Today's Prayers - Featured */}
           <div className="mb-4 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl p-6 shadow-xl border border-blue-500/20 backdrop-blur-lg">
-            <div className="flex items-end justify-between">
+            <div className="flex items-start justify-between">
               <div>
-                <div className="text-blue-200 text-sm font-semibold mb-2">Today's Prayers</div>
-                <div className="text-5xl font-bold text-white">{todayCount}</div>
+                <div className="text-blue-200 text-sm font-semibold mb-1">Today's Prayers</div>
+                <div className="text-5xl font-bold text-white">{todaysUniquePrayers}</div>
+                <div className="text-sm text-blue-100/80">unique prayed items</div>
+              </div>
+              <div className="text-right">
+                <div className="text-xs text-blue-100/70">Total taps</div>
+                <div className="text-2xl font-semibold text-white">{todaysTotalTaps}</div>
               </div>
-              <HandHeart className="w-10 h-10 text-white opacity-20" />
             </div>
+
+            {topTodayPrayers.length > 0 ? (
+              <div className="mt-4 space-y-2">
+                {topTodayPrayers.map(item => (
+                  <div key={item.id} className="flex items-center justify-between bg-white/5 border border-white/10 rounded-lg px-3 py-2">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <HandHeart className="w-4 h-4 text-blue-100" />
+                      <div className="text-sm text-white truncate" title={item.title}>{item.title}</div>
+                    </div>
+                    <div className="text-xs text-blue-100/80 whitespace-nowrap">{item.count} {item.count === 1 ? 'tap' : 'taps'}</div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="mt-4 text-sm text-blue-100/80 flex items-center gap-2">
+                <HandHeart className="w-4 h-4" /> Mark a prayer as prayed to see it here.
+              </div>
+            )}
           </div>
 
+          {/* Things to Pray For - Active Requests */}
+          {(() => {
+            const pendingPrayers = prayers.filter(p => !p.answered);
+            if (pendingPrayers.length > 0) {
+              return (
+                <button
+                  onClick={onGoToPraying}
+                  className="w-full text-left mb-4 bg-amber-900/20 backdrop-blur-xl rounded-2xl p-6 border border-amber-500/30 hover:border-amber-400/50 transition-all focus:outline-none focus:ring-2 focus:ring-amber-300 focus:ring-offset-2 focus:ring-offset-slate-900"
+                >
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <div className="text-amber-200 text-sm font-semibold mb-1 flex items-center gap-2">
+                        <HandHeart className="w-4 h-4" /> Things to Pray For
+                      </div>
+                      <div className="text-4xl font-bold text-amber-200">{pendingPrayers.length}</div>
+                      <div className="text-sm text-amber-200/80">active prayer requests</div>
+                    </div>
+                    <div className="text-xs font-semibold text-amber-200/90 flex items-center gap-1">
+                      <span>Tap to review</span>
+                      <span>→</span>
+                    </div>
+                  </div>
+                </button>
+              );
+            }
+            return null;
+          })()}
+
           {/* 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">
+            <button
+              onClick={onGoToReflections}
+              className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+            >
               <div className="text-slate-400 text-xs font-semibold mb-2">Total Prayers</div>
               <div className="text-3xl font-bold text-white">{totalPrayers}</div>
               <div className="text-xs text-slate-500 mt-2">All time</div>
-            </div>
+              <div className="text-[11px] text-blue-300 mt-1 flex items-center gap-1">Go to Reflections →</div>
+            </button>
 
             {/* Days Prayed */}
-            <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
+            <button
+              onClick={onGoToJournal}
+              className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+            >
               <div className="text-slate-400 text-xs font-semibold mb-2">Days Prayed</div>
               <div className="text-3xl font-bold text-white">{uniqueDays}</div>
               <div className="text-xs text-slate-500 mt-2">Consistent</div>
-            </div>
+              <div className="text-[11px] text-blue-300 mt-1 flex items-center gap-1">Open Journal →</div>
+            </button>
 
             {/* 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">
+            <button
+              onClick={onGoToAnswered}
+              className="text-left bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all w-full focus:outline-none focus:ring-2 focus:ring-blue-400/60 focus:ring-offset-2 focus:ring-offset-slate-900"
+            >
               <div className="text-slate-400 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><CheckCircle2 className="w-4 h-4" /> Answered</div>
               <div className="text-3xl font-bold text-green-400">{answeredPrayers}</div>
               <div className="text-xs text-slate-500 mt-2">{answeredPercentage}% answered</div>
-            </div>
+              <div className="text-[11px] text-green-300 mt-1 flex items-center gap-1">See answers →</div>
+            </button>
 
             {/* 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">
@@ -240,69 +340,6 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
           </button>
         </div>
 
-        {/* Things to Pray For - Active Requests */}
-        {(() => {
-          const pendingPrayers = prayers.filter(p => !p.answered);
-          if (pendingPrayers.length > 0) {
-            return (
-              <div className="max-w-md mx-auto mb-12">
-                <h2 className="text-lg font-bold text-amber-400 mb-4 flex items-center gap-2">
-                  <HandHeart className="w-5 h-5" /> Things to Pray For
-                </h2>
-                <div className="bg-amber-900/20 backdrop-blur-xl rounded-xl p-5 border border-amber-500/30 hover:border-amber-400/50 transition-all">
-                  <div className="text-3xl font-bold text-amber-300 mb-2">{pendingPrayers.length}</div>
-                  <div className="text-sm text-amber-200 mb-4">active prayer requests</div>
-                  <button
-                    onClick={() => {
-                      const fakeEvent = { target: { value: 'praying' } } as any;
-                      // Navigate to praying tab by triggering parent
-                    }}
-                    className="text-xs font-semibold text-amber-300 hover:text-amber-200 transition-colors flex items-center gap-1 group"
-                  >
-                    <span>View All</span>
-                    <span className="group-hover:translate-x-1 transition-transform">→</span>
-                  </button>
-                </div>
-              </div>
-            );
-          }
-          return null;
-        })()}
-
-        {/* Recent Prayers */}
-        {recentPrayers.length > 0 && (
-          <div className="max-w-md mx-auto mb-12">
-            <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
-              <BookOpen className="w-5 h-5" /> Recent Prayers
-            </h2>
-            <div className="space-y-3">
-              {recentPrayers.map((prayer, idx) => (
-                <button
-                  key={prayer.id}
-                  onClick={() => onSelectPrayer(prayer)}
-                  className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1"
-                >
-                  <div className="flex items-start gap-3">
-                    <div className="text-2xl">{prayer.answered ? <CheckCircle2 className="w-6 h-6 text-green-400" /> : <PenSquare className="w-6 h-6 text-blue-400" />}</div>
-                    <div className="flex-1 min-w-0">
-                      {prayer.prayFor && (
-                        <div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider inline-flex items-center gap-1.5">
-                          <HandHeart className="w-3.5 h-3.5" /> {prayer.prayFor}
-                        </div>
-                      )}
-                      <p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
-                      <div className="text-xs text-slate-500 mt-2 flex items-center justify-between">
-                        <span>{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
-                        <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">Click to edit →</span>
-                      </div>
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-
         {/* Recent Answered Prayers */}
         {recentAnswered.length > 0 && (
           <div className="max-w-md mx-auto mb-12">