From 4f44182b59e51fa1ba7ff5f1b827d210eda333cb Mon Sep 17 00:00:00 2001
From: Avery Felts <averyfelts@Averys-MacBook-Air.local>
Date: Wed, 28 Jan 2026 08:41:55 -0700
Subject: [PATCH] Restructure mobile dashboard swipe flow into 4 logical pages

---
 src/components/Dashboard.tsx | 102 ++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index 48a9d8c..361dd05 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -240,21 +240,65 @@ export function Dashboard({ user }: DashboardProps) {
               {/* SECTION: Mobile Swipe Ecosystem */}
               <div className="swipe-container sm:space-y-12 sm:block">
 
-                {/* SLIDE 1: Daily Stats (Nicotine & Weed) */}
-                <div className="swipe-item sm:opacity-100 sm:animate-none">
+                {/* SLIDE 1: Mindset (Mood & Personalized Plan) */}
+                <div className="swipe-item space-y-4">
                   <div className="sm:hidden flex items-center justify-between mb-2 px-1">
-                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Daily Stats</h2>
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Daily Mindset</h2>
                   </div>
                   <div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
-                    <StatsCard key={`stats-nicotine-${refreshKey}`} usageData={usageData} substance="nicotine" />
-                    <StatsCard key={`stats-weed-${refreshKey}`} usageData={usageData} substance="weed" />
+                    <MoodTracker />
+                    <QuitPlanCard
+                      key={`quit-plan-${refreshKey}`}
+                      plan={preferences.quitPlan}
+                      onGeneratePlan={handleGeneratePlan}
+                      usageData={usageData}
+                    />
                   </div>
                 </div>
 
-                {/* SLIDE 2: Calendar & Inspiration */}
-                <div id="calendar-section" className="swipe-item sm:opacity-100 sm:animate-none">
+                {/* SLIDE 2: Stats & Recovery (Side-by-side Stats + Health) */}
+                <div className="swipe-item space-y-4">
                   <div className="sm:hidden flex items-center justify-between mb-2 px-1">
-                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Calendar</h2>
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Usage & Recovery</h2>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="grid grid-cols-2 gap-3 sm:gap-6">
+                      <StatsCard key={`stats-nicotine-${refreshKey}`} usageData={usageData} substance="nicotine" />
+                      <StatsCard key={`stats-weed-${refreshKey}`} usageData={usageData} substance="weed" />
+                    </div>
+                    <HealthTimelineCard
+                      key={`health-${refreshKey}`}
+                      usageData={usageData}
+                      preferences={preferences}
+                    />
+                  </div>
+                </div>
+
+                {/* SLIDE 3: Achievements & Money (Insights) */}
+                <div className="swipe-item space-y-4">
+                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Achievements & Savings</h2>
+                  </div>
+                  <div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
+                    <AchievementsCard
+                      key={`achievements-${refreshKey}`}
+                      achievements={achievements}
+                      substance={preferences.substance}
+                    />
+                    <SavingsTrackerCard
+                      key={`savings-${refreshKey}`}
+                      savingsConfig={savingsConfig}
+                      usageData={usageData}
+                      trackingStartDate={preferences.trackingStartDate}
+                      onSavingsConfigChange={handleSavingsConfigChange}
+                    />
+                  </div>
+                </div>
+
+                {/* SLIDE 4: Calendar */}
+                <div id="calendar-section" className="swipe-item">
+                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
+                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Usage Calendar</h2>
                   </div>
                   <UsageCalendar
                     key={refreshKey}
@@ -275,48 +319,6 @@ export function Dashboard({ user }: DashboardProps) {
                   />
                 </div>
 
-                {/* SLIDE 3: Mood & Savings */}
-                <div className="swipe-item sm:opacity-100 sm:animate-none space-y-4">
-                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
-                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Mood & Savings</h2>
-                  </div>
-                  <div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
-                    <MoodTracker />
-                    <SavingsTrackerCard
-                      key={`savings-${refreshKey}`}
-                      savingsConfig={savingsConfig}
-                      usageData={usageData}
-                      trackingStartDate={preferences.trackingStartDate}
-                      onSavingsConfigChange={handleSavingsConfigChange}
-                    />
-                  </div>
-                </div>
-
-                {/* SLIDE 4: Journey & Plan */}
-                <div id="journey-section" className="swipe-item sm:opacity-100 sm:animate-none">
-                  <div className="sm:hidden flex items-center justify-between mb-2 px-1">
-                    <h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Your Journey</h2>
-                  </div>
-                  <div className="grid sm:grid-cols-3 gap-6 space-y-4 sm:space-y-0">
-                    <HealthTimelineCard
-                      key={`health-${refreshKey}`}
-                      usageData={usageData}
-                      preferences={preferences}
-                    />
-                    <AchievementsCard
-                      key={`achievements-${refreshKey}`}
-                      achievements={achievements}
-                      substance={preferences.substance}
-                    />
-                    <QuitPlanCard
-                      key={`quit-plan-${refreshKey}`}
-                      plan={preferences.quitPlan}
-                      onGeneratePlan={handleGeneratePlan}
-                      usageData={usageData}
-                    />
-                  </div>
-                </div>
-
               </div>
             </div>
           </>