[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { BookOpen, Award, FileText } from "lucide-react" export default function Home() { return (

LearnSphere

Structured Learning for Better Results

Create and manage courses with a clear hierarchy, engage students with interactive quizzes, and track progress effectively.

Key Features

Everything you need to create, manage, and deliver structured learning content

Structured Learning

Organize courses with a 3-level hierarchy: courses, chapters, and lessons for clear context and progression.

Interactive Assessments

Create quizzes with single-choice, multiple-choice, or open-ended questions to test comprehension.

Assignments & Submissions

Add assignments that learners can complete and submit as PDFs or documents for instructor review.

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { BookOpen, Clock, Award, FileText, BarChart } from "lucide-react" export default function DashboardPage() { return (

LearnSphere

Dashboard

My Courses Assignments Progress

Web Development Fundamentals 12 chapters • 36 lessons

4 hours left

68% complete

Data Science Essentials 8 chapters • 24 lessons

6 hours left

42% complete

UX Design Principles 10 chapters • 30 lessons

8 hours left

25% complete

Upcoming Assignments Assignments due in the next 7 days

Final Project: Portfolio Website

Web Development Fundamentals

Due in 2 days

May 7, 2025

Data Visualization Exercise

Data Science Essentials

Due in 5 days

May 10, 2025

Learning Progress Your overall progress across all courses

Web Development Fundamentals

68%

Data Science Essentials

42%

UX Design Principles

25%

Overall Completion

45%

) } [V0_FILE]typescriptreact:file="app/courses/[courseId]/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Separator } from "@/components/ui/separator" import { ChevronRight, BookOpen, FileText, CheckCircle, Clock, ArrowLeft } from "lucide-react" export default function CoursePage() { return (

LearnSphere

68% Complete

Chapter 1: Introduction

Welcome & Overview Course Structure

Chapter 2: Fundamentals

Core Concepts Building Blocks Quiz: Fundamentals

Chapter 3: Advanced Topics

Advanced Techniques Case Studies Final Assignment

Courses Web Development Building Blocks

Building Blocks

Chapter 2: Fundamentals • Lesson 2 of 3

In this lesson, we'll explore the fundamental building blocks that make up the core of web development. Understanding these concepts is crucial for creating robust and scalable applications.

Key Concepts

HTML structure and semantic elements
CSS styling and layout principles
JavaScript basics for interactivity
Responsive design approaches

By the end of this lesson, you'll be able to identify and implement these building blocks in your own projects, creating a solid foundation for more advanced techniques.

Resources

Lesson Slides

Download the presentation slides for this lesson.

Code Examples

Access the code examples used in this lesson.

) } [V0_FILE]typescriptreact:file="app/courses/[courseId]/quizzes/[quizId]/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Progress } from "@/components/ui/progress" import { ChevronRight, BookOpen, ArrowLeft, ArrowRight } from "lucide-react" export default function QuizPage() { const [currentQuestion, setCurrentQuestion] = useState(0) const [singleChoiceAnswer, setSingleChoiceAnswer] = useState("") const [multipleChoiceAnswers, setMultipleChoiceAnswers] = useState([]) const [openEndedAnswer, setOpenEndedAnswer] = useState("") const questions = [ { id: 1, type: "single-choice", question: "What is the 'Direct Income' of a company?", options: [ { id: "a", text: "Income that is earned by providing goods and services to customers." }, { id: "b", text: "Income earned on bank deposits" }, { id: "c", text: "Income earned from investments" }, ], }, { id: 2, type: "multiple-choice", question: "Which of the following are valid HTML5 semantic elements? (Select all that apply)", options: [ { id: "a", text: "

" }, { id: "b", text: "

" }, { id: "c", text: "" }, { id: "d", text: "

" }, ], }, { id: 3, type: "open-ended", question: "Explain the concept of responsive design and why it's important in modern web development.", }, ] const currentQ = questions[currentQuestion] const handleMultipleChoiceChange = (id: string) => { setMultipleChoiceAnswers((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id])) } const handleNext = () => { if (currentQuestion < questions.length - 1) { setCurrentQuestion((prev) => prev + 1) } } const handlePrevious = () => { if (currentQuestion > 0) { setCurrentQuestion((prev) => prev - 1) } } const handleSubmit = () => { // In a real app, this would submit the answers to the server alert("Quiz submitted successfully!") } return (

LearnSphere

Question {currentQuestion + 1} of {questions.length}

Courses Accounting Chart of Accounts Quiz

Chart of Accounts Quiz This quiz consists of {questions.length} questions. You will need to get 100% correct answers in order to pass the quiz.

Question {currentQuestion + 1}: {currentQ.question}

{currentQ.type === "single-choice" && ( {currentQ.options?.map((option) => (

{option.text}

))} )} {currentQ.type === "multiple-choice" && (

{currentQ.options?.map((option) => (

handleMultipleChoiceChange(option.id)} /> {option.text}

))}

)} {currentQ.type === "open-ended" && (

setOpenEndedAnswer(e.target.value)}
                          placeholder="Type your answer here..."
                          className="mt-3 min-h-[150px]"
                        />
                      )}
                    </div>
                  </div>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Button variant="outline" onClick={handlePrevious} disabled={currentQuestion === 0}>
                    <ArrowLeft className="mr-2 h-4 w-4" />
                    Previous
                  </Button>
                  {currentQuestion < questions.length - 1 ? (
                    <Button onClick={handleNext}>
                      Next
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Button>
                  ) : (
                    <Button onClick={handleSubmit}>Submit Quiz</Button>
                  )}
                </CardFooter>
              </Card>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/courses/[courseId]/assignments/[assignmentId]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { ChevronRight, BookOpen, ArrowLeft, Upload, FileText, Calendar, Clock } from "lucide-react"

export default function AssignmentPage() {
  const [files, setFiles] = useState<File[]>([])
  const [comment, setComment] = useState("")

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const newFiles = Array.from(e.target.files)
      setFiles((prev) => [...prev, ...newFiles])
    }
  }

const removeFile = (index: number) => {
    setFiles((prev) => prev.filter((_, i) => i !== index))
  }

const handleSubmit = () => {
    // In a real app, this would submit the files and comment to the server
    alert(`Assignment submitted with ${files.length} file(s)`)
  }

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <div className="p-4">
            <Link href="/courses/web-development">
              <Button variant="ghost" size="sm" className="mb-2 w-full justify-start gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Course
              </Button>
            </Link>
          </div>
        </div>
        <main className="flex-1">
          <div className="border-b">
            <div className="flex h-16 items-center px-4">
              <div className="flex items-center text-sm text-muted-foreground">
                <Link href="/courses" className="hover:text-foreground">
                  Courses
                </Link>
                <ChevronRight className="h-4 w-4" />
                <Link href="/courses/web-development" className="hover:text-foreground">
                  Web Development
                </Link>
                <ChevronRight className="h-4 w-4" />
                <span className="font-medium text-foreground">Final Project Assignment</span>
              </div>
            </div>
          </div>
          <div className="p-4 md:p-6">
            <div className="mx-auto max-w-3xl space-y-6">
              <div>
                <h1 className="text-2xl font-bold">Final Project: Portfolio Website</h1>
                <p className="text-muted-foreground">Chapter 3: Advanced Topics • Assignment</p>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Assignment Details</CardTitle>
                  <CardDescription>
                    Create a responsive portfolio website showcasing your skills and projects.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Calendar className="h-4 w-4" />
                      <span>Due Date: May 7, 2025</span>
                    </div>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Clock className="h-4 w-4" />
                      <span>Time Remaining: 2 days</span>
                    </div>
                    <div className="prose max-w-none dark:prose-invert">
                      <h3>Instructions</h3>
                      <p>
                        For this final project, you will create a responsive portfolio website that showcases your
                        skills, projects, and professional information. Your portfolio should demonstrate your
                        understanding of HTML, CSS, and JavaScript concepts covered throughout the course.
                      </p>
                      <h4>Requirements:</h4>
                      <ul>
                        <li>Responsive design that works on mobile, tablet, and desktop</li>
                        <li>At least 4 distinct sections (e.g., About, Skills, Projects, Contact)</li>
                        <li>Interactive elements using JavaScript</li>
                        <li>Clean, well-organized code with comments</li>
                        <li>Proper semantic HTML structure</li>
                      </ul>
                      <h4>Submission:</h4>
                      <p>
                        Submit a ZIP file containing all your project files, including HTML, CSS, JavaScript, and any
                        assets. Also include a README.md file with instructions on how to run your project and any
                        additional notes.
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Submit Your Assignment</CardTitle>
                  <CardDescription>Upload your files and add any comments for your instructor.</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="file-upload">Upload Files</Label>
                      <div className="mt-2 flex items-center justify-center rounded-lg border border-dashed p-6">
                        <div className="text-center">
                          <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
                          <div className="mt-2">
                            <Button
                              variant="secondary"
                              size="sm"
                              onClick={() => document.getElementById("file-upload")?.click()}
                            >
                              Select Files
                            </Button>
                            <Input
                              id="file-upload"
                              type="file"
                              multiple
                              className="hidden"
                              onChange={handleFileChange}
                            />
                          </div>
                          <p className="mt-2 text-xs text-muted-foreground">PDF, DOC, ZIP, or other files up to 50MB</p>
                        </div>
                      </div>
                    </div>

