From 7237aa6181ca35870386ca758cbbf096563b9609 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 15 Jan 2026 14:10:02 -0500
Subject: [PATCH] feat: redesign home tab as dashboard with stats, move prayer
 entry to journal tab

---
 src/app/page.tsx            | 30 ++++++++----
 src/components/HomePage.tsx | 97 +++++++++++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 10 deletions(-)
 create mode 100644 src/components/HomePage.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0abb271..8eb693f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import DailyEntry from '@/components/DailyEntry';
 import CalendarView from '@/components/CalendarView';
 import ReflectionsList from '@/components/ReflectionsList';
 import SettingsPage from '@/components/SettingsPage';
+import HomePage from '@/components/HomePage';
 import { db } from '@/lib/firebase';
 import { collection, addDoc, getDocs, updateDoc, query, where, doc } from 'firebase/firestore';
 import toast from 'react-hot-toast';
@@ -190,20 +191,29 @@ export default function Home() {
       <BottomNav activeTab={activeTab} onTabChange={setActiveTab} />
 
       {activeTab === 'home' && (
-        <DailyEntry
-          date={date}
-          onDateChange={setDate}
-          text={text}
-          onTextChange={setText}
-          prayFor={prayFor}
-          onPrayForChange={setPrayFor}
-          onSubmit={handleSubmit}
-          isEditing={!!editingPrayer}
+        <HomePage
+          prayers={prayers}
+          todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
+          onStartPraying={() => setActiveTab('journal')}
         />
       )}
 
       {activeTab === 'journal' && (
-        <CalendarView prayers={prayers} onDayClick={handleDateClick} />
+        <>
+          <DailyEntry
+            date={date}
+            onDateChange={setDate}
+            text={text}
+            onTextChange={setText}
+            prayFor={prayFor}
+            onPrayForChange={setPrayFor}
+            onSubmit={handleSubmit}
+            isEditing={!!editingPrayer}
+          />
+          <div className="max-w-md mx-auto p-4">
+            <CalendarView prayers={prayers} onDayClick={handleDateClick} />
+          </div>
+        </>
       )}
 
       {activeTab === 'reflections' && (
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
new file mode 100644
index 0000000..6e1d6a0
--- /dev/null
+++ b/src/components/HomePage.tsx
@@ -0,0 +1,97 @@
+'use client';
+
+interface Prayer {
+  id: string;
+  userId: string;
+  date: string;
+  text: string;
+  prayFor?: string;
+}
+
+interface HomePageProps {
+  prayers: Prayer[];
+  todayCount: number;
+  onStartPraying: () => void;
+}
+
+export default function HomePage({ prayers, todayCount, onStartPraying }: HomePageProps) {
+  const today = new Date().toISOString().split('T')[0];
+  const todayPrayers = prayers.filter(p => p.date === today);
+  const recentPrayers = prayers.slice(0, 5);
+  const totalPrayers = prayers.length;
+  const uniqueDays = new Set(prayers.map(p => p.date)).size;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-24">
+      {/* Header */}
+      <div className="max-w-md mx-auto mt-6 mb-8">
+        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Prayer Journal</h1>
+        <p className="text-slate-600 dark:text-slate-400">
+          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
+        </p>
+      </div>
+
+      {/* Today's Stats */}
+      <div className="max-w-md mx-auto mb-8 space-y-3">
+        <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+          <div className="text-sm font-semibold text-slate-600 dark:text-slate-400 mb-1">Today's Prayers</div>
+          <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{todayCount}</div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+            <div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Total Prayers</div>
+            <div className="text-2xl font-bold text-slate-900 dark:text-white">{totalPrayers}</div>
+          </div>
+          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+            <div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Days Prayed</div>
+            <div className="text-2xl font-bold text-slate-900 dark:text-white">{uniqueDays}</div>
+          </div>
+        </div>
+      </div>
+
+      {/* CTA Button */}
+      <div className="max-w-md mx-auto mb-8">
+        <button
+          onClick={onStartPraying}
+          className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 rounded-lg transition-all shadow-md hover:shadow-lg"
+        >
+          + New Prayer
+        </button>
+      </div>
+
+      {/* Recent Prayers */}
+      {recentPrayers.length > 0 && (
+        <div className="max-w-md mx-auto">
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Recent Prayers</h2>
+          <div className="space-y-3">
+            {recentPrayers.map((prayer) => (
+              <div key={prayer.id} className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+                {prayer.prayFor && (
+                  <div className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-1 uppercase tracking-wide">
+                    {prayer.prayFor}
+                  </div>
+                )}
+                <p className="text-sm text-slate-700 dark:text-slate-300 line-clamp-2">{prayer.text}</p>
+                <div className="text-xs text-slate-500 dark:text-slate-500 mt-2">
+                  {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {prayers.length === 0 && (
+        <div className="max-w-md mx-auto text-center py-12">
+          <div className="text-4xl mb-3">🙏</div>
+          <p className="text-slate-600 dark:text-slate-400 mb-4">Start your prayer journal today</p>
+          <p className="text-sm text-slate-500 dark:text-slate-500">
+            Create your first prayer entry and begin tracking your spiritual journey.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}