Widen all layout panels and add Recharts to Dashboard

Author: Sarika-stack23

frontend/src/components/Dashboard/ProgressDashboard.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useAuth } from '../../context/AuthContext';
 import { Flame, Trophy, CheckCircle, BookOpen, Star } from 'lucide-react';
-
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 interface UserStats {
   streak: number;
   total_solved: number;
@@ -50,8 +50,19 @@ export const ProgressDashboard: React.FC = () => {
 
   if (!stats) return <div style={{ padding: '2rem', textAlign: 'center' }}>Loading dashboard...</div>;
 
+  const chartData = Array.from({ length: 14 }).map((_, i) => {
+    const d = new Date();
+    d.setDate(d.getDate() - (13 - i));
+    const dateStr = d.toISOString().split('T')[0];
+    const shortDate = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    return {
+      date: shortDate,
+      solved: stats.activity_map[dateStr] || 0
+    };
+  });
+
   return (
-    <div className="main-content" style={{ padding: '2rem', maxWidth: '900px', margin: '0 auto', width: '100%' }}>
+    <div className="main-content" style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto', width: '100%' }}>
       <h2 style={{ marginBottom: '2rem' }}>Learning Progress</h2>
 
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem', marginBottom: '2rem' }}>
@@ -131,6 +142,24 @@ export const ProgressDashboard: React.FC = () => {
           </ul>
         </div>
       </div>
+
+      <div className="glass" style={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+        <h3 style={{ marginBottom: '1.5rem' }}>Problems Solved (Last 14 Days)</h3>
+        <div style={{ width: '100%', height: 300 }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={chartData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.1)" />
+              <XAxis dataKey="date" stroke="rgba(255,255,255,0.5)" />
+              <YAxis stroke="rgba(255,255,255,0.5)" allowDecimals={false} />
+              <Tooltip 
+                contentStyle={{ backgroundColor: 'hsl(var(--bg-primary))', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px' }}
+                itemStyle={{ color: 'hsl(var(--accent-primary))' }}
+              />
+              <Line type="monotone" dataKey="solved" name="Questions Solved" stroke="hsl(var(--accent-primary))" strokeWidth={3} dot={{ r: 4, fill: 'hsl(var(--accent-primary))' }} activeDot={{ r: 8 }} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
     </div>
   );
 };

frontend/src/components/Graphing/GraphPanel.tsx

@@ -40,7 +40,7 @@ export const GraphPanel: React.FC = () => {
   };
 
   return (
-    <div className="main-content" style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto', width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <div className="main-content" style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto', width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
       <h2 style={{ marginBottom: '1.5rem' }}>📈 Interactive Graphing</h2>
 
       <div className="glass" style={{ padding: '1.5rem', marginBottom: '1.5rem', display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>

frontend/src/components/Quiz/NCERTQuizPanel.tsx

@@ -231,7 +231,7 @@ export const NCERTQuizPanel: React.FC = () => {
   const displayQuestion = state.currentQuestionRaw.split(/Answer:/i)[0].trim();
 
   return (
-    <div className="main-content" style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto', width: '100%', overflowY: 'auto', height: '100vh', boxSizing: 'border-box' }}>
+    <div className="main-content" style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto', width: '100%', overflowY: 'auto', height: '100vh', boxSizing: 'border-box' }}>
       <h2>📚 NCERT Practice</h2>
       <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>Select a class, chapter, and exercise to practice NCERT questions.</p>