+ );
+}
diff --git a/apps/emotistream-web/src/app/(app)/progress/page.tsx b/apps/emotistream-web/src/app/(app)/progress/page.tsx
new file mode 100644
index 00000000..211b0355
--- /dev/null
+++ b/apps/emotistream-web/src/app/(app)/progress/page.tsx
@@ -0,0 +1,297 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { TrendingUp, Target, Activity, Award, AlertCircle, RefreshCw } from 'lucide-react';
+import { useAuthStore } from '@/lib/stores/auth-store';
+import { getProgress, getConvergence, getRewardTimeline, type ProgressData, type ConvergenceData, type RewardTimelinePoint } from '@/lib/api/progress';
+
+export default function ProgressPage() {
+ const { user } = useAuthStore();
+ const [progress, setProgress] = useState(null);
+ const [convergence, setConvergence] = useState(null);
+ const [timeline, setTimeline] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const fetchData = async () => {
+ if (!user?.id) {
+ console.log('No user ID available');
+ setLoading(false);
+ return;
+ }
+
+ console.log('Fetching progress for user:', user.id);
+ setLoading(true);
+ setError(null);
+
+ try {
+ const [progressData, convergenceData, rewardData] = await Promise.all([
+ getProgress(user.id),
+ getConvergence(user.id),
+ getRewardTimeline(user.id),
+ ]);
+
+ console.log('Progress data received:', progressData);
+ setProgress(progressData);
+ setConvergence(convergenceData);
+ setTimeline(rewardData.timeline);
+ } catch (err) {
+ console.error('Failed to fetch progress:', err);
+ setError('Failed to load progress data. Make sure you have some feedback history.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchData();
+ }, [user?.id]);
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+ Learning Progress
+
+
+
+
+
+
+
+
No Progress Data Yet
+
+ Start watching content and providing feedback to see your learning progress here.
+ Go to the Dashboard to analyze your emotions and get recommendations!
+
+ Understand Your Emotions,
+
+ Transform Your Wellbeing
+
+
+
+ EmotiStream uses advanced AI to detect your emotions and provide personalized recommendations
+ for music, activities, and content that match your emotional state.
+
+
+
+
+ Start Your Journey
+
+
+
+ Sign In
+
+
+
+ {/* Features Grid */}
+
+
+
+
+
+
AI Emotion Detection
+
+ Advanced algorithms analyze your text and expressions to understand your emotional state
+
+
+
+
+
+
+
+
Personalized Recommendations
+
+ Get curated content, music, and activities tailored to your current emotional needs
+
+
+
+
+
+
+
+
Track Your Progress
+
+ Monitor your emotional patterns over time and see how you grow and improve
+