Upload 7 files

Entities/Study_Material/Problems.txt

@@ -0,0 +1,95 @@
+{
+  "name": "Problem",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "Problem title"
+    },
+    "question": {
+      "type": "string",
+      "description": "The chemistry problem statement"
+    },
+    "topic": {
+      "type": "string",
+      "enum": [
+        "organic_chemistry",
+        "inorganic_chemistry",
+        "physical_chemistry",
+        "analytical_chemistry",
+        "biochemistry",
+        "quantum_chemistry",
+        "materials_science"
+      ],
+      "description": "Chemistry topic category"
+    },
+    "difficulty": {
+      "type": "string",
+      "enum": [
+        "beginner",
+        "intermediate",
+        "advanced"
+      ],
+      "description": "Problem difficulty level"
+    },
+    "solution": {
+      "type": "string",
+      "description": "Step-by-step solution explanation"
+    },
+    "molecular_formula": {
+      "type": "string",
+      "description": "Chemical formula if applicable"
+    },
+    "molecular_structure": {
+      "type": "string",
+      "description": "3D molecular structure data for visualization"
+    },
+    "concepts": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "Key chemistry concepts covered"
+    },
+    "hints": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "description": "Progressive hints for problem solving"
+    }
+  },
+  "required": [
+    "title",
+    "question",
+    "topic",
+    "difficulty",
+    "solution"
+  ],
+  "rls": {
+    "read": {
+      "$or": [
+        {
+          "created_by": "{{user.email}}"
+        },
+        {
+          "user_condition": {
+            "role": "admin"
+          }
+        }
+      ]
+    },
+    "write": {
+      "$or": [
+        {
+          "created_by": "{{user.email}}"
+        },
+        {
+          "user_condition": {
+            "role": "admin"
+          }
+        }
+      ]
+    }
+  }
+}

Entities/Study_Material/Study_Sessions.txt

@@ -0,0 +1,69 @@
+{
+  "name": "StudySession",
+  "type": "object",
+  "properties": {
+    "user_email": {
+      "type": "string",
+      "description": "Email of the student"
+    },
+    "problem_id": {
+      "type": "string",
+      "description": "ID of the problem attempted"
+    },
+    "completed": {
+      "type": "boolean",
+      "default": false,
+      "description": "Whether the problem was successfully solved"
+    },
+    "time_spent": {
+      "type": "number",
+      "description": "Time spent on problem in minutes"
+    },
+    "hints_used": {
+      "type": "number",
+      "default": 0,
+      "description": "Number of hints the student used"
+    },
+    "score": {
+      "type": "number",
+      "minimum": 0,
+      "maximum": 100,
+      "description": "Score achieved on the problem"
+    },
+    "session_date": {
+      "type": "string",
+      "format": "date",
+      "description": "Date of the study session"
+    }
+  },
+  "required": [
+    "user_email",
+    "problem_id"
+  ],
+  "rls": {
+    "read": {
+      "$or": [
+        {
+          "user_email": "{{user.email}}"
+        },
+        {
+          "user_condition": {
+            "role": "admin"
+          }
+        }
+      ]
+    },
+    "write": {
+      "$or": [
+        {
+          "user_email": "{{user.email}}"
+        },
+        {
+          "user_condition": {
+            "role": "admin"
+          }
+        }
+      ]
+    }
+  }
+}

Layouts/Layouts.txt

