303 lines
11 KiB
TypeScript
303 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import api from '@/lib/api';
|
|
import { useAuth } from '@/components/auth/AuthProvider';
|
|
import { PlayIcon, ClockIcon, FlameIcon, StarIcon, ActivityIcon } from '@/components/ui/Icons';
|
|
import Link from 'next/link';
|
|
|
|
interface Routine {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
icon?: string;
|
|
}
|
|
|
|
interface ActiveSession {
|
|
session: {
|
|
id: string;
|
|
routine_id: string;
|
|
status: string;
|
|
current_step_index: number;
|
|
};
|
|
routine: {
|
|
id: string;
|
|
name: string;
|
|
icon?: string;
|
|
};
|
|
current_step: {
|
|
id: string;
|
|
name: string;
|
|
step_type: string;
|
|
duration_minutes?: number;
|
|
} | null;
|
|
}
|
|
|
|
interface WeeklySummary {
|
|
total_completed: number;
|
|
total_time_minutes: number;
|
|
routines_started: number;
|
|
routines: {
|
|
routine_id: string;
|
|
name: string;
|
|
completed_this_week: number;
|
|
}[];
|
|
}
|
|
|
|
interface Streak {
|
|
routine_id: string;
|
|
routine_name: string;
|
|
current_streak: number;
|
|
longest_streak: number;
|
|
last_completed_date?: string;
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { user } = useAuth();
|
|
const router = useRouter();
|
|
const [routines, setRoutines] = useState<Routine[]>([]);
|
|
const [activeSession, setActiveSession] = useState<ActiveSession | null>(null);
|
|
const [weeklySummary, setWeeklySummary] = useState<WeeklySummary | null>(null);
|
|
const [streaks, setStreaks] = useState<Streak[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const [routinesData, activeData, summaryData, streaksData] = await Promise.all([
|
|
api.routines.list().catch(() => []),
|
|
api.sessions.getActive().catch(() => null),
|
|
api.stats.getWeeklySummary().catch(() => null),
|
|
api.stats.getStreaks().catch(() => []),
|
|
]);
|
|
setRoutines(routinesData);
|
|
setActiveSession(activeData);
|
|
setWeeklySummary(summaryData);
|
|
setStreaks(streaksData);
|
|
} catch (err) {
|
|
console.error('Failed to fetch dashboard data:', err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const handleStartRoutine = (routineId: string) => {
|
|
// If there's an active session, go straight to run
|
|
if (activeSession) {
|
|
router.push(`/dashboard/routines/${activeSession.routine.id}/run`);
|
|
} else {
|
|
router.push(`/dashboard/routines/${routineId}/launch`);
|
|
}
|
|
};
|
|
|
|
const handleResumeSession = () => {
|
|
if (activeSession) {
|
|
router.push(`/dashboard/routines/${activeSession.routine.id}/run`);
|
|
}
|
|
};
|
|
|
|
const getGreeting = () => {
|
|
const hour = new Date().getHours();
|
|
if (hour < 12) return 'Good morning';
|
|
if (hour < 17) return 'Good afternoon';
|
|
return 'Good evening';
|
|
};
|
|
|
|
const formatTime = (minutes: number) => {
|
|
const m = Math.max(0, minutes);
|
|
if (m < 60) return `${m}m`;
|
|
const hours = Math.floor(m / 60);
|
|
const mins = m % 60;
|
|
return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
|
|
};
|
|
|
|
// Find routines with broken streaks for "never miss twice" recovery
|
|
const getRecoveryRoutines = () => {
|
|
const today = new Date();
|
|
return streaks.filter(s => {
|
|
if (!s.last_completed_date || s.current_streak > 0) return false;
|
|
const last = new Date(s.last_completed_date);
|
|
const daysSince = Math.floor((today.getTime() - last.getTime()) / (1000 * 60 * 60 * 24));
|
|
return daysSince >= 2 && daysSince <= 14;
|
|
});
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[50vh]">
|
|
<div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const recoveryRoutines = getRecoveryRoutines();
|
|
|
|
return (
|
|
<div className="p-4 space-y-6">
|
|
{/* Active Session Banner */}
|
|
{activeSession && activeSession.session.status === 'active' && (
|
|
<div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-4 text-white ring-2 ring-indigo-400/50 ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-950 animate-gentle-pulse">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-white/80 text-sm">Continue where you left off</p>
|
|
<h2 className="text-xl font-bold">{activeSession.routine.name}</h2>
|
|
<p className="text-white/80 text-sm mt-1">
|
|
Step {activeSession.session.current_step_index + 1}: {activeSession.current_step?.name}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleResumeSession}
|
|
className="bg-white text-indigo-600 px-4 py-2 rounded-lg font-semibold"
|
|
>
|
|
Resume
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">{getGreeting()}, {user?.username}!</h1>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-1">Let's build some great habits today.</p>
|
|
</div>
|
|
|
|
{/* "Never miss twice" Recovery Cards */}
|
|
{recoveryRoutines.map(recovery => {
|
|
const routine = routines.find(r => r.id === recovery.routine_id);
|
|
if (!routine) return null;
|
|
return (
|
|
<div key={recovery.routine_id} className="bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-2xl p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-amber-800 dark:text-amber-200 text-sm font-medium mb-1">Welcome back</p>
|
|
<p className="text-amber-700 dark:text-amber-300 text-sm">
|
|
It's been a couple days since {routine.icon} {routine.name}. That's completely okay — picking it back up today is what matters most.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => handleStartRoutine(routine.id)}
|
|
className="bg-amber-600 text-white px-4 py-2 rounded-lg font-medium text-sm shrink-0 ml-3"
|
|
>
|
|
Start
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Weekly Stats — identity-based language */}
|
|
{weeklySummary && weeklySummary.total_completed > 0 && (
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
|
|
<div className="flex items-center gap-2 text-indigo-600 mb-1">
|
|
<StarIcon size={18} />
|
|
<span className="text-xs font-medium">Done</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{weeklySummary.total_completed}</p>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">this week</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
|
|
<div className="flex items-center gap-2 text-purple-600 mb-1">
|
|
<ClockIcon size={18} />
|
|
<span className="text-xs font-medium">Invested</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{formatTime(weeklySummary.total_time_minutes)}</p>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">in yourself</p>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm">
|
|
<div className="flex items-center gap-2 text-pink-600 mb-1">
|
|
<ActivityIcon size={18} />
|
|
<span className="text-xs font-medium">Active</span>
|
|
</div>
|
|
<p className="text-2xl font-bold text-gray-900 dark:text-gray-100">{weeklySummary.routines_started}</p>
|
|
<p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">routines</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Start Routines */}
|
|
<div>
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Your Routines</h2>
|
|
|
|
{routines.length === 0 ? (
|
|
<div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
|
|
<div className="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<FlameIcon className="text-gray-400 dark:text-gray-500" size={32} />
|
|
</div>
|
|
<h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">No routines yet</h3>
|
|
<p className="text-gray-500 dark:text-gray-400 text-sm mb-4">Create your first routine to get started</p>
|
|
<Link
|
|
href="/dashboard/routines/new"
|
|
className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium"
|
|
>
|
|
Create Routine
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{routines.map((routine) => {
|
|
const streak = streaks.find(s => s.routine_id === routine.id);
|
|
return (
|
|
<div
|
|
key={routine.id}
|
|
className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-indigo-100 to-pink-100 dark:from-indigo-900/50 dark:to-pink-900/50 rounded-xl flex items-center justify-center">
|
|
<span className="text-2xl">{routine.icon || '✨'}</span>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 dark:text-gray-100">{routine.name}</h3>
|
|
{streak && streak.current_streak > 0 ? (
|
|
<p className="text-sm text-orange-500 flex items-center gap-1">
|
|
<FlameIcon size={14} />
|
|
{streak.current_streak} day{streak.current_streak !== 1 ? 's' : ''}
|
|
</p>
|
|
) : routine.description ? (
|
|
<p className="text-gray-500 dark:text-gray-400 text-sm">{routine.description}</p>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => handleStartRoutine(routine.id)}
|
|
className="bg-indigo-600 text-white p-3 rounded-full"
|
|
>
|
|
<PlayIcon size={20} />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Templates CTA */}
|
|
<div className="bg-gradient-to-r from-pink-500 to-rose-500 rounded-2xl p-4 text-white">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-semibold">Need inspiration?</h3>
|
|
<p className="text-white/80 text-sm">Browse pre-made routines</p>
|
|
</div>
|
|
<Link
|
|
href="/dashboard/templates"
|
|
className="bg-white text-pink-600 px-4 py-2 rounded-lg font-medium"
|
|
>
|
|
Browse
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 px-4 py-3 rounded-lg text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|