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

fix: precise timestamp tracking for health timeline

Browse Source
This commit is contained in:
Avery Felts 2026-01-25 11:16:32 -07:00
parent 4ad4bd0884
commit f13bd09bd4
3 changed files with 178 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Dashboard.tsx
View File

@ -143,11 +143,21 @@ export function Dashboard({ user }: DashboardProps) {
if (count > 0) {
const today = new Date().toISOString().split('T')[0];
const now = new Date().toISOString();
await saveUsageEntryAsync({
date: today,
count,
substance,
});
// Update preferences with last usage time
const updatedPrefs = {
...preferences,
[substance === 'nicotine' ? 'lastNicotineUsageTime' : 'lastWeedUsageTime']: now,
};
await savePreferencesAsync(updatedPrefs);
setPreferences(updatedPrefs);
}
setShowUsagePrompt(false);
@ -237,7 +247,7 @@ export function Dashboard({ user }: DashboardProps) {
<HealthTimelineCard
key={`health-${refreshKey}`}
usageData={usageData}
substance={preferences.substance}
preferences={preferences}
/>
</div>
</div>

210
src/components/HealthTimelineCard.tsx
View File

@ -1,8 +1,8 @@
'use client';
import { useMemo } from 'react';
import { useMemo, useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { HEALTH_MILESTONES, getMinutesSinceQuit, UsageEntry } from '@/lib/storage';
import { HEALTH_MILESTONES, getMinutesSinceQuit, UsageEntry, UserPreferences } from '@/lib/storage';
import { useTheme } from '@/lib/theme-context';
import {
Heart,
@ -15,11 +15,12 @@ import {
HeartHandshake,
CheckCircle2,
Clock,
Cigarette,
Leaf
} from 'lucide-react';
interface HealthTimelineCardProps {
usageData: UsageEntry[];
substance: 'nicotine' | 'weed';
}
const iconMap: Record<string, React.ElementType> = {
@ -48,13 +49,13 @@ function formatTimeRemaining(currentMinutes: number, targetMinutes: number): str
return `${formatDuration(remaining)} to go`;
}
export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardProps) {
const { theme } = useTheme();
const minutesSinceQuit = useMemo(() => {
return getMinutesSinceQuit(usageData, substance);
}, [usageData, substance]);
interface TimelineColumnProps {
substance: 'nicotine' | 'weed';
minutesSinceQuit: number;
theme: 'light' | 'dark';
}
function TimelineColumn({ substance, minutesSinceQuit, theme }: TimelineColumnProps) {
const currentMilestoneIndex = useMemo(() => {
for (let i = HEALTH_MILESTONES.length - 1; i >= 0; i--) {
if (minutesSinceQuit >= HEALTH_MILESTONES[i].timeMinutes) {
@ -83,110 +84,133 @@ export function HealthTimelineCard({ usageData, substance }: HealthTimelineCardP
return Math.min(100, Math.max(0, (progress / range) * 100));
}, [minutesSinceQuit, nextMilestone, currentMilestoneIndex]);
const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
const SubstanceIcon = substance === 'nicotine' ? Cigarette : Leaf;
const accentColor = substance === 'nicotine' ? 'red' : 'green';
const accentColorClass = substance === 'nicotine' ? 'text-red-500' : 'text-green-500';
const bgAccentClass = substance === 'nicotine' ? 'bg-red-500' : 'bg-green-500';
return (
<div className="flex flex-col h-full bg-black/5 dark:bg-white/5 rounded-xl border border-white/5 overflow-hidden">
{/* Header */}
<div className={`p-3 border-b border-white/5 flex items-center gap-2 ${theme === 'light' ? 'bg-white/50' : 'bg-black/20'}`}>
<SubstanceIcon className={`h-4 w-4 ${accentColorClass}`} />
<span className={`text-sm font-semibold ${theme === 'light' ? 'text-slate-900' : 'text-white'}`}>
{substanceLabel}
</span>
<span className="ml-auto text-xs opacity-70 font-medium">
{formatDuration(Math.floor(minutesSinceQuit))} free
</span>
</div>
<div className="p-3 flex-1 overflow-y-auto min-h-0 space-y-3 custom-scrollbar">
{/* Progress to next milestone */}
{nextMilestone && (
<div className={`p-3 rounded-lg border ${theme === 'light' ? 'bg-white border-slate-200 shadow-sm' : 'bg-white/5 border-white/10'}`}>
<div className="flex items-center justify-between mb-2">
<span className={`text-xs font-medium opacity-80 ${theme === 'light' ? 'text-slate-700' : 'text-white'}`}>Next Up</span>
<span className={`text-xs font-bold ${accentColorClass}`}>
{formatTimeRemaining(Math.floor(minutesSinceQuit), nextMilestone.timeMinutes)}
</span>
</div>
<div className="w-full bg-slate-200 dark:bg-white/10 rounded-full h-1.5 overflow-hidden">
<div
className={`h-1.5 rounded-full transition-all duration-700 ${bgAccentClass}`}
style={{ width: `${progressToNext}%`, opacity: 0.8 }}
/>
</div>
<p className={`text-xs mt-1.5 opacity-70 truncate ${theme === 'light' ? 'text-slate-600' : 'text-white/70'}`}>
{nextMilestone.title}
</p>
</div>
)}
{/* Timeline Items */}
{HEALTH_MILESTONES.map((milestone, index) => {
const isAchieved = minutesSinceQuit >= milestone.timeMinutes;
const isCurrent = index === currentMilestoneIndex;
const Icon = iconMap[milestone.icon] || Heart;
return (
<div
key={milestone.id}
className={`flex items-start gap-2.5 p-2 rounded-lg transition-all ${isAchieved
? (theme === 'light' ? 'bg-slate-100/50' : 'bg-white/5')
: 'opacity-50 grayscale'
} ${isCurrent ? `ring-1 ring-${accentColor}-500/50 bg-${accentColor}-500/5` : ''}`}
>
{/* Icon */}
<div
className={`p-1.5 rounded-full shrink-0 mt-0.5 ${isAchieved
? (theme === 'light' ? 'bg-white text-slate-700 shadow-sm' : 'bg-white/10 text-white')
: 'bg-black/5 text-black/30 dark:bg-white/5 dark:text-white/30'
}`}
>
{isAchieved ? <CheckCircle2 className="h-3 w-3" /> : <Icon className="h-3 w-3" />}
</div>
{/* Content */}
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-1">
<p className={`text-xs font-semibold ${theme === 'light' ? 'text-slate-900' : 'text-white'}`}>
{milestone.title}
</p>
</div>
<p className={`text-[10px] mt-0.5 leading-tight ${theme === 'light' ? 'text-slate-600' : 'text-white/50'}`}>
{milestone.description}
</p>
</div>
</div>
);
})}
</div>
</div>
);
}
export function HealthTimelineCard({ usageData, preferences }: HealthTimelineCardProps & { preferences?: UserPreferences | null }) {
const { theme } = useTheme();
const [now, setNow] = useState(Date.now());
useEffect(() => {
const interval = setInterval(() => {
setNow(Date.now());
}, 1000); // Update every second
return () => clearInterval(interval);
}, []);
const nicotineMinutes = useMemo(() => getMinutesSinceQuit(usageData, 'nicotine', true, preferences), [usageData, preferences, now]);
const weedMinutes = useMemo(() => getMinutesSinceQuit(usageData, 'weed', true, preferences), [usageData, preferences, now]);
const cardBackground =
theme === 'light'
? 'linear-gradient(135deg, rgba(236, 253, 245, 0.9) 0%, rgba(209, 250, 229, 0.8) 100%)'
: 'linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(6, 182, 212, 0.15) 100%)';
const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
return (
<Card
className="backdrop-blur-xl border border-teal-500/40 shadow-xl drop-shadow-lg hover-lift transition-all duration-300 overflow-hidden relative"
className="backdrop-blur-xl border border-teal-500/40 shadow-xl drop-shadow-lg hover-lift transition-all duration-300 overflow-hidden relative h-[500px] flex flex-col"
style={{ background: cardBackground }}
>
<div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-br from-teal-500/10 to-transparent rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none" />
<CardHeader className="relative z-10 pb-2">
<CardHeader className="relative z-10 pb-4 shrink-0">
<CardTitle className={`flex items-center gap-2 ${theme === 'light' ? 'text-teal-900' : 'text-white'} text-shadow-sm`}>
<Heart className="h-5 w-5 text-teal-500" />
<span>Health Recovery</span>
</CardTitle>
<p className={`text-sm ${theme === 'light' ? 'text-teal-700' : 'text-white/70'}`}>
{substanceLabel}-free for {formatDuration(minutesSinceQuit)}
Track your body&apos;s healing process for each substance independently.
</p>
</CardHeader>
<CardContent className="relative z-10">
{/* Progress to next milestone */}
{nextMilestone && (
<div className="mb-4 p-3 bg-teal-500/10 rounded-xl border border-teal-500/20">
<div className="flex items-center justify-between mb-2">
<span className={`text-sm ${theme === 'light' ? 'text-teal-900' : 'text-white/80'}`}>Next milestone</span>
<span className="text-sm text-teal-600 font-medium">
{formatTimeRemaining(minutesSinceQuit, nextMilestone.timeMinutes)}
</span>
</div>
<div className="w-full bg-white/10 rounded-full h-2 overflow-hidden">
<div
className="bg-gradient-to-r from-teal-400 to-cyan-400 h-2 rounded-full transition-all duration-700"
style={{ width: `${progressToNext}%` }}
/>
</div>
<p className={`text-xs ${theme === 'light' ? 'text-teal-700' : 'text-white/60'} mt-2`}>{nextMilestone.title}</p>
</div>
)}
{/* Timeline */}
<div className="space-y-3 max-h-[300px] overflow-y-auto pr-2">
{HEALTH_MILESTONES.map((milestone, index) => {
const isAchieved = minutesSinceQuit >= milestone.timeMinutes;
const isCurrent = index === currentMilestoneIndex;
const Icon = iconMap[milestone.icon] || Heart;
return (
<div
key={milestone.id}
className={`flex items-start gap-3 p-2 rounded-lg transition-all ${isAchieved
? 'bg-teal-500/20'
: 'bg-black/5 opacity-60 dark:bg-white/5'
} ${isCurrent ? 'ring-2 ring-teal-500/50' : ''}`}
>
{/* Icon */}
<div
className={`p-2 rounded-full shrink-0 ${isAchieved
? 'bg-teal-500/20 text-teal-600 dark:text-teal-300'
: 'bg-black/5 text-black/40 dark:bg-white/10 dark:text-white/40'
}`}
>
{isAchieved ? (
<CheckCircle2 className="h-4 w-4" />
) : (
<Icon className="h-4 w-4" />
)}
</div>
{/* Content */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<p className={`text-sm font-medium ${isAchieved
? (theme === 'light' ? 'text-teal-900' : 'text-white')
: (theme === 'light' ? 'text-teal-900/60' : 'text-white/60')
}`}
>
{milestone.title}
</p>
{isCurrent && (
<span className="text-[10px] bg-teal-500 text-white px-1.5 py-0.5 rounded-full">
Current
</span>
)}
</div>
<p className="text-xs text-white/50 mt-0.5">
{milestone.description}
</p>
<div className="flex items-center gap-1 mt-1">
<Clock className={`h-3 w-3 ${theme === 'light' ? 'text-teal-700/40' : 'text-white/40'}`} />
<span className={`text-[10px] ${theme === 'light' ? 'text-teal-700/40' : 'text-white/40'}`}>
{formatDuration(milestone.timeMinutes)}
</span>
</div>
</div>
</div>
);
})}
<CardContent className="relative z-10 flex-1 min-h-0 pb-6 pt-0">
<div className="grid grid-cols-2 gap-4 h-full">
<TimelineColumn substance="nicotine" minutesSinceQuit={nicotineMinutes} theme={theme} />
<TimelineColumn substance="weed" minutesSinceQuit={weedMinutes} theme={theme} />
</div>
</CardContent>
</Card >
</Card>
);
}

53
src/lib/storage.ts
View File

@ -16,6 +16,8 @@ export interface UserPreferences {
userName: string | null;
userAge: number | null;
religion: 'christian' | 'muslim' | 'jewish' | 'secular' | null;
lastNicotineUsageTime?: string | null; // ISO timestamp of last usage
lastWeedUsageTime?: string | null; // ISO timestamp of last usage
}
export interface QuitPlan {
@ -395,8 +397,51 @@ export function calculateTotalSaved(
export function getMinutesSinceQuit(
usageData: UsageEntry[],
substance: 'nicotine' | 'weed'
substance: 'nicotine' | 'weed',
precise: boolean = false,
preferences?: UserPreferences | null
): number {
// Try to use precise timestamp from preferences first
if (preferences) {
const lastUsageTimeStr = substance === 'nicotine'
? preferences.lastNicotineUsageTime
: preferences.lastWeedUsageTime;
if (lastUsageTimeStr) {
const now = new Date();
const lastUsageTime = new Date(lastUsageTimeStr);
const diffMs = now.getTime() - lastUsageTime.getTime();
const minutes = Math.max(0, diffMs / (1000 * 60));
// Sanity check: if the timestamp is OLDER than the last recorded date in usageData,
// it might mean the user manually added a later date in the calendar without a timestamp.
// In that case, we should fall back to the date-based logic.
const substanceData = usageData
.filter((e) => e.substance === substance && e.count > 0)
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
if (substanceData.length > 0) {
const lastDateStr = substanceData[0].date;
const lastDate = new Date(lastDateStr);
// Set lastDate to end of day to compare with timestamp
lastDate.setHours(23, 59, 59, 999);
// If the timestamp is essentially on the same day or later than the last recorded date, rely on the timestamp
// (We allow the timestamp to be earlier in the same day, that's the whole point)
const lastDateStart = new Date(lastDateStr);
lastDateStart.setHours(0, 0, 0, 0);
if (lastUsageTime >= lastDateStart) {
return precise ? minutes : Math.floor(minutes);
}
} else {
// No usage data but we have a timestamp? Trust the timestamp.
return precise ? minutes : Math.floor(minutes);
}
}
}
// Find the last usage date for this substance
const substanceData = usageData
.filter((e) => e.substance === substance && e.count > 0)
@ -411,7 +456,7 @@ export function getMinutesSinceQuit(
const todayStr = now.toISOString().split('T')[0];
const lastUsageDateStr = substanceData[0].date;
// If the last usage was today, reset to 0 (just used)
// If the last usage was today, reset to 0 (just used, unknown time)
if (lastUsageDateStr === todayStr) {
return 0;
}
@ -421,7 +466,9 @@ export function getMinutesSinceQuit(
lastUsageDate.setHours(23, 59, 59, 999);
const diffMs = now.getTime() - lastUsageDate.getTime();
return Math.max(0, Math.floor(diffMs / (1000 * 60)));
const minutes = Math.max(0, diffMs / (1000 * 60));
return precise ? minutes : Math.floor(minutes);
}
export function checkBadgeEligibility(