@@ -0,0 +1,224 @@
+import React, { useState, useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { createPageUrl } from "@/utils";
+import { 
+  BookOpen, 
+  Brain, 
+  Target, 
+  BarChart3, 
+  Atom,
+  User,
+  Menu,
+  X,
+  Sparkles,
+  Trophy
+} from "lucide-react";
+import { User as UserEntity } from "@/entities/User";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarFooter,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+
+const navigationItems = [
+  {
+    title: "Dashboard",
+    url: createPageUrl("Dashboard"),
+    icon: BarChart3,
+    description: "Overview & Progress"
+  },
+  {
+    title: "Practice",
+    url: createPageUrl("Practice"),
+    icon: Brain,
+    description: "AI-Generated Problems"
+  },
+  {
+    title: "Molecular Viewer",
+    url: createPageUrl("MolecularViewer"),
+    icon: Atom,
+    description: "3D Visualizations"
+  },
+  {
+    title: "Study Materials",
+    url: createPageUrl("StudyMaterials"),
+    icon: BookOpen,
+    description: "Custom Learning Resources"
+  }
+];
+
+export default function Layout({ children, currentPageName }) {
+  const location = useLocation();
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  const loadUser = async () => {
+    try {
+      const userData = await UserEntity.me();
+      setUser(userData);
+    } catch (error) {
+      console.log("User not logged in");
+    }
+    setLoading(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center">
+        <div className="flex items-center gap-3">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <span className="text-slate-600 font-medium">Loading ChemTutor AI...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <SidebarProvider>
+      <div className="min-h-screen flex w-full bg-gradient-to-br from-slate-50 to-blue-50">
+        <Sidebar className="border-r border-slate-200 bg-white/80 backdrop-blur-sm">
+          <SidebarHeader className="border-b border-slate-200 p-6">
+            <div className="flex items-center gap-3">
+              <div className="relative w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl flex items-center justify-center shadow-lg">
+                <Atom className="w-6 h-6 text-white" />
+                <div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full flex items-center justify-center">
+                  <Sparkles className="w-2.5 h-2.5 text-white" />
+                </div>
+              </div>
+              <div>
+                <h2 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-indigo-700 bg-clip-text text-transparent">
+                  ChemTutor AI
+                </h2>
+                <p className="text-sm text-slate-500">Intelligent Chemistry Learning</p>
+              </div>
+            </div>
+          </SidebarHeader>
+          
+          <SidebarContent className="p-4">
+            <SidebarGroup>
+              <SidebarGroupLabel className="text-xs font-semibold text-slate-500 uppercase tracking-wider px-3 py-2">
+                Learning Hub
+              </SidebarGroupLabel>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {navigationItems.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton 
+                        asChild 
+                        className={`group hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 rounded-xl mb-1 ${
+                          location.pathname === item.url 
+                            ? 'bg-gradient-to-r from-blue-50 to-indigo-50 text-blue-700 shadow-sm border border-blue-100' 
+                            : ''
+                        }`}
+                      >
+                        <Link to={item.url} className="flex items-center gap-4 px-4 py-3">
+                          <item.icon className="w-5 h-5 group-hover:scale-110 transition-transform duration-200" />
+                          <div>
+                            <span className="font-semibold">{item.title}</span>
+                            <p className="text-xs text-slate-500 group-hover:text-blue-600 transition-colors">
+                              {item.description}
+                            </p>
+                          </div>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+
+            {user && (
+              <SidebarGroup className="mt-6">
+                <SidebarGroupLabel className="text-xs font-semibold text-slate-500 uppercase tracking-wider px-3 py-2">
+                  Your Progress
+                </SidebarGroupLabel>
+                <SidebarGroupContent>
+                  <div className="px-4 py-3 space-y-3">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Trophy className="w-4 h-4 text-amber-500" />
+                        <span className="text-sm font-medium text-slate-700">Problems Solved</span>
+                      </div>
+                      <span className="text-lg font-bold text-blue-600">
+                        {user.total_problems_solved || 0}
+                      </span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <Target className="w-4 h-4 text-emerald-500" />
+                        <span className="text-sm font-medium text-slate-700">Current Streak</span>
+                      </div>
+                      <span className="text-lg font-bold text-emerald-600">
+                        {user.current_streak || 0} days
+                      </span>
+                    </div>
+                    <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-3 border border-blue-100">
+                      <p className="text-xs font-medium text-blue-700 mb-1">Learning Level</p>
+                      <p className="text-sm font-bold text-blue-900 capitalize">
+                        {user.learning_level || 'Beginner'}
+                      </p>
+                    </div>
+                  </div>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            )}
+          </SidebarContent>
+
+          <SidebarFooter className="border-t border-slate-200 p-4">
+            {user ? (
+              <div className="flex items-center gap-3 p-3 rounded-xl bg-gradient-to-r from-slate-50 to-blue-50 border border-slate-200">
+                <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-full flex items-center justify-center">
+                  <User className="w-5 h-5 text-white" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="font-semibold text-slate-900 text-sm truncate">
+                    {user.full_name || 'Student'}
+                  </p>
+                  <p className="text-xs text-slate-500 truncate">{user.email}</p>
+                </div>
+              </div>
+            ) : (
+              <button 
+                onClick={() => UserEntity.login()}
+                className="w-full bg-gradient-to-r from-blue-600 to-indigo-700 text-white font-semibold py-3 px-4 rounded-xl hover:from-blue-700 hover:to-indigo-800 transition-all duration-200 shadow-lg hover:shadow-xl"
+              >
+                Start Learning
+              </button>
+            )}
+          </SidebarFooter>
+        </Sidebar>
+
+        <main className="flex-1 flex flex-col">
+          {/* Mobile header */}
+          <header className="bg-white/80 backdrop-blur-sm border-b border-slate-200 px-6 py-4 md:hidden">
+            <div className="flex items-center gap-4">
+              <SidebarTrigger className="hover:bg-slate-100 p-2 rounded-lg transition-colors duration-200" />
+              <div className="flex items-center gap-2">
+                <Atom className="w-6 h-6 text-blue-600" />
+                <h1 className="text-lg font-bold text-slate-900">ChemTutor AI</h1>
+              </div>
+            </div>
+          </header>
+
+          {/* Main content area */}
+          <div className="flex-1 overflow-auto">
+            {children}
+          </div>
+        </main>
+      </div>
+    </SidebarProvider>
+  );
+}

Pages/Items/Dashboard.txt

@@ -0,0 +1,338 @@
+import React, { useState, useEffect } from "react";
+import { User } from "@/entities/User";
+import { Problem } from "@/entities/Problem";
+import { StudySession } from "@/entities/StudySession";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
+import { Link } from "react-router-dom";
+import { createPageUrl } from "@/utils";
+import { 
+  Brain, 
+  Target, 
+  TrendingUp, 
+  BookOpen, 
+  Trophy, 
+  Clock,
+  Atom,
+  Sparkles,
+  Play,
+  ChevronRight,
+  Calendar,
+  Award
+} from "lucide-react";
+import { format, startOfWeek, endOfWeek } from "date-fns";
+
+export default function Dashboard() {
+  const [user, setUser] = useState(null);
+  const [recentSessions, setRecentSessions] = useState([]);
+  const [weeklyStats, setWeeklyStats] = useState({ solved: 0, timeSpent: 0 });
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    loadDashboardData();
+  }, []);
+
+  const loadDashboardData = async () => {
+    try {
+      const userData = await User.me();
+      if (!userData) {
+        await User.login();
+        return;
+      }
+      
+      setUser(userData);
+      
+      // Load recent study sessions
+      const sessions = await StudySession.filter(
+        { user_email: userData.email },
+        '-session_date',
+        10
+      );
+      setRecentSessions(sessions);
+
+      // Calculate weekly stats
+      const weekStart = startOfWeek(new Date());
+      const weekEnd = endOfWeek(new Date());
+      const weeklySessions = sessions.filter(session => {
+        const sessionDate = new Date(session.session_date);
+        return sessionDate >= weekStart && sessionDate <= weekEnd;
+      });
+
+      setWeeklyStats({
+        solved: weeklySessions.filter(s => s.completed).length,
+        timeSpent: weeklySessions.reduce((total, s) => total + (s.time_spent || 0), 0)
+      });
+
+    } catch (error) {
+      console.error("Error loading dashboard:", error);
+    }
+    setIsLoading(false);
+  };
+
+  const handleGetStarted = async () => {
+    if (!user) {
+      await User.login();
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 flex items-center justify-center p-6">
+        <Card className="max-w-2xl w-full border-0 shadow-2xl bg-white/80 backdrop-blur-sm">
+          <CardHeader className="text-center pb-8">
+            <div className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-full flex items-center justify-center shadow-xl">
+              <Atom className="w-10 h-10 text-white" />
+            </div>
+            <CardTitle className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-indigo-700 bg-clip-text text-transparent mb-4">
+              Welcome to ChemTutor AI
+            </CardTitle>
+            <p className="text-xl text-slate-600 leading-relaxed">
+              Your intelligent chemistry learning companion. Master chemistry concepts through AI-powered personalized problems, interactive 3D molecular visualization, and adaptive tutoring.
+            </p>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="grid md:grid-cols-3 gap-6 mb-8">
+              <div className="text-center p-4">
+                <Brain className="w-12 h-12 mx-auto mb-3 text-blue-600" />
+                <h3 className="font-semibold text-slate-900 mb-2">AI-Generated Problems</h3>
+                <p className="text-sm text-slate-600">Custom chemistry problems tailored to your skill level</p>
+              </div>
+              <div className="text-center p-4">
+                <Atom className="w-12 h-12 mx-auto mb-3 text-indigo-600" />
+                <h3 className="font-semibold text-slate-900 mb-2">3D Molecular Models</h3>
+                <p className="text-sm text-slate-600">Interactive visualizations to understand molecular structures</p>
+              </div>
+              <div className="text-center p-4">
+                <TrendingUp className="w-12 h-12 mx-auto mb-3 text-emerald-600" />
+                <h3 className="font-semibold text-slate-900 mb-2">Adaptive Learning</h3>
+                <p className="text-sm text-slate-600">Personalized difficulty adjustment based on your progress</p>
+              </div>
+            </div>
+            <Button 
+              onClick={handleGetStarted}
+              className="w-full bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 text-white font-semibold py-4 px-8 text-lg shadow-lg hover:shadow-xl transition-all duration-200"
+            >
+              <Play className="w-5 h-5 mr-2" />
+              Start Learning Now
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  const dailyGoalProgress = user.study_goals?.daily_problems 
+    ? Math.min(100, (weeklyStats.solved / 7) / user.study_goals.daily_problems * 100)
+    : 0;
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 md:p-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Welcome Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-3xl md:text-4xl font-bold text-slate-900">
+              Welcome back, {user.full_name?.split(' ')[0]}!
+            </h1>
+            <Sparkles className="w-8 h-8 text-amber-500" />
+          </div>
+          <p className="text-lg text-slate-600">Ready to explore chemistry today? Let's continue your learning journey.</p>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid md:grid-cols-4 gap-6 mb-8">
+          <Card className="border-0 shadow-lg bg-gradient-to-br from-blue-600 to-indigo-700 text-white">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-blue-100 text-sm font-medium">Problems Solved</p>
+                  <p className="text-3xl font-bold">{user.total_problems_solved || 0}</p>
+                </div>
+                <Trophy className="w-12 h-12 text-blue-200" />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-0 shadow-lg bg-gradient-to-br from-emerald-600 to-teal-700 text-white">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-emerald-100 text-sm font-medium">Current Streak</p>
+                  <p className="text-3xl font-bold">{user.current_streak || 0} days</p>
+                </div>
+                <Target className="w-12 h-12 text-emerald-200" />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-0 shadow-lg bg-gradient-to-br from-purple-600 to-pink-700 text-white">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-purple-100 text-sm font-medium">This Week</p>
+                  <p className="text-3xl font-bold">{weeklyStats.solved}</p>
+                </div>
+                <Calendar className="w-12 h-12 text-purple-200" />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-0 shadow-lg bg-gradient-to-br from-orange-600 to-red-700 text-white">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-orange-100 text-sm font-medium">Study Time</p>
+                  <p className="text-3xl font-bold">{Math.round(weeklyStats.timeSpent)}m</p>
+                </div>
+                <Clock className="w-12 h-12 text-orange-200" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="grid lg:grid-cols-3 gap-8">
+          {/* Quick Actions */}
+          <div className="lg:col-span-2 space-y-6">
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-2xl">
+                  <Brain className="w-6 h-6 text-blue-600" />
+                  Quick Start
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid md:grid-cols-2 gap-4">
+                  <Link to={createPageUrl("Practice")}>
+                    <Card className="hover:shadow-lg transition-all duration-200 cursor-pointer group bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
+                      <CardContent className="p-6">
+                        <div className="flex items-center justify-between mb-4">
+                          <Brain className="w-8 h-8 text-blue-600 group-hover:scale-110 transition-transform" />
+                          <ChevronRight className="w-5 h-5 text-blue-400 group-hover:translate-x-1 transition-transform" />
+                        </div>
+                        <h3 className="font-semibold text-slate-900 mb-2">Practice Problems</h3>
+                        <p className="text-sm text-slate-600">Solve AI-generated chemistry problems</p>
+                      </CardContent>
+                    </Card>
+                  </Link>
+
+                  <Link to={createPageUrl("MolecularViewer")}>
+                    <Card className="hover:shadow-lg transition-all duration-200 cursor-pointer group bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
+                      <CardContent className="p-6">
+                        <div className="flex items-center justify-between mb-4">
+                          <Atom className="w-8 h-8 text-purple-600 group-hover:scale-110 transition-transform" />
+                          <ChevronRight className="w-5 h-5 text-purple-400 group-hover:translate-x-1 transition-transform" />
+                        </div>
+                        <h3 className="font-semibold text-slate-900 mb-2">3D Molecules</h3>
+                        <p className="text-sm text-slate-600">Explore molecular structures in 3D</p>
+                      </CardContent>
+                    </Card>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Daily Progress */}
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Target className="w-5 h-5 text-emerald-600" />
+                  Daily Progress
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium text-slate-700">Daily Goal Progress</span>
+                    <span className="text-sm text-slate-500">
+                      {Math.round(dailyGoalProgress)}%
+                    </span>
+                  </div>
+                  <Progress value={dailyGoalProgress} className="h-3" />
+                  <p className="text-sm text-slate-600">
+                    Goal: {user.study_goals?.daily_problems || 5} problems per day
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Learning Level & Recent Activity */}
+          <div className="space-y-6">
+            <Card className="border-0 shadow-xl bg-gradient-to-br from-slate-900 to-slate-800 text-white">
+              <CardContent className="p-6">
+                <div className="flex items-center gap-3 mb-4">
+                  <Award className="w-6 h-6 text-amber-400" />
+                  <h3 className="font-semibold text-lg">Learning Level</h3>
+                </div>
+                <Badge className="bg-amber-500 hover:bg-amber-600 text-amber-950 font-semibold text-lg px-4 py-2 mb-4">
+                  {(user.learning_level || 'beginner').charAt(0).toUpperCase() + (user.learning_level || 'beginner').slice(1)}
+                </Badge>
+                <p className="text-slate-300 text-sm leading-relaxed">
+                  {user.learning_level === 'advanced' 
+                    ? "You're mastering advanced chemistry concepts! Keep pushing your limits."
+                    : user.learning_level === 'intermediate'
+                    ? "You're building solid chemistry fundamentals. Ready for more challenges?"
+                    : "Welcome to your chemistry journey! Let's start with the basics and build up your confidence."
+                  }
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <BookOpen className="w-5 h-5 text-slate-600" />
+                  Recent Activity
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {recentSessions.length > 0 ? (
+                  <div className="space-y-3">
+                    {recentSessions.slice(0, 5).map((session, index) => (
+                      <div key={session.id} className="flex items-center gap-3 p-3 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors">
+                        <div className={`w-3 h-3 rounded-full ${session.completed ? 'bg-emerald-500' : 'bg-slate-400'}`} />
+                        <div className="flex-1">
+                          <p className="text-sm font-medium text-slate-900">
+                            Problem #{session.problem_id?.slice(-4)}
+                          </p>
+                          <p className="text-xs text-slate-500">
+                            {session.session_date && format(new Date(session.session_date), "MMM d")}
+                          </p>
+                        </div>
+                        {session.score && (
+                          <Badge variant="secondary" className="text-xs">
+                            {session.score}%
+                          </Badge>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-8">
+                    <BookOpen className="w-12 h-12 mx-auto text-slate-400 mb-3" />
+                    <p className="text-slate-500 mb-4">No recent activity yet</p>
+                    <Link to={createPageUrl("Practice")}>
+                      <Button variant="outline" size="sm">
+                        Start Your First Problem
+                      </Button>
+                    </Link>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Pages/Items/Molecular_View.txt

@@ -0,0 +1,850 @@
+import React, { useState, useEffect, useRef } from "react";
+import * as THREE from "three";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { 
+  Atom, 
+  RotateCcw, 
+  Search, 
+  Play,
+  Pause,
+  Info,
+  Filter
+} from "lucide-react";
+
+// Comprehensive molecules database organized by category
+const MOLECULES = [
+  // Simple Molecules
+  {
+    name: "Hydrogen Gas (H₂)",
+    formula: "H2",
+    category: "simple",
+    atoms: [
+      { element: "H", position: [-0.37, 0, 0], color: "#ffffff" },
+      { element: "H", position: [0.37, 0, 0], color: "#ffffff" }
+    ],
+    bonds: [{ from: 0, to: 1 }],
+    description: "The simplest and most abundant element in the universe, existing as diatomic molecules under normal conditions."
+  },
+  {
+    name: "Oxygen Gas (O₂)",
+    formula: "O2",
+    category: "simple",
+    atoms: [
+      { element: "O", position: [-0.60, 0, 0], color: "#ff0000" },
+      { element: "O", position: [0.60, 0, 0], color: "#ff0000" }
+    ],
+    bonds: [{ from: 0, to: 1 }],
+    description: "Essential for respiration and combustion, making up about 21% of Earth's atmosphere."
+  },
+  {
+    name: "Nitrogen Gas (N₂)",
+    formula: "N2",
+    category: "simple",
+    atoms: [
+      { element: "N", position: [-0.55, 0, 0], color: "#0000ff" },
+      { element: "N", position: [0.55, 0, 0], color: "#0000ff" }
+    ],
+    bonds: [{ from: 0, to: 1 }],
+    description: "Makes up about 78% of Earth's atmosphere. The triple bond makes it very stable."
+  },
+  {
+    name: "Carbon Dioxide (CO₂)",
+    formula: "CO2",
+    category: "simple",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "O", position: [-1.16, 0, 0], color: "#ff0000" },
+      { element: "O", position: [1.16, 0, 0], color: "#ff0000" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 0, to: 2 }],
+    description: "A greenhouse gas produced by combustion and respiration, absorbed by plants during photosynthesis."
+  },
+  {
+    name: "Water (H₂O)",
+    formula: "H2O",
+    category: "simple",
+    atoms: [
+      { element: "O", position: [0, 0, 0], color: "#ff0000" },
+      { element: "H", position: [0.96, 0, 0], color: "#ffffff" },
+      { element: "H", position: [-0.24, 0.93, 0], color: "#ffffff" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 0, to: 2 }],
+    description: "The most essential compound for life, consisting of two hydrogen atoms bonded to one oxygen atom."
+  },
+  {
+    name: "Ammonia (NH₃)",
+    formula: "NH3",
+    category: "simple",
+    atoms: [
+      { element: "N", position: [0, 0, 0], color: "#0000ff" },
+      { element: "H", position: [0.94, 0, 0.33], color: "#ffffff" },
+      { element: "H", position: [-0.47, 0.82, 0.33], color: "#ffffff" },
+      { element: "H", position: [-0.47, -0.82, 0.33], color: "#ffffff" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 }],
+    description: "A basic compound used in fertilizers and cleaning products, with a trigonal pyramidal shape."
+  },
+
+  // Hydrocarbons - Alkanes
+  {
+    name: "Methane (CH₄)",
+    formula: "CH4",
+    category: "hydrocarbons",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "H", position: [0.63, 0.63, 0.63], color: "#ffffff" },
+      { element: "H", position: [-0.63, -0.63, 0.63], color: "#ffffff" },
+      { element: "H", position: [-0.63, 0.63, -0.63], color: "#ffffff" },
+      { element: "H", position: [0.63, -0.63, -0.63], color: "#ffffff" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 }, { from: 0, to: 4 }],
+    description: "The simplest hydrocarbon and main component of natural gas, featuring a tetrahedral geometry."
+  },
+  {
+    name: "Ethane (C₂H₆)",
+    formula: "C2H6",
+    category: "hydrocarbons",
+    atoms: [
+      { element: "C", position: [-0.77, 0, 0], color: "#404040" },
+      { element: "C", position: [0.77, 0, 0], color: "#404040" },
+      { element: "H", position: [-1.17, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-1.17, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-1.17, 0, -1.03], color: "#ffffff" },
+      { element: "H", position: [1.17, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [1.17, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [1.17, 0, -1.03], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 }, { from: 0, to: 4 },
+      { from: 1, to: 5 }, { from: 1, to: 6 }, { from: 1, to: 7 }
+    ],
+    description: "A simple alkane used as fuel, with free rotation around the C-C single bond."
+  },
+  {
+    name: "Propane (C₃H₈)",
+    formula: "C3H8",
+    category: "hydrocarbons",
+    atoms: [
+      { element: "C", position: [-1.27, 0, 0], color: "#404040" },
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "C", position: [1.27, 0, 0], color: "#404040" },
+      { element: "H", position: [-1.67, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-1.67, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-1.67, 0, -1.03], color: "#ffffff" },
+      { element: "H", position: [0, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [0, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [1.67, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [1.67, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [1.67, 0, -1.03], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 },
+      { from: 0, to: 3 }, { from: 0, to: 4 }, { from: 0, to: 5 },
+      { from: 1, to: 6 }, { from: 1, to: 7 },
+      { from: 2, to: 8 }, { from: 2, to: 9 }, { from: 2, to: 10 }
+    ],
+    description: "A common fuel gas used for heating, grilling, and as vehicle fuel (LPG)."
+  },
+
+  // Alkenes
+  {
+    name: "Ethene (C₂H₄)",
+    formula: "C2H4",
+    category: "hydrocarbons",
+    atoms: [
+      { element: "C", position: [-0.67, 0, 0], color: "#404040" },
+      { element: "C", position: [0.67, 0, 0], color: "#404040" },
+      { element: "H", position: [-1.23, 0.93, 0], color: "#ffffff" },
+      { element: "H", position: [-1.23, -0.93, 0], color: "#ffffff" },
+      { element: "H", position: [1.23, 0.93, 0], color: "#ffffff" },
+      { element: "H", position: [1.23, -0.93, 0], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 },
+      { from: 1, to: 4 }, { from: 1, to: 5 }
+    ],
+    description: "The simplest alkene with a C=C double bond, used to make polyethylene plastic."
+  },
+
+  // Aromatic Compounds
+  {
+    name: "Benzene (C₆H₆)",
+    formula: "C6H6",
+    category: "aromatics",
+    atoms: [
+      { element: "C", position: [1.40, 0, 0], color: "#404040" },
+      { element: "C", position: [0.70, 1.21, 0], color: "#404040" },
+      { element: "C", position: [-0.70, 1.21, 0], color: "#404040" },
+      { element: "C", position: [-1.40, 0, 0], color: "#404040" },
+      { element: "C", position: [-0.70, -1.21, 0], color: "#404040" },
+      { element: "C", position: [0.70, -1.21, 0], color: "#404040" },
+      { element: "H", position: [2.48, 0, 0], color: "#ffffff" },
+      { element: "H", position: [1.24, 2.15, 0], color: "#ffffff" },
+      { element: "H", position: [-1.24, 2.15, 0], color: "#ffffff" },
+      { element: "H", position: [-2.48, 0, 0], color: "#ffffff" },
+      { element: "H", position: [-1.24, -2.15, 0], color: "#ffffff" },
+      { element: "H", position: [1.24, -2.15, 0], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 2, to: 3 },
+      { from: 3, to: 4 }, { from: 4, to: 5 }, { from: 5, to: 0 },
+      { from: 0, to: 6 }, { from: 1, to: 7 }, { from: 2, to: 8 },
+      { from: 3, to: 9 }, { from: 4, to: 10 }, { from: 5, to: 11 }
+    ],
+    description: "An aromatic hydrocarbon with a ring of six carbon atoms, fundamental in organic chemistry."
+  },
+  {
+    name: "Toluene (C₇H₈)",
+    formula: "C7H8",
+    category: "aromatics",
+    atoms: [
+      { element: "C", position: [1.40, 0, 0], color: "#404040" },
+      { element: "C", position: [0.70, 1.21, 0], color: "#404040" },
+      { element: "C", position: [-0.70, 1.21, 0], color: "#404040" },
+      { element: "C", position: [-1.40, 0, 0], color: "#404040" },
+      { element: "C", position: [-0.70, -1.21, 0], color: "#404040" },
+      { element: "C", position: [0.70, -1.21, 0], color: "#404040" },
+      { element: "C", position: [-2.87, 0, 0], color: "#404040" }, // methyl group
+      { element: "H", position: [2.48, 0, 0], color: "#ffffff" },
+      { element: "H", position: [1.24, 2.15, 0], color: "#ffffff" },
+      { element: "H", position: [-1.24, 2.15, 0], color: "#ffffff" },
+      { element: "H", position: [-1.24, -2.15, 0], color: "#ffffff" },
+      { element: "H", position: [1.24, -2.15, 0], color: "#ffffff" },
+      { element: "H", position: [-3.27, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-3.27, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-3.27, 0, -1.03], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 2, to: 3 },
+      { from: 3, to: 4 }, { from: 4, to: 5 }, { from: 5, to: 0 },
+      { from: 3, to: 6 }, { from: 0, to: 7 }, { from: 1, to: 8 },
+      { from: 2, to: 9 }, { from: 4, to: 10 }, { from: 5, to: 11 },
+      { from: 6, to: 12 }, { from: 6, to: 13 }, { from: 6, to: 14 }
+    ],
+    description: "Methylbenzene, used as a solvent and in the production of other chemicals."
+  },
+
+  // Alcohols
+  {
+    name: "Methanol (CH₄O)",
+    formula: "CH4O",
+    category: "alcohols",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "O", position: [1.43, 0, 0], color: "#ff0000" },
+      { element: "H", position: [-0.51, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-0.51, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-0.51, 0, -1.03], color: "#ffffff" },
+      { element: "H", position: [1.83, 0, 0.96], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 },
+      { from: 0, to: 4 }, { from: 1, to: 5 }
+    ],
+    description: "The simplest alcohol, used as fuel additive and solvent. Highly toxic to humans."
+  },
+  {
+    name: "Ethanol (C₂H₆O)",
+    formula: "C2H6O",
+    category: "alcohols",
+    atoms: [
+      { element: "C", position: [-0.77, 0.36, 0], color: "#404040" },
+      { element: "C", position: [0.77, 0.36, 0], color: "#404040" },
+      { element: "O", position: [1.2, -0.8, 0], color: "#ff0000" },
+      { element: "H", position: [-1.1, 0.7, 1], color: "#ffffff" },
+      { element: "H", position: [-1.1, 0.7, -1], color: "#ffffff" },
+      { element: "H", position: [-1.2, -0.6, 0], color: "#ffffff" },
+      { element: "H", position: [1.1, 1.3, 0], color: "#ffffff" },
+      { element: "H", position: [1.1, -0.2, 1], color: "#ffffff" },
+      { element: "H", position: [2.1, -0.6, 0], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 },
+      { from: 0, to: 3 }, { from: 0, to: 4 }, { from: 0, to: 5 },
+      { from: 1, to: 6 }, { from: 1, to: 7 },
+      { from: 2, to: 8 }
+    ],
+    description: "The alcohol found in beverages, also used as fuel and solvent."
+  },
+
+  // Acids
+  {
+    name: "Formic Acid (HCOOH)",
+    formula: "HCOOH",
+    category: "acids",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "O", position: [1.23, -0.67, 0], color: "#ff0000" },
+      { element: "O", position: [0.31, 1.34, 0], color: "#ff0000" },
+      { element: "H", position: [-1.08, 0.11, 0], color: "#ffffff" },
+      { element: "H", position: [1.19, 1.14, 0], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 }, { from: 2, to: 4 }
+    ],
+    description: "The simplest carboxylic acid, found in ant stings and used as a preservative."
+  },
+  {
+    name: "Acetic Acid (CH₃COOH)",
+    formula: "CH3COOH",
+    category: "acids",
+    atoms: [
+      { element: "C", position: [-1.27, 0, 0], color: "#404040" },
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "O", position: [1.23, -0.67, 0], color: "#ff0000" },
+      { element: "O", position: [0.31, 1.34, 0], color: "#ff0000" },
+      { element: "H", position: [-1.67, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-1.67, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-1.67, 0, -1.03], color: "#ffffff" },
+      { element: "H", position: [1.19, 1.14, 0], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 1, to: 3 },
+      { from: 0, to: 4 }, { from: 0, to: 5 }, { from: 0, to: 6 }, { from: 3, to: 7 }
+    ],
+    description: "Found in vinegar, used as food preservative and in chemical synthesis."
+  },
+
+  // Biomolecules - Amino Acids
+  {
+    name: "Glycine (NH₂CH₂COOH)",
+    formula: "C2H5NO2",
+    category: "biomolecules",
+    atoms: [
+      { element: "N", position: [-2.14, 0, 0], color: "#0000ff" },
+      { element: "C", position: [-0.67, 0, 0], color: "#404040" },
+      { element: "C", position: [0.67, 0, 0], color: "#404040" },
+      { element: "O", position: [1.23, -1.15, 0], color: "#ff0000" },
+      { element: "O", position: [1.23, 1.15, 0], color: "#ff0000" },
+      { element: "H", position: [-2.54, 0.81, 0.41], color: "#ffffff" },
+      { element: "H", position: [-2.54, -0.81, 0.41], color: "#ffffff" },
+      { element: "H", position: [-0.67, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-0.67, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [2.17, 1.08, 0], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 2, to: 3 }, { from: 2, to: 4 },
+      { from: 0, to: 5 }, { from: 0, to: 6 }, { from: 1, to: 7 }, { from: 1, to: 8 }, { from: 4, to: 9 }
+    ],
+    description: "The simplest amino acid, essential for protein synthesis and neurotransmitter function."
+  },
+
+  // Sugars
+  {
+    name: "Glucose (C₆H₁₂O₆)",
+    formula: "C6H12O6",
+    category: "biomolecules",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "C", position: [1.25, 0.72, 0], color: "#404040" },
+      { element: "C", position: [1.25, 2.17, 0], color: "#404040" },
+      { element: "C", position: [0, 2.89, 0], color: "#404040" },
+      { element: "C", position: [-1.25, 2.17, 0], color: "#404040" },
+      { element: "O", position: [-1.25, 0.72, 0], color: "#ff0000" },
+      { element: "O", position: [2.5, 0, 0], color: "#ff0000" },
+      { element: "O", position: [2.5, 2.89, 0], color: "#ff0000" },
+      { element: "O", position: [0, 4.34, 0], color: "#ff0000" },
+      { element: "O", position: [-2.5, 2.89, 0], color: "#ff0000" },
+      { element: "C", position: [-2.5, 4.34, 0], color: "#404040" },
+      { element: "O", position: [-3.75, 5.06, 0], color: "#ff0000" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 2, to: 3 }, { from: 3, to: 4 },
+      { from: 4, to: 5 }, { from: 5, to: 0 }, { from: 1, to: 6 }, { from: 2, to: 7 },
+      { from: 3, to: 8 }, { from: 4, to: 9 }, { from: 9, to: 10 }, { from: 10, to: 11 }
+    ],
+    description: "The primary source of energy for cells, essential for metabolism in all living organisms."
+  },
+
+  // Inorganic Compounds
+  {
+    name: "Hydrogen Chloride (HCl)",
+    formula: "HCl",
+    category: "inorganic",
+    atoms: [
+      { element: "H", position: [-0.63, 0, 0], color: "#ffffff" },
+      { element: "Cl", position: [0.63, 0, 0], color: "#00ff00" }
+    ],
+    bonds: [{ from: 0, to: 1 }],
+    description: "A strong acid when dissolved in water (hydrochloric acid), found in stomach acid."
+  },
+  {
+    name: "Sodium Chloride (NaCl)",
+    formula: "NaCl",
+    category: "inorganic",
+    atoms: [
+      { element: "Na", position: [-1.4, 0, 0], color: "#ab5cf2" },
+      { element: "Cl", position: [1.4, 0, 0], color: "#00ff00" }
+    ],
+    bonds: [{ from: 0, to: 1 }],
+    description: "Common table salt, essential for life and widely used in food preservation."
+  },
+  {
+    name: "Sulfuric Acid (H₂SO₄)",
+    formula: "H2SO4",
+    category: "inorganic",
+    atoms: [
+      { element: "S", position: [0, 0, 0], color: "#ffff00" },
+      { element: "O", position: [0, 1.5, 0], color: "#ff0000" },
+      { element: "O", position: [1.3, -0.75, 0], color: "#ff0000" },
+      { element: "O", position: [-1.3, -0.75, 0], color: "#ff0000" },
+      { element: "O", position: [0, 0, 1.5], color: "#ff0000" },
+      { element: "H", position: [0, 2.4, 0], color: "#ffffff" },
+      { element: "H", position: [0, 0, 2.4], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 }, { from: 0, to: 4 },
+      { from: 1, to: 5 }, { from: 4, to: 6 }
+    ],
+    description: "One of the most important industrial chemicals, used in batteries and chemical synthesis."
+  },
+
+  // Pharmaceuticals
+  {
+    name: "Aspirin (C₉H₈O₄)",
+    formula: "C9H8O4",
+    category: "pharmaceuticals",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "C", position: [1.4, 0, 0.8], color: "#404040" },
+      { element: "C", position: [1.4, 0, 2.2], color: "#404040" },
+      { element: "C", position: [0, 0, 3], color: "#404040" },
+      { element: "C", position: [-1.4, 0, 2.2], color: "#404040" },
+      { element: "C", position: [-1.4, 0, 0.8], color: "#404040" },
+      { element: "C", position: [0, 1.5, 4.5], color: "#404040" },
+      { element: "C", position: [-1.5, 1.5, 6], color: "#404040" },
+      { element: "O", position: [0, 0, 4.5], color: "#ff0000" },
+      { element: "O", position: [1.5, 1.5, 4.5], color: "#ff0000" },
+      { element: "O", position: [-3, 1.5, 6], color: "#ff0000" },
+      { element: "O", position: [-1.5, 3, 6], color: "#ff0000" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 2, to: 3 }, { from: 3, to: 4 },
+      { from: 4, to: 5 }, { from: 5, to: 0 }, { from: 3, to: 8 }, { from: 8, to: 6 },
+      { from: 6, to: 9 }, { from: 6, to: 7 }, { from: 7, to: 10 }, { from: 7, to: 11 }
+    ],
+    description: "A widely used pain reliever and anti-inflammatory drug, first synthesized in 1897."
+  },
+  {
+    name: "Caffeine (C₈H₁₀N₄O₂)",
+    formula: "C8H10N4O2",
+    category: "pharmaceuticals",
+    atoms: [
+      { element: "N", position: [0, 0, 0], color: "#0000ff" },
+      { element: "C", position: [1.4, 0, 0], color: "#404040" },
+      { element: "N", position: [2.1, 1.2, 0], color: "#0000ff" },
+      { element: "C", position: [1.4, 2.4, 0], color: "#404040" },
+      { element: "C", position: [0, 2.4, 0], color: "#404040" },
+      { element: "N", position: [-0.7, 1.2, 0], color: "#0000ff" },
+      { element: "C", position: [0, 3.8, 0], color: "#404040" },
+      { element: "N", position: [1.4, 3.8, 0], color: "#0000ff" },
+      { element: "O", position: [2.1, -1.2, 0], color: "#ff0000" },
+      { element: "O", position: [-0.7, 4.6, 0], color: "#ff0000" },
+      { element: "C", position: [-2.1, 1.2, 0], color: "#404040" },
+      { element: "C", position: [2.8, 4.6, 0], color: "#404040" },
+      { element: "C", position: [-0.7, -1.2, 0], color: "#404040" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 1, to: 2 }, { from: 2, to: 3 }, { from: 3, to: 4 },
+      { from: 4, to: 5 }, { from: 5, to: 0 }, { from: 4, to: 6 }, { from: 6, to: 7 },
+      { from: 7, to: 3 }, { from: 1, to: 8 }, { from: 6, to: 9 }, { from: 5, to: 10 },
+      { from: 7, to: 11 }, { from: 0, to: 12 }
+    ],
+    description: "A natural stimulant found in coffee, tea, and chocolate, widely consumed worldwide."
+  },
+
+  // Environmental/Atmospheric
+  {
+    name: "Ozone (O₃)",
+    formula: "O3",
+    category: "environmental",
+    atoms: [
+      { element: "O", position: [0, 0, 0], color: "#ff0000" },
+      { element: "O", position: [1.3, 0, 0], color: "#ff0000" },
+      { element: "O", position: [0.65, 1.13, 0], color: "#ff0000" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 1, to: 2 }],
+    description: "An atmospheric molecule that protects Earth from UV radiation but is toxic at ground level."
+  },
+  {
+    name: "Methyl Chloride (CH₃Cl)",
+    formula: "CH3Cl",
+    category: "environmental",
+    atoms: [
+      { element: "C", position: [0, 0, 0], color: "#404040" },
+      { element: "Cl", position: [1.78, 0, 0], color: "#00ff00" },
+      { element: "H", position: [-0.51, 0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-0.51, -0.89, 0.51], color: "#ffffff" },
+      { element: "H", position: [-0.51, 0, -1.03], color: "#ffffff" }
+    ],
+    bonds: [
+      { from: 0, to: 1 }, { from: 0, to: 2 }, { from: 0, to: 3 }, { from: 0, to: 4 }
+    ],
+    description: "A chlorinated compound that contributes to ozone depletion in the stratosphere."
+  },
+
+  // Additional Important Molecules
+  {
+    name: "Hydrogen Peroxide (H₂O₂)",
+    formula: "H2O2",
+    category: "simple",
+    atoms: [
+      { element: "O", position: [-0.74, 0, 0], color: "#ff0000" },
+      { element: "O", position: [0.74, 0, 0], color: "#ff0000" },
+      { element: "H", position: [-1.21, 0.93, 0], color: "#ffffff" },
+      { element: "H", position: [1.21, -0.93, 0], color: "#ffffff" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 0, to: 2 }, { from: 1, to: 3 }],
+    description: "A strong oxidizing agent used as disinfectant and bleaching agent."
+  },
+  {
+    name: "Nitrous Oxide (N₂O)",
+    formula: "N2O",
+    category: "simple",
+    atoms: [
+      { element: "N", position: [-1.13, 0, 0], color: "#0000ff" },
+      { element: "N", position: [0, 0, 0], color: "#0000ff" },
+      { element: "O", position: [1.19, 0, 0], color: "#ff0000" }
+    ],
+    bonds: [{ from: 0, to: 1 }, { from: 1, to: 2 }],
+    description: "Laughing gas, used as anesthetic and greenhouse gas contributing to climate change."
+  }
+];
+
+const CATEGORIES = [
+  { value: "all", label: "All Categories", count: MOLECULES.length },
+  { value: "simple", label: "Simple Molecules", count: MOLECULES.filter(m => m.category === "simple").length },
+  { value: "hydrocarbons", label: "Hydrocarbons", count: MOLECULES.filter(m => m.category === "hydrocarbons").length },
+  { value: "aromatics", label: "Aromatics", count: MOLECULES.filter(m => m.category === "aromatics").length },
+  { value: "alcohols", label: "Alcohols", count: MOLECULES.filter(m => m.category === "alcohols").length },
+  { value: "acids", label: "Acids", count: MOLECULES.filter(m => m.category === "acids").length },
+  { value: "biomolecules", label: "Biomolecules", count: MOLECULES.filter(m => m.category === "biomolecules").length },
+  { value: "inorganic", label: "Inorganic", count: MOLECULES.filter(m => m.category === "inorganic").length },
+  { value: "pharmaceuticals", label: "Pharmaceuticals", count: MOLECULES.filter(m => m.category === "pharmaceuticals").length },
+  { value: "environmental", label: "Environmental", count: MOLECULES.filter(m => m.category === "environmental").length }
+];
+
+const ThreeCanvas = ({ molecule, isAnimating }) => {
+  const mountRef = useRef(null);
+
+  useEffect(() => {
+    if (!molecule || !mountRef.current) return;
+
+    const currentMount = mountRef.current;
+    
+    // Scene, Camera, Renderer
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x1e293b); // slate-800
+    const camera = new THREE.PerspectiveCamera(75, currentMount.clientWidth / currentMount.clientHeight, 0.1, 1000);
+    camera.position.z = 5;
+
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
+    currentMount.appendChild(renderer.domElement);
+
+    // Lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
+    scene.add(ambientLight);
+    const pointLight = new THREE.PointLight(0xffffff, 0.5);
+    pointLight.position.set(5, 5, 5);
+    scene.add(pointLight);
+
+    // Molecule Group
+    const moleculeGroup = new THREE.Group();
+    scene.add(moleculeGroup);
+
+    // Create Atoms
+    molecule.atoms.forEach(atom => {
+      const geometry = new THREE.SphereGeometry(atom.element === 'H' ? 0.2 : 0.4, 32, 32);
+      const material = new THREE.MeshStandardMaterial({ color: atom.color });
+      const sphere = new THREE.Mesh(geometry, material);
+      sphere.position.set(...atom.position);
+      moleculeGroup.add(sphere);
+    });
+
+    // Create Bonds
+    molecule.bonds?.forEach(bond => {
+      const start = new THREE.Vector3(...molecule.atoms[bond.from].position);
+      const end = new THREE.Vector3(...molecule.atoms[bond.to].position);
+      const path = new THREE.LineCurve3(start, end);
+      const geometry = new THREE.TubeGeometry(path, 1, 0.05, 8, false);
+      const material = new THREE.MeshStandardMaterial({ color: '#cccccc' });
+      const mesh = new THREE.Mesh(geometry, material);
+      moleculeGroup.add(mesh);
+    });
+
+    // Center the molecule
+    new THREE.Box3().setFromObject(moleculeGroup).getCenter(moleculeGroup.position).multiplyScalar(-1);
+
+    // Animation loop
+    let animationFrameId;
+    const animate = () => {
+      animationFrameId = requestAnimationFrame(animate);
+      if (isAnimating) {
+        moleculeGroup.rotation.y += 0.005;
+        moleculeGroup.rotation.x += 0.002;
+      }
+      renderer.render(scene, camera);
+    };
+    animate();
+
+    // Resize handler
+    const handleResize = () => {
+      if (!currentMount) return;
+      camera.aspect = currentMount.clientWidth / currentMount.clientHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(currentMount.clientWidth, currentMount.clientHeight);
+    };
+    window.addEventListener('resize', handleResize);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (currentMount.contains(renderer.domElement)) {
+        currentMount.removeChild(renderer.domElement);
+      }
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [molecule, isAnimating]);
+
+  return <div ref={mountRef} className="w-full h-full" />;
+};
+
+export default function MolecularViewer() {
+  const [selectedMolecule, setSelectedMolecule] = useState(MOLECULES[0]);
+  const [isAnimating, setIsAnimating] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("all");
+
+  const filteredMolecules = MOLECULES.filter(mol => {
+    const matchesSearch = mol.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         mol.formula.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesCategory = selectedCategory === "all" || mol.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-purple-50 p-4 md:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 bg-gradient-to-br from-purple-600 to-pink-700 rounded-xl flex items-center justify-center">
+              <Atom className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900">3D Molecular Database</h1>
+              <p className="text-slate-600">Explore {MOLECULES.length} molecular structures in interactive 3D space</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid lg:grid-cols-4 gap-8">
+          {/* Molecule Library */}
+          <div className="lg:col-span-1">
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <Search className="w-5 h-5 text-purple-600" />
+                  Molecule Library
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <Input
+                    placeholder="Search molecules..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="bg-white"
+                  />
+                  
+                  <div>
+                    <label className="block text-sm font-medium text-slate-700 mb-2">Category</label>
+                    <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                      <SelectTrigger className="bg-white">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {CATEGORIES.map((category) => (
+                          <SelectItem key={category.value} value={category.value}>
+                            {category.label} ({category.count})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  
+                  <div className="space-y-2 max-h-96 overflow-y-auto pr-2">
+                    {filteredMolecules.map((molecule, index) => (
+                      <button
+                        key={index}
+                        onClick={() => setSelectedMolecule(molecule)}
+                        className={`w-full text-left p-3 rounded-lg border transition-all duration-200 ${
+                          selectedMolecule?.name === molecule.name
+                            ? 'border-purple-500 bg-purple-50'
+                            : 'border-slate-200 hover:border-purple-300 hover:bg-purple-25'
+                        }`}
+                      >
+                        <div className="font-medium text-slate-900 mb-1">
+                          {molecule.name}
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <Badge variant="outline" className="text-xs">
+                            {molecule.formula}
+                          </Badge>
+                          <Badge variant="secondary" className="text-xs capitalize">
+                            {molecule.category}
+                          </Badge>
+                        </div>
+                      </button>
+                    ))}
+                    {filteredMolecules.length === 0 && (
+                      <div className="text-center py-8 text-slate-500">
+                        <Search className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                        <p>No molecules found</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Main Viewer */}
+          <div className="lg:col-span-3">
+            <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+              <CardHeader>
+                <div className="flex items-center justify-between flex-wrap gap-4">
+                  <CardTitle className="text-xl">
+                    {selectedMolecule?.name}
+                  </CardTitle>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() => setIsAnimating(!isAnimating)}
+                      title={isAnimating ? "Pause Animation" : "Play Animation"}
+                    >
+                      {isAnimating ? (
+                        <Pause className="w-4 h-4" />
+                      ) : (
+                        <Play className="w-4 h-4" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <Tabs defaultValue="viewer" className="w-full">
+                  <TabsList className="grid w-full grid-cols-2 mb-6">
+                    <TabsTrigger value="viewer">3D Viewer</TabsTrigger>
+                    <TabsTrigger value="info">Molecule Info</TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="viewer" className="space-y-0">
+                    <div className="h-96 w-full bg-gradient-to-b from-slate-900 to-slate-800 rounded-xl overflow-hidden relative">
+                      <ThreeCanvas molecule={selectedMolecule} isAnimating={isAnimating} />
+                      
+                      <div className="absolute top-4 right-4">
+                        <Badge className="bg-purple-600 text-white">
+                          {selectedMolecule?.formula}
+                        </Badge>
+                      </div>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="info" className="space-y-6">
+                    <div className="grid md:grid-cols-2 gap-6">
+                      <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
+                        <CardContent className="p-6">
+                          <div className="flex items-center gap-2 mb-3">
+                            <Info className="w-5 h-5 text-blue-600" />
+                            <h3 className="font-semibold text-blue-900">Molecular Formula</h3>
+                          </div>
+                          <p className="text-2xl font-bold text-blue-800 font-mono">
+                            {selectedMolecule?.formula}
+                          </p>
+                        </CardContent>
+                      </Card>
+
+                      <Card className="bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200">
+                        <CardContent className="p-6">
+                          <div className="flex items-center gap-2 mb-3">
+                            <Atom className="w-5 h-5 text-emerald-600" />
+                            <h3 className="font-semibold text-emerald-900">Atom Count</h3>
+                          </div>
+                          <p className="text-2xl font-bold text-emerald-800">
+                            {selectedMolecule?.atoms.length} atoms
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </div>
+
+                    <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
+                      <CardContent className="p-6">
+                        <div className="flex items-center gap-2 mb-3">
+                          <Filter className="w-5 h-5 text-purple-600" />
+                          <h3 className="font-semibold text-purple-900">Category</h3>
+                        </div>
+                        <Badge className="capitalize bg-purple-600 text-white text-lg px-3 py-1">
+                          {selectedMolecule?.category}
+                        </Badge>
+                      </CardContent>
+                    </Card>
+
+                    <Card className="bg-slate-50 border-slate-200">
+                      <CardHeader>
+                        <CardTitle className="text-lg">Description</CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <p className="text-slate-700 leading-relaxed">
+                          {selectedMolecule?.description}
+                        </p>
+                      </CardContent>
+                    </Card>
+
+                    {selectedMolecule?.atoms && (
+                      <Card className="bg-slate-50 border-slate-200">
+                        <CardHeader>
+                          <CardTitle className="text-lg">Atomic Composition</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="space-y-3">
+                            {Object.entries(
+                              selectedMolecule.atoms.reduce((acc, atom) => {
+                                acc[atom.element] = (acc[atom.element] || 0) + 1;
+                                return acc;
+                              }, {})
+                            ).map(([element, count]) => (
+                              <div key={element} className="flex items-center gap-3">
+                                <div 
+                                  className="w-8 h-8 rounded-full border-2 border-slate-300 flex items-center justify-center text-xs font-bold"
+                                  style={{ 
+                                    backgroundColor: selectedMolecule.atoms.find(a => a.element === element)?.color,
+                                    color: element === 'H' ? '#000' : '#fff'
+                                  }}
+                                >
+                                  {element}
+                                </div>
+                                <span className="font-medium text-slate-900">{element}</span>
+                                <span className="text-slate-600">× {count}</span>
+                              </div>
+                            ))}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

Pages/Items/Prctice.txt

@@ -0,0 +1,436 @@
+
+import React, { useState, useEffect } from "react";
+import { Problem } from "@/entities/Problem";
+import { StudySession } from "@/entities/StudySession";
+import { User } from "@/entities/User";
+import { InvokeLLM } from "@/integrations/Core";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { 
+  Brain, 
+  Lightbulb, 
+  CheckCircle, 
+  XCircle, 
+  RefreshCw,
+  Sparkles,
+  Clock,
+  Target,
+  ChevronRight,
+  Atom,
+  BookOpen
+} from "lucide-react";
+
+const TOPICS = [
+  { value: "organic_chemistry", label: "Organic Chemistry" },
+  { value: "inorganic_chemistry", label: "Inorganic Chemistry" },
+  { value: "physical_chemistry", label: "Physical Chemistry" },
+  { value: "analytical_chemistry", label: "Analytical Chemistry" },
+  { value: "biochemistry", label: "Biochemistry" },
+  { value: "quantum_chemistry", label: "Quantum Chemistry" },
+  { value: "materials_science", label: "Materials Science" }
+];
+
+const DIFFICULTIES = [
+  { value: "beginner", label: "Beginner", color: "bg-green-100 text-green-800" },
+  { value: "intermediate", label: "Intermediate", color: "bg-yellow-100 text-yellow-800" },
+  { value: "advanced", label: "Advanced", color: "bg-red-100 text-red-800" }
+];
+
+export default function Practice() {
+  const [user, setUser] = useState(null);
+  const [currentProblem, setCurrentProblem] = useState(null);
+  const [userAnswer, setUserAnswer] = useState("");
+  const [showSolution, setShowSolution] = useState(false);
+  const [showHints, setShowHints] = useState(false);
+  const [hintIndex, setHintIndex] = useState(0);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [sessionStartTime, setSessionStartTime] = useState(null);
+  const [selectedTopic, setSelectedTopic] = useState("");
+  const [selectedDifficulty, setSelectedDifficulty] = useState("");
+  const [score, setScore] = useState(null);
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  const loadUser = async () => {
+    try {
+      const userData = await User.me();
+      setUser(userData);
+      setSelectedDifficulty(userData.learning_level || "beginner");
+    } catch (error) {
+      await User.login();
+    }
+  };
+
+  const generateProblem = async () => {
+    if (!selectedTopic || !selectedDifficulty) return;
+
+    setIsGenerating(true);
+    setCurrentProblem(null);
+    setUserAnswer("");
+    setShowSolution(false);
+    setShowHints(false);
+    setHintIndex(0);
+    setScore(null);
+    setSessionStartTime(Date.now());
+
+    try {
+      const topicName = TOPICS.find(t => t.value === selectedTopic)?.label || selectedTopic;
+      
+      const prompt = `Generate a ${selectedDifficulty} level chemistry problem in ${topicName}. 
+      
+      The problem should be educational, engaging, and appropriate for a student at the ${selectedDifficulty} level.
+      
+      Include:
+      - A clear, specific problem statement
+      - Step-by-step solution with explanations
+      - 3 progressive hints to help students
+      - Key concepts being tested
+      - Molecular formula if applicable
+      - Brief molecular structure description if relevant
+      
+      Make it practical and relatable to real-world chemistry applications.`;
+
+      const result = await InvokeLLM({
+        prompt,
+        response_json_schema: {
+          type: "object",
+          properties: {
+            title: { type: "string" },
+            question: { type: "string" },
+            solution: { type: "string" },
+            molecular_formula: { type: "string" },
+            molecular_structure: { type: "string" },
+            concepts: { type: "array", items: { type: "string" } },
+            hints: { type: "array", items: { type: "string" } }
+          },
+          required: ["title", "question", "solution", "concepts", "hints"]
+        }
+      });
+
+      const problemData = {
+        ...result,
+        topic: selectedTopic,
+        difficulty: selectedDifficulty
+      };
+
+      const savedProblem = await Problem.create(problemData);
+      setCurrentProblem(savedProblem);
+
+    } catch (error) {
+      console.error("Error generating problem:", error);
+    }
+    setIsGenerating(false);
+  };
+
+  const submitAnswer = async () => {
+    if (!currentProblem || !userAnswer.trim()) return;
+
+    setIsSubmitting(true);
+    const timeSpent = sessionStartTime ? Math.round((Date.now() - sessionStartTime) / 1000 / 60) : 0;
+
+    try {
+      // Use AI to evaluate the answer
+      const evaluation = await InvokeLLM({
+        prompt: `Evaluate this student's answer to a chemistry problem:
+
+        Problem: ${currentProblem.question}
+        Correct Solution: ${currentProblem.solution}
+        Student Answer: ${userAnswer}
+
+        Provide a score from 0-100 and brief feedback on their understanding.`,
+        response_json_schema: {
+          type: "object",
+          properties: {
+            score: { type: "number", minimum: 0, maximum: 100 },
+            feedback: { type: "string" },
+            is_correct: { type: "boolean" }
+          },
+          required: ["score", "feedback", "is_correct"]
+        }
+      });
+
+      setScore(evaluation);
+
+      // Save study session
+      await StudySession.create({
+        user_email: user.email,
+        problem_id: currentProblem.id,
+        completed: evaluation.is_correct,
+        time_spent: timeSpent,
+        hints_used: hintIndex,
+        score: evaluation.score,
+        session_date: new Date().toISOString().split('T')[0]
+      });
+
+      // Update user stats if correct
+      if (evaluation.is_correct) {
+        await User.updateMyUserData({
+          total_problems_solved: (user.total_problems_solved || 0) + 1
+        });
+      }
+
+      setShowSolution(true);
+
+    } catch (error) {
+      console.error("Error submitting answer:", error);
+    }
+    setIsSubmitting(false);
+  };
+
+  const nextHint = () => {
+    if (hintIndex < (currentProblem?.hints?.length || 0) - 1) {
+      setHintIndex(hintIndex + 1);
+    }
+    setShowHints(true);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-4 md:p-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 bg-gradient-to-br from-blue-600 to-indigo-700 rounded-xl flex items-center justify-center">
+              <Brain className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900">AI Practice Problems</h1>
+              <p className="text-slate-600">Personalized chemistry problems generated just for you</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Problem Generator */}
+        <Card className="border-0 shadow-xl bg-white/90 backdrop-blur-sm mb-8">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Sparkles className="w-5 h-5 text-amber-500" />
+              Generate New Problem
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid md:grid-cols-2 gap-4 mb-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">Topic</label>
+                <Select value={selectedTopic} onValueChange={setSelectedTopic}>
+                  <SelectTrigger className="bg-white">
+                    <SelectValue placeholder="Choose a chemistry topic" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {TOPICS.map((topic) => (
+                      <SelectItem key={topic.value} value={topic.value}>
+                        {topic.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-2">Difficulty</label>
+                <Select value={selectedDifficulty} onValueChange={setSelectedDifficulty}>
+                  <SelectTrigger className="bg-white">
+                    <SelectValue placeholder="Select difficulty" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {DIFFICULTIES.map((diff) => (
+                      <SelectItem key={diff.value} value={diff.value}>
+                        {diff.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <Button
+              onClick={generateProblem}
+              disabled={!selectedTopic || !selectedDifficulty || isGenerating}
+              className="w-full bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 font-semibold py-3"
+            >
+              {isGenerating ? (
+                <>
+                  <RefreshCw className="w-5 h-5 mr-2 animate-spin" />
+                  Generating Problem...
+                </>
+              ) : (
+                <>
+                  <Brain className="w-5 h-5 mr-2" />
+                  Generate Problem
+                </>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Current Problem */}
+        {currentProblem && (
+          <div className="space-y-6">
+            <Card className="border-0 shadow-xl bg-white/90 backdrop-blur-sm">
+              <CardHeader>
+                <div className="flex items-center justify-between flex-wrap gap-4">
+                  <CardTitle className="text-xl">{currentProblem.title}</CardTitle>
+                  <div className="flex gap-2">
+                    <Badge className={DIFFICULTIES.find(d => d.value === currentProblem.difficulty)?.color}>
+                      {currentProblem.difficulty}
+                    </Badge>
+                    <Badge variant="outline">
+                      {TOPICS.find(t => t.value === currentProblem.topic)?.label}
+                    </Badge>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="prose max-w-none mb-6">
+                  <p className="text-lg leading-relaxed text-slate-700">{currentProblem.question}</p>
+                </div>
+
+                {currentProblem.molecular_formula && (
+                  <div className="bg-slate-50 rounded-lg p-4 mb-6">
+                    <div className="flex items-center gap-2 mb-2">
+                      <Atom className="w-5 h-5 text-blue-600" />
+                      <span className="font-medium text-slate-700">Molecular Formula:</span>
+                    </div>
+                    <code className="text-lg font-mono text-blue-700 bg-white px-3 py-1 rounded">
+                      {currentProblem.molecular_formula}
+                    </code>
+                  </div>
+                )}
+
+                {currentProblem.concepts && (
+                  <div className="mb-6">
+                    <div className="flex items-center gap-2 mb-3">
+                      <BookOpen className="w-5 h-5 text-purple-600" />
+                      <span className="font-medium text-slate-700">Key Concepts:</span>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {currentProblem.concepts.map((concept, index) => (
+                        <Badge key={index} variant="secondary" className="bg-purple-100 text-purple-800">
+                          {concept}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {!showSolution && (
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium text-slate-700 mb-2">
+                        Your Answer:
+                      </label>
+                      <Textarea
+                        value={userAnswer}
+                        onChange={(e) => setUserAnswer(e.target.value)}
+                        placeholder="Write your solution step by step..."
+                        className="min-h-32 bg-white"
+                      />
+                    </div>
+
+                    <div className="flex gap-3 flex-wrap">
+                      <Button
+                        onClick={submitAnswer}
+                        disabled={!userAnswer.trim() || isSubmitting}
+                        className="bg-emerald-600 hover:bg-emerald-700"
+                      >
+                        {isSubmitting ? (
+                          <>
+                            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                            Evaluating...
+                          </>
+                        ) : (
+                          <>
+                            <CheckCircle className="w-4 h-4 mr-2" />
+                            Submit Answer
+                          </>
+                        )}
+                      </Button>
+
+                      {currentProblem.hints && hintIndex < currentProblem.hints.length && (
+                        <Button onClick={nextHint} variant="outline">
+                          <Lightbulb className="w-4 h-4 mr-2" />
+                          Get Hint ({hintIndex + 1}/{currentProblem.hints.length})
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Hints */}
+                {showHints && currentProblem.hints && (
+                  <Card className="bg-amber-50 border-amber-200">
+                    <CardContent className="p-4">
+                      <div className="flex items-start gap-3">
+                        <Lightbulb className="w-5 h-5 text-amber-600 mt-0.5" />
+                        <div>
+                          <p className="font-medium text-amber-900 mb-2">Hint {hintIndex + 1}:</p>
+                          <p className="text-amber-800">{currentProblem.hints[hintIndex]}</p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                )}
+
+                {/* Results */}
+                {score && showSolution && (
+                  <div className="space-y-4 mt-6">
+                    <Alert className={score.is_correct ? "border-emerald-200 bg-emerald-50" : "border-amber-200 bg-amber-50"}>
+                      <div className="flex items-center gap-2">
+                        {score.is_correct ? (
+                          <CheckCircle className="w-5 h-5 text-emerald-600" />
+                        ) : (
+                          <Target className="w-5 h-5 text-amber-600" />
+                        )}
+                        <div>
+                          <h4 className={`font-semibold ${score.is_correct ? 'text-emerald-900' : 'text-amber-900'}`}>
+                            Score: {score.score}/100
+                          </h4>
+                          <AlertDescription className={score.is_correct ? 'text-emerald-800' : 'text-amber-800'}>
+                            {score.feedback}
+                          </AlertDescription>
+                        </div>
+                      </div>
+                    </Alert>
+
+                    <Card className="bg-slate-50 border-slate-200">
+                      <CardHeader>
+                        <CardTitle className="text-lg flex items-center gap-2">
+                          <BookOpen className="w-5 h-5 text-blue-600" />
+                          Complete Solution
+                        </CardTitle>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="prose max-w-none text-slate-700">
+                          {currentProblem.solution.split('\n').map((line, index) => (
+                            <p key={index} className="mb-2">{line}</p>
+                          ))}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!currentProblem && !isGenerating && (
+          <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+            <CardContent className="text-center py-12">
+              <Brain className="w-16 h-16 mx-auto text-slate-400 mb-4" />
+              <h3 className="text-xl font-semibold text-slate-900 mb-2">Ready to Practice?</h3>
+              <p className="text-slate-600 mb-6">
+                Select a topic and difficulty level above to generate your first AI-powered chemistry problem!
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

Pages/Items/Study_Material.txt

@@ -0,0 +1,659 @@
+
+import React, { useState, useEffect } from "react";
+import { User } from "@/entities/User";
+import { InvokeLLM } from "@/integrations/Core";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { 
+  BookOpen, 
+  FileText, 
+  Lightbulb, 
+  RefreshCw,
+  Download,
+  Sparkles,
+  GraduationCap,
+  Target,
+  Brain,
+  CheckCircle
+} from "lucide-react";
+
+const TOPICS = [
+  { value: "organic_chemistry", label: "Organic Chemistry", icon: "🧪", color: "bg-green-100 text-green-800" },
+  { value: "inorganic_chemistry", label: "Inorganic Chemistry", icon: "⚛️", color: "bg-blue-100 text-blue-800" },
+  { value: "physical_chemistry", label: "Physical Chemistry", icon: "🔬", color: "bg-purple-100 text-purple-800" },
+  { value: "analytical_chemistry", label: "Analytical Chemistry", icon: "📊", color: "bg-orange-100 text-orange-800" },
+  { value: "biochemistry", label: "Biochemistry", icon: "🧬", color: "bg-pink-100 text-pink-800" },
+  { value: "quantum_chemistry", label: "Quantum Chemistry", icon: "⚡", color: "bg-indigo-100 text-indigo-800" },
+  { value: "materials_science", label: "Materials Science", icon: "🏗️", color: "bg-cyan-100 text-cyan-800" }
+];
+
+const MATERIAL_TYPES = [
+  { value: "study_guide", label: "Study Guide", icon: BookOpen, description: "Comprehensive topic overview" },
+  { value: "flashcards", label: "Flashcards", icon: Brain, description: "Key terms and definitions" },
+  { value: "practice_problems", label: "Practice Problems", icon: Target, description: "Problems with solutions" },
+  { value: "concept_map", label: "Concept Map", icon: Lightbulb, description: "Visual concept connections" }
+];
+
+export default function StudyMaterials() {
+  const [user, setUser] = useState(null);
+  const [selectedTopic, setSelectedTopic] = useState("");
+  const [selectedType, setSelectedType] = useState("");
+  const [generatedMaterial, setGeneratedMaterial] = useState(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
+  const loadUser = async () => {
+    try {
+      const userData = await User.me();
+      setUser(userData);
+    } catch (error) {
+      await User.login();
+    }
+  };
+
+  const generateMaterial = async () => {
+    if (!selectedTopic || !selectedType) return;
+
+    setIsGenerating(true);
+    setGeneratedMaterial(null);
+
+    try {
+      const topic = TOPICS.find(t => t.value === selectedTopic);
+      const materialType = MATERIAL_TYPES.find(t => t.value === selectedType);
+      
+      let prompt = "";
+      let schema = {};
+
+      switch (selectedType) {
+        case "study_guide":
+          prompt = `Create a comprehensive study guide for ${topic.label} suitable for a ${user?.learning_level || 'beginner'} level student. Include:
+          - Overview and importance
+          - Key concepts with clear explanations
+          - Important formulas or reactions
+          - Real-world applications
+          - Common misconceptions
+          - Study tips and memory aids`;
+          
+          schema = {
+            type: "object",
+            properties: {
+              title: { type: "string" },
+              overview: { type: "string" },
+              key_concepts: { 
+                type: "array", 
+                items: { 
+                  type: "object",
+                  properties: {
+                    concept: { type: "string" },
+                    explanation: { type: "string" }
+                  }
+                }
+              },
+              formulas: { type: "array", items: { type: "string" } },
+              applications: { type: "array", items: { type: "string" } },
+              misconceptions: { type: "array", items: { type: "string" } },
+              study_tips: { type: "array", items: { type: "string" } }
+            }
+          };
+          break;
+
+        case "flashcards":
+          prompt = `Create 15-20 flashcards for ${topic.label} at ${user?.learning_level || 'beginner'} level. Each flashcard should have:
+          - A clear, concise question or term
+          - A comprehensive answer or definition
+          - Include key formulas, reactions, or concepts`;
+          
+          schema = {
+            type: "object",
+            properties: {
+              title: { type: "string" },
+              cards: {
+                type: "array",
+                items: {
+                  type: "object",
+                  properties: {
+                    front: { type: "string" },
+                    back: { type: "string" }
+                  }
+                }
+              }
+            }
+          };
+          break;
+
+        case "practice_problems":
+          prompt = `Create 8-10 practice problems for ${topic.label} at ${user?.learning_level || 'beginner'} level. Include:
+          - Varied difficulty within the level
+          - Step-by-step solutions
+          - Brief explanations of key concepts used`;
+          
+          schema = {
+            type: "object",
+            properties: {
+              title: { type: "string" },
+              problems: {
+                type: "array",
+                items: {
+                  type: "object",
+                  properties: {
+                    question: { type: "string" },
+                    solution: { type: "string" },
+                    concepts_used: { type: "array", items: { type: "string" } }
+                  }
+                }
+              }
+            }
+          };
+          break;
+
+        case "concept_map":
+          prompt = `Create a concept map structure for ${topic.label} at ${user?.learning_level || 'beginner'} level showing:
+          - Main concepts and their relationships
+          - Hierarchical organization
+          - Key connections between ideas
+          - Brief descriptions for each concept`;
+          
+          schema = {
+            type: "object",
+            properties: {
+              title: { type: "string" },
+              main_concept: { type: "string" },
+              concepts: {
+                type: "array",
+                items: {
+                  type: "object",
+                  properties: {
+                    name: { type: "string" },
+                    description: { type: "string" },
+                    level: { type: "number" },
+                    connections: { type: "array", items: { type: "string" } }
+                  }
+                }
+              }
+            }
+          };
+          break;
+      }
+
+      const result = await InvokeLLM({
+        prompt,
+        response_json_schema: schema
+      });
+
+      setGeneratedMaterial({
+        type: selectedType,
+        topic: selectedTopic,
+        data: result
+      });
+
+    } catch (error) {
+      console.error("Error generating material:", error);
+    }
+    setIsGenerating(false);
+  };
+
+  const downloadMaterial = () => {
+    if (!generatedMaterial) return;
+
+    let content = "";
+    const { data } = generatedMaterial;
+
+    switch (generatedMaterial.type) {
+      case "study_guide":
+        content = `${data.title}\n\n`;
+        content += `Overview:\n${data.overview}\n\n`;
+        if (data.key_concepts) {
+          content += "Key Concepts:\n";
+          data.key_concepts.forEach(concept => {
+            content += `- ${concept.concept}: ${concept.explanation}\n`;
+          });
+          content += "\n";
+        }
+        if (data.formulas && data.formulas.length > 0) {
+          content += "Important Formulas/Reactions:\n";
+          data.formulas.forEach(formula => {
+            content += `- ${formula}\n`;
+          });
+          content += "\n";
+        }
+        if (data.applications && data.applications.length > 0) {
+          content += "Real-world Applications:\n";
+          data.applications.forEach(app => {
+            content += `- ${app}\n`;
+          });
+          content += "\n";
+        }
+        if (data.misconceptions && data.misconceptions.length > 0) {
+          content += "Common Misconceptions:\n";
+          data.misconceptions.forEach(misconception => {
+            content += `- ${misconception}\n`;
+          });
+          content += "\n";
+        }
+        if (data.study_tips && data.study_tips.length > 0) {
+          content += "Study Tips:\n";
+          data.study_tips.forEach(tip => {
+            content += `- ${tip}\n`;
+          });
+          content += "\n";
+        }
+        break;
+      case "flashcards":
+        content = `${data.title}\n\nFlashcards:\n\n`;
+        data.cards?.forEach((card, index) => {
+          content += `Card ${index + 1}:\nQ: ${card.front}\nA: ${card.back}\n\n`;
+        });
+        break;
+      case "practice_problems":
+        content = `${data.title}\n\nPractice Problems:\n\n`;
+        data.problems?.forEach((problem, index) => {
+          content += `Problem ${index + 1}:\nQuestion: ${problem.question}\nSolution: ${problem.solution}\nConcepts Used: ${problem.concepts_used?.join(', ')}\n\n`;
+        });
+        break;
+      case "concept_map":
+        content = `${data.title}\n\nMain Concept: ${data.main_concept}\n\n`;
+        content += "Concepts:\n";
+        data.concepts?.forEach(concept => {
+          content += `- Name: ${concept.name}\n  Description: ${concept.description}\n  Level: ${concept.level}\n  Connections: ${concept.connections?.join(', ')}\n\n`;
+        });
+        break;
+    }
+
+    const blob = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${data.title.replace(/\s+/g, '_').replace(/[^a-zA-Z0-9_.]/g, '')}.txt`; // Sanitize filename
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const renderMaterial = () => {
+    if (!generatedMaterial) return null;
+
+    const { data, type } = generatedMaterial;
+
+    switch (type) {
+      case "study_guide":
+        return (
+          <div className="space-y-6">
+            <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200">
+              <CardHeader>
+                <CardTitle className="text-2xl">{data.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-lg text-slate-700 leading-relaxed">{data.overview}</p>
+              </CardContent>
+            </Card>
+
+            {data.key_concepts && data.key_concepts.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Lightbulb className="w-5 h-5 text-amber-500" />
+                    Key Concepts
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-4">
+                    {data.key_concepts.map((concept, index) => (
+                      <div key={index} className="p-4 bg-slate-50 rounded-lg">
+                        <h4 className="font-semibold text-slate-900 mb-2">{concept.concept}</h4>
+                        <p className="text-slate-700">{concept.explanation}</p>
+                      </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {data.formulas && data.formulas.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <FileText className="w-5 h-5 text-red-500" />
+                    Important Formulas/Reactions
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ul className="list-disc list-inside space-y-2">
+                    {data.formulas.map((formula, index) => (
+                      <li key={index} className="text-slate-700">{formula}</li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            )}
+
+            {data.applications && data.applications.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Target className="w-5 h-5 text-orange-500" />
+                    Real-world Applications
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ul className="list-disc list-inside space-y-2">
+                    {data.applications.map((app, index) => (
+                      <li key={index} className="text-slate-700">{app}</li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            )}
+
+            {data.misconceptions && data.misconceptions.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Lightbulb className="w-5 h-5 text-purple-500" />
+                    Common Misconceptions
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ul className="list-disc list-inside space-y-2">
+                    {data.misconceptions.map((misconception, index) => (
+                      <li key={index} className="text-slate-700">{misconception}</li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            )}
+
+            {data.study_tips && data.study_tips.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <GraduationCap className="w-5 h-5 text-emerald-500" />
+                    Study Tips
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ul className="space-y-2">
+                    {data.study_tips.map((tip, index) => (
+                      <li key={index} className="flex items-start gap-3">
+                        <CheckCircle className="w-5 h-5 text-emerald-500 mt-0.5 flex-shrink-0" />
+                        <span className="text-slate-700">{tip}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        );
+
+      case "flashcards":
+        return (
+          <div className="space-y-6">
+            <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-purple-200">
+              <CardHeader>
+                <CardTitle className="text-2xl">{data.title}</CardTitle>
+                <p className="text-slate-600">{data.cards?.length} flashcards</p>
+              </CardHeader>
+            </Card>
+
+            <div className="grid md:grid-cols-2 gap-4">
+              {data.cards?.map((card, index) => (
+                <Card key={index} className="hover:shadow-lg transition-shadow">
+                  <CardContent className="p-6">
+                    <div className="text-center">
+                      <Badge className="mb-4">Card {index + 1}</Badge>
+                      <div className="space-y-4">
+                        <div>
+                          <h4 className="font-medium text-slate-600 mb-2">Question:</h4>
+                          <p className="font-semibold text-slate-900">{card.front}</p>
+                        </div>
+                        <div className="border-t pt-4">
+                          <h4 className="font-medium text-slate-600 mb-2">Answer:</h4>
+                          <p className="text-slate-800">{card.back}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        );
+
+      case "practice_problems":
+        return (
+          <div className="space-y-6">
+            <Card className="bg-gradient-to-br from-teal-50 to-emerald-50 border-teal-200">
+              <CardHeader>
+                <CardTitle className="text-2xl">{data.title}</CardTitle>
+                <p className="text-slate-600">{data.problems?.length} practice problems</p>
+              </CardHeader>
+            </Card>
+
+            <div className="space-y-4">
+              {data.problems?.map((problem, index) => (
+                <Card key={index} className="hover:shadow-lg transition-shadow">
+                  <CardContent className="p-6">
+                    <div className="space-y-4">
+                      <div>
+                        <h4 className="font-medium text-slate-600 mb-2">Problem {index + 1}:</h4>
+                        <p className="font-semibold text-slate-900">{problem.question}</p>
+                      </div>
+                      <div className="border-t pt-4">
+                        <h4 className="font-medium text-slate-600 mb-2">Solution:</h4>
+                        <p className="text-slate-800 whitespace-pre-wrap">{problem.solution}</p>
+                      </div>
+                      {problem.concepts_used && problem.concepts_used.length > 0 && (
+                        <div className="border-t pt-4">
+                          <h4 className="font-medium text-slate-600 mb-2">Concepts Used:</h4>
+                          <div className="flex flex-wrap gap-2">
+                            {problem.concepts_used.map((concept, idx) => (
+                              <Badge key={idx} variant="outline" className="bg-blue-50 text-blue-700">{concept}</Badge>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        );
+
+      case "concept_map":
+        return (
+          <div className="space-y-6">
+            <Card className="bg-gradient-to-br from-yellow-50 to-orange-50 border-yellow-200">
+              <CardHeader>
+                <CardTitle className="text-2xl">{data.title}</CardTitle>
+                <p className="text-slate-600">Main Concept: <span className="font-medium">{data.main_concept}</span></p>
+              </CardHeader>
+            </Card>
+
+            {data.concepts && data.concepts.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Lightbulb className="w-5 h-5 text-amber-500" />
+                    Related Concepts
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {data.concepts.map((concept, index) => (
+                      <Card key={index} className="p-4 bg-slate-50 rounded-lg shadow-sm">
+                        <h4 className="font-semibold text-slate-900 mb-2">{concept.name}</h4>
+                        <p className="text-sm text-slate-700 mb-2">{concept.description}</p>
+                        {concept.connections && concept.connections.length > 0 && (
+                          <div className="mt-2">
+                            <span className="font-medium text-xs text-slate-600">Connections: </span>
+                            <div className="flex flex-wrap gap-1">
+                              {concept.connections.map((conn, idx) => (
+                                <Badge key={idx} variant="secondary" className="text-xs">{conn}</Badge>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </Card>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        );
+
+      default:
+        return (
+          <Alert>
+            <AlertDescription>
+              Material type not yet implemented for display.
+            </AlertDescription>
+          </Alert>
+        );
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-emerald-50 p-4 md:p-8">
+      <div className="max-w-6xl mx-auto">
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-12 h-12 bg-gradient-to-br from-emerald-600 to-teal-700 rounded-xl flex items-center justify-center">
+              <BookOpen className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-slate-900">AI Study Materials</h1>
+              <p className="text-slate-600">Generate personalized learning resources with AI</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Material Generator */}
+        <Card className="border-0 shadow-xl bg-white/90 backdrop-blur-sm mb-8">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Sparkles className="w-5 h-5 text-amber-500" />
+              Generate Study Material
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid md:grid-cols-2 gap-6 mb-6">
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-3">Chemistry Topic</label>
+                <div className="grid grid-cols-2 gap-2">
+                  {TOPICS.map((topic) => (
+                    <button
+                      key={topic.value}
+                      onClick={() => setSelectedTopic(topic.value)}
+                      className={`p-3 text-left rounded-lg border transition-all duration-200 ${
+                        selectedTopic === topic.value
+                          ? 'border-emerald-500 bg-emerald-50'
+                          : 'border-slate-200 hover:border-emerald-300'
+                      }`}
+                    >
+                      <div className="text-lg mb-1">{topic.icon}</div>
+                      <div className="text-sm font-medium text-slate-900">{topic.label}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-slate-700 mb-3">Material Type</label>
+                <div className="space-y-2">
+                  {MATERIAL_TYPES.map((type) => (
+                    <button
+                      key={type.value}
+                      onClick={() => setSelectedType(type.value)}
+                      className={`w-full p-4 text-left rounded-lg border transition-all duration-200 ${
+                        selectedType === type.value
+                          ? 'border-emerald-500 bg-emerald-50'
+                          : 'border-slate-200 hover:border-emerald-300'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <type.icon className="w-5 h-5 text-emerald-600" />
+                        <div>
+                          <div className="font-medium text-slate-900">{type.label}</div>
+                          <div className="text-sm text-slate-500">{type.description}</div>
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <Button
+              onClick={generateMaterial}
+              disabled={!selectedTopic || !selectedType || isGenerating}
+              className="w-full bg-gradient-to-r from-emerald-600 to-teal-700 hover:from-emerald-700 hover:to-teal-800 font-semibold py-3"
+            >
+              {isGenerating ? (
+                <>
+                  <RefreshCw className="w-5 h-5 mr-2 animate-spin" />
+                  Generating Material...
+                </>
+              ) : (
+                <>
+                  <Brain className="w-5 h-5 mr-2" />
+                  Generate Study Material
+                </>
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* Generated Material */}
+        {generatedMaterial && (
+          <Card className="border-0 shadow-xl bg-white/90 backdrop-blur-sm">
+            <CardHeader>
+              <div className="flex items-center justify-between flex-wrap gap-4">
+                <div>
+                  <CardTitle className="text-xl">Generated Material</CardTitle>
+                  <div className="flex gap-2 mt-2">
+                    <Badge className={TOPICS.find(t => t.value === generatedMaterial.topic)?.color}>
+                      {TOPICS.find(t => t.value === generatedMaterial.topic)?.label}
+                    </Badge>
+                    <Badge variant="outline">
+                      {MATERIAL_TYPES.find(t => t.value === generatedMaterial.type)?.label}
+                    </Badge>
+                  </div>
+                </div>
+                <Button onClick={downloadMaterial} variant="outline">
+                  <Download className="w-4 h-4 mr-2" />
+                  Download
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {renderMaterial()}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Empty State */}
+        {!generatedMaterial && !isGenerating && (
+          <Card className="border-0 shadow-xl bg-white/80 backdrop-blur-sm">
+            <CardContent className="text-center py-12">
+              <BookOpen className="w-16 h-16 mx-auto text-slate-400 mb-4" />
+              <h3 className="text-xl font-semibold text-slate-900 mb-2">Ready to Study?</h3>
+              <p className="text-slate-600 mb-6">
+                Select a chemistry topic and material type above to generate personalized study materials!
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}