{files.length > 0 && (
                      <div>
                        <h4 className="mb-2 text-sm font-medium">Selected Files</h4>
                        <div className="space-y-2">
                          {files.map((file, index) => (
                            <div key={index} className="flex items-center justify-between rounded-md border p-2">
                              <div className="flex items-center gap-2">
                                <FileText className="h-4 w-4 text-muted-foreground" />
                                <span className="text-sm">{file.name}</span>
                                <span className="text-xs text-muted-foreground">
                                  ({(file.size / 1024 / 1024).toFixed(2)} MB)
                                </span>
                              </div>
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => removeFile(index)}
                                className="h-8 w-8 p-0"
                              >
                                ×
                              </Button>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

<div>
                      <Label htmlFor="comment">Comments (Optional)</Label>
                      <Textarea
                        id="comment"
                        placeholder="Add any comments or notes for your instructor..."
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                        className="mt-1"
                      />
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button onClick={handleSubmit} disabled={files.length === 0}>
                    Submit Assignment
                  </Button>
                </CardFooter>
              </Card>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/courses/[courseId]/page.tsx" isMerged="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, Users, FileText, Settings, Plus, BarChart, ChevronRight, PlusCircle } from "lucide-react"

export default function InstructorCoursePage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/instructor/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/instructor/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                Courses
              </Button>
            </Link>
            <Link href="/instructor/students">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Users className="h-4 w-4" />
                Students
              </Button>
            </Link>
            <Link href="/instructor/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/instructor/settings">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Settings className="h-4 w-4" />
                Settings
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-2xl font-bold">Web Development Fundamentals</h1>
              <div className="flex items-center text-sm text-muted-foreground">
                <Link href="/instructor/courses" className="hover:text-foreground">
                  Courses
                </Link>
                <ChevronRight className="h-4 w-4" />
                <span className="font-medium text-foreground">Web Development Fundamentals</span>
              </div>
            </div>
            <Button>
              <Settings className="mr-2 h-4 w-4" />
              Course Settings
            </Button>
          </div>

<Tabs defaultValue="content" className="mt-6">
            <TabsList>
              <TabsTrigger value="content">Content</TabsTrigger>
              <TabsTrigger value="students">Students</TabsTrigger>
              <TabsTrigger value="assignments">Assignments</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
            </TabsList>
            <TabsContent value="content" className="space-y-4">
              <div className="flex justify-end">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Chapter
                </Button>
              </div>

<Card>
                <CardHeader className="flex flex-row items-center justify-between">
                  <div>
                    <CardTitle>Chapter 1: Introduction</CardTitle>
                    <CardDescription>2 lessons • 1 quiz</CardDescription>
                  </div>
                  <Button variant="outline" size="sm">
                    Edit Chapter
                  </Button>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-muted-foreground" />
                        <span>Welcome & Overview</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-muted-foreground" />
                        <span>Course Structure</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <FileText className="h-4 w-4 text-muted-foreground" />
                        <span>Introduction Quiz</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" size="sm" className="w-full">
                    <PlusCircle className="mr-2 h-4 w-4" />
                    Add Lesson or Quiz
                  </Button>
                </CardFooter>
              </Card>

<Card>
                <CardHeader className="flex flex-row items-center justify-between">
                  <div>
                    <CardTitle>Chapter 2: Fundamentals</CardTitle>
                    <CardDescription>3 lessons • 1 quiz</CardDescription>
                  </div>
                  <Button variant="outline" size="sm">
                    Edit Chapter
                  </Button>
                </CardHeader>
                <CardContent>
                  <ul className="space-y-2">
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-muted-foreground" />
                        <span>Core Concepts</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-muted-foreground" />
                        <span>Building Blocks</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <BookOpen className="h-4 w-4 text-muted-foreground" />
                        <span>Practical Examples</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                    <li className="flex items-center justify-between rounded-md border p-2">
                      <div className="flex items-center gap-2">
                        <FileText className="h-4 w-4 text-muted-foreground" />
                        <span>Fundamentals Quiz</span>
                      </div>
                      <Button variant="ghost" size="sm">
                        Edit
                      </Button>
                    </li>
                  </ul>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" size="sm" className="w-full">
                    <PlusCircle className="mr-2 h-4 w-4" />
                    Add Lesson or Quiz
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="students" className="space-y-4">
              <div className="flex justify-between">
                <div className="relative w-64">
                  <input
                    type="text"
                    placeholder="Search students..."
                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  />
                </div>
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Students
                </Button>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Enrolled Students (24)</CardTitle>
                  <CardDescription>Students currently enrolled in this course</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <div key={i} className="flex items-center justify-between rounded-md border p-3">
                        <div className="flex items-center gap-3">
                          <div className="h-10 w-10 rounded-full bg-muted"></div>
                          <div>
                            <p className="font-medium">Student Name {i + 1}</p>
                            <p className="text-sm text-muted-foreground">student{i + 1}@example.com</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-2">
                          <p className="text-sm text-muted-foreground">Progress: {Math.floor(Math.random() * 100)}%</p>
                          <Button variant="ghost" size="sm">
                            View
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" size="sm" className="w-full">
                    View All Students
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="assignments" className="space-y-4">
              <div className="flex justify-end">
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Create Assignment
                </Button>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Course Assignments</CardTitle>
                  <CardDescription>Manage assignments and review submissions</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between rounded-md border p-3">
                      <div>
                        <p className="font-medium">Final Project: Portfolio Website</p>
                        <p className="text-sm text-muted-foreground">Due: May 7, 2025 • 18 submissions</p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm">
                          Edit
                        </Button>
                        <Button size="sm">Review</Button>
                      </div>
                    </div>
                    <div className="flex items-center justify-between rounded-md border p-3">
                      <div>
                        <p className="font-medium">Responsive Layout Exercise</p>
                        <p className="text-sm text-muted-foreground">Due: April 25, 2025 • 22 submissions</p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm">
                          Edit
                        </Button>
                        <Button size="sm">Review</Button>
                      </div>
                    </div>
                    <div className="flex items-center justify-between rounded-md border p-3">
                      <div>
                        <p className="font-medium">JavaScript Fundamentals Practice</p>
                        <p className="text-sm text-muted-foreground">Due: April 15, 2025 • 20 submissions</p>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm">
                          Edit
                        </Button>
                        <Button size="sm">Review</Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="analytics" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>Course Analytics</CardTitle>
                  <CardDescription>Performance metrics and student engagement</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid gap-4 md:grid-cols-3">
                    <div className="rounded-lg border p-4">
                      <p className="text-sm font-medium text-muted-foreground">Completion Rate</p>
                      <p className="mt-2 text-3xl font-bold">68%</p>
                    </div>
                    <div className="rounded-lg border p-4">
                      <p className="text-sm font-medium text-muted-foreground">Average Quiz Score</p>
                      <p className="mt-2 text-3xl font-bold">82%</p>
                    </div>
                    <div className="rounded-lg border p-4">
                      <p className="text-sm font-medium text-muted-foreground">Active Students</p>
                      <p className="mt-2 text-3xl font-bold">21/24</p>
                    </div>
                  </div>

<div className="mt-6 h-[300px] rounded-lg border p-4">
                    <p className="mb-4 font-medium">Student Progress Over Time</p>
                    <div className="h-[240px] bg-muted/30">
                      {/* Chart would go here in a real implementation */}
                      <div className="flex h-full items-center justify-center">
                        <p className="text-muted-foreground">Progress chart visualization</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/create-quiz/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { BookOpen, Plus, Trash2, ArrowLeft, Save } from "lucide-react"

export default function CreateQuizPage() {
  const [quizTitle, setQuizTitle] = useState("")
  const [quizDescription, setQuizDescription] = useState("")
  const [questions, setQuestions] = useState([
    {
      id: 1,
      type: "single-choice",
      question: "",
      options: [
        { id: "a", text: "" },
        { id: "b", text: "" },
      ],
      correctAnswer: "",
    },
  ])

const addQuestion = () => {
    const newQuestion = {
      id: questions.length + 1,
      type: "single-choice",
      question: "",
      options: [
        { id: "a", text: "" },
        { id: "b", text: "" },
      ],
      correctAnswer: "",
    }
    setQuestions([...questions, newQuestion])
  }

const removeQuestion = (id: number) => {
    if (questions.length > 1) {
      setQuestions(questions.filter((q) => q.id !== id))
    }
  }

const updateQuestionType = (id: number, type: string) => {
    setQuestions(questions.map((q) => (q.id === id ? { ...q, type } : q)))
  }

const updateQuestionText = (id: number, question: string) => {
    setQuestions(questions.map((q) => (q.id === id ? { ...q, question } : q)))
  }

const addOption = (questionId: number) => {
    setQuestions(
      questions.map((q) => {
        if (q.id === questionId) {
          const newOptionId = String.fromCharCode(97 + q.options.length) // a, b, c, etc.
          return {
            ...q,
            options: [...q.options, { id: newOptionId, text: "" }],
          }
        }
        return q
      }),
    )
  }

const updateOption = (questionId: number, optionId: string, text: string) => {
    setQuestions(
      questions.map((q) => {
        if (q.id === questionId) {
          return {
            ...q,
            options: q.options.map((o) => (o.id === optionId ? { ...o, text } : o)),
          }
        }
        return q
      }),
    )
  }

const removeOption = (questionId: number, optionId: string) => {
    setQuestions(
      questions.map((q) => {
        if (q.id === questionId && q.options.length > 2) {
          return {
            ...q,
            options: q.options.filter((o) => o.id !== optionId),
          }
        }
        return q
      }),
    )
  }

const setCorrectAnswer = (questionId: number, answerId: string) => {
    setQuestions(questions.map((q) => (q.id === questionId ? { ...q, correctAnswer: answerId } : q)))
  }

const handleSaveQuiz = () => {
    // In a real app, this would save the quiz to the database
    alert("Quiz saved successfully!")
  }

<div className="mx-auto max-w-3xl space-y-6 py-6">
            <Card>
              <CardHeader>
                <CardTitle>Quiz Details</CardTitle>
                <CardDescription>Enter the basic information about your quiz</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="quiz-title">Quiz Title</Label>
                    <Input
                      id="quiz-title"
                      placeholder="Enter quiz title"
                      value={quizTitle}
                      onChange={(e) => setQuizTitle(e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="quiz-description">Description</Label>
                    <Textarea
                      id="quiz-description"
                      placeholder="Enter quiz description"
                      value={quizDescription}
                      onChange={(e) => setQuizDescription(e.target.value)}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="course">Course</Label>
                      <Select>
                        <SelectTrigger id="course">
                          <SelectValue placeholder="Select course" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="web-dev">Web Development Fundamentals</SelectItem>
                          <SelectItem value="data-science">Data Science Essentials</SelectItem>
                          <SelectItem value="ux-design">UX Design Principles</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="chapter">Chapter</Label>
                      <Select>
                        <SelectTrigger id="chapter">
                          <SelectValue placeholder="Select chapter" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="chapter-1">Chapter 1: Introduction</SelectItem>
                          <SelectItem value="chapter-2">Chapter 2: Fundamentals</SelectItem>
                          <SelectItem value="chapter-3">Chapter 3: Advanced Topics</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

{questions.map((question, index) => (
              <Card key={question.id}>
                <CardHeader className="flex flex-row items-center justify-between">
                  <div>
                    <CardTitle>Question {index + 1}</CardTitle>
                    <CardDescription>
                      {question.type === "single-choice"
                        ? "Single choice question"
                        : question.type === "multiple-choice"
                          ? "Multiple choice question"
                          : "Open-ended question"}
                    </CardDescription>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => removeQuestion(question.id)}
                    disabled={questions.length === 1}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor={`question-type-${question.id}`}>Question Type</Label>
                      <Select value={question.type} onValueChange={(value) => updateQuestionType(question.id, value)}>
                        <SelectTrigger id={`question-type-${question.id}`}>
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="single-choice">Single Choice</SelectItem>
                          <SelectItem value="multiple-choice">Multiple Choice</SelectItem>
                          <SelectItem value="open-ended">Open Ended</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

<div className="space-y-2">
                      <Label htmlFor={`question-text-${question.id}`}>Question</Label>
                      <Textarea
                        id={`question-text-${question.id}`}
                        placeholder="Enter your question"
                        value={question.question}
                        onChange={(e) => updateQuestionText(question.id, e.target.value)}
                      />
                    </div>

{(question.type === "single-choice" || question.type === "multiple-choice") && (
                      <div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Label>Answer Options</Label>
                          <Button variant="outline" size="sm" onClick={() => addOption(question.id)}>
                            <Plus className="mr-2 h-3 w-3" />
                            Add Option
                          </Button>
                        </div>

<div className="space-y-2">
                          {question.options.map((option) => (
                            <div key={option.id} className="flex items-center gap-2">
                              {question.type === "single-choice" ? (
                                <RadioGroup
                                  value={question.correctAnswer}
                                  onValueChange={(value) => setCorrectAnswer(question.id, value)}
                                >
                                  <div className="flex items-center space-x-2">
                                    <RadioGroupItem value={option.id} id={`option-${question.id}-${option.id}`} />
                                  </div>
                                </RadioGroup>
                              ) : (
                                <Checkbox id={`option-${question.id}-${option.id}`} />
                              )}
                              <Input
                                placeholder={`Option ${option.id.toUpperCase()}`}
                                value={option.text}
                                onChange={(e) => updateOption(question.id, option.id, e.target.value)}
                                className="flex-1"
                              />
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => removeOption(question.id, option.id)}
                                disabled={question.options.length <= 2}
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            ))}

<div className="flex justify-center">
              <Button variant="outline" onClick={addQuestion}>
                <Plus className="mr-2 h-4 w-4" />
                Add Question
              </Button>
            </div>

<div className="flex justify-end">
              <Button onClick={handleSaveQuiz}>
                <Save className="mr-2 h-4 w-4" />
                Save Quiz
              </Button>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/create-course/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, ArrowLeft, Save, Plus, Trash2, FileUp } from "lucide-react"

export default function CreateCoursePage() {
  const [courseTitle, setCourseTitle] = useState("")
  const [courseDescription, setCourseDescription] = useState("")
  const [chapters, setChapters] = useState([
    { id: 1, title: "", description: "", lessons: [{ id: 1, title: "", type: "lesson" }] },
  ])

const addChapter = () => {
    setChapters([
      ...chapters,
      {
        id: chapters.length + 1,
        title: "",
        description: "",
        lessons: [{ id: 1, title: "", type: "lesson" }],
      },
    ])
  }

const updateChapter = (id: number, field: string, value: string) => {
    setChapters(chapters.map((chapter) => (chapter.id === id ? { ...chapter, [field]: value } : chapter)))
  }

const removeChapter = (id: number) => {
    if (chapters.length > 1) {
      setChapters(chapters.filter((chapter) => chapter.id !== id))
    }
  }

const addLesson = (chapterId: number) => {
    setChapters(
      chapters.map((chapter) => {
        if (chapter.id === chapterId) {
          return {
            ...chapter,
            lessons: [
              ...chapter.lessons,
              {
                id: chapter.lessons.length + 1,
                title: "",
                type: "lesson",
              },
            ],
          }
        }
        return chapter
      }),
    )
  }

const addQuiz = (chapterId: number) => {
    setChapters(
      chapters.map((chapter) => {
        if (chapter.id === chapterId) {
          return {
            ...chapter,
            lessons: [
              ...chapter.lessons,
              {
                id: chapter.lessons.length + 1,
                title: "",
                type: "quiz",
              },
            ],
          }
        }
        return chapter
      }),
    )
  }

const addAssignment = (chapterId: number) => {
    setChapters(
      chapters.map((chapter) => {
        if (chapter.id === chapterId) {
          return {
            ...chapter,
            lessons: [
              ...chapter.lessons,
              {
                id: chapter.lessons.length + 1,
                title: "",
                type: "assignment",
              },
            ],
          }
        }
        return chapter
      }),
    )
  }

const updateLesson = (chapterId: number, lessonId: number, field: string, value: string) => {
    setChapters(
      chapters.map((chapter) => {
        if (chapter.id === chapterId) {
          return {
            ...chapter,
            lessons: chapter.lessons.map((lesson) => (lesson.id === lessonId ? { ...lesson, [field]: value } : lesson)),
          }
        }
        return chapter
      }),
    )
  }

const removeLesson = (chapterId: number, lessonId: number) => {
    setChapters(
      chapters.map((chapter) => {
        if (chapter.id === chapterId && chapter.lessons.length > 1) {
          return {
            ...chapter,
            lessons: chapter.lessons.filter((lesson) => lesson.id !== lessonId),
          }
        }
        return chapter
      }),
    )
  }

const handleSaveCourse = () => {
    // In a real app, this would save the course to the database
    alert("Course saved successfully!")
  }

<Tabs defaultValue="details" className="mt-6">
            <TabsList>
              <TabsTrigger value="details">Course Details</TabsTrigger>
              <TabsTrigger value="structure">Course Structure</TabsTrigger>
              <TabsTrigger value="settings">Settings</TabsTrigger>
            </TabsList>

<TabsContent value="details" className="space-y-6 py-4">
              <Card>
                <CardHeader>
                  <CardTitle>Basic Information</CardTitle>
                  <CardDescription>Enter the basic details about your course</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="course-title">Course Title</Label>
                      <Input
                        id="course-title"
                        placeholder="Enter course title"
                        value={courseTitle}
                        onChange={(e) => setCourseTitle(e.target.value)}
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="course-description">Course Description</Label>
                      <Textarea
                        id="course-description"
                        placeholder="Enter course description"
                        value={courseDescription}
                        onChange={(e) => setCourseDescription(e.target.value)}
                        className="min-h-[150px]"
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Course Image</CardTitle>
                  <CardDescription>Upload an image that represents your course</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-center rounded-lg border border-dashed p-6">
                    <div className="text-center">
                      <FileUp className="mx-auto h-8 w-8 text-muted-foreground" />
                      <div className="mt-2">
                        <Button variant="secondary" size="sm">
                          Upload Image
                        </Button>
                      </div>
                      <p className="mt-2 text-xs text-muted-foreground">PNG, JPG or GIF, recommended size 1280x720px</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="structure" className="space-y-6 py-4">
              {chapters.map((chapter, index) => (
                <Card key={chapter.id}>
                  <CardHeader className="flex flex-row items-center justify-between">
                    <div>
                      <CardTitle>Chapter {index + 1}</CardTitle>
                      <CardDescription>Add lessons, quizzes, and assignments to this chapter</CardDescription>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => removeChapter(chapter.id)}
                      disabled={chapters.length === 1}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="space-y-2">
                        <Label htmlFor={`chapter-title-${chapter.id}`}>Chapter Title</Label>
                        <Input
                          id={`chapter-title-${chapter.id}`}
                          placeholder="Enter chapter title"
                          value={chapter.title}
                          onChange={(e) => updateChapter(chapter.id, "title", e.target.value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor={`chapter-description-${chapter.id}`}>Chapter Description</Label>
                        <Textarea
                          id={`chapter-description-${chapter.id}`}
                          placeholder="Enter chapter description"
                          value={chapter.description}
                          onChange={(e) => updateChapter(chapter.id, "description", e.target.value)}
                        />
                      </div>

<div className="space-y-2">
                        <div className="flex items-center justify-between">
                          <Label>Content</Label>
                          <div className="flex gap-2">
                            <Button variant="outline" size="sm" onClick={() => addLesson(chapter.id)}>
                              <Plus className="mr-1 h-3 w-3" />
                              Lesson
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => addQuiz(chapter.id)}>
                              <Plus className="mr-1 h-3 w-3" />
                              Quiz
                            </Button>
                            <Button variant="outline" size="sm" onClick={() => addAssignment(chapter.id)}>
                              <Plus className="mr-1 h-3 w-3" />
                              Assignment
                            </Button>
                          </div>
                        </div>

<div className="space-y-2">
                          {chapter.lessons.map((lesson) => (
                            <div key={lesson.id} className="flex items-center gap-2">
                              <div className="flex h-8 w-8 items-center justify-center rounded-md bg-muted text-xs font-medium">
                                {lesson.type === "lesson" ? "L" : lesson.type === "quiz" ? "Q" : "A"}
                              </div>
                              <Input
                                placeholder={`${lesson.type === "lesson" ? "Lesson" : lesson.type === "quiz" ? "Quiz" : "Assignment"} title`}
                                value={lesson.title}
                                onChange={(e) => updateLesson(chapter.id, lesson.id, "title", e.target.value)}
                                className="flex-1"
                              />
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => removeLesson(chapter.id, lesson.id)}
                                disabled={chapter.lessons.length <= 1}
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}

<div className="flex justify-center">
                <Button variant="outline" onClick={addChapter}>
                  <Plus className="mr-2 h-4 w-4" />
                  Add Chapter
                </Button>
              </div>
            </TabsContent>

<TabsContent value="settings" className="space-y-6 py-4">
              <Card>
                <CardHeader>
                  <CardTitle>Course Settings</CardTitle>
                  <CardDescription>Configure additional settings for your course</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="course-duration">Duration (weeks)</Label>
                        <Input id="course-duration" type="number" placeholder="Enter duration" min="1" />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="course-difficulty">Difficulty Level</Label>
                        <select
                          id="course-difficulty"
                          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                        >
                          <option value="beginner">Beginner</option>
                          <option value="intermediate">Intermediate</option>
                          <option value="advanced">Advanced</option>
                        </select>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="course-prerequisites">Prerequisites</Label>
                      <Textarea id="course-prerequisites" placeholder="Enter course prerequisites" />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="course-outcomes">Learning Outcomes</Label>
                      <Textarea id="course-outcomes" placeholder="Enter learning outcomes" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>

<div className="mt-6 flex justify-end">
            <Button onClick={handleSaveCourse}>
              <Save className="mr-2 h-4 w-4" />
              Save Course
            </Button>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]xml:file="public/67y9a.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg" isTempFile="true" isMerged="true"
[V0_FILE]xml:file="public/0u6sn.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg" isTempFile="true" isMerged="true"
[V0_FILE]typescriptreact:file="app/dashboard/assignments/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Clock, FileText, BarChart, Award, Filter } from "lucide-react"

export default function AssignmentsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/dashboard/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                My Courses
              </Button>
            </Link>
            <Link href="/dashboard/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/dashboard/certificates">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Award className="h-4 w-4" />
                Certificates
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">Assignments</h1>
            <Button variant="outline" size="sm" className="gap-2">
              <Filter className="h-4 w-4" />
              Filter
            </Button>
          </div>

<Tabs defaultValue="upcoming" className="mt-6">
            <TabsList>
              <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
              <TabsTrigger value="submitted">Submitted</TabsTrigger>
              <TabsTrigger value="graded">Graded</TabsTrigger>
              <TabsTrigger value="all">All</TabsTrigger>
            </TabsList>

<TabsContent value="upcoming" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Upcoming Assignments</CardTitle>
                  <CardDescription>Assignments that are due soon</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">Final Project: Portfolio Website</h3>
                        <p className="text-sm text-muted-foreground">Web Development Fundamentals</p>
                      </div>
                      <Badge variant="destructive" className="gap-1">
                        <Clock className="h-3 w-3" />
                        Due in 2 days
                      </Badge>
                    </div>
                    <p className="mt-2 text-sm">
                      Create a responsive portfolio website that showcases your skills, projects, and professional
                      information.
                    </p>
                    <div className="mt-4 flex justify-end">
                      <Button size="sm">View Assignment</Button>
                    </div>
                  </div>

<div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">Data Visualization Exercise</h3>
                        <p className="text-sm text-muted-foreground">Data Science Essentials</p>
                      </div>
                      <Badge variant="outline" className="gap-1">
                        <Clock className="h-3 w-3" />
                        Due in 5 days
                      </Badge>
                    </div>
                    <p className="mt-2 text-sm">
                      Create visualizations from the provided dataset using appropriate charts and graphs.
                    </p>
                    <div className="mt-4 flex justify-end">
                      <Button size="sm">View Assignment</Button>
                    </div>
                  </div>

<div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">User Research Report</h3>
                        <p className="text-sm text-muted-foreground">UX Design Principles</p>
                      </div>
                      <Badge variant="outline" className="gap-1">
                        <Clock className="h-3 w-3" />
                        Due in 8 days
                      </Badge>
                    </div>
                    <p className="mt-2 text-sm">
                      Conduct user research for your chosen application and submit a comprehensive report.
                    </p>
                    <div className="mt-4 flex justify-end">
                      <Button size="sm">View Assignment</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="submitted" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Submitted Assignments</CardTitle>
                  <CardDescription>Assignments you've submitted that are awaiting grading</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">JavaScript Fundamentals Practice</h3>
                        <p className="text-sm text-muted-foreground">Web Development Fundamentals</p>
                      </div>
                      <Badge className="bg-amber-500">Pending Review</Badge>
                    </div>
                    <p className="mt-2 text-sm">Submitted on April 28, 2025</p>
                    <div className="mt-4 flex justify-end">
                      <Button variant="outline" size="sm">
                        View Submission
                      </Button>
                    </div>
                  </div>

<div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">Data Cleaning Exercise</h3>
                        <p className="text-sm text-muted-foreground">Data Science Essentials</p>
                      </div>
                      <Badge className="bg-amber-500">Pending Review</Badge>
                    </div>
                    <p className="mt-2 text-sm">Submitted on April 25, 2025</p>
                    <div className="mt-4 flex justify-end">
                      <Button variant="outline" size="sm">
                        View Submission
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="graded" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Graded Assignments</CardTitle>
                  <CardDescription>Assignments that have been graded by your instructors</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">HTML & CSS Basics</h3>
                        <p className="text-sm text-muted-foreground">Web Development Fundamentals</p>
                      </div>
                      <Badge className="bg-green-500">92% - Excellent</Badge>
                    </div>
                    <p className="mt-2 text-sm">Graded on April 15, 2025</p>
                    <div className="mt-4 flex justify-end">
                      <Button variant="outline" size="sm">
                        View Feedback
                      </Button>
                    </div>
                  </div>

<div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-semibold">Wireframing Exercise</h3>
                        <p className="text-sm text-muted-foreground">UX Design Principles</p>
                      </div>
                      <Badge className="bg-green-500">95% - Excellent</Badge>
                    </div>
                    <p className="mt-2 text-sm">Graded on April 5, 2025</p>
                    <div className="mt-4 flex justify-end">
                      <Button variant="outline" size="sm">
                        View Feedback
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="all" className="pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>All Assignments</CardTitle>
                  <CardDescription>View all your assignments across all courses</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="relative w-full overflow-auto">
                    <table className="w-full caption-bottom text-sm">
                      <thead>
                        <tr className="border-b">
                          <th className="h-12 px-4 text-left font-medium">Assignment</th>
                          <th className="h-12 px-4 text-left font-medium">Course</th>
                          <th className="h-12 px-4 text-left font-medium">Due Date</th>
                          <th className="h-12 px-4 text-left font-medium">Status</th>
                          <th className="h-12 px-4 text-left font-medium">Grade</th>
                          <th className="h-12 px-4 text-left font-medium"></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b">
                          <td className="p-4">Final Project: Portfolio Website</td>
                          <td className="p-4">Web Development Fundamentals</td>
                          <td className="p-4">May 7, 2025</td>
                          <td className="p-4">
                            <Badge variant="destructive">Due Soon</Badge>
                          </td>
                          <td className="p-4">-</td>
                          <td className="p-4">
                            <Button size="sm">View</Button>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">Data Visualization Exercise</td>
                          <td className="p-4">Data Science Essentials</td>
                          <td className="p-4">May 10, 2025</td>
                          <td className="p-4">
                            <Badge variant="outline">Upcoming</Badge>
                          </td>
                          <td className="p-4">-</td>
                          <td className="p-4">
                            <Button size="sm">View</Button>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">JavaScript Fundamentals Practice</td>
                          <td className="p-4">Web Development Fundamentals</td>
                          <td className="p-4">April 20, 2025</td>
                          <td className="p-4">
                            <Badge className="bg-amber-500">Pending Review</Badge>
                          </td>
                          <td className="p-4">-</td>
                          <td className="p-4">
                            <Button size="sm">View</Button>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">HTML & CSS Basics</td>
                          <td className="p-4">Web Development Fundamentals</td>
                          <td className="p-4">April 10, 2025</td>
                          <td className="p-4">
                            <Badge className="bg-green-500">Graded</Badge>
                          </td>
                          <td className="p-4">92%</td>
                          <td className="p-4">
                            <Button size="sm">View</Button>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">Python Data Structures</td>
                          <td className="p-4">Data Science Essentials</td>
                          <td className="p-4">April 5, 2025</td>
                          <td className="p-4">
                            <Badge className="bg-green-500">Graded</Badge>
                          </td>
                          <td className="p-4">88%</td>
                          <td className="p-4">
                            <Button size="sm">View</Button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/certificates/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { BookOpen, BarChart, FileText, Award, Download, Share2 } from "lucide-react"

export default function CertificatesPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/dashboard/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                My Courses
              </Button>
            </Link>
            <Link href="/dashboard/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/dashboard/certificates">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <Award className="h-4 w-4" />
                Certificates
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">My Certificates</h1>
          </div>

<div className="mt-6 space-y-6">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Card className="overflow-hidden">
                <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 to-primary/5 p-6">
                  <div className="flex h-full flex-col items-center justify-center rounded-lg border border-primary/20 bg-white p-4 text-center shadow-sm">
                    <Award className="h-12 w-12 text-primary" />
                    <h3 className="mt-4 text-lg font-bold">Web Development Fundamentals</h3>
                    <p className="mt-1 text-sm text-muted-foreground">Completed on March 15, 2025</p>
                  </div>
                </div>
                <CardFooter className="flex justify-between p-4">
                  <Button variant="outline" size="sm" className="gap-1">
                    <Download className="h-4 w-4" />
                    Download
                  </Button>
                  <Button variant="outline" size="sm" className="gap-1">
                    <Share2 className="h-4 w-4" />
                    Share
                  </Button>
                </CardFooter>
              </Card>

<Card className="overflow-hidden">
                <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 to-primary/5 p-6">
                  <div className="flex h-full flex-col items-center justify-center rounded-lg border border-primary/20 bg-white p-4 text-center shadow-sm">
                    <Award className="h-12 w-12 text-primary" />
                    <h3 className="mt-4 text-lg font-bold">Introduction to Python</h3>
                    <p className="mt-1 text-sm text-muted-foreground">Completed on February 20, 2025</p>
                  </div>
                </div>
                <CardFooter className="flex justify-between p-4">
                  <Button variant="outline" size="sm" className="gap-1">
                    <Download className="h-4 w-4" />
                    Download
                  </Button>
                  <Button variant="outline" size="sm" className="gap-1">
                    <Share2 className="h-4 w-4" />
                    Share
                  </Button>
                </CardFooter>
              </Card>

<Card className="overflow-hidden">
                <div className="aspect-[4/3] bg-gradient-to-br from-primary/20 to-primary/5 p-6">
                  <div className="flex h-full flex-col items-center justify-center rounded-lg border border-primary/20 bg-white p-4 text-center shadow-sm">
                    <Award className="h-12 w-12 text-primary" />
                    <h3 className="mt-4 text-lg font-bold">UX Design Basics</h3>
                    <p className="mt-1 text-sm text-muted-foreground">Completed on January 10, 2025</p>
                  </div>
                </div>
                <CardFooter className="flex justify-between p-4">
                  <Button variant="outline" size="sm" className="gap-1">
                    <Download className="h-4 w-4" />
                    Download
                  </Button>
                  <Button variant="outline" size="sm" className="gap-1">
                    <Share2 className="h-4 w-4" />
                    Share
                  </Button>
                </CardFooter>
              </Card>
            </div>

<Card>
              <CardHeader>
                <CardTitle>Upcoming Certificates</CardTitle>
                <CardDescription>Courses you're currently working on</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h3 className="font-semibold">Data Science Essentials</h3>
                      <p className="text-sm text-muted-foreground">42% Complete</p>
                    </div>
                    <div className="text-sm text-muted-foreground">Estimated completion: June 2025</div>
                  </div>

<div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h3 className="font-semibold">Advanced JavaScript</h3>
                      <p className="text-sm text-muted-foreground">15% Complete</p>
                    </div>
                    <div className="text-sm text-muted-foreground">Estimated completion: July 2025</div>
                  </div>

<div className="flex items-center justify-between rounded-lg border p-4">
                    <div>
                      <h3 className="font-semibold">UI/UX Design Principles</h3>
                      <p className="text-sm text-muted-foreground">25% Complete</p>
                    </div>
                    <div className="text-sm text-muted-foreground">Estimated completion: August 2025</div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Certificate Verification</CardTitle>
                <CardDescription>Share your certificates with employers and verify their authenticity</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  All certificates issued by LearnSphere include a unique verification code. Share this code with
                  employers or anyone who needs to verify the authenticity of your certificate.
                </p>
                <div className="mt-4">
                  <Button>Learn More About Verification</Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/settings/page.tsx"
"use client"

import { Badge } from "@/components/ui/badge"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import { BookOpen, BarChart, FileText, Award, Settings, User, Bell, Shield, CreditCard } from "lucide-react"

export default function SettingsPage() {
  const [notifications, setNotifications] = useState({
    email: true,
    assignments: true,
    courseUpdates: true,
    newMessages: true,
    marketing: false,
  })

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/dashboard/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                My Courses
              </Button>
            </Link>
            <Link href="/dashboard/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/dashboard/certificates">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Award className="h-4 w-4" />
                Certificates
              </Button>
            </Link>
            <Link href="/dashboard/settings">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <Settings className="h-4 w-4" />
                Settings
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">Account Settings</h1>
          </div>

<Tabs defaultValue="profile" className="mt-6">
            <TabsList>
              <TabsTrigger value="profile" className="gap-2">
                <User className="h-4 w-4" />
                Profile
              </TabsTrigger>
              <TabsTrigger value="notifications" className="gap-2">
                <Bell className="h-4 w-4" />
                Notifications
              </TabsTrigger>
              <TabsTrigger value="security" className="gap-2">
                <Shield className="h-4 w-4" />
                Security
              </TabsTrigger>
              <TabsTrigger value="billing" className="gap-2">
                <CreditCard className="h-4 w-4" />
                Billing
              </TabsTrigger>
            </TabsList>

<TabsContent value="profile" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Profile Information</CardTitle>
                  <CardDescription>Update your personal information</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex flex-col items-center justify-center space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
                    <div className="relative h-24 w-24 rounded-full bg-muted">
                      <div className="absolute inset-0 flex items-center justify-center text-2xl font-semibold text-muted-foreground">
                        JS
                      </div>
                    </div>
                    <div className="flex flex-col space-y-2">
                      <Button variant="outline" size="sm">
                        Upload New Photo
                      </Button>
                      <Button variant="ghost" size="sm" className="text-muted-foreground">
                        Remove Photo
                      </Button>
                    </div>
                  </div>

<div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-2">
                      <Label htmlFor="first-name">First Name</Label>
                      <Input id="first-name" defaultValue="John" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="last-name">Last Name</Label>
                      <Input id="last-name" defaultValue="Smith" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="email">Email</Label>
                    <Input id="email" type="email" defaultValue="john.smith@example.com" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="bio">Bio</Label>
                    <Textarea
                      id="bio"
                      placeholder="Tell us about yourself"
                      defaultValue="I'm a software developer interested in web development and data science."
                    />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Changes</Button>
                </CardFooter>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Learning Preferences</CardTitle>
                  <CardDescription>Customize your learning experience</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="language">Preferred Language</Label>
                    <select
                      id="language"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <option value="en">English</option>
                      <option value="es">Spanish</option>
                      <option value="fr">French</option>
                      <option value="de">German</option>
                      <option value="zh">Chinese</option>
                    </select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="timezone">Timezone</Label>
                    <select
                      id="timezone"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <option value="utc-8">Pacific Time (UTC-8)</option>
                      <option value="utc-5">Eastern Time (UTC-5)</option>
                      <option value="utc+0">Greenwich Mean Time (UTC+0)</option>
                      <option value="utc+1">Central European Time (UTC+1)</option>
                      <option value="utc+8">China Standard Time (UTC+8)</option>
                    </select>
                  </div>

<div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="dark-mode">Dark Mode</Label>
                        <p className="text-sm text-muted-foreground">Enable dark mode for the platform</p>
                      </div>
                      <Switch id="dark-mode" />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="autoplay">Autoplay Videos</Label>
                        <p className="text-sm text-muted-foreground">Automatically play videos when viewing lessons</p>
                      </div>
                      <Switch id="autoplay" defaultChecked />
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Preferences</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="notifications" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Notification Settings</CardTitle>
                  <CardDescription>Manage how you receive notifications</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Email Notifications</Label>
                        <p className="text-sm text-muted-foreground">Receive notifications via email</p>
                      </div>
                      <Switch
                        checked={notifications.email}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, email: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Assignment Reminders</Label>
                        <p className="text-sm text-muted-foreground">Get reminders about upcoming assignments</p>
                      </div>
                      <Switch
                        checked={notifications.assignments}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, assignments: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Course Updates</Label>
                        <p className="text-sm text-muted-foreground">Be notified when courses are updated</p>
                      </div>
                      <Switch
                        checked={notifications.courseUpdates}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, courseUpdates: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>New Messages</Label>
                        <p className="text-sm text-muted-foreground">
                          Get notified about new messages from instructors
                        </p>
                      </div>
                      <Switch
                        checked={notifications.newMessages}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, newMessages: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Marketing Communications</Label>
                        <p className="text-sm text-muted-foreground">
                          Receive updates about new courses and promotions
                        </p>
                      </div>
                      <Switch
                        checked={notifications.marketing}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, marketing: checked })}
                      />
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Notification Settings</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="security" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Change Password</CardTitle>
                  <CardDescription>Update your password to keep your account secure</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="current-password">Current Password</Label>
                    <Input id="current-password" type="password" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="new-password">New Password</Label>
                    <Input id="new-password" type="password" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="confirm-password">Confirm New Password</Label>
                    <Input id="confirm-password" type="password" />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Update Password</Button>
                </CardFooter>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Two-Factor Authentication</CardTitle>
                  <CardDescription>Add an extra layer of security to your account</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>Two-Factor Authentication</Label>
                      <p className="text-sm text-muted-foreground">
                        Require a verification code when logging in from a new device
                      </p>
                    </div>
                    <Switch defaultChecked />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline">Configure 2FA</Button>
                </CardFooter>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Login Sessions</CardTitle>
                  <CardDescription>Manage your active login sessions</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium">Current Session</p>
                          <p className="text-sm text-muted-foreground">Windows 11 • Chrome • San Francisco, USA</p>
                        </div>
                        <Badge className="bg-green-500">Active Now</Badge>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium">Mobile App</p>
                          <p className="text-sm text-muted-foreground">
                            iOS 17 • LearnSphere App • Last active 2 hours ago
                          </p>
                        </div>
                        <Button variant="outline" size="sm">
                          Sign Out
                        </Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium">Laptop</p>
                          <p className="text-sm text-muted-foreground">macOS • Safari • Last active 3 days ago</p>
                        </div>
                        <Button variant="outline" size="sm">
                          Sign Out
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline">Sign Out All Devices</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="billing" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Subscription Plan</CardTitle>
                  <CardDescription>Manage your subscription and billing information</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">Pro Plan</p>
                        <p className="text-sm text-muted-foreground">$15.99/month • Renews on June 15, 2025</p>
                      </div>
                      <Button variant="outline">Manage Plan</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Payment Methods</CardTitle>
                  <CardDescription>Manage your payment methods</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="rounded-lg border p-4">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <CreditCard className="h-5 w-5" />
                        <div>
                          <p className="font-medium">Visa ending in 4242</p>
                          <p className="text-sm text-muted-foreground">Expires 05/2026</p>
                        </div>
                      </div>
                      <Badge>Default</Badge>
                    </div>
                  </div>

<Button variant="outline">Add Payment Method</Button>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Billing History</CardTitle>
                  <CardDescription>View your past invoices</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="relative w-full overflow-auto">
                    <table className="w-full caption-bottom text-sm">
                      <thead>
                        <tr className="border-b">
                          <th className="h-12 px-4 text-left font-medium">Date</th>
                          <th className="h-12 px-4 text-left font-medium">Description</th>
                          <th className="h-12 px-4 text-left font-medium">Amount</th>
                          <th className="h-12 px-4 text-left font-medium">Status</th>
                          <th className="h-12 px-4 text-left font-medium"></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b">
                          <td className="p-4">May 15, 2025</td>
                          <td className="p-4">Pro Plan Subscription</td>
                          <td className="p-4">$15.99</td>
                          <td className="p-4">
                            <Badge className="bg-green-500">Paid</Badge>
                          </td>
                          <td className="p-4">
                            <Button variant="ghost" size="sm">
                              View
                            </Button>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">April 15, 2025</td>
                          <td className="p-4">Pro Plan Subscription</td>
                          <td className="p-4">$15.99</td>
                          <td className="p-4">
                            <Badge className="bg-green-500">Paid</Badge>
                          </td>
                          <td className="p-4">
                            <Button variant="ghost" size="sm">
                              View
                            </Button>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">March 15, 2025</td>
                          <td className="p-4">Pro Plan Subscription</td>
                          <td className="p-4">$15.99</td>
                          <td className="p-4">
                            <Badge className="bg-green-500">Paid</Badge>
                          </td>
                          <td className="p-4">
                            <Button variant="ghost" size="sm">
                              View
                            </Button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/students/page.tsx"
"use client"

import { Textarea } from "@/components/ui/textarea"

import { Label } from "@/components/ui/label"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, Users, FileText, Settings, BarChart, Search, Mail, UserPlus } from "lucide-react"

export default function StudentsPage() {
  const [searchQuery, setSearchQuery] = useState("")

const students = [
    {
      id: 1,
      name: "Alex Johnson",
      email: "alex.johnson@example.com",
      courses: 3,
      progress: 78,
      lastActive: "2 hours ago",
    },
    {
      id: 2,
      name: "Samantha Lee",
      email: "samantha.lee@example.com",
      courses: 2,
      progress: 92,
      lastActive: "1 day ago",
    },
    {
      id: 3,
      name: "Michael Chen",
      email: "michael.chen@example.com",
      courses: 4,
      progress: 65,
      lastActive: "3 hours ago",
    },
    {
      id: 4,
      name: "Emily Wilson",
      email: "emily.wilson@example.com",
      courses: 1,
      progress: 45,
      lastActive: "5 days ago",
    },
    {
      id: 5,
      name: "David Rodriguez",
      email: "david.rodriguez@example.com",
      courses: 3,
      progress: 82,
      lastActive: "Just now",
    },
    { id: 6, name: "Sarah Kim", email: "sarah.kim@example.com", courses: 2, progress: 70, lastActive: "1 hour ago" },
    {
      id: 7,
      name: "James Taylor",
      email: "james.taylor@example.com",
      courses: 1,
      progress: 30,
      lastActive: "2 weeks ago",
    },
    {
      id: 8,
      name: "Olivia Martinez",
      email: "olivia.martinez@example.com",
      courses: 4,
      progress: 88,
      lastActive: "4 hours ago",
    },
  ]

const filteredStudents = students.filter(
    (student) =>
      student.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      student.email.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/instructor/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/instructor/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                Courses
              </Button>
            </Link>
            <Link href="/instructor/students">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <Users className="h-4 w-4" />
                Students
              </Button>
            </Link>
            <Link href="/instructor/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/instructor/settings">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Settings className="h-4 w-4" />
                Settings
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
            <h1 className="text-2xl font-bold">Students</h1>
            <div className="flex gap-2">
              <Button variant="outline" className="gap-2">
                <Mail className="h-4 w-4" />
                Email All
              </Button>
              <Button className="gap-2">
                <UserPlus className="h-4 w-4" />
                Add Students
              </Button>
            </div>
          </div>

<div className="mt-6">
            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
              <div className="relative w-full max-w-sm">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="Search students..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">{filteredStudents.length} students</span>
              </div>
            </div>

<Tabs defaultValue="all" className="mt-6">
              <TabsList>
                <TabsTrigger value="all">All Students</TabsTrigger>
                <TabsTrigger value="active">Active</TabsTrigger>
                <TabsTrigger value="inactive">Inactive</TabsTrigger>
              </TabsList>

<TabsContent value="all" className="space-y-4 pt-4">
                <Card>
                  <CardContent className="p-0">
                    <div className="relative w-full overflow-auto">
                      <table className="w-full caption-bottom text-sm">
                        <thead>
                          <tr className="border-b">
                            <th className="h-12 px-4 text-left font-medium">Name</th>
                            <th className="h-12 px-4 text-left font-medium">Email</th>
                            <th className="h-12 px-4 text-left font-medium">Courses</th>
                            <th className="h-12 px-4 text-left font-medium">Progress</th>
                            <th className="h-12 px-4 text-left font-medium">Last Active</th>
                            <th className="h-12 px-4 text-left font-medium"></th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredStudents.map((student) => (
                            <tr key={student.id} className="border-b">
                              <td className="p-4">
                                <div className="flex items-center gap-3">
                                  <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
                                    <span className="text-xs font-medium">
                                      {student.name
                                        .split(" ")
                                        .map((n) => n[0])
                                        .join("")}
                                    </span>
                                  </div>
                                  <span>{student.name}</span>
                                </div>
                              </td>
                              <td className="p-4">{student.email}</td>
                              <td className="p-4">{student.courses}</td>
                              <td className="p-4">
                                <div className="flex items-center gap-2">
                                  <div className="h-2 w-24 rounded-full bg-muted">
                                    <div
                                      className="h-full rounded-full bg-primary"
                                      style={{ width: `${student.progress}%` }}
                                    ></div>
                                  </div>
                                  <span>{student.progress}%</span>
                                </div>
                              </td>
                              <td className="p-4">{student.lastActive}</td>
                              <td className="p-4">
                                <Button variant="ghost" size="sm">
                                  View
                                </Button>
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="active" className="pt-4">
                <Card>
                  <CardContent className="p-0">
                    <div className="relative w-full overflow-auto">
                      <table className="w-full caption-bottom text-sm">
                        <thead>
                          <tr className="border-b">
                            <th className="h-12 px-4 text-left font-medium">Name</th>
                            <th className="h-12 px-4 text-left font-medium">Email</th>
                            <th className="h-12 px-4 text-left font-medium">Courses</th>
                            <th className="h-12 px-4 text-left font-medium">Progress</th>
                            <th className="h-12 px-4 text-left font-medium">Last Active</th>
                            <th className="h-12 px-4 text-left font-medium"></th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredStudents
                            .filter((student) => !student.lastActive.includes("week"))
                            .map((student) => (
                              <tr key={student.id} className="border-b">
                                <td className="p-4">
                                  <div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
                                      <span className="text-xs font-medium">
                                        {student.name
                                          .split(" ")
                                          .map((n) => n[0])
                                          .join("")}
                                      </span>
                                    </div>
                                    <span>{student.name}</span>
                                  </div>
                                </td>
                                <td className="p-4">{student.email}</td>
                                <td className="p-4">{student.courses}</td>
                                <td className="p-4">
                                  <div className="flex items-center gap-2">
                                    <div className="h-2 w-24 rounded-full bg-muted">
                                      <div
                                        className="h-full rounded-full bg-primary"
                                        style={{ width: `${student.progress}%` }}
                                      ></div>
                                    </div>
                                    <span>{student.progress}%</span>
                                  </div>
                                </td>
                                <td className="p-4">{student.lastActive}</td>
                                <td className="p-4">
                                  <Button variant="ghost" size="sm">
                                    View
                                  </Button>
                                </td>
                              </tr>
                            ))}
                        </tbody>
                      </table>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>

<TabsContent value="inactive" className="pt-4">
                <Card>
                  <CardContent className="p-0">
                    <div className="relative w-full overflow-auto">
                      <table className="w-full caption-bottom text-sm">
                        <thead>
                          <tr className="border-b">
                            <th className="h-12 px-4 text-left font-medium">Name</th>
                            <th className="h-12 px-4 text-left font-medium">Email</th>
                            <th className="h-12 px-4 text-left font-medium">Courses</th>
                            <th className="h-12 px-4 text-left font-medium">Progress</th>
                            <th className="h-12 px-4 text-left font-medium">Last Active</th>
                            <th className="h-12 px-4 text-left font-medium"></th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredStudents
                            .filter((student) => student.lastActive.includes("week"))
                            .map((student) => (
                              <tr key={student.id} className="border-b">
                                <td className="p-4">
                                  <div className="flex items-center gap-3">
                                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
                                      <span className="text-xs font-medium">
                                        {student.name
                                          .split(" ")
                                          .map((n) => n[0])
                                          .join("")}
                                      </span>
                                    </div>
                                    <span>{student.name}</span>
                                  </div>
                                </td>
                                <td className="p-4">{student.email}</td>
                                <td className="p-4">{student.courses}</td>
                                <td className="p-4">
                                  <div className="flex items-center gap-2">
                                    <div className="h-2 w-24 rounded-full bg-muted">
                                      <div
                                        className="h-full rounded-full bg-primary"
                                        style={{ width: `${student.progress}%` }}
                                      ></div>
                                    </div>
                                    <span>{student.progress}%</span>
                                  </div>
                                </td>
                                <td className="p-4">{student.lastActive}</td>
                                <td className="p-4">
                                  <Button variant="ghost" size="sm">
                                    View
                                  </Button>
                                </td>
                              </tr>
                            ))}
                        </tbody>
                      </table>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>

<div className="mt-6 space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Invite Students</CardTitle>
                <CardDescription>Send invitations to students to join your courses</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="invite-emails">Email Addresses</Label>
                    <Textarea
                      id="invite-emails"
                      placeholder="Enter email addresses separated by commas"
                      className="min-h-[100px]"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="invite-course">Select Course</Label>
                    <select
                      id="invite-course"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <option value="">All Courses</option>
                      <option value="web-dev">Web Development Fundamentals</option>
                      <option value="data-science">Data Science Essentials</option>
                      <option value="ux-design">UX Design Principles</option>
                    </select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="invite-message">Custom Message (Optional)</Label>
                    <Textarea id="invite-message" placeholder="Add a personal message to your invitation" />
                  </div>
                </div>
              </CardContent>
              <CardFooter>
                <Button>Send Invitations</Button>
              </CardFooter>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/students/loading.tsx" isFixed="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/instructor/assignments/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { BookOpen, Users, FileText, Settings, BarChart, Plus, Filter, Eye, Edit, Trash2 } from "lucide-react"

export default function InstructorAssignmentsPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/instructor/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/instructor/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                Courses
              </Button>
            </Link>
            <Link href="/instructor/students">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Users className="h-4 w-4" />
                Students
              </Button>
            </Link>
            <Link href="/instructor/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/instructor/settings">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Settings className="h-4 w-4" />
                Settings
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
            <h1 className="text-2xl font-bold">Assignments</h1>
            <div className="flex gap-2">
              <Button variant="outline" className="gap-2">
                <Filter className="h-4 w-4" />
                Filter
              </Button>
              <Link href="/instructor/create-assignment">
                <Button className="gap-2">
                  <Plus className="h-4 w-4" />
                  Create Assignment
                </Button>
              </Link>
            </div>
          </div>

<Tabs defaultValue="all" className="mt-6">
            <TabsList>
              <TabsTrigger value="all">All Assignments</TabsTrigger>
              <TabsTrigger value="pending">Pending Review</TabsTrigger>
              <TabsTrigger value="graded">Graded</TabsTrigger>
              <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
            </TabsList>

<TabsContent value="all" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>All Assignments</CardTitle>
                  <CardDescription>Manage all assignments across your courses</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="relative w-full overflow-auto">
                    <table className="w-full caption-bottom text-sm">
                      <thead>
                        <tr className="border-b">
                          <th className="h-12 px-4 text-left font-medium">Assignment</th>
                          <th className="h-12 px-4 text-left font-medium">Course</th>
                          <th className="h-12 px-4 text-left font-medium">Due Date</th>
                          <th className="h-12 px-4 text-left font-medium">Submissions</th>
                          <th className="h-12 px-4 text-left font-medium">Status</th>
                          <th className="h-12 px-4 text-left font-medium">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr className="border-b">
                          <td className="p-4">Final Project: Portfolio Website</td>
                          <td className="p-4">Web Development Fundamentals</td>
                          <td className="p-4">May 7, 2025</td>
                          <td className="p-4">18/24</td>
                          <td className="p-4">
                            <Badge variant="outline">Active</Badge>
                          </td>
                          <td className="p-4">
                            <div className="flex gap-2">
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Eye className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">Data Visualization Exercise</td>
                          <td className="p-4">Data Science Essentials</td>
                          <td className="p-4">May 10, 2025</td>
                          <td className="p-4">5/18</td>
                          <td className="p-4">
                            <Badge variant="outline">Active</Badge>
                          </td>
                          <td className="p-4">
                            <div className="flex gap-2">
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Eye className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">JavaScript Fundamentals Practice</td>
                          <td className="p-4">Web Development Fundamentals</td>
                          <td className="p-4">April 20, 2025</td>
                          <td className="p-4">22/24</td>
                          <td className="p-4">
                            <Badge className="bg-amber-500">Pending Review</Badge>
                          </td>
                          <td className="p-4">
                            <div className="flex gap-2">
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Eye className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                        <tr className="border-b">
                          <td className="p-4">HTML & CSS Basics</td>
                          <td className="p-4">Web Development Fundamentals</td>
                          <td className="p-4">April 10, 2025</td>
                          <td className="p-4">24/24</td>
                          <td className="p-4">
                            <Badge className="bg-green-500">Graded</Badge>
                          </td>
                          <td className="p-4">
                            <div className="flex gap-2">
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Eye className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive">
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="pending" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Pending Review</CardTitle>
                  <CardDescription>Assignments that need your review and grading</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">JavaScript Fundamentals Practice</h3>
                          <p className="text-sm text-muted-foreground">Web Development Fundamentals</p>
                        </div>
                        <Badge className="bg-amber-500">22 Submissions</Badge>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">Due: April 20, 2025</p>
                        <Button size="sm">Review Submissions</Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Data Cleaning Exercise</h3>
                          <p className="text-sm text-muted-foreground">Data Science Essentials</p>
                        </div>
                        <Badge className="bg-amber-500">15 Submissions</Badge>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">Due: April 15, 2025</p>
                        <Button size="sm">Review Submissions</Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="graded" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Graded Assignments</CardTitle>
                  <CardDescription>Assignments that have been graded</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">HTML & CSS Basics</h3>
                          <p className="text-sm text-muted-foreground">Web Development Fundamentals</p>
                        </div>
                        <div className="text-right">
                          <Badge className="bg-green-500">Graded</Badge>
                          <p className="mt-1 text-sm text-muted-foreground">Avg. Score: 88%</p>
                        </div>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">Due: April 10, 2025</p>
                        <Button size="sm" variant="outline">
                          View Details
                        </Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Python Data Structures</h3>
                          <p className="text-sm text-muted-foreground">Data Science Essentials</p>
                        </div>
                        <div className="text-right">
                          <Badge className="bg-green-500">Graded</Badge>
                          <p className="mt-1 text-sm text-muted-foreground">Avg. Score: 82%</p>
                        </div>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">Due: April 5, 2025</p>
                        <Button size="sm" variant="outline">
                          View Details
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="upcoming" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Upcoming Assignments</CardTitle>
                  <CardDescription>Assignments with upcoming due dates</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Final Project: Portfolio Website</h3>
                          <p className="text-sm text-muted-foreground">Web Development Fundamentals</p>
                        </div>
                        <Badge variant="destructive">Due in 2 days</Badge>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">18 submissions out of 24 students</p>
                        <Button size="sm" variant="outline">
                          View Submissions
                        </Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Data Visualization Exercise</h3>
                          <p className="text-sm text-muted-foreground">Data Science Essentials</p>
                        </div>
                        <Badge variant="outline">Due in 5 days</Badge>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">5 submissions out of 18 students</p>
                        <Button size="sm" variant="outline">
                          View Submissions
                        </Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">User Research Report</h3>
                          <p className="text-sm text-muted-foreground">UX Design Principles</p>
                        </div>
                        <Badge variant="outline">Due in 8 days</Badge>
                      </div>
                      <div className="mt-4 flex items-center justify-between">
                        <p className="text-sm text-muted-foreground">3 submissions out of 15 students</p>
                        <Button size="sm" variant="outline">
                          View Submissions
                        </Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/settings/page.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import { BookOpen, Users, FileText, Settings, BarChart, User, Bell, Shield, Briefcase } from "lucide-react"

export default function InstructorSettingsPage() {
  const [notifications, setNotifications] = useState({
    email: true,
    submissions: true,
    questions: true,
    courseEnrollments: true,
    marketing: false,
  })

return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/instructor/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/instructor/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                Courses
              </Button>
            </Link>
            <Link href="/instructor/students">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Users className="h-4 w-4" />
                Students
              </Button>
            </Link>
            <Link href="/instructor/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/instructor/settings">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <Settings className="h-4 w-4" />
                Settings
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">Instructor Settings</h1>
          </div>

<Tabs defaultValue="profile" className="mt-6">
            <TabsList>
              <TabsTrigger value="profile" className="gap-2">
                <User className="h-4 w-4" />
                Profile
              </TabsTrigger>
              <TabsTrigger value="notifications" className="gap-2">
                <Bell className="h-4 w-4" />
                Notifications
              </TabsTrigger>
              <TabsTrigger value="security" className="gap-2">
                <Shield className="h-4 w-4" />
                Security
              </TabsTrigger>
              <TabsTrigger value="professional" className="gap-2">
                <Briefcase className="h-4 w-4" />
                Professional
              </TabsTrigger>
            </TabsList>

<TabsContent value="profile" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Instructor Profile</CardTitle>
                  <CardDescription>Update your instructor information visible to students</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex flex-col items-center justify-center space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
                    <div className="relative h-24 w-24 rounded-full bg-muted">
                      <div className="absolute inset-0 flex items-center justify-center text-2xl font-semibold text-muted-foreground">
                        JS
                      </div>
                    </div>
                    <div className="flex flex-col space-y-2">
                      <Button variant="outline" size="sm">
                        Upload New Photo
                      </Button>
                      <Button variant="ghost" size="sm" className="text-muted-foreground">
                        Remove Photo
                      </Button>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="title">Professional Title</Label>
                    <Input id="title" defaultValue="Senior Web Developer & Instructor" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="bio">Professional Bio</Label>
                    <Textarea
                      id="bio"
                      placeholder="Tell students about yourself"
                      defaultValue="I'm a senior web developer with over 10 years of experience in building web applications. I specialize in JavaScript, React, and Node.js. I've been teaching web development for the past 5 years and have helped hundreds of students launch their careers in tech."
                      className="min-h-[150px]"
                    />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Profile</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Assignment Submissions</Label>
                        <p className="text-sm text-muted-foreground">Get notified when students submit assignments</p>
                      </div>
                      <Switch
                        checked={notifications.submissions}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, submissions: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Student Questions</Label>
                        <p className="text-sm text-muted-foreground">Be notified when students ask questions</p>
                      </div>
                      <Switch
                        checked={notifications.questions}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, questions: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Course Enrollments</Label>
                        <p className="text-sm text-muted-foreground">
                          Get notified when students enroll in your courses
                        </p>
                      </div>
                      <Switch
                        checked={notifications.courseEnrollments}
                        onCheckedChange={(checked) =>
                          setNotifications({ ...notifications, courseEnrollments: checked })
                        }
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label>Marketing Communications</Label>
                        <p className="text-sm text-muted-foreground">
                          Receive updates about platform features and promotions
                        </p>
                      </div>
                      <Switch
                        checked={notifications.marketing}
                        onCheckedChange={(checked) => setNotifications({ ...notifications, marketing: checked })}
                      />
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Notification Settings</Button>
                </CardFooter>
              </Card>
            </TabsContent>

<div className="space-y-2">
                    <Label htmlFor="new-password">New Password</Label>
                    <Input id="new-password" type="password" />
                  </div>

<TabsContent value="professional" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Professional Information</CardTitle>
                  <CardDescription>Showcase your expertise and credentials</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="expertise">Areas of Expertise</Label>
                    <Textarea
                      id="expertise"
                      placeholder="List your areas of expertise"
                      defaultValue="Web Development, JavaScript, React, Node.js, Full-Stack Development, UI/UX Design"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="experience">Years of Experience</Label>
                    <Input id="experience" type="number" defaultValue="10" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="education">Education</Label>
                    <Textarea
                      id="education"
                      placeholder="List your educational background"
                      defaultValue="Master of Computer Science, Stanford University (2015)
Bachelor of Science in Computer Engineering, MIT (2012)"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="certifications">Certifications</Label>
                    <Textarea
                      id="certifications"
                      placeholder="List your certifications"
                      defaultValue="AWS Certified Solutions Architect
Google Cloud Professional Developer
Microsoft Certified: Azure Developer Associate"
                    />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="linkedin">LinkedIn Profile</Label>
                    <Input id="linkedin" placeholder="https://linkedin.com/in/yourprofile" />
                  </div>

<div className="space-y-2">
                    <Label htmlFor="website">Personal Website</Label>
                    <Input id="website" placeholder="https://yourwebsite.com" />
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Professional Information</Button>
                </CardFooter>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Teaching Preferences</CardTitle>
                  <CardDescription>Set your teaching style and preferences</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <Label htmlFor="teaching-style">Teaching Style</Label>
                    <select
                      id="teaching-style"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <option value="practical">Practical (project-based learning)</option>
                      <option value="theoretical">Theoretical (concept-focused)</option>
                      <option value="mixed">Mixed Approach</option>
                      <option value="interactive">Highly Interactive</option>
                    </select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="availability">Availability for Student Questions</Label>
                    <select
                      id="availability"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <option value="24h">Within 24 hours</option>
                      <option value="48h">Within 48 hours</option>
                      <option value="weekly">Weekly office hours only</option>
                    </select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="feedback-style">Feedback Style</Label>
                    <select
                      id="feedback-style"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <option value="detailed">Detailed and comprehensive</option>
                      <option value="concise">Concise and to-the-point</option>
                      <option value="positive">Positive-focused</option>
                      <option value="critical">Critical and improvement-focused</option>
                    </select>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button>Save Teaching Preferences</Button>
                </CardFooter>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/instructor/dashboard/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { BookOpen, Users, FileText, Settings, BarChart, TrendingUp, Calendar, Clock, Plus } from "lucide-react"

export default function InstructorDashboardPage() {
  return (
    <div className="flex min-h-screen flex-col">
      <div className="flex flex-col md:flex-row">
        <div className="border-r bg-muted/40 md:w-64">
          <div className="flex h-16 items-center border-b px-4">
            <Link href="/" className="flex items-center gap-2 font-bold">
              <BookOpen className="h-5 w-5" />
              <span>LearnSphere</span>
            </Link>
          </div>
          <nav className="grid gap-1 p-2">
            <Link href="/instructor/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2 bg-muted">
                <BarChart className="h-4 w-4" />
                Dashboard
              </Button>
            </Link>
            <Link href="/instructor/courses">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <BookOpen className="h-4 w-4" />
                Courses
              </Button>
            </Link>
            <Link href="/instructor/students">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Users className="h-4 w-4" />
                Students
              </Button>
            </Link>
            <Link href="/instructor/assignments">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                Assignments
              </Button>
            </Link>
            <Link href="/instructor/settings">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Settings className="h-4 w-4" />
                Settings
              </Button>
            </Link>
          </nav>
        </div>
        <main className="flex-1 p-4 md:p-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">Instructor Dashboard</h1>
            <div className="flex gap-2">
              <Link href="/instructor/create-course">
                <Button className="gap-2">
                  <Plus className="h-4 w-4" />
                  Create Course
                </Button>
              </Link>
            </div>
          </div>

<div className="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Total Students</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">248</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500">+12%</span> from last month
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Active Courses</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">6</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500">+2</span> new this quarter
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Completion Rate</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">78%</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-green-500">+5%</span> from previous courses
                </p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Average Rating</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">4.8/5</div>
                <p className="text-xs text-muted-foreground">Based on 156 student reviews</p>
              </CardContent>
            </Card>
          </div>

<Tabs defaultValue="overview" className="mt-6">
            <TabsList>
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="courses">Courses</TabsTrigger>
              <TabsTrigger value="calendar">Calendar</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-4 pt-4">
              <div className="grid gap-4 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle>Student Engagement</CardTitle>
                    <CardDescription>Weekly student activity across all courses</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="h-[300px] bg-muted/30">
                      {/* Chart would go here in a real implementation */}
                      <div className="flex h-full items-center justify-center">
                        <p className="text-muted-foreground">Engagement chart visualization</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Recent Activity</CardTitle>
                    <CardDescription>Latest updates from your courses</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-start gap-4">
                        <div className="rounded-full bg-primary/10 p-2">
                          <FileText className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p className="text-sm font-medium">5 new assignment submissions</p>
                          <p className="text-xs text-muted-foreground">Web Development Fundamentals</p>
                          <p className="text-xs text-muted-foreground">2 hours ago</p>
                        </div>
                      </div>

<div className="flex items-start gap-4">
                        <div className="rounded-full bg-primary/10 p-2">
                          <Users className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p className="text-sm font-medium">3 new students enrolled</p>
                          <p className="text-xs text-muted-foreground">Data Science Essentials</p>
                          <p className="text-xs text-muted-foreground">Yesterday</p>
                        </div>
                      </div>

<div className="flex items-start gap-4">
                        <div className="rounded-full bg-primary/10 p-2">
                          <TrendingUp className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p className="text-sm font-medium">Course completion rate increased</p>
                          <p className="text-xs text-muted-foreground">UX Design Principles</p>
                          <p className="text-xs text-muted-foreground">2 days ago</p>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter>
                    <Button variant="outline" className="w-full">
                      View All Activity
                    </Button>
                  </CardFooter>
                </Card>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Pending Tasks</CardTitle>
                  <CardDescription>Items that require your attention</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between rounded-lg border p-4">
                      <div className="flex items-start gap-4">
                        <div className="rounded-full bg-amber-500/10 p-2">
                          <FileText className="h-4 w-4 text-amber-500" />
                        </div>
                        <div>
                          <p className="font-medium">Review Assignment Submissions</p>
                          <p className="text-sm text-muted-foreground">
                            22 submissions pending review for JavaScript Fundamentals Practice
                          </p>
                        </div>
                      </div>
                      <Button size="sm">Review</Button>
                    </div>

<div className="flex items-center justify-between rounded-lg border p-4">
                      <div className="flex items-start gap-4">
                        <div className="rounded-full bg-amber-500/10 p-2">
                          <Clock className="h-4 w-4 text-amber-500" />
                        </div>
                        <div>
                          <p className="font-medium">Update Course Content</p>
                          <p className="text-sm text-muted-foreground">
                            Web Development Fundamentals needs updates for the latest framework version
                          </p>
                        </div>
                      </div>
                      <Button size="sm">Update</Button>
                    </div>

<div className="flex items-center justify-between rounded-lg border p-4">
                      <div className="flex items-start gap-4">
                        <div className="rounded-full bg-amber-500/10 p-2">
                          <Users className="h-4 w-4 text-amber-500" />
                        </div>
                        <div>
                          <p className="font-medium">Respond to Student Questions</p>
                          <p className="text-sm text-muted-foreground">
                            5 unanswered questions in the discussion forum
                          </p>
                        </div>
                      </div>
                      <Button size="sm">Respond</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="courses" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Your Courses</CardTitle>
                  <CardDescription>Manage and monitor your active courses</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Web Development Fundamentals</h3>
                          <p className="text-sm text-muted-foreground">24 students enrolled • 68% completion rate</p>
                        </div>
                        <Button size="sm">Manage</Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Data Science Essentials</h3>
                          <p className="text-sm text-muted-foreground">18 students enrolled • 42% completion rate</p>
                        </div>
                        <Button size="sm">Manage</Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">UX Design Principles</h3>
                          <p className="text-sm text-muted-foreground">15 students enrolled • 25% completion rate</p>
                        </div>
                        <Button size="sm">Manage</Button>
                      </div>
                    </div>

<div className="rounded-lg border p-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="font-semibold">Advanced JavaScript</h3>
                          <p className="text-sm text-muted-foreground">12 students enrolled • 35% completion rate</p>
                        </div>
                        <Button size="sm">Manage</Button>
                      </div>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" className="w-full">
                    View All Courses
                  </Button>
                </CardFooter>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Course Performance</CardTitle>
                  <CardDescription>Analytics and insights for your courses</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="h-[300px] bg-muted/30">
                    {/* Chart would go here in a real implementation */}
                    <div className="flex h-full items-center justify-center">
                      <p className="text-muted-foreground">Course performance visualization</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="calendar" className="space-y-4 pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Upcoming Schedule</CardTitle>
                  <CardDescription>Your teaching and administrative schedule</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex items-center justify-between rounded-lg border p-4">
                      <div className="flex items-start gap-4">
                        <div className="rounded-full bg-primary/10 p-2">
                          <Calendar className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p className="font-medium">Assignment Due Date</p>
                          <p className="text-sm">Final Project: Portfolio Website</p>
                          <p className="text-xs text-muted-foreground">May 7, 2025 • 11:59 PM</p>
                        </div>
                      </div>
                    </div>

<div className="flex items-center justify-between rounded-lg border p-4">
                      <div className="flex items-start gap-4">
                        <div className="rounded-full bg-primary/10 p-2">
                          <Users className="h-4 w-4 text-primary" />
                        </div>
                        <div>
                          <p className="font-medium">Live Q&A Session</p>
                          <p className="text-sm">Data Science Essentials</p>
                          <p className="text-xs text-muted-foreground">May 12, 2025 • 2:00 PM - 3:30 PM</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
                <CardFooter>
                  <Button variant="outline" className="w-full">
                    View Full Calendar
                  </Button>
                </CardFooter>
              </Card>
            </TabsContent>
          </Tabs>
        </main>
      </div>
    </div>
  )
}</article></body></html>