feat: integrate Things to Pray For tab and add dashboard widget

src/app/page.tsx

@@ -8,6 +8,7 @@ import BottomNav from '@/components/BottomNav';
 import DailyEntry from '@/components/DailyEntry';
 import CalendarView from '@/components/CalendarView';
 import ReflectionsList from '@/components/ReflectionsList';
+import ThingsToPrayFor from '@/components/ThingsToPrayFor';
 import AboutPage from '@/components/AboutPage';
 import HomePage from '@/components/HomePage';
 import AnsweredPrayers from '@/components/AnsweredPrayers';
@@ -26,7 +27,7 @@ interface Prayer {
 }
 
 export default function Home() {
-  const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about'>('home');
+  const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about'>('home');
   const [prayers, setPrayers] = useState<Prayer[]>([]);
   const [editingPrayer, setEditingPrayer] = useState<Prayer | null>(null);
   
@@ -233,6 +234,10 @@ export default function Home() {
         <AnsweredPrayers prayers={prayers} onEdit={handleSelectPrayer} />
       )}
 
+      {activeTab === 'praying' && (
+        <ThingsToPrayFor prayers={prayers.filter(p => !p.answered)} onEdit={handleSelectPrayer} />
+      )}
+
       {activeTab === 'reflections' && (
         <ReflectionsList
           prayers={prayers}

src/components/BottomNav.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import { useAuth } from '@/context/AuthContext';
 
 interface BottomNavProps {
-  activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about';
-  onTabChange: (tab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about') => void;
+  activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about';
+  onTabChange: (tab: 'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about') => void;
 }
 
 export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
@@ -15,6 +15,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
     { id: 'home' as const, label: 'Home', icon: '🏠' },
     { id: 'compose' as const, label: 'Compose', icon: '✍️' },
     { id: 'journal' as const, label: 'Journal', icon: '📅' },
+    { id: 'praying' as const, label: 'Praying', icon: '🙏' },
     { id: 'answered' as const, label: 'Answered', icon: '✅' },
     { id: 'reflections' as const, label: 'Reflections', icon: '📖' },
     { id: 'about' as const, label: 'About', icon: 'ℹ️' },

src/components/HomePage.tsx

@@ -176,6 +176,35 @@ 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">
+                  <span>🙏</span> 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">

src/components/ThingsToPrayFor.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import React from 'react';
+
+interface Prayer {
+  id: string;
+  date: string;
+  text: string;
+  prayFor?: string;
+  answered?: boolean;
+  answerDetails?: string;
+}
+
+interface ThingsToPrayForProps {
+  prayers: Prayer[];
+  onEdit: (prayer: Prayer) => void;
+}
+
+export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProps) {
+  // Filter for unanswered prayers
+  const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) => 
+    new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+
+  // Group by prayer for (people/topics)
+  const groupedByTopic: Record<string, Prayer[]> = {};
+  thingsToPrayFor.forEach(prayer => {
+    const topic = prayer.prayFor || 'Other Concerns';
+    if (!groupedByTopic[topic]) {
+      groupedByTopic[topic] = [];
+    }
+    groupedByTopic[topic].push(prayer);
+  });
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pt-20 px-4 pb-8">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
+            🙏 Things to Pray For
+          </h1>
+          <p className="text-slate-400 text-lg">
+            {thingsToPrayFor.length} active {thingsToPrayFor.length === 1 ? 'prayer request' : 'prayer requests'}
+          </p>
+        </div>
+
+        {thingsToPrayFor.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="text-6xl mb-4 animate-bounce">✨</div>
+            <p className="text-white font-semibold mb-2">All Caught Up!</p>
+            <p className="text-slate-400">
+              You've marked all your prayers as answered. Praise God for His faithfulness!
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {Object.entries(groupedByTopic).map(([topic, prayersByTopic]) => (
+              <div key={topic}>
+                <div className="flex items-center gap-2 mb-4">
+                  <div className="h-1 flex-1 bg-gradient-to-r from-blue-500/50 to-transparent rounded"></div>
+                  <h2 className="text-xl font-bold text-blue-400 px-4">
+                    🎯 {topic}
+                  </h2>
+                  <div className="h-1 flex-1 bg-gradient-to-l from-blue-500/50 to-transparent rounded"></div>
+                </div>
+                <div className="space-y-3">
+                  {prayersByTopic.map((prayer, idx) => {
+                    const daysAgo = Math.floor(
+                      (new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
+                    );
+                    
+                    return (
+                      <button
+                        key={prayer.id}
+                        onClick={() => onEdit(prayer)}
+                        className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 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-2"
+                      >
+                        <div className="flex items-start gap-3">
+                          <div className="text-3xl mt-0.5">🙏</div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-base text-slate-200 group-hover:text-white line-clamp-3">
+                              {prayer.text}
+                            </p>
+                            <div className="mt-3 flex items-center justify-between text-xs">
+                              <span className="text-slate-500">
+                                {daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
+                              </span>
+                              <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                                Edit & Mark Answered →
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}