Create frontend/src/components/learning-paths/ProgressTracker.tsx

frontend/src/components/learning-paths/ProgressTracker.tsx

@@ -0,0 +1,71 @@
+// src/components/learning-paths/ProgressTracker.tsx
+import React from 'react';
+import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { useUser } from '../../contexts/UserContext';
+import { useLearning } from '../../contexts/LearningContext';
+
+const ProgressTracker = () => {
+  const { user } = useUser();
+  const { paths } = useLearning();
+
+  const totalModules = paths.reduce((acc, path) => 
+    acc + path.modules.length, 0
+  );
+
+  const completedModules = user.progress.completedModules.length;
+  const overallProgress = (completedModules / totalModules) * 100;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Learning Progress</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          <div>
+            <div className="flex justify-between text-sm text-gray-600 mb-2">
+              <span>Overall Progress</span>
+              <span>{Math.round(overallProgress)}%</span>
+            </div>
+            <Progress value={overallProgress} className="h-2" />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="bg-blue-50 p-4 rounded">
+              <div className="text-2xl font-bold text-blue-600">
+                {completedModules}
+              </div>
+              <div className="text-sm text-gray-600">Modules Completed</div>
+            </div>
+            <div className="bg-green-50 p-4 rounded">
+              <div className="text-2xl font-bold text-green-600">
+                {user.progress.learningStreak}
+              </div>
+              <div className="text-sm text-gray-600">Day Streak</div>
+            </div>
+          </div>
+
+          {user.progress.achievements.length > 0 && (
+            <div>
+              <h3 className="font-semibold mb-2">Recent Achievements</h3>
+              <div className="space-y-2">
+                {user.progress.achievements.slice(-3).map((achievement, idx) => (
+                  <div key={idx} className="flex items-center gap-2 text-sm">
+                    <span>🏆</span>
+                    <span>{achievement.name}</span>
+                    <span className="text-gray-500">
+                      {new Date(achievement.date).toLocaleDateString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ProgressTracker;