averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure mobile dashboard swipe flow into 4 logical pages

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 08:41:55 -07:00
parent 7f17028f45
commit 4f44182b59
1 changed files with 52 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/Dashboard.tsx
View File

@ -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>
</>