[V0_FILE]typescriptreact:file="components/login-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Checkbox } from "@/components/ui/checkbox" import { Eye, EyeOff, User, Lock } from "lucide-react" export function LoginForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [rememberMe, setRememberMe] = useState(false) const [error, setError] = useState("") const router = useRouter() const handleSubmit = (e: React.FormEvent, userType: string) => { e.preventDefault() setError("") if (!email || !password) { setError("Please enter both email and password.") return } // Updated authentication logic if (email === "student@example.com" && password === "studentpass") { if (userType === "student") { router.push("/student-dashboard") } else { setError("Invalid credentials for selected user type") } } else if (email === "admin@example.com" && password === "adminpass") { if (userType === "admin") { router.push("/admin-dashboard") } else { setError("Invalid credentials for selected user type") } } else if (email === "hod@example.com" && password === "hodpass123") { if (userType === "hod") { router.push("/hod-dashboard") } else { setError("Invalid credentials for selected user type") } } else { setError("Invalid credentials") } } const togglePasswordVisibility = () => { setShowPassword(!showPassword) } return (

Welcome to EduCMS

Empowering Education Through Technology

Login to Your Account Please enter your credentials to access the system Student Admin HOD {["student", "admin", "hod"].map((userType) => (

handleSubmit(e, userType)} className="space-y-4">

setEmail(e.target.value)} placeholder="Enter your email" className="pl-10" />

Password

setPassword(e.target.value)} placeholder="Enter your password" className="pl-10" />

setRememberMe(checked as boolean)} /> Remember me

{error &&

{error}

}

))} Forgot password?

) } [V0_FILE]typescriptreact:file="app/admin-dashboard/page.tsx" isEdit="true" isMerged="true" import { AdminDashboard } from "@/components/admin-dashboard" export default function AdminDashboardPage() { return } [V0_FILE]typescriptreact:file="components/profile-page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { User, Mail, Phone, MapPin, Camera } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function ProfilePage() { const [isEditing, setIsEditing] = useState(false) const [profile, setProfile] = useState({ name: "John Doe", email: "john.doe@example.com", phone: "+1 (555) 123-4567", location: "New York, NY", bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", }) const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target setProfile((prev) => ({ ...prev, [name]: value })) } const handleSave = () => { // Here you would typically send the updated profile to your backend console.log("Saving profile:", profile) setIsEditing(false) } return (

Profile

Personal Information {!isEditing && }

{isEditing && ( )}

Name

{isEditing ? ( ) : ( {profile.name} )}

{isEditing ? ( ) : ( {profile.email} )}

Phone

{isEditing ? ( ) : ( {profile.phone} )}

Location

{isEditing ? ( ) : ( {profile.location} )}

Bio {isEditing ? (

) : (
                    <p>{profile.bio}</p>
                  )}
                </div>
              </div>
              {isEditing && (
                <div className="mt-6 flex justify-end space-x-4">
                  <Button variant="outline" onClick={() => setIsEditing(false)}>
                    Cancel
                  </Button>
                  <Button onClick={handleSave}>Save Changes</Button>
                </div>
              )}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/content-page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Plus, Edit, Trash, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function ContentPage() {
  const [pages, setPages] = useState([
    { id: 1, title: "Home Page", status: "Published", lastModified: "2025-02-10" },
    { id: 2, title: "About Us", status: "Draft", lastModified: "2025-02-09" },
    { id: 3, title: "Services", status: "Published", lastModified: "2025-02-08" },
    { id: 4, title: "Contact", status: "Review", lastModified: "2025-02-07" },
  ])

const [searchTerm, setSearchTerm] = useState("")

const filteredPages = pages.filter((page) => page.title.toLowerCase().includes(searchTerm.toLowerCase()))

const handleDelete = (id: number) => {
    setPages(pages.filter((page) => page.id !== id))
  }

return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Content</h1>
        <Button>
          <Plus className="mr-2 h-4 w-4" /> Create New Page
        </Button>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Pages</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
              <Input
                type="text"
                placeholder="Search pages..."
                className="pl-10"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Title</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Last Modified</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredPages.map((page) => (
                <TableRow key={page.id}>
                  <TableCell>{page.title}</TableCell>
                  <TableCell>{page.status}</TableCell>
                  <TableCell>{page.lastModified}</TableCell>
                  <TableCell>
                    <div className="flex space-x-2">
                      <Button size="sm" variant="outline">
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => handleDelete(page.id)}>
                        <Trash className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/media-page.tsx" isMerged="true" isEdit="true"
"use client"

import { useState } from "react"
import { Upload, Search, Image, File, MoreVertical } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export function MediaPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [media, setMedia] = useState([
    { id: 1, name: "hero-image.jpg", type: "image", size: "1.2 MB", uploadDate: "2025-02-10" },
    { id: 2, name: "report.pdf", type: "document", size: "3.5 MB", uploadDate: "2025-02-09" },
    { id: 3, name: "product-video.mp4", type: "video", size: "15.7 MB", uploadDate: "2025-02-08" },
    { id: 4, name: "logo.png", type: "image", size: "0.5 MB", uploadDate: "2025-02-07" },
  ])

const filteredMedia = media.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()))

const handleDelete = (id: number) => {
    setMedia(media.filter((item) => item.id !== id))
  }

return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Media Library</h1>
        <Button>
          <Upload className="mr-2 h-4 w-4" /> Upload New File
        </Button>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Files</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="mb-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
              <Input
                type="text"
                placeholder="Search files..."
                className="pl-10"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {filteredMedia.map((item) => (
              <Card key={item.id}>
                <CardContent className="p-4">
                  <div className="aspect-square bg-gray-100 rounded-lg flex items-center justify-center mb-2">
                    {item.type === "image" ? (
                      <Image className="h-12 w-12 text-gray-400" />
                    ) : (
                      <File className="h-12 w-12 text-gray-400" />
                    )}
                  </div>
                  <div className="flex justify-between items-start">
                    <div>
                      <p className="font-medium truncate">{item.name}</p>
                      <p className="text-sm text-gray-500">{item.size}</p>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>View</DropdownMenuItem>
                        <DropdownMenuItem>Download</DropdownMenuItem>
                        <DropdownMenuItem onClick={() => handleDelete(item.id)}>Delete</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/settings-page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export function SettingsPage() {
  const [settings, setSettings] = useState({
    siteName: "My Awesome CMS",
    siteDescription: "A powerful and flexible content management system",
    logoUrl: "/logo.png",
    primaryColor: "#3b82f6",
    allowComments: true,
    postsPerPage: "10",
    dateFormat: "MM/DD/YYYY",
  })

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setSettings((prev) => ({ ...prev, [name]: value }))
  }

const handleSwitchChange = (checked: boolean) => {
    setSettings((prev) => ({ ...prev, allowComments: checked }))
  }

const handleSelectChange = (name: string, value: string) => {
    setSettings((prev) => ({ ...prev, [name]: value }))
  }

const handleSave = () => {
    // Here you would typically send the updated settings to your backend
    console.log("Saving settings:", settings)
  }

return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Settings</h1>
      <Card>
        <CardHeader>
          <CardTitle>General Settings</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4">
            <div>
              <Label htmlFor="siteName">Site Name</Label>
              <Input id="siteName" name="siteName" value={settings.siteName} onChange={handleInputChange} />
            </div>
            <div>
              <Label htmlFor="siteDescription">Site Description</Label>
              <Textarea
                id="siteDescription"
                name="siteDescription"
                value={settings.siteDescription}
                onChange={handleInputChange}
              />
            </div>
            <div>
              <Label htmlFor="logoUrl">Logo URL</Label>
              <Input id="logoUrl" name="logoUrl" value={settings.logoUrl} onChange={handleInputChange} />
            </div>
            <div>
              <Label htmlFor="primaryColor">Primary Color</Label>
              <Input
                id="primaryColor"
                name="primaryColor"
                type="color"
                value={settings.primaryColor}
                onChange={handleInputChange}
              />
            </div>
            <div className="flex items-center space-x-2">
              <Switch id="allowComments" checked={settings.allowComments} onCheckedChange={handleSwitchChange} />
              <Label htmlFor="allowComments">Allow Comments</Label>
            </div>
            <div>
              <Label htmlFor="postsPerPage">Posts Per Page</Label>
              <Select
                value={settings.postsPerPage}
                onValueChange={(value) => handleSelectChange("postsPerPage", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select posts per page" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="5">5</SelectItem>
                  <SelectItem value="10">10</SelectItem>
                  <SelectItem value="15">15</SelectItem>
                  <SelectItem value="20">20</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <Label htmlFor="dateFormat">Date Format</Label>
              <Select value={settings.dateFormat} onValueChange={(value) => handleSelectChange("dateFormat", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select date format" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
                  <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
                  <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="mt-6">
            <Button onClick={handleSave}>
              <Save className="mr-2 h-4 w-4" /> Save Settings
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { LoginForm } from "@/components/login-form"

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-100">
      <LoginForm />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true"
import { Dashboard } from "@/components/dashboard"

export default function DashboardPage() {
  return <Dashboard />
}
[V0_FILE]typescriptreact:file="app/content/page.tsx" isMerged="true"
import { ContentPage } from "@/components/content-page"

export default function Content() {
  return <ContentPage />
}
[V0_FILE]typescriptreact:file="app/media/page.tsx" isMerged="true"
import { MediaPage } from "@/components/media-page"

export default function Media() {
  return <MediaPage />
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isMerged="true"
import { ProfilePage } from "@/components/profile-page"

export default function Profile() {
  return <ProfilePage />
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true"
import { SettingsPage } from "@/components/settings-page"

export default function Settings() {
  return <SettingsPage />
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { Dashboard } from "@/components/dashboard"
import type React from "react" // Added import for React

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "CMS Dashboard",
  description: "A modern CMS dashboard",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Dashboard>{children}</Dashboard>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/student-profile.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { User, Camera, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const FormField = ({ label, children }: { label: string; children: React.ReactNode }) => (
  <div className="mb-4">
    <Label className="text-sm font-medium text-gray-700">{label}</Label>
    <div className="mt-1">{children}</div>
  </div>
)

const FileUpload = ({ label, id }: { label: string; id: string }) => (
  <FormField label={label}>
    <Input
      id={id}
      type="file"
      className="file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
    />
  </FormField>
)

export function StudentProfile() {
  const [profileImage, setProfileImage] = useState<string | null>(null)

return (
    <div className="min-h-screen bg-gray-50 py-8">
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden"
      >
        <div className="bg-indigo-600 p-6 sm:p-10 flex justify-between items-center">
          <h1 className="text-2xl sm:text-3xl font-bold text-white">Student Profile</h1>
          <Button variant="secondary">
            <Save className="mr-2 h-4 w-4" /> Save Changes
          </Button>
        </div>

<div className="p-6 sm:p-10">
          <div className="flex flex-col sm:flex-row items-center mb-8">
            <div className="relative mb-4 sm:mb-0 sm:mr-8">
              <div className="w-32 h-32 bg-gray-200 rounded-full flex items-center justify-center overflow-hidden">
                {profileImage ? (
                  <img src={profileImage || "/placeholder.svg"} alt="Profile" className="w-full h-full object-cover" />
                ) : (
                  <User className="w-16 h-16 text-gray-400" />
                )}
              </div>
              <label
                htmlFor="profile-image"
                className="absolute bottom-0 right-0 bg-indigo-600 text-white p-2 rounded-full cursor-pointer"
              >
                <Camera className="h-5 w-5" />
              </label>
              <input
                id="profile-image"
                type="file"
                className="hidden"
                onChange={(e) => {
                  const file = e.target.files?.[0]
                  if (file) {
                    const reader = new FileReader()
                    reader.onloadend = () => {
                      setProfileImage(reader.result as string)
                    }
                    reader.readAsDataURL(file)
                  }
                }}
                accept="image/*"
              />
            </div>
            <div>
              <h2 className="text-2xl font-semibold text-gray-800">John Doe</h2>
              <p className="text-gray-600">Student ID: STU2025001</p>
            </div>
          </div>

<Tabs defaultValue="basic" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="basic">Basic Info</TabsTrigger>
              <TabsTrigger value="personal">Personal</TabsTrigger>
              <TabsTrigger value="address">Address</TabsTrigger>
              <TabsTrigger value="education">Education</TabsTrigger>
            </TabsList>
            <TabsContent value="basic" className="mt-6">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <FormField label="Name">
                  <Input placeholder="Enter your name" />
                </FormField>
                <FormField label="Mobile Number">
                  <Input type="tel" placeholder="Enter your mobile number" />
                </FormField>
                <FormField label="Email">
                  <Input type="email" placeholder="Enter your email" />
                </FormField>
                <FormField label="Roll No">
                  <Input placeholder="Enter your roll number" />
                </FormField>
                <FormField label="Date of Joining">
                  <Input type="date" />
                </FormField>
              </div>
              <FormField label="About">
                <Textarea placeholder="Write something about yourself" className="h-32" />
              </FormField>
            </TabsContent>
            <TabsContent value="personal" className="mt-6">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <FormField label="Date of Birth">
                  <Input type="date" />
                </FormField>
                <FormField label="Gender">
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select gender" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="male">Male</SelectItem>
                      <SelectItem value="female">Female</SelectItem>
                      <SelectItem value="other">Other</SelectItem>
                    </SelectContent>
                  </Select>
                </FormField>
                <FormField label="Nationality">
                  <Input placeholder="Enter your nationality" />
                </FormField>
                <FormField label="Blood Group">
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="Select blood group" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="A+">A+</SelectItem>
                      <SelectItem value="A-">A-</SelectItem>
                      <SelectItem value="B+">B+</SelectItem>
                      <SelectItem value="B-">B-</SelectItem>
                      <SelectItem value="AB+">AB+</SelectItem>
                      <SelectItem value="AB-">AB-</SelectItem>
                      <SelectItem value="O+">O+</SelectItem>
                      <SelectItem value="O-">O-</SelectItem>
                    </SelectContent>
                  </Select>
                </FormField>
                <FormField label="Aadhar Number">
                  <Input placeholder="Enter your Aadhar number" />
                </FormField>
                <FormField label="PAN Number">
                  <Input placeholder="Enter your PAN number" />
                </FormField>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-6">
                <FileUpload label="Aadhar Card Image" id="aadhar-card" />
                <FileUpload label="PAN Card Image" id="pan-card" />
                <FileUpload label="Digital Signature" id="digital-signature" />
              </div>
            </TabsContent>
            <TabsContent value="address" className="mt-6">
              <div className="grid grid-cols-1 gap-6">
                <FormField label="Permanent Address">
                  <Textarea placeholder="Enter your permanent address" className="h-24" />
                </FormField>
                <FormField label="Permanent Address PIN Code">
                  <Input placeholder="Enter PIN code" />
                </FormField>
                <FormField label="Correspondence Address">
                  <Textarea placeholder="Enter your correspondence address" className="h-24" />
                </FormField>
                <FormField label="Correspondence Address PIN Code">
                  <Input placeholder="Enter PIN code" />
                </FormField>
              </div>
            </TabsContent>
            <TabsContent value="education" className="mt-6">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <FormField label="College/University Name">
                  <Input placeholder="Enter your college/university name" />
                </FormField>
                <FormField label="Marks in College (%)">
                  <Input type="number" placeholder="Enter your college marks in percentage" min="0" max="100" />
                </FormField>
                <FormField label="School Name">
                  <Input placeholder="Enter your school name" />
                </FormField>
                <FormField label="Marks in 10th">
                  <Input type="number" placeholder="Enter your 10th marks in percentage" min="0" max="100" />
                </FormField>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-6">
                <FileUpload label="College Result" id="college-result" />
                <FileUpload label="10th Marks Card" id="tenth-marks-card" />
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </motion.div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/student-profile/page.tsx" isEdit="true" isMerged="true"
import { StudentProfile } from "@/components/student-profile"

export default function StudentProfilePage() {
  return <StudentProfile />
}
[V0_FILE]typescriptreact:file="components/attendance-page.tsx" isMerged="true"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

const attendanceData = [
  { subject: "Math", present: 90, absent: 10 },
  { subject: "Science", present: 85, absent: 15 },
  { subject: "English", present: 95, absent: 5 },
  { subject: "History", present: 88, absent: 12 },
  { subject: "Art", present: 92, absent: 8 },
]

export function AttendancePage() {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Attendance Overview</h2>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={attendanceData}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="subject" />
          <YAxis />
          <Tooltip />
          <Bar dataKey="present" stackId="a" fill="#8884d8" />
          <Bar dataKey="absent" stackId="a" fill="#82ca9d" />
        </BarChart>
      </ResponsiveContainer>
      <div className="mt-4">
        <h3 className="text-xl font-semibold mb-2">Overall Attendance: 90%</h3>
        <p className="text-sm text-gray-600">You're doing great! Keep it up to maintain good academic performance.</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/exam-timetable-page.tsx" isMerged="true"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const examTimetable = [
  { date: "2025-05-10", time: "09:00 AM", subject: "Mathematics", duration: "3 hours", venue: "Hall A" },
  { date: "2025-05-12", time: "10:00 AM", subject: "Science", duration: "2 hours", venue: "Lab 1" },
  { date: "2025-05-14", time: "09:30 AM", subject: "English", duration: "2.5 hours", venue: "Hall B" },
  { date: "2025-05-16", time: "11:00 AM", subject: "History", duration: "2 hours", venue: "Room 101" },
]

export function ExamTimetablePage() {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Upcoming Exams</h2>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Date</TableHead>
            <TableHead>Time</TableHead>
            <TableHead>Subject</TableHead>
            <TableHead>Duration</TableHead>
            <TableHead>Venue</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {examTimetable.map((exam, index) => (
            <TableRow key={index}>
              <TableCell>{exam.date}</TableCell>
              <TableCell>{exam.time}</TableCell>
              <TableCell>{exam.subject}</TableCell>
              <TableCell>{exam.duration}</TableCell>
              <TableCell>{exam.venue}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/regular-timetable-page.tsx" isMerged="true"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const regularTimetable = [
  { day: "Monday", periods: ["Math", "Science", "English", "History", "PE"] },
  { day: "Tuesday", periods: ["Science", "Math", "Art", "English", "Computer Science"] },
  { day: "Wednesday", periods: ["History", "English", "Math", "Science", "Music"] },
  { day: "Thursday", periods: ["English", "Science", "Math", "Computer Science", "Art"] },
  { day: "Friday", periods: ["PE", "Math", "Science", "English", "History"] },
]

export function RegularTimetablePage() {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Weekly Schedule</h2>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Day</TableHead>
            <TableHead>Period 1</TableHead>
            <TableHead>Period 2</TableHead>
            <TableHead>Period 3</TableHead>
            <TableHead>Period 4</TableHead>
            <TableHead>Period 5</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {regularTimetable.map((day, index) => (
            <TableRow key={index}>
              <TableCell>{day.day}</TableCell>
              {day.periods.map((period, periodIndex) => (
                <TableCell key={periodIndex}>{period}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/activities-page.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

const activities = [
  { id: 1, name: "Science Fair", date: "2025-06-15", type: "Academic", status: "Upcoming" },
  { id: 2, name: "Basketball Tournament", date: "2025-05-20", type: "Sports", status: "Registered" },
  { id: 3, name: "Debate Club Meeting", date: "2025-05-18", type: "Club", status: "Ongoing" },
  { id: 4, name: "Art Exhibition", date: "2025-06-01", type: "Cultural", status: "Open for Registration" },
]

export function ActivitiesPage() {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Extracurricular Activities</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {activities.map((activity) => (
          <Card key={activity.id}>
            <CardHeader>
              <CardTitle className="flex justify-between items-center">
                <span>{activity.name}</span>
                <Badge variant={activity.status === "Upcoming" ? "default" : "secondary"}>{activity.status}</Badge>
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p>
                <strong>Date:</strong> {activity.date}
              </p>
              <p>
                <strong>Type:</strong> {activity.type}
              </p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/student-dashboard/page.tsx" isEdit="true" isMerged="true"
import { StudentDashboard } from "@/components/student-dashboard"

export default function StudentDashboardPage() {
  return <StudentDashboard />
}
[V0_FILE]typescriptreact:file="app/admin/branches/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export default function BranchesPage() {
  const [branches, setBranches] = useState([
    { id: 1, name: "Computer Science", code: "CS" },
    { id: 2, name: "Electrical Engineering", code: "EE" },
    { id: 3, name: "Mechanical Engineering", code: "ME" },
  ])
  const [newBranch, setNewBranch] = useState({ name: "", code: "" })

const addBranch = () => {
    if (newBranch.name && newBranch.code) {
      setBranches([...branches, { id: branches.length + 1, ...newBranch }])
      setNewBranch({ name: "", code: "" })
    }
  }

return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Manage Branches</h1>
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>Add New Branch</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex space-x-4">
            <Input
              placeholder="Branch Name"
              value={newBranch.name}
              onChange={(e) => setNewBranch({ ...newBranch, name: e.target.value })}
            />
            <Input
              placeholder="Branch Code"
              value={newBranch.code}
              onChange={(e) => setNewBranch({ ...newBranch, code: e.target.value })}
            />
            <Button onClick={addBranch}>Add Branch</Button>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Existing Branches</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Name</TableHead>
                <TableHead>Code</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {branches.map((branch) => (
                <TableRow key={branch.id}>
                  <TableCell>{branch.id}</TableCell>
                  <TableCell>{branch.name}</TableCell>
                  <TableCell>{branch.code}</TableCell>
                  <TableCell>
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                    <Button variant="outline" size="sm" className="ml-2">
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/subjects/page.tsx" isMerged="true"
"use client"

export default function SubjectsPage() {
  const [subjects, setSubjects] = useState([
    { id: 1, name: "Mathematics", code: "MATH101", branch: "CS" },
    { id: 2, name: "Physics", code: "PHYS101", branch: "EE" },
    { id: 3, name: "Programming", code: "CS101", branch: "CS" },
  ])
  const [newSubject, setNewSubject] = useState({ name: "", code: "", branch: "" })

const branches = ["CS", "EE", "ME"] // This should ideally come from an API or state management

const addSubject = () => {
    if (newSubject.name && newSubject.code && newSubject.branch) {
      setSubjects([...subjects, { id: subjects.length + 1, ...newSubject }])
      setNewSubject({ name: "", code: "", branch: "" })
    }
  }

return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Manage Subjects</h1>
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>Add New Subject</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex space-x-4">
            <Input
              placeholder="Subject Name"
              value={newSubject.name}
              onChange={(e) => setNewSubject({ ...newSubject, name: e.target.value })}
            />
            <Input
              placeholder="Subject Code"
              value={newSubject.code}
              onChange={(e) => setNewSubject({ ...newSubject, code: e.target.value })}
            />
            <Select
              value={newSubject.branch}
              onValueChange={(value) => setNewSubject({ ...newSubject, branch: value })}
            >
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Select Branch" />
              </SelectTrigger>
              <SelectContent>
                {branches.map((branch) => (
                  <SelectItem key={branch} value={branch}>
                    {branch}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button onClick={addSubject}>Add Subject</Button>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Existing Subjects</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Name</TableHead>
                <TableHead>Code</TableHead>
                <TableHead>Branch</TableHead>
                <TableHead>Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {subjects.map((subject) => (
                <TableRow key={subject.id}>
                  <TableCell>{subject.id}</TableCell>
                  <TableCell>{subject.name}</TableCell>
                  <TableCell>{subject.code}</TableCell>
                  <TableCell>{subject.branch}</TableCell>
                  <TableCell>
                    <Button variant="outline" size="sm">
                      Edit
                    </Button>
                    <Button variant="outline" size="sm" className="ml-2">
                      Delete
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/attendance/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"

export default function AttendancePage() {
  const [selectedBranch, setSelectedBranch] = useState("")
  const [selectedSubject, setSelectedSubject] = useState("")
  const [date, setDate] = useState("")

const branches = ["CS", "EE", "ME"]
  const subjects = ["Mathematics", "Physics", "Programming"]

const students = [
    { id: 1, name: "John Doe", rollNumber: "CS001" },
    { id: 2, name: "Jane Smith", rollNumber: "CS002" },
    { id: 3, name: "Alice Johnson", rollNumber: "CS003" },
  ]

const [attendance, setAttendance] = useState({})

const toggleAttendance = (studentId) => {
    setAttendance((prev) => ({
      ...prev,
      [studentId]: !prev[studentId],
    }))
  }

const submitAttendance = () => {
    console.log("Submitting attendance:", { selectedBranch, selectedSubject, date, attendance })
    // Here you would typically send this data to your backend
  }

return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Manage Attendance</h1>
      <Card className="mb-6">
        <CardHeader>
          <CardTitle>Mark Attendance</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex space-x-4 mb-4">
            <Select value={selectedBranch} onValueChange={setSelectedBranch}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Select Branch" />
              </SelectTrigger>
              <SelectContent>
                {branches.map((branch) => (
                  <SelectItem key={branch} value={branch}>
                    {branch}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select value={selectedSubject} onValueChange={setSelectedSubject}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Select Subject" />
              </SelectTrigger>
              <SelectContent>
                {subjects.map((subject) => (
                  <SelectItem key={subject} value={subject}>
                    {subject}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="border rounded p-2" />
          </div>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Roll Number</TableHead>
                <TableHead>Name</TableHead>
                <TableHead>Present</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {students.map((student) => (
                <TableRow key={student.id}>
                  <TableCell>{student.rollNumber}</TableCell>
                  <TableCell>{student.name}</TableCell>
                  <TableCell>
                    <Checkbox
                      checked={attendance[student.id] || false}
                      onCheckedChange={() => toggleAttendance(student.id)}
                    />
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <Button onClick={submitAttendance} className="mt-4">
            Submit Attendance
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/add-student/page.tsx" isMerged="true"
"use client"

export default function AddStudentPage() {
  const [studentData, setStudentData] = useState({
    name: "",
    email: "",
    rollNumber: "",
    branch: "",
  })
  const router = useRouter()

const handleInputChange = (e) => {
    const { name, value } = e.target
    setStudentData((prev) => ({ ...prev, [name]: value }))
  }

const handleBranchChange = (value) => {
    setStudentData((prev) => ({ ...prev, branch: value }))
  }

const handleSubmit = (e) => {
    e.preventDefault()
    console.log("Submitting student data:", studentData)
    // Here you would typically send this data to your backend
    // After successful submission, you might want to clear the form or show a success message
  }

const handleSignOut = () => {
    // Implement sign-out logic here
    router.push("/")
  }

return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Add New Student</h1>
        <Button variant="ghost" size="icon" onClick={handleSignOut}>
          <LogOut />
        </Button>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Student Information</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                Full Name
              </label>
              <Input id="name" name="name" value={studentData.name} onChange={handleInputChange} required />
            </div>
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email
              </label>
              <Input
                id="email"
                name="email"
                type="email"
                value={studentData.email}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="rollNumber" className="block text-sm font-medium text-gray-700">
                Roll Number
              </label>
              <Input
                id="rollNumber"
                name="rollNumber"
                value={studentData.rollNumber}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="branch" className="block text-sm font-medium text-gray-700">
                Branch
              </label>
              <Select value={studentData.branch} onValueChange={handleBranchChange}>
                <SelectTrigger>
                  <SelectValue placeholder="Select Branch" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="CS">Computer Science</SelectItem>
                  <SelectItem value="EE">Electrical Engineering</SelectItem>
                  <SelectItem value="ME">Mechanical Engineering</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <Button type="submit">Add Student</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/add-teacher/page.tsx" isMerged="true"
"use client"

export default function AddTeacherPage() {
  const [teacherData, setTeacherData] = useState({
    name: "",
    email: "",
    employeeId: "",
    department: "",
    specialization: "",
  })
  const router = useRouter()

const handleInputChange = (e) => {
    const { name, value } = e.target
    setTeacherData((prev) => ({ ...prev, [name]: value }))
  }

const handleDepartmentChange = (value) => {
    setTeacherData((prev) => ({ ...prev, department: value }))
  }

const handleSubmit = (e) => {
    e.preventDefault()
    console.log("Submitting teacher data:", teacherData)
    // Here you would typically send this data to your backend
    // After successful submission, you might want to clear the form or show a success message
  }

const handleSignOut = () => {
    // Implement sign-out logic here
    router.push("/")
  }

return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Add New Teacher</h1>
        <Button variant="ghost" size="icon" onClick={handleSignOut}>
          <LogOut />
        </Button>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Teacher Information</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                Full Name
              </label>
              <Input id="name" name="name" value={teacherData.name} onChange={handleInputChange} required />
            </div>
            <div>
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email
              </label>
              <Input
                id="email"
                name="email"
                type="email"
                value={teacherData.email}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="employeeId" className="block text-sm font-medium text-gray-700">
                Employee ID
              </label>
              <Input
                id="employeeId"
                name="employeeId"
                value={teacherData.employeeId}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="department" className="block text-sm font-medium text-gray-700">
                Department
              </label>
              <Select value={teacherData.department} onValueChange={handleDepartmentChange}>
                <SelectTrigger>
                  <SelectValue placeholder="Select Department" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="CS">Computer Science</SelectItem>
                  <SelectItem value="EE">Electrical Engineering</SelectItem>
                  <SelectItem value="ME">Mechanical Engineering</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <label htmlFor="specialization" className="block text-sm font-medium text-gray-700">
                Specialization
              </label>
              <Input
                id="specialization"
                name="specialization"
                value={teacherData.specialization}
                onChange={handleInputChange}
                required
              />
            </div>
            <Button type="submit">Add Teacher</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/add-exam/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { LogOut } from "lucide-react"

export default function AddExamPage() {
  const [examData, setExamData] = useState({
    name: "",
    subject: "",
    date: "",
    startTime: "",
    duration: "",
    totalMarks: "",
    description: "",
  })
  const router = useRouter()

const handleInputChange = (e) => {
    const { name, value } = e.target
    setExamData((prev) => ({ ...prev, [name]: value }))
  }

const handleSubjectChange = (value) => {
    setExamData((prev) => ({ ...prev, subject: value }))
  }

const handleSubmit = (e) => {
    e.preventDefault()
    console.log("Submitting exam data:", examData)
    // Here you would typically send this data to your backend
    // After successful submission, you might want to clear the form or show a success message
  }

const handleSignOut = () => {
    // Implement sign-out logic here
    router.push("/")
  }

return (
    <div className="container mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Add New Exam</h1>
        <Button variant="ghost" size="icon" onClick={handleSignOut}>
          <LogOut />
        </Button>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Exam Information</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                Exam Name
              </label>
              <Input id="name" name="name" value={examData.name} onChange={handleInputChange} required />
            </div>
            <div>
              <label htmlFor="subject" className="block text-sm font-medium text-gray-700">
                Subject
              </label>
              <Select value={examData.subject} onValueChange={handleSubjectChange}>
                <SelectTrigger>
                  <SelectValue placeholder="Select Subject" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="MATH101">Mathematics</SelectItem>
                  <SelectItem value="CS101">Computer Science</SelectItem>
                  <SelectItem value="PHY101">Physics</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div>
              <label htmlFor="date" className="block text-sm font-medium text-gray-700">
                Exam Date
              </label>
              <Input id="date" name="date" type="date" value={examData.date} onChange={handleInputChange} required />
            </div>
            <div>
              <label htmlFor="startTime" className="block text-sm font-medium text-gray-700">
                Start Time
              </label>
              <Input
                id="startTime"
                name="startTime"
                type="time"
                value={examData.startTime}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="duration" className="block text-sm font-medium text-gray-700">
                Duration (in minutes)
              </label>
              <Input
                id="duration"
                name="duration"
                type="number"
                value={examData.duration}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="totalMarks" className="block text-sm font-medium text-gray-700">
                Total Marks
              </label>
              <Input
                id="totalMarks"
                name="totalMarks"
                type="number"
                value={examData.totalMarks}
                onChange={handleInputChange}
                required
              />
            </div>
            <div>
              <label htmlFor="description" className="block text-sm font-medium text-gray-700">
                Description
              </label>
              <Textarea id="description" name="description" value={examData.description} onChange={handleInputChange} />
            </div>
            <Button type="submit">Add Exam</Button>
          </form>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod-dashboard/page.tsx" isEdit="true" isMerged="true"
import { HODDashboard } from "@/components/hod-dashboard"

export default function HODDashboardPage() {
  return <HODDashboard />
}
[V0_FILE]typescriptreact:file="app/admin/mark-attendance/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function MarkAttendancePage() {
  const [selectedClass, setSelectedClass] = useState("")
  const [selectedDate, setSelectedDate] = useState("")
  const [students, setStudents] = useState([
    { id: 1, name: "John Doe", present: true },
    { id: 2, name: "Jane Smith", present: false },
    { id: 3, name: "Alice Johnson", present: true },
    // Add more students as needed
  ])

const handleAttendanceChange = (studentId) => {
    setStudents(
      students.map((student) => (student.id === studentId ? { ...student, present: !student.present } : student)),
    )
  }

const handleSubmit = () => {
    console.log("Submitting attendance:", { selectedClass, selectedDate, students })
    // Here you would typically send this data to your backend
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl font-bold">Mark Attendance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4 mb-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Class</label>
                <Select value={selectedClass} onValueChange={setSelectedClass}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a class" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="class-a">Class A</SelectItem>
                    <SelectItem value="class-b">Class B</SelectItem>
                    <SelectItem value="class-c">Class C</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
                <Input type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} />
              </div>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Present</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {students.map((student) => (
                  <TableRow key={student.id}>
                    <TableCell>{student.name}</TableCell>
                    <TableCell>
                      <input
                        type="checkbox"
                        checked={student.present}
                        onChange={() => handleAttendanceChange(student.id)}
                        className="form-checkbox h-5 w-5 text-blue-600"
                      />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Button className="mt-6" onClick={handleSubmit}>
              Submit Attendance
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/teacher-attendance/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function TeacherAttendancePage() {
  const [selectedDepartment, setSelectedDepartment] = useState("")
  const [selectedDate, setSelectedDate] = useState("")
  const [teachers, setTeachers] = useState([
    { id: 1, name: "Dr. Smith", present: true },
    { id: 2, name: "Prof. Johnson", present: false },
    { id: 3, name: "Ms. Williams", present: true },
    // Add more teachers as needed
  ])

const handleAttendanceChange = (teacherId) => {
    setTeachers(
      teachers.map((teacher) => (teacher.id === teacherId ? { ...teacher, present: !teacher.present } : teacher)),
    )
  }

const handleSubmit = () => {
    console.log("Submitting teacher attendance:", { selectedDepartment, selectedDate, teachers })
    // Here you would typically send this data to your backend
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl font-bold">Teacher Attendance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 gap-4 mb-6">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Department</label>
                <Select value={selectedDepartment} onValueChange={setSelectedDepartment}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a department" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="computer-science">Computer Science</SelectItem>
                    <SelectItem value="mathematics">Mathematics</SelectItem>
                    <SelectItem value="physics">Physics</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Select Date</label>
                <Input type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} />
              </div>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Present</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {teachers.map((teacher) => (
                  <TableRow key={teacher.id}>
                    <TableCell>{teacher.name}</TableCell>
                    <TableCell>
                      <input
                        type="checkbox"
                        checked={teacher.present}
                        onChange={() => handleAttendanceChange(teacher.id)}
                        className="form-checkbox h-5 w-5 text-blue-600"
                      />
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            <Button className="mt-6" onClick={handleSubmit}>
              Submit Attendance
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/exam-timetable/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ExamTimetablePage() {
  const [selectedCourse, setSelectedCourse] = useState("")
  const [examDate, setExamDate] = useState("")
  const [examTime, setExamTime] = useState("")
  const [exams, setExams] = useState([
    { id: 1, course: "Mathematics", date: "2025-05-15", time: "09:00 AM" },
    { id: 2, course: "Physics", date: "2025-05-17", time: "02:00 PM" },
    { id: 3, course: "Computer Science", date: "2025-05-19", time: "10:00 AM" },
  ])

const handleAddExam = () => {
    if (selectedCourse && examDate && examTime) {
      setExams([...exams, { id: exams.length + 1, course: selectedCourse, date: examDate, time: examTime }])
      setSelectedCourse("")
      setExamDate("")
      setExamTime("")
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl font-bold">Manage Exam Timetable</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
              <Select value={selectedCourse} onValueChange={setSelectedCourse}>
                <SelectTrigger>
                  <SelectValue placeholder="Select Course" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Mathematics">Mathematics</SelectItem>
                  <SelectItem value="Physics">Physics</SelectItem>
                  <SelectItem value="Computer Science">Computer Science</SelectItem>
                </SelectContent>
              </Select>
              <Input
                type="date"
                value={examDate}
                onChange={(e) => setExamDate(e.target.value)}
                placeholder="Exam Date"
              />
              <Input
                type="time"
                value={examTime}
                onChange={(e) => setExamTime(e.target.value)}
                placeholder="Exam Time"
              />
              <Button onClick={handleAddExam}>Add Exam</Button>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Course</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Time</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {exams.map((exam) => (
                  <TableRow key={exam.id}>
                    <TableCell>{exam.course}</TableCell>
                    <TableCell>{exam.date}</TableCell>
                    <TableCell>{exam.time}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/manage-content/page.tsx" isMerged="true"
"use client"

export default function ManageContentPage() {
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  const [type, setType] = useState("")
  const [content, setContent] = useState([
    { id: 1, title: "Introduction to Calculus", type: "Course Material", status: "Published" },
    { id: 2, title: "Physics Lab Guidelines", type: "Guidelines", status: "Draft" },
    { id: 3, title: "Computer Science Project Ideas", type: "Resources", status: "Published" },
  ])

const handleAddContent = () => {
    if (title && description && type) {
      setContent([...content, { id: content.length + 1, title, type, status: "Draft" }])
      setTitle("")
      setDescription("")
      setType("")
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl font-bold">Manage Content</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Content Title" />
              <Select value={type} onValueChange={setType}>
                <SelectTrigger>
                  <SelectValue placeholder="Content Type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Course Material">Course Material</SelectItem>
                  <SelectItem value="Guidelines">Guidelines</SelectItem>
                  <SelectItem value="Resources">Resources</SelectItem>
                </SelectContent>
              </Select>
              <Textarea
                className="col-span-2"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Content Description"
              />
              <Button className="col-span-2" onClick={handleAddContent}>
                Add Content
              </Button>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Title</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {content.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>{item.title}</TableCell>
                    <TableCell>{item.type}</TableCell>
                    <TableCell>{item.status}</TableCell>
                    <TableCell>
                      <Button variant="outline" size="sm" className="mr-2">
                        Edit
                      </Button>
                      <Button variant="outline" size="sm">
                        Delete
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/exam-timetable/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit, Trash } from "lucide-react"

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl font-bold">Manage Exam Timetable</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <Select value={selectedCourse} onValueChange={setSelectedCourse}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select Course" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Mathematics">Mathematics</SelectItem>
                    <SelectItem value="Physics">Physics</SelectItem>
                    <SelectItem value="Computer Science">Computer Science</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  type="date"
                  value={examDate}
                  onChange={(e) => setExamDate(e.target.value)}
                  placeholder="Exam Date"
                />
                <Input
                  type="time"
                  value={examTime}
                  onChange={(e) => setExamTime(e.target.value)}
                  placeholder="Exam Time"
                />
                <Button onClick={handleAddExam}>
                  <Plus className="mr-2 h-4 w-4" /> Add Exam
                </Button>
              </div>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Course</TableHead>
                    <TableHead>Date</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {exams.map((exam) => (
                    <TableRow key={exam.id}>
                      <TableCell>{exam.course}</TableCell>
                      <TableCell>{exam.date}</TableCell>
                      <TableCell>{exam.time}</TableCell>
                      <TableCell>
                        <Button variant="outline" size="sm" className="mr-2">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm">
                          <Trash className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/regular-timetable/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit, Trash } from "lucide-react"

export default function RegularTimetablePage() {
  const [selectedDay, setSelectedDay] = useState("")
  const [selectedTime, setSelectedTime] = useState("")
  const [selectedCourse, setSelectedCourse] = useState("")
  const [timetable, setTimetable] = useState([
    { id: 1, day: "Monday", time: "09:00 AM", course: "Mathematics" },
    { id: 2, day: "Monday", time: "11:00 AM", course: "Physics" },
    { id: 3, day: "Tuesday", time: "10:00 AM", course: "Computer Science" },
  ])

const handleAddClass = () => {
    if (selectedDay && selectedTime && selectedCourse) {
      setTimetable([
        ...timetable,
        { id: timetable.length + 1, day: selectedDay, time: selectedTime, course: selectedCourse },
      ])
      setSelectedDay("")
      setSelectedTime("")
      setSelectedCourse("")
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl font-bold">Manage Regular Timetable</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <Select value={selectedDay} onValueChange={setSelectedDay}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select Day" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Monday">Monday</SelectItem>
                    <SelectItem value="Tuesday">Tuesday</SelectItem>
                    <SelectItem value="Wednesday">Wednesday</SelectItem>
                    <SelectItem value="Thursday">Thursday</SelectItem>
                    <SelectItem value="Friday">Friday</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  type="time"
                  value={selectedTime}
                  onChange={(e) => setSelectedTime(e.target.value)}
                  placeholder="Class Time"
                />
                <Select value={selectedCourse} onValueChange={setSelectedCourse}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select Course" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Mathematics">Mathematics</SelectItem>
                    <SelectItem value="Physics">Physics</SelectItem>
                    <SelectItem value="Computer Science">Computer Science</SelectItem>
                  </SelectContent>
                </Select>
                <Button onClick={handleAddClass}>
                  <Plus className="mr-2 h-4 w-4" /> Add Class
                </Button>
              </div>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Day</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>Course</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {timetable.map((class_) => (
                    <TableRow key={class_.id}>
                      <TableCell>{class_.day}</TableCell>
                      <TableCell>{class_.time}</TableCell>
                      <TableCell>{class_.course}</TableCell>
                      <TableCell>
                        <Button variant="outline" size="sm" className="mr-2">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm">
                          <Trash className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/activities/page.tsx" isMerged="true"
"use client"

export default function ActivitiesPage() {
  const [activityName, setActivityName] = useState("")
  const [activityDate, setActivityDate] = useState("")
  const [activityType, setActivityType] = useState("")
  const [activityDescription, setActivityDescription] = useState("")
  const [activities, setActivities] = useState([
    {
      id: 1,
      name: "Science Fair",
      date: "2025-06-15",
      type: "Academic",
      description: "Annual science project exhibition",
    },
    { id: 2, name: "Sports Day", date: "2025-07-10", type: "Sports", description: "Inter-college sports competition" },
    { id: 3, name: "Cultural Fest", date: "2025-08-05", type: "Cultural", description: "Annual cultural festival" },
  ])

const handleAddActivity = () => {
    if (activityName && activityDate && activityType) {
      setActivities([
        ...activities,
        {
          id: activities.length + 1,
          name: activityName,
          date: activityDate,
          type: activityType,
          description: activityDescription,
        },
      ])
      setActivityName("")
      setActivityDate("")
      setActivityType("")
      setActivityDescription("")
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl font-bold">Manage Activities</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <Input
                  value={activityName}
                  onChange={(e) => setActivityName(e.target.value)}
                  placeholder="Activity Name"
                />
                <Input
                  type="date"
                  value={activityDate}
                  onChange={(e) => setActivityDate(e.target.value)}
                  placeholder="Activity Date"
                />
                <Select value={activityType} onValueChange={setActivityType}>
                  <SelectTrigger>
                    <SelectValue placeholder="Activity Type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Academic">Academic</SelectItem>
                    <SelectItem value="Sports">Sports</SelectItem>
                    <SelectItem value="Cultural">Cultural</SelectItem>
                  </SelectContent>
                </Select>
                <Textarea
                  value={activityDescription}
                  onChange={(e) => setActivityDescription(e.target.value)}
                  placeholder="Activity Description"
                />
                <Button className="col-span-2" onClick={handleAddActivity}>
                  <Plus className="mr-2 h-4 w-4" /> Add Activity
                </Button>
              </div>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Date</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Description</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {activities.map((activity) => (
                    <TableRow key={activity.id}>
                      <TableCell>{activity.name}</TableCell>
                      <TableCell>{activity.date}</TableCell>
                      <TableCell>{activity.type}</TableCell>
                      <TableCell>{activity.description}</TableCell>
                      <TableCell>
                        <Button variant="outline" size="sm" className="mr-2">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm">
                          <Trash className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/content/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Plus, Edit, Trash, Eye, FileText, Image, File, Upload, Check, X } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"

// Mock data for content items
const contentItems = [
  {
    id: 1,
    title: "Introduction to Calculus",
    type: "Course Material",
    description: "Basic concepts of calculus",
    status: "Published",
    author: "Dr. Smith",
    lastModified: "2025-03-08",
  },
  {
    id: 2,
    title: "Lab Safety Guidelines",
    type: "Guidelines",
    description: "Safety rules for science labs",
    status: "Published",
    author: "Prof. Johnson",
    lastModified: "2025-03-05",
  },
  {
    id: 3,
    title: "Student Handbook",
    type: "Policy",
    description: "College policies and procedures",
    status: "Draft",
    author: "Admin Team",
    lastModified: "2025-03-10",
  },
  {
    id: 4,
    title: "Physics Formulas",
    type: "Reference",
    description: "Common physics formulas and equations",
    status: "Published",
    author: "Dr. Williams",
    lastModified: "2025-03-01",
  },
  {
    id: 5,
    title: "Programming Best Practices",
    type: "Course Material",
    description: "Coding standards and best practices",
    status: "Review",
    author: "Prof. Davis",
    lastModified: "2025-03-09",
  },
]

export default function ContentPage() {
  const [contentTitle, setContentTitle] = useState("")
  const [contentType, setContentType] = useState("")
  const [contentDescription, setContentDescription] = useState("")
  const [searchQuery, setSearchQuery] = useState("")
  const [filteredContent, setFilteredContent] = useState(contentItems)
  const [selectedStatus, setSelectedStatus] = useState("all")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)

// Filter content based on search query and selected filters
  const handleSearch = () => {
    let filtered = contentItems

if (searchQuery) {
      filtered = filtered.filter(
        (item) =>
          item.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
          item.description.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

if (selectedStatus && selectedStatus !== "all") {
      filtered = filtered.filter((item) => item.status === selectedStatus)
    }

setFilteredContent(filtered)
  }

const handleAddContent = () => {
    // In a real app, this would send data to the backend
    console.log("Adding content:", { contentTitle, contentType, contentDescription })
    setIsAddDialogOpen(false)
    setContentTitle("")
    setContentType("")
    setContentDescription("")
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-3xl font-bold">Content Management</h1>
            <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
              <DialogTrigger asChild>
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Add New Content
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Add New Content</DialogTitle>
                  <DialogDescription>Create new content for your courses, policies, or guidelines.</DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <div className="grid gap-2">
                    <Label htmlFor="title">Title</Label>
                    <Input
                      id="title"
                      value={contentTitle}
                      onChange={(e) => setContentTitle(e.target.value)}
                      placeholder="Enter content title"
                    />
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="type">Content Type</Label>
                    <Select value={contentType} onValueChange={setContentType}>
                      <SelectTrigger id="type">
                        <SelectValue placeholder="Select content type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Course Material">Course Material</SelectItem>
                        <SelectItem value="Guidelines">Guidelines</SelectItem>
                        <SelectItem value="Policy">Policy</SelectItem>
                        <SelectItem value="Reference">Reference</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid gap-2">
                    <Label htmlFor="description">Description</Label>
                    <Textarea
                      id="description"
                      value={contentDescription}
                      onChange={(e) => setContentDescription(e.target.value)}
                      placeholder="Enter content description"
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                    Cancel
                  </Button>
                  <Button onClick={handleAddContent}>Add Content</Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>

<Tabs defaultValue="all">
            <TabsList className="mb-6">
              <TabsTrigger value="all">All Content</TabsTrigger>
              <TabsTrigger value="course">Course Materials</TabsTrigger>
              <TabsTrigger value="policy">Policies & Guidelines</TabsTrigger>
              <TabsTrigger value="reference">References</TabsTrigger>
            </TabsList>

<Card className="mb-6">
              <CardHeader>
                <CardTitle>Search & Filter</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="flex-1 relative">
                    <Input
                      type="text"
                      placeholder="Search content..."
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}
                      className="w-full"
                    />
                  </div>
                  <div className="flex-1">
                    <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                      <SelectTrigger>
                        <SelectValue placeholder="Filter by status" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Statuses</SelectItem>
                        <SelectItem value="Published">Published</SelectItem>
                        <SelectItem value="Draft">Draft</SelectItem>
                        <SelectItem value="Review">Under Review</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <Button onClick={handleSearch}>Search</Button>
                </div>
              </CardContent>
            </Card>

<TabsContent value="all">
              <Card>
                <CardHeader>
                  <CardTitle>All Content</CardTitle>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Title</TableHead>
                        <TableHead>Type</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Author</TableHead>
                        <TableHead>Last Modified</TableHead>
                        <TableHead>Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredContent.map((item) => (
                        <TableRow key={item.id}>
                          <TableCell className="font-medium">{item.title}</TableCell>
                          <TableCell>{item.type}</TableCell>
                          <TableCell>
                            <span
                              className={`px-2 py-1 rounded-full text-xs font-medium ${
                                item.status === "Published"
                                  ? "bg-green-100 text-green-800"
                                  : item.status === "Draft"
                                    ? "bg-gray-100 text-gray-800"
                                    : "bg-yellow-100 text-yellow-800"
                              }`}
                            >
                              {item.status}
                            </span>
                          </TableCell>
                          <TableCell>{item.author}</TableCell>
                          <TableCell>{item.lastModified}</TableCell>
                          <TableCell>
                            <div className="flex space-x-2">
                              <Button variant="outline" size="sm">
                                <Eye className="h-4 w-4" />
                              </Button>
                              <Button variant="outline" size="sm">
                                <Edit className="h-4 w-4" />
                              </Button>
                              <Button variant="outline" size="sm">
                                <Trash className="h-4 w-4" />
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="course">
              <Card>
                <CardHeader>
                  <CardTitle>Course Materials</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {filteredContent
                      .filter((item) => item.type === "Course Material")
                      .map((item) => (
                        <Card key={item.id} className="overflow-hidden">
                          <div className="h-32 bg-gray-100 flex items-center justify-center">
                            <FileText className="h-12 w-12 text-gray-400" />
                          </div>
                          <CardContent className="p-4">
                            <h3 className="font-semibold truncate">{item.title}</h3>
                            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{item.description}</p>
                            <div className="flex justify-between items-center mt-3">
                              <span
                                className={`px-2 py-1 rounded-full text-xs font-medium ${
                                  item.status === "Published"
                                    ? "bg-green-100 text-green-800"
                                    : item.status === "Draft"
                                      ? "bg-gray-100 text-gray-800"
                                      : "bg-yellow-100 text-yellow-800"
                                }`}
                              >
                                {item.status}
                              </span>
                              <div className="flex space-x-1">
                                <Button variant="ghost" size="sm">
                                  <Edit className="h-4 w-4" />
                                </Button>
                                <Button variant="ghost" size="sm">
                                  <Trash className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="policy">
              <Card>
                <CardHeader>
                  <CardTitle>Policies & Guidelines</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {filteredContent
                      .filter((item) => item.type === "Policy" || item.type === "Guidelines")
                      .map((item) => (
                        <Card key={item.id} className="overflow-hidden">
                          <div className="h-32 bg-gray-100 flex items-center justify-center">
                            <File className="h-12 w-12 text-gray-400" />
                          </div>
                          <CardContent className="p-4">
                            <h3 className="font-semibold truncate">{item.title}</h3>
                            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{item.description}</p>
                            <div className="flex justify-between items-center mt-3">
                              <span
                                className={`px-2 py-1 rounded-full text-xs font-medium ${
                                  item.status === "Published"
                                    ? "bg-green-100 text-green-800"
                                    : item.status === "Draft"
                                      ? "bg-gray-100 text-gray-800"
                                      : "bg-yellow-100 text-yellow-800"
                                }`}
                              >
                                {item.status}
                              </span>
                              <div className="flex space-x-1">
                                <Button variant="ghost" size="sm">
                                  <Edit className="h-4 w-4" />
                                </Button>
                                <Button variant="ghost" size="sm">
                                  <Trash className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="reference">
              <Card>
                <CardHeader>
                  <CardTitle>References</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {filteredContent
                      .filter((item) => item.type === "Reference")
                      .map((item) => (
                        <Card key={item.id} className="overflow-hidden">
                          <div className="h-32 bg-gray-100 flex items-center justify-center">
                            <Image className="h-12 w-12 text-gray-400" />
                          </div>
                          <CardContent className="p-4">
                            <h3 className="font-semibold truncate">{item.title}</h3>
                            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{item.description}</p>
                            <div className="flex justify-between items-center mt-3">
                              <span
                                className={`px-2 py-1 rounded-full text-xs font-medium ${
                                  item.status === "Published"
                                    ? "bg-green-100 text-green-800"
                                    : item.status === "Draft"
                                      ? "bg-gray-100 text-gray-800"
                                      : "bg-yellow-100 text-yellow-800"
                                }`}
                              >
                                {item.status}
                              </span>
                              <div className="flex space-x-1">
                                <Button variant="ghost" size="sm">
                                  <Edit className="h-4 w-4" />
                                </Button>
                                <Button variant="ghost" size="sm">
                                  <Trash className="h-4 w-4" />
                                </Button>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>

<div className="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Upload className="mr-2 h-5 w-5" />
                  Upload Content
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                  <Upload className="h-10 w-10 text-gray-400 mx-auto mb-4" />
                  <p className="text-sm text-gray-500 mb-2">Drag and drop files here or click to browse</p>
                  <Input type="file" className="hidden" id="file-upload" />
                  <Button asChild>
                    <label htmlFor="file-upload">Select Files</label>
                  </Button>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Check className="mr-2 h-5 w-5" />
                  Content Approval
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center p-3 bg-yellow-50 rounded-md border border-yellow-200">
                    <div>
                      <p className="font-medium">Programming Best Practices</p>
                      <p className="text-sm text-gray-500">Awaiting approval</p>
                    </div>
                    <div className="flex space-x-2">
                      <Button size="sm" variant="outline" className="h-8 w-8 p-0">
                        <Check className="h-4 w-4 text-green-600" />
                      </Button>
                      <Button size="sm" variant="outline" className="h-8 w-8 p-0">
                        <X className="h-4 w-4 text-red-600" />
                      </Button>
                    </div>
                  </div>
                  <div className="flex justify-between items-center p-3 bg-yellow-50 rounded-md border border-yellow-200">
                    <div>
                      <p className="font-medium">Student Handbook</p>
                      <p className="text-sm text-gray-500">Awaiting approval</p>
                    </div>
                    <div className="flex space-x-2">
                      <Button size="sm" variant="outline" className="h-8 w-8 p-0">
                        <Check className="h-4 w-4 text-green-600" />
                      </Button>
                      <Button size="sm" variant="outline" className="h-8 w-8 p-0">
                        <X className="h-4 w-4 text-red-600" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/media/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit, Trash, Eye } from "lucide-react"

export default function MediaPage() {
  const [mediaTitle, setMediaTitle] = useState("")
  const [mediaType, setMediaType] = useState("")
  const [mediaFile, setMediaFile] = useState(null)
  const [media, setMedia] = useState([
    { id: 1, title: "Campus Tour Video", type: "Video", filename: "campus_tour.mp4" },
    { id: 2, title: "College Brochure", type: "Document", filename: "brochure.pdf" },
    { id: 3, title: "Lab Equipment Guide", type: "Image", filename: "lab_equipment.jpg" },
  ])

const handleAddMedia = () => {
    if (mediaTitle && mediaType && mediaFile) {
      setMedia([...media, { id: media.length + 1, title: mediaTitle, type: mediaType, filename: mediaFile.name }])
      setMediaTitle("")
      setMediaType("")
      setMediaFile(null)
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl font-bold">Media Management</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <Input value={mediaTitle} onChange={(e) => setMediaTitle(e.target.value)} placeholder="Media Title" />
                <Select value={mediaType} onValueChange={setMediaType}>
                  <SelectTrigger>
                    <SelectValue placeholder="Media Type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Video">Video</SelectItem>
                    <SelectItem value="Document">Document</SelectItem>
                    <SelectItem value="Image">Image</SelectItem>
                  </SelectContent>
                </Select>
                <Input type="file" onChange={(e) => setMediaFile(e.target.files[0])} />
                <Button className="col-span-3" onClick={handleAddMedia}>
                  <Plus className="mr-2 h-4 w-4" /> Add Media
                </Button>
              </div>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Title</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Filename</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {media.map((item) => (
                    <TableRow key={item.id}>
                      <TableCell>{item.title}</TableCell>
                      <TableCell>{item.type}</TableCell>
                      <TableCell>{item.filename}</TableCell>
                      <TableCell>
                        <Button variant="outline" size="sm" className="mr-2">
                          <Eye className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm" className="mr-2">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm">
                          <Trash className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/profile/page.tsx" isMerged="true"
"use client"

export default function ProfilePage() {
  const [profile, setProfile] = useState({
    name: "John Doe",
    email: "john.doe@example.com",
    phone: "+1 (555) 123-4567",
    bio: "Experienced administrator with a passion for education.",
  })

const handleInputChange = (e) => {
    const { name, value } = e.target
    setProfile({ ...profile, [name]: value })
  }

const handleSave = () => {
    console.log("Saving profile:", profile)
    // Here you would typically send the updated profile to your backend
  }

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Save } from "lucide-react"

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    siteTitle: "My College CMS",
    emailNotifications: true,
    darkMode: false,
    language: "English",
  })

const handleInputChange = (e) => {
    const { name, value } = e.target
    setSettings({ ...settings, [name]: value })
  }

const handleSwitchChange = (name) => {
    setSettings({ ...settings, [name]: !settings[name] })
  }

const handleSave = () => {
    console.log("Saving settings:", settings)
    // Here you would typically send the updated settings to your backend
  }

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit, Trash } from "lucide-react"

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl font-bold">Manage Regular Timetable</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <Select value={selectedDay} onValueChange={setSelectedDay}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select Day" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Monday">Monday</SelectItem>
                    <SelectItem value="Tuesday">Tuesday</SelectItem>
                    <SelectItem value="Wednesday">Wednesday</SelectItem>
                    <SelectItem value="Thursday">Thursday</SelectItem>
                    <SelectItem value="Friday">Friday</SelectItem>
                  </SelectContent>
                </Select>
                <Input
                  type="time"
                  value={selectedTime}
                  onChange={(e) => setSelectedTime(e.target.value)}
                  placeholder="Class Time"
                />
                <Select value={selectedCourse} onValueChange={setSelectedCourse}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select Course" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Mathematics">Mathematics</SelectItem>
                    <SelectItem value="Physics">Physics</SelectItem>
                    <SelectItem value="Computer Science">Computer Science</SelectItem>
                  </SelectContent>
                </Select>
                <Button onClick={handleAddClass}>
                  <Plus className="mr-2 h-4 w-4" /> Add Class
                </Button>
              </div>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Day</TableHead>
                    <TableHead>Time</TableHead>
                    <TableHead>Course</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {timetable.map((class_) => (
                    <TableRow key={class_.id}>
                      <TableCell>{class_.day}</TableCell>
                      <TableCell>{class_.time}</TableCell>
                      <TableCell>{class_.course}</TableCell>
                      <TableCell>
                        <Button variant="outline" size="sm" className="mr-2">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="outline" size="sm">
                          <Trash className="h-4 w-4" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/profile/page.tsx" isMerged="true"
"use client"

export default function ProfilePage() {
  const [profile, setProfile] = useState({
    name: "Dr. Jane Smith",
    email: "jane.smith@example.com",
    phone: "+1 (555) 987-6543",
    department: "Computer Science",
    bio: "Experienced HOD with a focus on advancing computer science education and research.",
  })

const handleInputChange = (e) => {
    const { name, value } = e.target
    setProfile({ ...profile, [name]: value })
  }

const handleSave = () => {
    console.log("Saving profile:", profile)
    // Here you would typically send the updated profile to your backend
  }

import { useState } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Save } from "lucide-react"

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    notificationPreferences: {
      email: true,
      sms: false,
      push: true,
    },
    privacySettings: {
      showContactInfo: true,
      showResearchInterests: true,
    },
    interfaceSettings: {
      darkMode: false,
      highContrastMode: false,
    },
  })

const handleSwitchChange = (category, setting) => {
    setSettings((prevSettings) => ({
      ...prevSettings,
      [category]: {
        ...prevSettings[category],
        [setting]: !prevSettings[category][setting],
      },
    }))
  }

const handleSave = () => {
    console.log("Saving settings:", settings)
    // Here you would typically send the updated settings to your backend
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <Card>
            <CardHeader>
              <CardTitle className="text-2xl font-bold">HOD Settings</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold mb-2">Notification Preferences</h3>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="emailNotifications">Email Notifications</Label>
                      <Switch
                        id="emailNotifications"
                        checked={settings.notificationPreferences.email}
                        onCheckedChange={() => handleSwitchChange("notificationPreferences", "email")}
                      />
                    </div>
                    <div className="flex items-center justify-between">
                      <Label htmlFor="smsNotifications">SMS Notifications</Label>
                      <Switch
                        id="smsNotifications"
                        checked={settings.notificationPreferences.sms}
                        onCheckedChange={() => handleSwitchChange("notificationPreferences", "sms")}
                      />
                    </div>
                    <div className="flex items-center justify-between">
                      <Label htmlFor="pushNotifications">Push Notifications</Label>
                      <Switch
                        id="pushNotifications"
                        checked={settings.notificationPreferences.push}
                        onCheckedChange={() => handleSwitchChange("notificationPreferences", "push")}
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-2">Privacy Settings</h3>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="showContactInfo">Show Contact Information</Label>
                      <Switch
                        id="showContactInfo"
                        checked={settings.privacySettings.showContactInfo}
                        onCheckedChange={() => handleSwitchChange("privacySettings", "showContactInfo")}
                      />
                    </div>
                    <div className="flex items-center justify-between">
                      <Label htmlFor="showResearchInterests">Show Research Interests</Label>
                      <Switch
                        id="showResearchInterests"
                        checked={settings.privacySettings.showResearchInterests}
                        onCheckedChange={() => handleSwitchChange("privacySettings", "showResearchInterests")}
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-semibold mb-2">Interface Settings</h3>
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="darkMode">Dark Mode</Label>
                      <Switch
                        id="darkMode"
                        checked={settings.interfaceSettings.darkMode}
                        onCheckedChange={() => handleSwitchChange("interfaceSettings", "darkMode")}
                      />
                    </div>
                    <div className="flex items-center justify-between">
                      <Label htmlFor="highContrastMode">High Contrast Mode</Label>
                      <Switch
                        id="highContrastMode"
                        checked={settings.interfaceSettings.highContrastMode}
                        onCheckedChange={() => handleSwitchChange("interfaceSettings", "highContrastMode")}
                      />
                    </div>
                  </div>
                </div>
              </div>
              <Button onClick={handleSave} className="mt-6">
                <Save className="mr-2 h-4 w-4" /> Save Settings
              </Button>
            </CardContent>
          </Card>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/student-attendance/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Calendar, Search, Download } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Mock data for student attendance
const studentAttendanceData = [
  { id: 1, name: "John Doe", rollNumber: "CS001", date: "2025-03-10", status: "Present", course: "Mathematics" },
  { id: 2, name: "Jane Smith", rollNumber: "CS002", date: "2025-03-10", status: "Present", course: "Mathematics" },
  { id: 3, name: "Alice Johnson", rollNumber: "CS003", date: "2025-03-10", status: "Absent", course: "Mathematics" },
  { id: 4, name: "Bob Brown", rollNumber: "CS004", date: "2025-03-10", status: "Present", course: "Mathematics" },
  { id: 5, name: "Charlie Davis", rollNumber: "CS005", date: "2025-03-10", status: "Present", course: "Mathematics" },
  { id: 6, name: "Diana Evans", rollNumber: "CS006", date: "2025-03-10", status: "Absent", course: "Mathematics" },
  { id: 7, name: "Edward Foster", rollNumber: "CS007", date: "2025-03-10", status: "Present", course: "Mathematics" },
  { id: 8, name: "Fiona Green", rollNumber: "CS008", date: "2025-03-10", status: "Present", course: "Mathematics" },
  { id: 9, name: "George Harris", rollNumber: "CS009", date: "2025-03-10", status: "Late", course: "Mathematics" },
  { id: 10, name: "Hannah Irving", rollNumber: "CS010", date: "2025-03-10", status: "Present", course: "Mathematics" },
]

// Mock data for attendance summary
const attendanceSummary = {
  totalStudents: 120,
  present: 112,
  absent: 8,
  rate: "93.3%",
  courses: [
    { name: "Mathematics", present: 28, absent: 2, rate: "93.3%" },
    { name: "Physics", present: 27, absent: 3, rate: "90.0%" },
    { name: "Computer Science", present: 29, absent: 1, rate: "96.7%" },
    { name: "English", present: 28, absent: 2, rate: "93.3%" },
  ],
}

export default function StudentAttendancePage() {
  const [selectedDate, setSelectedDate] = useState("")
  const [selectedCourse, setSelectedCourse] = useState("")
  const [searchQuery, setSearchQuery] = useState("")
  const [filteredData, setFilteredData] = useState(studentAttendanceData)

// Filter data based on search query and selected filters
  useEffect(() => {
    let filtered = studentAttendanceData

if (searchQuery) {
      filtered = filtered.filter(
        (student) =>
          student.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
          student.rollNumber.toLowerCase().includes(searchQuery.toLowerCase()),
      )
    }

if (selectedCourse) {
      filtered = filtered.filter((student) => student.course === selectedCourse)
    }

setFilteredData(filtered)
  }, [searchQuery, selectedCourse])

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-3xl font-bold">Student Attendance</h1>
            <div className="flex space-x-2">
              <Button variant="outline">
                <Download className="mr-2 h-4 w-4" />
                Export
              </Button>
              <Button>
                <Calendar className="mr-2 h-4 w-4" />
                {selectedDate || "Today"}
              </Button>
            </div>
          </div>

<Tabs defaultValue="daily">
            <TabsList className="mb-6">
              <TabsTrigger value="daily">Daily View</TabsTrigger>
              <TabsTrigger value="summary">Summary</TabsTrigger>
              <TabsTrigger value="trends">Trends</TabsTrigger>
            </TabsList>

<TabsContent value="daily">
              <Card className="mb-6">
                <CardHeader>
                  <CardTitle>Attendance Filters</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-col md:flex-row gap-4">
                    <div className="flex-1">
                      <Input
                        type="date"
                        value={selectedDate}
                        onChange={(e) => setSelectedDate(e.target.value)}
                        className="w-full"
                      />
                    </div>
                    <div className="flex-1">
                      <Select value={selectedCourse} onValueChange={setSelectedCourse}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select Course" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="all">All Courses</SelectItem>
                          <SelectItem value="Mathematics">Mathematics</SelectItem>
                          <SelectItem value="Physics">Physics</SelectItem>
                          <SelectItem value="Computer Science">Computer Science</SelectItem>
                          <SelectItem value="English">English</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="flex-1 relative">
                      <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                      <Input
                        type="text"
                        placeholder="Search by name or roll number"
                        className="pl-10"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Student Attendance Records</CardTitle>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Roll Number</TableHead>
                        <TableHead>Name</TableHead>
                        <TableHead>Course</TableHead>
                        <TableHead>Date</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredData.map((student) => (
                        <TableRow key={student.id}>
                          <TableCell>{student.rollNumber}</TableCell>
                          <TableCell>{student.name}</TableCell>
                          <TableCell>{student.course}</TableCell>
                          <TableCell>{student.date}</TableCell>
                          <TableCell>
                            <Badge
                              variant={
                                student.status === "Present"
                                  ? "default"
                                  : student.status === "Late"
                                    ? "warning"
                                    : "destructive"
                              }
                            >
                              {student.status}
                            </Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="summary">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <Card>
                  <CardHeader>
                    <CardTitle>Today's Attendance Summary</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Total Students</span>
                        <span className="font-semibold">{attendanceSummary.totalStudents}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Present</span>
                        <span className="font-semibold text-green-600">{attendanceSummary.present}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Absent</span>
                        <span className="font-semibold text-red-600">{attendanceSummary.absent}</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span className="text-gray-600">Attendance Rate</span>
                        <span className="font-semibold">{attendanceSummary.rate}</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader>
                    <CardTitle>Course-wise Attendance</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>Course</TableHead>
                          <TableHead>Present</TableHead>
                          <TableHead>Absent</TableHead>
                          <TableHead>Rate</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {attendanceSummary.courses.map((course, index) => (
                          <TableRow key={index}>
                            <TableCell>{course.name}</TableCell>
                            <TableCell className="text-green-600">{course.present}</TableCell>
                            <TableCell className="text-red-600">{course.absent}</TableCell>
                            <TableCell>{course.rate}</TableCell>
                          </TableRow>
                        ))}
                      </TableBody>
                    </Table>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

<TabsContent value="trends">
              <Card>
                <CardHeader>
                  <CardTitle>Attendance Trends</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px] flex items-center justify-center">
                    <p className="text-gray-500">Attendance trend charts will be displayed here</p>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/student-attendance/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/student-attendance-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { motion } from "framer-motion"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { CheckCircle, AlertCircle } from "lucide-react"
import { useToast } from "@/components/ui/use-toast"

export function StudentAttendanceForm() {
  const [course, setCourse] = useState("")
  const [attendanceCode, setAttendanceCode] = useState("")
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)
  const [error, setError] = useState("")
  const { toast } = useToast()

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")

// Simulate API call
    setTimeout(() => {
      if (attendanceCode === "1234") {
        setSuccess(true)
        setLoading(false)
        toast({
          title: "Attendance Marked",
          description: "Your attendance has been successfully recorded.",
          variant: "default",
        })

// Reset form after 3 seconds
        setTimeout(() => {
          setSuccess(false)
          setCourse("")
          setAttendanceCode("")
        }, 3000)
      } else {
        setError("Invalid attendance code. Please try again.")
        setLoading(false)
      }
    }, 1500)
  }

return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
      <Card className="w-full max-w-md mx-auto">
        <CardHeader>
          <CardTitle className="text-xl">Mark Your Attendance</CardTitle>
          <CardDescription>
            Select your course and enter the attendance code provided by your instructor
          </CardDescription>
        </CardHeader>
        <CardContent>
          {success ? (
            <div className="flex flex-col items-center justify-center py-6">
              <CheckCircle className="h-16 w-16 text-green-500 mb-4" />
              <h3 className="text-xl font-semibold text-green-700">Attendance Marked!</h3>
              <p className="text-gray-600 text-center mt-2">Your attendance has been successfully recorded.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="course">Select Course</Label>
                <Select value={course} onValueChange={setCourse} required>
                  <SelectTrigger id="course">
                    <SelectValue placeholder="Select a course" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="mathematics">Mathematics</SelectItem>
                    <SelectItem value="physics">Physics</SelectItem>
                    <SelectItem value="computer-science">Computer Science</SelectItem>
                    <SelectItem value="english">English</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="attendance-code">Attendance Code</Label>
                <Input
                  id="attendance-code"
                  type="text"
                  placeholder="Enter the code provided by your instructor"
                  value={attendanceCode}
                  onChange={(e) => setAttendanceCode(e.target.value)}
                  required
                />
              </div>

{error && (
                <div className="flex items-center text-red-600 text-sm">
                  <AlertCircle className="h-4 w-4 mr-2" />
                  {error}
                </div>
              )}

<Button type="submit" className="w-full" disabled={loading || !course || !attendanceCode}>
                {loading ? "Marking Attendance..." : "Mark Attendance"}
              </Button>
            </form>
          )}
        </CardContent>
      </Card>
    </motion.div>
  )
}
[V0_FILE]typescriptreact:file="app/student-dashboard/attendance/page.tsx" isMerged="true"
import { Sidebar } from "@/components/sidebar"
import { StudentAttendanceForm } from "@/components/student-attendance-form"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function StudentAttendancePage() {
  return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar />
      <div className="flex-1 ml-64 p-8">
        <h1 className="text-3xl font-bold mb-6">Attendance</h1>

<Card>
            <CardHeader>
              <CardTitle>Attendance History</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex justify-between items-center p-3 bg-green-50 rounded-md border border-green-200">
                  <div>
                    <p className="font-medium">Mathematics</p>
                    <p className="text-sm text-gray-500">March 10, 2025 - 09:30 AM</p>
                  </div>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm font-medium">Present</span>
                </div>

<div className="flex justify-between items-center p-3 bg-green-50 rounded-md border border-green-200">
                  <div>
                    <p className="font-medium">Physics</p>
                    <p className="text-sm text-gray-500">March 9, 2025 - 11:00 AM</p>
                  </div>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm font-medium">Present</span>
                </div>

<div className="flex justify-between items-center p-3 bg-red-50 rounded-md border border-red-200">
                  <div>
                    <p className="font-medium">Computer Science</p>
                    <p className="text-sm text-gray-500">March 8, 2025 - 02:00 PM</p>
                  </div>
                  <span className="px-2 py-1 bg-red-100 text-red-800 rounded text-sm font-medium">Absent</span>
                </div>

<div className="flex justify-between items-center p-3 bg-green-50 rounded-md border border-green-200">
                  <div>
                    <p className="font-medium">English</p>
                    <p className="text-sm text-gray-500">March 7, 2025 - 10:30 AM</p>
                  </div>
                  <span className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm font-medium">Present</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/view-attendance/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Calendar, Search, Download, RefreshCw } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Mock data for student attendance
const studentAttendanceData = [
  {
    id: 1,
    name: "John Doe",
    rollNumber: "CS001",
    date: "2025-03-10",
    status: "Present",
    course: "Mathematics",
    time: "09:30 AM",
  },
  {
    id: 2,
    name: "Jane Smith",
    rollNumber: "CS002",
    date: "2025-03-10",
    status: "Present",
    course: "Mathematics",
    time: "09:32 AM",
  },
  {
    id: 3,
    name: "Alice Johnson",
    rollNumber: "CS003",
    date: "2025-03-10",
    status: "Absent",
    course: "Mathematics",
    time: "-",
  },
  {
    id: 4,
    name: "Bob Brown",
    rollNumber: "CS004",
    date: "2025-03-10",
    status: "Present",
    course: "Mathematics",
    time: "09:28 AM",
  },
  {
    id: 5,
    name: "Charlie Davis",
    rollNumber: "CS005",
    date: "2025-03-10",
    status: "Present",
    course: "Mathematics",
    time: "09:35 AM",
  },
  {
    id: 6,
    name: "Diana Evans",
    rollNumber: "CS006",
    date: "2025-03-10",
    status: "Absent",
    course: "Mathematics",
    time: "-",
  },
  {
    id: 7,
    name: "Edward Foster",
    rollNumber: "CS007",
    date: "2025-03-10",
    status: "Present",
    course: "Physics",
    time: "11:02 AM",
  },
  {
    id: 8,
    name: "Fiona Green",
    rollNumber: "CS008",
    date: "2025-03-10",
    status: "Present",
    course: "Physics",
    time: "11:05 AM",
  },
  {
    id: 9,
    name: "George Harris",
    rollNumber: "CS009",
    date: "2025-03-10",
    status: "Late",
    course: "Physics",
    time: "11:15 AM",
  },
  {
    id: 10,
    name: "Hannah Irving",
    rollNumber: "CS010",
    date: "2025-03-10",
    status: "Present",
    course: "Physics",
    time: "11:01 AM",
  },
]

export default function ViewAttendancePage() {
  const [selectedDate, setSelectedDate] = useState("")
  const [selectedCourse, setSelectedCourse] = useState("")
  const [searchQuery, setSearchQuery] = useState("")
  const [filteredData, setFilteredData] = useState(studentAttendanceData)
  const [refreshing, setRefreshing] = useState(false)

// Filter data based on search query and selected filters
  useEffect(() => {
    let filtered = studentAttendanceData

if (selectedCourse && selectedCourse !== "all") {
      filtered = filtered.filter((student) => student.course === selectedCourse)
    }

setFilteredData(filtered)
  }, [searchQuery, selectedCourse])

const handleRefresh = () => {
    setRefreshing(true)
    // Simulate fetching new data
    setTimeout(() => {
      setRefreshing(false)
    }, 1500)
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <Sidebar isAdmin />
      <div className="flex-1 ml-64 p-8">
        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-3xl font-bold">View Student Attendance</h1>
            <div className="flex space-x-2">
              <Button variant="outline" onClick={handleRefresh} disabled={refreshing}>
                <RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? "animate-spin" : ""}`} />
                {refreshing ? "Refreshing..." : "Refresh"}
              </Button>
              <Button variant="outline">
                <Download className="mr-2 h-4 w-4" />
                Export
              </Button>
              <Button>
                <Calendar className="mr-2 h-4 w-4" />
                {selectedDate || "Today"}
              </Button>
            </div>
          </div>

<Card>
                <CardHeader>
                  <CardTitle>Student Attendance Records</CardTitle>
                </CardHeader>
                <CardContent>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Roll Number</TableHead>
                        <TableHead>Name</TableHead>
                        <TableHead>Course</TableHead>
                        <TableHead>Date</TableHead>
                        <TableHead>Time</TableHead>
                        <TableHead>Status</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredData.map((student) => (
                        <TableRow key={student.id}>
                          <TableCell>{student.rollNumber}</TableCell>
                          <TableCell>{student.name}</TableCell>
                          <TableCell>{student.course}</TableCell>
                          <TableCell>{student.date}</TableCell>
                          <TableCell>{student.time}</TableCell>
                          <TableCell>
                            <Badge
                              variant={
                                student.status === "Present"
                                  ? "default"
                                  : student.status === "Late"
                                    ? "warning"
                                    : "destructive"
                              }
                            >
                              {student.status}
                            </Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="trends">
              <Card>
                <CardHeader>
                  <CardTitle>Attendance Trends</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-[400px] flex items-center justify-center">
                    <p className="text-gray-500">Attendance trend charts will be displayed here</p>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/view-attendance/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/hod/anonymous-reports/page.tsx" isMerged="true"
"use client"

// Mock data for anonymous reports
const anonymousReports = [
  {
    id: 1,
    subject: "Classroom Concern",
    status: "New",
    date: "2025-03-10",
    preview: "I have a concern about the classroom environment...",
  },
  {
    id: 2,
    subject: "Course Material Feedback",
    status: "In Progress",
    date: "2025-03-09",
    preview: "I would like to provide feedback on the course materials...",
  },
  {
    id: 3,
    subject: "Exam Schedule Request",
    status: "New",
    date: "2025-03-08",
    preview: "I have a request regarding the upcoming exam schedule...",
  },
  {
    id: 4,
    subject: "Student Welfare Suggestion",
    status: "Resolved",
    date: "2025-03-07",
    preview: "I have a suggestion to improve student welfare...",
  },
  {
    id: 5,
    subject: "Academic Support Needed",
    status: "New",
    date: "2025-03-06",
    preview: "I am struggling with a particular subject and need support...",
  },
]

export default function AnonymousReportsPage() {
  const [selectedStatus, setSelectedStatus] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedReport, setSelectedReport] = useState(null)
  const [isViewDialogOpen, setIsViewDialogOpen] = useState(false)
  const [isReplyDialogOpen, setIsReplyDialogOpen] = useState(false)
  const [replyMessage, setReplyMessage] = useState("")

const filteredReports = anonymousReports.filter(
    (report) =>
      (selectedStatus === "all" || report.status === selectedStatus) &&
      (report.subject.toLowerCase().includes(searchQuery.toLowerCase()) ||
        report.preview.toLowerCase().includes(searchQuery.toLowerCase())),
  )

const handleViewReport = (report) => {
    setSelectedReport(report)
    setIsViewDialogOpen(true)
  }

const handleReplyToReport = (report) => {
    setSelectedReport(report)
    setIsReplyDialogOpen(true)
  }

const handleSendReply = () => {
    // Here you would typically send the reply to your backend
    console.log("Sending reply for report:", selectedReport.id)
    console.log("Reply message:", replyMessage)
    setIsReplyDialogOpen(false)
    setReplyMessage("")
  }

<Card className="mb-6">
            <CardHeader>
              <CardTitle>Filter and Search</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex space-x-4">
                <div className="flex-1">
                  <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                    <SelectTrigger>
                      <SelectValue placeholder="Filter by status" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Statuses</SelectItem>
                      <SelectItem value="New">New</SelectItem>
                      <SelectItem value="In Progress">In Progress</SelectItem>
                      <SelectItem value="Resolved">Resolved</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="flex-1 relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                  <Input
                    type="text"
                    placeholder="Search reports..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Report List</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Subject</TableHead>
                    <TableHead>Preview</TableHead>
                    <TableHead>Date</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredReports.map((report) => (
                    <TableRow key={report.id}>
                      <TableCell className="font-medium">{report.subject}</TableCell>
                      <TableCell className="max-w-xs truncate">{report.preview}</TableCell>
                      <TableCell>{report.date}</TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            report.status === "New"
                              ? "destructive"
                              : report.status === "In Progress"
                                ? "default"
                                : "secondary"
                          }
                        >
                          {report.status}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="outline" size="sm" onClick={() => handleViewReport(report)}>
                            <Eye className="h-4 w-4 mr-1" /> View
                          </Button>
                          <Button variant="outline" size="sm" onClick={() => handleReplyToReport(report)}>
                            <MessageCircle className="h-4 w-4 mr-1" /> Reply
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

<Dialog open={isViewDialogOpen} onOpenChange={setIsViewDialogOpen}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{selectedReport?.subject}</DialogTitle>
              </DialogHeader>
              <div className="mt-4">
                <p className="text-sm text-gray-500 mb-2">Submitted on: {selectedReport?.date}</p>
                <p>{selectedReport?.preview}</p>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsViewDialogOpen(false)}>
                  Close
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

<Dialog open={isReplyDialogOpen} onOpenChange={setIsReplyDialogOpen}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Reply to Report</DialogTitle>
                <DialogDescription>
                  Your reply will be sent anonymously to the student who submitted this report.
                </DialogDescription>
              </DialogHeader>
              <div className="mt-4">
                <Label htmlFor="reply">Your Reply</Label>
                <Textarea
                  id="reply"
                  value={replyMessage}
                  onChange={(e) => setReplyMessage(e.target.value)}
                  rows={5}
                  placeholder="Type your reply here..."
                />
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setIsReplyDialogOpen(false)}>
                  Cancel
                </Button>
                <Button onClick={handleSendReply}>Send Reply</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </motion.div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/anonymous-reports/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/report-modal.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { CheckCircle, AlertTriangle } from "lucide-react"

interface ReportModalProps {
  isOpen: boolean
  onClose: () => void
}

export function ReportModal({ isOpen, onClose }: ReportModalProps) {
  const [reportType, setReportType] = useState("")
  const [subject, setSubject] = useState("")
  const [description, setDescription] = useState("")
  const [priority, setPriority] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsSubmitting(false)
    setIsSubmitted(true)

// Reset form after 3 seconds and close modal
    setTimeout(() => {
      setIsSubmitted(false)
      setReportType("")
      setSubject("")
      setDescription("")
      setPriority("")
      onClose()
    }, 3000)
  }

const handleClose = () => {
    if (!isSubmitting) {
      setReportType("")
      setSubject("")
      setDescription("")
      setPriority("")
      setIsSubmitted(false)
      onClose()
    }
  }

return (
    <Dialog open={isOpen} onOpenChange={handleClose}>
      <DialogContent className="sm:max-w-[500px] bg-white border-pink-200">
        <DialogHeader>
          <DialogTitle className="text-pink-800 flex items-center">
            <AlertTriangle className="mr-2 h-5 w-5 text-pink-600" />
            Report an Issue
          </DialogTitle>
          <DialogDescription className="text-pink-600">
            Submit a report about any issues, concerns, or feedback you have. Your report will be reviewed by the
            administration.
          </DialogDescription>
        </DialogHeader>

{isSubmitted ? (
          <div className="py-8">
            <Alert className="border-green-200 bg-green-50">
              <CheckCircle className="h-4 w-4 text-green-600" />
              <AlertDescription className="text-green-800">
                Your report has been submitted successfully! The administration will review it and get back to you if
                needed.
              </AlertDescription>
            </Alert>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="reportType" className="text-pink-800">
                Report Type
              </Label>
              <Select value={reportType} onValueChange={setReportType} required>
                <SelectTrigger className="border-pink-200 focus:border-pink-400 focus:ring-pink-400">
                  <SelectValue placeholder="Select report type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="academic">Academic Issue</SelectItem>
                  <SelectItem value="technical">Technical Problem</SelectItem>
                  <SelectItem value="harassment">Harassment/Bullying</SelectItem>
                  <SelectItem value="facility">Facility Issue</SelectItem>
                  <SelectItem value="teacher">Teacher Concern</SelectItem>
                  <SelectItem value="other">Other</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="priority" className="text-pink-800">
                Priority Level
              </Label>
              <Select value={priority} onValueChange={setPriority} required>
                <SelectTrigger className="border-pink-200 focus:border-pink-400 focus:ring-pink-400">
                  <SelectValue placeholder="Select priority level" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="low">Low</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                  <SelectItem value="urgent">Urgent</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="subject" className="text-pink-800">
                Subject
              </Label>
              <Input
                id="subject"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder="Brief summary of the issue"
                className="border-pink-200 focus:border-pink-400 focus:ring-pink-400"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description" className="text-pink-800">
                Description
              </Label>
              <Textarea
                id="description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Provide detailed information about the issue..."
                className="border-pink-200 focus:border-pink-400 focus:ring-pink-400 min-h-[100px]"
                required
              />
            </div>

<DialogFooter className="gap-2">
              <Button
                type="button"
                variant="outline"
                onClick={handleClose}
                disabled={isSubmitting}
                className="border-pink-200 text-pink-800 hover:bg-pink-50 bg-transparent"
              >
                Cancel
              </Button>
              <Button
                type="submit"
                disabled={isSubmitting || !reportType || !subject || !description || !priority}
                className="bg-pink-500 hover:bg-pink-600 text-white"
              >
                {isSubmitting ? "Submitting..." : "Submit Report"}
              </Button>
            </DialogFooter>
          </form>
        )}
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/student/report/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Sidebar } from "@/components/sidebar"
import { Flag, CheckCircle, ArrowLeft, Send } from "lucide-react"

export default function StudentReportPage() {
  const router = useRouter()
  const [reportType, setReportType] = useState("")
  const [subject, setSubject] = useState("")
  const [description, setDescription] = useState("")
  const [priority, setPriority] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsSubmitting(false)
    setIsSubmitted(true)

// Reset form after 5 seconds
    setTimeout(() => {
      setIsSubmitted(false)
      setReportType("")
      setSubject("")
      setDescription("")
      setPriority("")
    }, 5000)
  }

const handleBack = () => {
    router.push("/student-dashboard")
  }

return (
    <div className="flex h-screen bg-pink-50">
      <Sidebar />
      <div className="flex-1 ml-64">
        <header className="bg-pink-100 shadow-sm border-b border-pink-200 sticky top-0 z-10">
          <div className="flex items-center px-6 py-4">
            <Button
              variant="ghost"
              onClick={handleBack}
              className="mr-4 text-pink-600 hover:text-pink-800 hover:bg-pink-100"
            >
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Dashboard
            </Button>
            <h1 className="text-2xl font-bold text-pink-800 flex items-center">
              <Flag className="mr-2 h-6 w-6 text-pink-600" />
              Submit Report to HOD
            </h1>
          </div>
        </header>

<main className="p-6">
          <div className="max-w-4xl mx-auto">
            {isSubmitted ? (
              <Card className="border-green-200 bg-green-50">
                <CardContent className="p-8 text-center">
                  <CheckCircle className="h-16 w-16 text-green-600 mx-auto mb-4" />
                  <h2 className="text-2xl font-bold text-green-800 mb-2">Report Submitted Successfully!</h2>
                  <p className="text-green-700 mb-4">
                    Your report has been sent to the HOD for review. You will be contacted if any follow-up is needed.
                  </p>
                  <Alert className="border-green-300 bg-green-100 text-left">
                    <AlertDescription className="text-green-800">
                      <strong>Report Details:</strong>
                      <br />
                      Type: {reportType}
                      <br />
                      Priority: {priority}
                      <br />
                      Subject: {subject}
                    </AlertDescription>
                  </Alert>
                </CardContent>
              </Card>
            ) : (
              <Card className="border-pink-200 shadow-lg bg-white">
                <CardHeader className="bg-gradient-to-r from-pink-50 to-white border-b border-pink-100">
                  <CardTitle className="text-xl font-semibold text-pink-800">Report an Issue or Concern</CardTitle>
                  <p className="text-pink-600 mt-2">
                    Use this form to report any academic, administrative, or personal concerns to the Head of
                    Department. All reports are treated confidentially and will be reviewed promptly.
                  </p>
                </CardHeader>
                <CardContent className="p-6">
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <Label htmlFor="reportType" className="text-pink-800 font-medium">
                          Report Type *
                        </Label>
                        <Select value={reportType} onValueChange={setReportType} required>
                          <SelectTrigger className="border-pink-200 focus:border-pink-400 focus:ring-pink-400">
                            <SelectValue placeholder="Select report type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="academic">Academic Issue</SelectItem>
                            <SelectItem value="technical">Technical Problem</SelectItem>
                            <SelectItem value="harassment">Harassment/Bullying</SelectItem>
                            <SelectItem value="facility">Facility Issue</SelectItem>
                            <SelectItem value="teacher">Teacher Concern</SelectItem>
                            <SelectItem value="administrative">Administrative Issue</SelectItem>
                            <SelectItem value="personal">Personal Matter</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="priority" className="text-pink-800 font-medium">
                          Priority Level *
                        </Label>
                        <Select value={priority} onValueChange={setPriority} required>
                          <SelectTrigger className="border-pink-200 focus:border-pink-400 focus:ring-pink-400">
                            <SelectValue placeholder="Select priority level" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="low">Low - General inquiry</SelectItem>
                            <SelectItem value="medium">Medium - Needs attention</SelectItem>
                            <SelectItem value="high">High - Important issue</SelectItem>
                            <SelectItem value="urgent">Urgent - Immediate attention required</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

<div className="space-y-2">
                      <Label htmlFor="subject" className="text-pink-800 font-medium">
                        Subject *
                      </Label>
                      <Input
                        id="subject"
                        value={subject}
                        onChange={(e) => setSubject(e.target.value)}
                        placeholder="Brief summary of the issue (e.g., 'Problem with course registration')"
                        className="border-pink-200 focus:border-pink-400 focus:ring-pink-400"
                        required
                      />
                    </div>

<div className="space-y-2">
                      <Label htmlFor="description" className="text-pink-800 font-medium">
                        Detailed Description *
                      </Label>
                      <Textarea
                        id="description"
                        value={description}
                        onChange={(e) => setDescription(e.target.value)}
                        placeholder="Please provide a detailed description of the issue, including:
- What happened?
- When did it occur?
- Who was involved?
- What steps have you already taken?
- What outcome are you seeking?"
                        className="border-pink-200 focus:border-pink-400 focus:ring-pink-400 min-h-[200px]"
                        required
                      />
                    </div>

<Alert className="border-pink-200 bg-pink-50">
                      <Flag className="h-4 w-4 text-pink-600" />
                      <AlertDescription className="text-pink-800">
                        <strong>Important:</strong> This report will be sent directly to the Head of Department. Please
                        ensure all information is accurate and complete. For urgent matters requiring immediate
                        attention, consider contacting the HOD office directly.
                      </AlertDescription>
                    </Alert>

<div className="flex gap-4 pt-4">
                      <Button
                        type="button"
                        variant="outline"
                        onClick={handleBack}
                        disabled={isSubmitting}
                        className="border-pink-200 text-pink-800 hover:bg-pink-50 bg-transparent flex-1"
                      >
                        Cancel
                      </Button>
                      <Button
                        type="submit"
                        disabled={isSubmitting || !reportType || !subject || !description || !priority}
                        className="bg-pink-500 hover:bg-pink-600 text-white flex-1"
                      >
                        {isSubmitting ? (
                          "Submitting Report..."
                        ) : (
                          <>
                            <Send className="h-4 w-4 mr-2" />
                            Submit Report to HOD
                          </>
                        )}
                      </Button>
                    </div>
                  </form>
                </CardContent>
              </Card>
            )}

{!isSubmitted && (
              <Card className="mt-6 border-pink-200 bg-white">
                <CardHeader>
                  <CardTitle className="text-lg font-semibold text-pink-800">Guidelines for Reporting</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-pink-700">
                    <div>
                      <h4 className="font-semibold mb-2">What to Include:</h4>
                      <ul className="list-disc list-inside space-y-1">
                        <li>Specific details about the issue</li>
                        <li>Date and time when it occurred</li>
                        <li>Names of people involved (if applicable)</li>
                        <li>Any evidence or documentation</li>
                        <li>Steps you've already taken</li>
                      </ul>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-2">Response Timeline:</h4>
                      <ul className="list-disc list-inside space-y-1">
                        <li>Urgent: Within 24 hours</li>
                        <li>High Priority: Within 2-3 business days</li>
                        <li>Medium Priority: Within 1 week</li>
                        <li>Low Priority: Within 2 weeks</li>
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/student/new-report/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { ArrowLeft, Flag, Send, CheckCircle, History } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Sidebar } from "@/components/sidebar"

export default function NewReportPage() {
  const router = useRouter()
  const [showDescriptionBox, setShowDescriptionBox] = useState(false)
  const [description, setDescription] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)

const handleStartWriting = () => {
    setShowDescriptionBox(true)
  }

const handleSubmit = async () => {
    if (!description.trim()) {
      alert("Please write your report before submitting.")
      return
    }

setIsSubmitting(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 2000))

setIsSubmitting(false)
    setIsSubmitted(true)

// Reset form after 3 seconds
    setTimeout(() => {
      setIsSubmitted(false)
      setShowDescriptionBox(false)
      setDescription("")
    }, 3000)
  }

const handleReset = () => {
    setShowDescriptionBox(false)
    setDescription("")
    setIsSubmitted(false)
  }

return (
    <div className="flex h-screen bg-pink-50">
      <Sidebar />
      <div className="flex-1 ml-64">
        <header className="bg-pink-100 shadow-sm border-b border-pink-200 sticky top-0 z-10">
          <div className="flex items-center justify-between px-6 py-4">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => router.back()}
                className="text-pink-600 hover:text-pink-800 hover:bg-pink-100"
              >
                <ArrowLeft size={20} />
              </Button>
              <h1 className="text-2xl font-bold text-pink-800">New Report</h1>
            </div>
            <Button
              variant="outline"
              onClick={() => router.push("/student/report-history")}
              className="border-pink-200 text-pink-700 hover:bg-pink-50"
            >
              <History className="mr-2 h-4 w-4" />
              View Report History
            </Button>
          </div>
        </header>

<main className="p-6">
          <div className="max-w-2xl mx-auto">
            {!isSubmitted ? (
              <Card className="border-pink-100 shadow-sm bg-white">
                <CardHeader className="text-center border-b border-pink-100">
                  <div className="mx-auto mb-4 p-3 bg-pink-100 rounded-full w-fit">
                    <Flag className="h-8 w-8 text-pink-600" />
                  </div>
                  <CardTitle className="text-2xl text-pink-800">Submit a Report to HOD</CardTitle>
                  <p className="text-pink-600 mt-2">
                    Share your concerns, suggestions, or issues directly with the Head of Department
                  </p>
                </CardHeader>
                <CardContent className="p-6">
                  {!showDescriptionBox ? (
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      className="text-center space-y-6"
                    >
                      <div className="space-y-4">
                        <h3 className="text-lg font-semibold text-pink-800">Ready to submit a report?</h3>
                        <p className="text-pink-600">
                          Click the button below to start writing your report. Your message will be sent directly to the
                          HOD.
                        </p>
                        <div className="bg-pink-50 p-4 rounded-lg border border-pink-100">
                          <p className="text-sm text-pink-700">
                            <strong>Note:</strong> Please be clear and detailed in your report. Include all relevant
                            information to help the HOD understand and address your concern effectively.
                          </p>
                        </div>
                      </div>
                      <Button
                        onClick={handleStartWriting}
                        className="bg-pink-500 hover:bg-pink-600 text-white px-8 py-3 text-lg"
                        size="lg"
                      >
                        <Flag className="mr-2 h-5 w-5" />
                        Start Writing Report
                      </Button>
                    </motion.div>
                  ) : (
                    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-6">
                      <div>
                        <label htmlFor="description" className="block text-sm font-medium text-pink-800 mb-2">
                          Write your report
                        </label>
                        <Textarea
                          id="description"
                          value={description}
                          onChange={(e) => setDescription(e.target.value)}
                          placeholder="Please describe your concern, suggestion, or issue in detail. Include any relevant information that will help the HOD understand and address your report..."
                          className="min-h-[200px] border-pink-200 focus:border-pink-400 focus:ring-pink-400 resize-none"
                          disabled={isSubmitting}
                        />
                      </div>
                      <div className="flex gap-3 justify-end">
                        <Button
                          variant="outline"
                          onClick={handleReset}
                          disabled={isSubmitting}
                          className="border-pink-200 text-pink-700 hover:bg-pink-50 bg-transparent"
                        >
                          Cancel
                        </Button>
                        <Button
                          onClick={handleSubmit}
                          disabled={isSubmitting || !description.trim()}
                          className="bg-pink-500 hover:bg-pink-600 text-white"
                        >
                          {isSubmitting ? (
                            <>
                              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                              Submitting...
                            </>
                          ) : (
                            <>
                              <Send className="mr-2 h-4 w-4" />
                              Submit Report
                            </>
                          )}
                        </Button>
                      </div>
                    </motion.div>
                  )}
                </CardContent>
              </Card>
            ) : (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                className="text-center"
              >
                <Card className="border-green-200 bg-green-50">
                  <CardContent className="p-8">
                    <div className="mx-auto mb-4 p-3 bg-green-100 rounded-full w-fit">
                      <CheckCircle className="h-12 w-12 text-green-600" />
                    </div>
                    <h2 className="text-2xl font-bold text-green-800 mb-2">Report Submitted Successfully!</h2>
                    <p className="text-green-700 mb-4">
                      Your report has been sent directly to the HOD. You will receive a response soon.
                    </p>
                    <div className="space-y-3">
                      <Button
                        onClick={() => router.push("/student/report-history")}
                        className="bg-pink-500 hover:bg-pink-600 text-white"
                      >
                        <History className="mr-2 h-4 w-4" />
                        View All Reports
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            )}
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/student/report-history/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { ArrowLeft, Flag, Clock, CheckCircle, MessageSquare, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Sidebar } from "@/components/sidebar"

// Mock data for student's reports
const studentReports = [
  {
    id: 1,
    subject: "Classroom Air Conditioning Issue",
    description:
      "The air conditioning in Room 204 has not been working for the past week. It's becoming difficult to concentrate during lectures due to the heat.",
    status: "Replied",
    date: "2025-01-15",
    hodResponse:
      "Thank you for reporting this issue. I have contacted the maintenance team and they will fix the AC unit by tomorrow. We apologize for the inconvenience.",
    responseDate: "2025-01-16",
  },
  {
    id: 2,
    subject: "Library Study Hours Extension Request",
    description:
      "I would like to request an extension of library study hours during exam season. Many students need more time to prepare for their exams.",
    status: "In Progress",
    date: "2025-01-10",
    hodResponse: null,
    responseDate: null,
  },
  {
    id: 3,
    subject: "Course Material Accessibility",
    description:
      "Some of the course materials for Advanced Mathematics are not available in the digital library. Could you please help make them accessible?",
    status: "New",
    date: "2025-01-08",
    hodResponse: null,
    responseDate: null,
  },
  {
    id: 4,
    subject: "Suggestion for Student Mentorship Program",
    description:
      "I suggest implementing a peer mentorship program where senior students can guide junior students in their academic journey.",
    status: "Replied",
    date: "2025-01-05",
    hodResponse:
      "This is an excellent suggestion! We are currently planning to implement a mentorship program next semester. Thank you for your valuable input.",
    responseDate: "2025-01-07",
  },
]

export default function ReportHistoryPage() {
  const router = useRouter()
  const [selectedReport, setSelectedReport] = useState<number | null>(null)

const totalReports = studentReports.length
  const pendingReports = studentReports.filter(
    (report) => report.status === "New" || report.status === "In Progress",
  ).length
  const repliedReports = studentReports.filter((report) => report.status === "Replied").length

const getStatusColor = (status: string) => {
    switch (status) {
      case "New":
        return "bg-red-100 text-red-800 hover:bg-red-200"
      case "In Progress":
        return "bg-yellow-100 text-yellow-800 hover:bg-yellow-200"
      case "Replied":
        return "bg-green-100 text-green-800 hover:bg-green-200"
      default:
        return "bg-gray-100 text-gray-800 hover:bg-gray-200"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "New":
        return <Flag className="h-4 w-4" />
      case "In Progress":
        return <Clock className="h-4 w-4" />
      case "Replied":
        return <CheckCircle className="h-4 w-4" />
      default:
        return <MessageSquare className="h-4 w-4" />
    }
  }

return (
    <div className="flex h-screen bg-pink-50">
      <Sidebar />
      <div className="flex-1 ml-64">
        <header className="bg-pink-100 shadow-sm border-b border-pink-200 sticky top-0 z-10">
          <div className="flex items-center justify-between px-6 py-4">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => router.back()}
                className="text-pink-600 hover:text-pink-800 hover:bg-pink-100"
              >
                <ArrowLeft size={20} />
              </Button>
              <h1 className="text-2xl font-bold text-pink-800">Report History</h1>
            </div>
            <Button
              onClick={() => router.push("/student/new-report")}
              className="bg-pink-500 hover:bg-pink-600 text-white"
            >
              <Plus className="mr-2 h-4 w-4" />
              New Report
            </Button>
          </div>
        </header>

<main className="p-6">
          <div className="max-w-4xl mx-auto space-y-6">
            {/* Statistics Cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="border-pink-100 shadow-sm bg-white">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-pink-900 mb-2">{totalReports}</div>
                  <div className="text-pink-700 font-medium">Total Reports</div>
                </CardContent>
              </Card>
              <Card className="border-pink-100 shadow-sm bg-white">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-yellow-600 mb-2">{pendingReports}</div>
                  <div className="text-pink-700 font-medium">Pending Reports</div>
                </CardContent>
              </Card>
              <Card className="border-pink-100 shadow-sm bg-white">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-green-600 mb-2">{repliedReports}</div>
                  <div className="text-pink-700 font-medium">Replied Reports</div>
                </CardContent>
              </Card>
            </div>

{/* Reports List */}
            <Card className="border-pink-100 shadow-sm bg-white">
              <CardHeader className="border-b border-pink-100">
                <CardTitle className="text-xl text-pink-800">Your Reports</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                {studentReports.length === 0 ? (
                  <div className="p-8 text-center">
                    <Flag className="h-12 w-12 text-pink-300 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-pink-800 mb-2">No Reports Yet</h3>
                    <p className="text-pink-600 mb-4">You haven't submitted any reports yet.</p>
                    <Button
                      onClick={() => router.push("/student/new-report")}
                      className="bg-pink-500 hover:bg-pink-600 text-white"
                    >
                      <Plus className="mr-2 h-4 w-4" />
                      Submit New Report
                    </Button>
                  </div>
                ) : (
                  <div className="divide-y divide-pink-100">
                    {studentReports.map((report, index) => (
                      <motion.div
                        key={report.id}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3, delay: index * 0.1 }}
                        className="p-6 hover:bg-pink-50 transition-colors cursor-pointer"
                        onClick={() => setSelectedReport(selectedReport === report.id ? null : report.id)}
                      >
                        <div className="flex items-start justify-between mb-3">
                          <h3 className="font-semibold text-pink-900 text-lg">{report.subject}</h3>
                          <div className="flex items-center gap-2">
                            <Badge className={getStatusColor(report.status)}>
                              {getStatusIcon(report.status)}
                              <span className="ml-1">{report.status}</span>
                            </Badge>
                          </div>
                        </div>
                        <p className="text-pink-700 mb-3 line-clamp-2">{report.description}</p>
                        <div className="flex justify-between items-center text-sm text-pink-500">
                          <span>Submitted: {report.date}</span>
                          {report.responseDate && <span>Responded: {report.responseDate}</span>}
                        </div>

{selectedReport === report.id && (
                          <motion.div
                            initial={{ opacity: 0, height: 0 }}
                            animate={{ opacity: 1, height: "auto" }}
                            exit={{ opacity: 0, height: 0 }}
                            className="mt-4 pt-4 border-t border-pink-200"
                          >
                            <div className="space-y-4">
                              <div>
                                <h4 className="font-semibold text-pink-800 mb-2">Full Report:</h4>
                                <p className="text-pink-700 bg-pink-50 p-3 rounded-lg">{report.description}</p>
                              </div>
                              {report.hodResponse && (
                                <div>
                                  <h4 className="font-semibold text-green-800 mb-2 flex items-center">
                                    <MessageSquare className="mr-2 h-4 w-4" />
                                    HOD Response:
                                  </h4>
                                  <p className="text-green-700 bg-green-50 p-3 rounded-lg border border-green-200">
                                    {report.hodResponse}
                                  </p>
                                  <p className="text-sm text-green-600 mt-2">Responded on: {report.responseDate}</p>
                                </div>
                              )}
                            </div>
                          </motion.div>
                        )}
                      </motion.div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/report-inbox/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { motion } from "framer-motion"
import { ArrowLeft, Inbox, CheckCircle, MessageSquare, Send, User } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Sidebar } from "@/components/sidebar"

// Mock data for student reports
const studentReports = [
  {
    id: 1,
    studentName: "Anonymous Student",
    subject: "Classroom Air Conditioning Issue",
    description:
      "The air conditioning in Room 204 has not been working for the past week. It's becoming difficult to concentrate during lectures due to the heat.",
    status: "New",
    priority: "Medium",
    date: "2025-01-15",
    response: null,
  },
  {
    id: 2,
    studentName: "Anonymous Student",
    subject: "Library Study Hours Extension Request",
    description:
      "I would like to request an extension of library study hours during exam season. Many students need more time to prepare for their exams.",
    status: "In Progress",
    priority: "Low",
    date: "2025-01-10",
    response: null,
  },
  {
    id: 3,
    studentName: "Anonymous Student",
    subject: "Course Material Accessibility",
    description:
      "Some of the course materials for Advanced Mathematics are not available in the digital library. Could you please help make them accessible?",
    status: "New",
    priority: "High",
    date: "2025-01-08",
    response: null,
  },
  {
    id: 4,
    studentName: "Anonymous Student",
    subject: "Urgent: Safety Concern in Laboratory",
    description:
      "There is a broken glass cabinet in the chemistry lab that poses a safety risk to students. This needs immediate attention.",
    status: "New",
    priority: "Urgent",
    date: "2025-01-07",
    response: null,
  },
  {
    id: 5,
    studentName: "Anonymous Student",
    subject: "Suggestion for Student Mentorship Program",
    description:
      "I suggest implementing a peer mentorship program where senior students can guide junior students in their academic journey.",
    status: "Replied",
    priority: "Low",
    date: "2025-01-05",
    response:
      "This is an excellent suggestion! We are currently planning to implement a mentorship program next semester. Thank you for your valuable input.",
  },
]

export default function ReportInboxPage() {
  const router = useRouter()
  const [reports, setReports] = useState(studentReports)
  const [selectedReport, setSelectedReport] = useState<any>(null)
  const [replyText, setReplyText] = useState("")
  const [isReplying, setIsReplying] = useState(false)

const totalReports = reports.length
  const newReports = reports.filter((report) => report.status === "New").length
  const repliedReports = reports.filter((report) => report.status === "Replied").length

const getPriorityColor = (priority: string) => {
    switch (priority) {
      case "Urgent":
        return "bg-red-100 text-red-800 border-red-200"
      case "High":
        return "bg-orange-100 text-orange-800 border-orange-200"
      case "Medium":
        return "bg-yellow-100 text-yellow-800 border-yellow-200"
      case "Low":
        return "bg-blue-100 text-blue-800 border-blue-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "New":
        return "bg-red-100 text-red-800"
      case "In Progress":
        return "bg-yellow-100 text-yellow-800"
      case "Replied":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const handleReply = async () => {
    if (!replyText.trim() || !selectedReport) return

setIsReplying(true)

// Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))

// Update the report status and add response
    setReports((prev) =>
      prev.map((report) =>
        report.id === selectedReport.id ? { ...report, status: "Replied", response: replyText } : report,
      ),
    )

setIsReplying(false)
    setReplyText("")
    setSelectedReport(null)
  }

const handleMarkAsRead = (reportId: number) => {
    setReports((prev) =>
      prev.map((report) =>
        report.id === reportId && report.status === "New" ? { ...report, status: "In Progress" } : report,
      ),
    )
  }

return (
    <div className="flex h-screen bg-purple-50">
      <Sidebar isHOD />
      <div className="flex-1 ml-64">
        <header className="bg-purple-100 shadow-sm border-b border-purple-200 sticky top-0 z-10">
          <div className="flex items-center justify-between px-6 py-4">
            <div className="flex items-center gap-4">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => router.back()}
                className="text-purple-600 hover:text-purple-800 hover:bg-purple-100"
              >
                <ArrowLeft size={20} />
              </Button>
              <h1 className="text-2xl font-bold text-purple-800">Report Inbox</h1>
            </div>
          </div>
        </header>

<main className="p-6">
          <div className="max-w-6xl mx-auto space-y-6">
            {/* Statistics Cards */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <Card className="border-purple-100 shadow-sm bg-white">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-purple-900 mb-2">{totalReports}</div>
                  <div className="text-purple-700 font-medium">Total Reports</div>
                </CardContent>
              </Card>
              <Card className="border-purple-100 shadow-sm bg-white">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-red-600 mb-2">{newReports}</div>
                  <div className="text-purple-700 font-medium">New Reports</div>
                </CardContent>
              </Card>
              <Card className="border-purple-100 shadow-sm bg-white">
                <CardContent className="p-6 text-center">
                  <div className="text-3xl font-bold text-green-600 mb-2">{repliedReports}</div>
                  <div className="text-purple-700 font-medium">Replied Reports</div>
                </CardContent>
              </Card>
            </div>

{/* Reports List */}
            <Card className="border-purple-100 shadow-sm bg-white">
              <CardHeader className="border-b border-purple-100">
                <CardTitle className="text-xl text-purple-800 flex items-center">
                  <Inbox className="mr-2 h-5 w-5" />
                  Student Reports
                </CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                {reports.length === 0 ? (
                  <div className="p-8 text-center">
                    <Inbox className="h-12 w-12 text-purple-300 mx-auto mb-4" />
                    <h3 className="text-lg font-semibold text-purple-800 mb-2">No Reports</h3>
                    <p className="text-purple-600">No student reports have been submitted yet.</p>
                  </div>
                ) : (
                  <div className="divide-y divide-purple-100">
                    {reports.map((report, index) => (
                      <motion.div
                        key={report.id}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3, delay: index * 0.1 }}
                        className="p-6 hover:bg-purple-50 transition-colors"
                      >
                        <div className="flex items-start justify-between mb-3">
                          <div className="flex-1">
                            <div className="flex items-center gap-3 mb-2">
                              <h3 className="font-semibold text-purple-900 text-lg">{report.subject}</h3>
                              <Badge className={getPriorityColor(report.priority)}>{report.priority}</Badge>
                              <Badge className={getStatusColor(report.status)}>{report.status}</Badge>
                            </div>
                            <div className="flex items-center gap-2 text-sm text-purple-600 mb-2">
                              <User className="h-4 w-4" />
                              <span>{report.studentName}</span>
                              <span>•</span>
                              <span>{report.date}</span>
                            </div>
                            <p className="text-purple-700 mb-3">{report.description}</p>
                            {report.response && (
                              <div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-3">
                                <h4 className="font-semibold text-green-800 mb-1">Your Response:</h4>
                                <p className="text-green-700">{report.response}</p>
                              </div>
                            )}
                          </div>
                        </div>
                        <div className="flex gap-2">
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => setSelectedReport(report)}
                            className="border-purple-200 text-purple-700 hover:bg-purple-50"
                          >
                            <MessageSquare className="mr-2 h-4 w-4" />
                            {report.response ? "View Details" : "Reply"}
                          </Button>
                          {report.status === "New" && (
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => handleMarkAsRead(report.id)}
                              className="border-purple-200 text-purple-700 hover:bg-purple-50"
                            >
                              <CheckCircle className="mr-2 h-4 w-4" />
                              Mark as Read
                            </Button>
                          )}
                        </div>
                      </motion.div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </main>

{/* Reply Dialog */}
        <Dialog open={!!selectedReport} onOpenChange={() => setSelectedReport(null)}>
          <DialogContent className="max-w-2xl">
            <DialogHeader>
              <DialogTitle className="text-purple-800">
                {selectedReport?.response ? "Report Details" : "Reply to Report"}
              </DialogTitle>
            </DialogHeader>
            {selectedReport && (
              <div className="space-y-4">
                <div>
                  <h3 className="font-semibold text-purple-900 mb-2">{selectedReport.subject}</h3>
                  <div className="flex gap-2 mb-3">
                    <Badge className={getPriorityColor(selectedReport.priority)}>{selectedReport.priority}</Badge>
                    <Badge className={getStatusColor(selectedReport.status)}>{selectedReport.status}</Badge>
                  </div>
                  <p className="text-purple-700 bg-purple-50 p-3 rounded-lg">{selectedReport.description}</p>
                </div>

{selectedReport.response ? (
                  <div>
                    <h4 className="font-semibold text-green-800 mb-2">Your Response:</h4>
                    <p className="text-green-700 bg-green-50 p-3 rounded-lg border border-green-200">
                      {selectedReport.response}
                    </p>
                  </div>
                ) : (
                  <div>
                    <label htmlFor="reply" className="block text-sm font-medium text-purple-800 mb-2">
                      Your Response
                    </label>
                    <Textarea
                      id="reply"
                      value={replyText}
                      onChange={(e) => setReplyText(e.target.value)}
                      placeholder="Write your response to the student..."
                      className="min-h-[120px] border-purple-200 focus:border-purple-400 focus:ring-purple-400"
                      disabled={isReplying}
                    />
                    <div className="flex gap-2 justify-end mt-4">
                      <Button
                        variant="outline"
                        onClick={() => setSelectedReport(null)}
                        disabled={isReplying}
                        className="border-purple-200 text-purple-700 hover:bg-purple-50"
                      >
                        Cancel
                      </Button>
                      <Button
                        onClick={handleReply}
                        disabled={isReplying || !replyText.trim()}
                        className="bg-purple-500 hover:bg-purple-600 text-white"
                      >
                        {isReplying ? (
                          <>
                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
                            Sending...
                          </>
                        ) : (
                          <>
                            <Send className="mr-2 h-4 w-4" />
                            Send Reply
                          </>
                        )}
                      </Button>
                    </div>
                  </div>
                )}
              </div>
            )}
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/content/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit, Trash2, Search, FileText, Video, ImageIcon, Download } from "lucide-react"
import { motion } from "framer-motion"

interface ContentItem {
  id: string
  title: string
  type: "document" | "video" | "image" | "presentation"
  subject: string
  uploadDate: string
  size: string
  downloads: number
  description: string
}

export default function HODContentPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedType, setSelectedType] = useState("all")
  const [selectedSubject, setSelectedSubject] = useState("all")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [editingContent, setEditingContent] = useState<ContentItem | null>(null)

const [contentItems, setContentItems] = useState<ContentItem[]>([
    {
      id: "1",
      title: "Data Structures and Algorithms - Lecture 1",
      type: "document",
      subject: "Computer Science",
      uploadDate: "2024-01-15",
      size: "2.5 MB",
      downloads: 45,
      description: "Introduction to basic data structures including arrays, linked lists, and stacks.",
    },
    {
      id: "2",
      title: "Calculus Integration Methods",
      type: "video",
      subject: "Mathematics",
      uploadDate: "2024-01-14",
      size: "125 MB",
      downloads: 32,
      description: "Comprehensive video tutorial on various integration techniques.",
    },
    {
      id: "3",
      title: "Organic Chemistry Reactions",
      type: "presentation",
      subject: "Chemistry",
      uploadDate: "2024-01-13",
      size: "8.7 MB",
      downloads: 28,
      description: "PowerPoint presentation covering major organic chemistry reactions.",
    },
    {
      id: "4",
      title: "Physics Lab Equipment Guide",
      type: "image",
      subject: "Physics",
      uploadDate: "2024-01-12",
      size: "3.2 MB",
      downloads: 19,
      description: "Visual guide to laboratory equipment and their proper usage.",
    },
  ])

const [newContent, setNewContent] = useState({
    title: "",
    type: "document" as ContentItem["type"],
    subject: "",
    description: "",
    file: null as File | null,
  })

const subjects = ["Computer Science", "Mathematics", "Physics", "Chemistry", "Biology", "English"]

const filteredContent = contentItems.filter((item) => {
    const matchesSearch =
      item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.subject.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = selectedType === "all" || item.type === selectedType
    const matchesSubject = selectedSubject === "all" || item.subject === selectedSubject
    return matchesSearch && matchesType && matchesSubject
  })

const handleAddContent = () => {
    if (newContent.title && newContent.subject && newContent.description) {
      const content: ContentItem = {
        id: Date.now().toString(),
        title: newContent.title,
        type: newContent.type,
        subject: newContent.subject,
        uploadDate: new Date().toISOString().split("T")[0],
        size: newContent.file ? `${(newContent.file.size / (1024 * 1024)).toFixed(1)} MB` : "0 MB",
        downloads: 0,
        description: newContent.description,
      }
      setContentItems([...contentItems, content])
      setNewContent({ title: "", type: "document", subject: "", description: "", file: null })
      setIsAddDialogOpen(false)
    }
  }

const handleEditContent = (content: ContentItem) => {
    setEditingContent(content)
  }

const handleUpdateContent = () => {
    if (editingContent) {
      setContentItems(contentItems.map((item) => (item.id === editingContent.id ? editingContent : item)))
      setEditingContent(null)
    }
  }

const handleDeleteContent = (id: string) => {
    setContentItems(contentItems.filter((item) => item.id !== id))
  }

const getTypeIcon = (type: ContentItem["type"]) => {
    switch (type) {
      case "document":
        return <FileText className="h-4 w-4" />
      case "video":
        return <Video className="h-4 w-4" />
      case "image":
        return <ImageIcon className="h-4 w-4" />
      case "presentation":
        return <FileText className="h-4 w-4" />
      default:
        return <FileText className="h-4 w-4" />
    }
  }

const getTypeBadgeColor = (type: ContentItem["type"]) => {
    switch (type) {
      case "document":
        return "bg-blue-100 text-blue-800"
      case "video":
        return "bg-red-100 text-red-800"
      case "image":
        return "bg-green-100 text-green-800"
      case "presentation":
        return "bg-purple-100 text-purple-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="flex min-h-screen bg-purple-50">
      <Sidebar isHOD={true} />

<div className="flex-1 ml-64">
        <div className="p-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-purple-800 mb-2">Content Management</h1>
            <p className="text-purple-600">Upload and manage educational content for students</p>
          </div>

<Tabs defaultValue="all-content" className="space-y-6">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="all-content">All Content</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
            </TabsList>

<TabsContent value="all-content" className="space-y-6">
              {/* Search and Filter Bar */}
              <Card>
                <CardContent className="p-6">
                  <div className="flex flex-col md:flex-row gap-4">
                    <div className="flex-1">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400 h-4 w-4" />
                        <Input
                          placeholder="Search content..."
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                          className="pl-10 border-purple-200 focus:border-purple-400"
                        />
                      </div>
                    </div>
                    <Select value={selectedType} onValueChange={setSelectedType}>
                      <SelectTrigger className="w-full md:w-48 border-purple-200">
                        <SelectValue placeholder="Filter by type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Types</SelectItem>
                        <SelectItem value="document">Documents</SelectItem>
                        <SelectItem value="video">Videos</SelectItem>
                        <SelectItem value="image">Images</SelectItem>
                        <SelectItem value="presentation">Presentations</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select value={selectedSubject} onValueChange={setSelectedSubject}>
                      <SelectTrigger className="w-full md:w-48 border-purple-200">
                        <SelectValue placeholder="Filter by subject" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Subjects</SelectItem>
                        {subjects.map((subject) => (
                          <SelectItem key={subject} value={subject}>
                            {subject}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
                      <DialogTrigger asChild>
                        <Button className="bg-purple-600 hover:bg-purple-700">
                          <Plus className="h-4 w-4 mr-2" />
                          Add Content
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="sm:max-w-md">
                        <DialogHeader>
                          <DialogTitle>Add New Content</DialogTitle>
                          <DialogDescription>Upload new educational content for students</DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4">
                          <div>
                            <Label htmlFor="title">Title</Label>
                            <Input
                              id="title"
                              value={newContent.title}
                              onChange={(e) => setNewContent({ ...newContent, title: e.target.value })}
                              placeholder="Enter content title"
                            />
                          </div>
                          <div>
                            <Label htmlFor="type">Type</Label>
                            <Select
                              value={newContent.type}
                              onValueChange={(value: ContentItem["type"]) =>
                                setNewContent({ ...newContent, type: value })
                              }
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="document">Document</SelectItem>
                                <SelectItem value="video">Video</SelectItem>
                                <SelectItem value="image">Image</SelectItem>
                                <SelectItem value="presentation">Presentation</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div>
                            <Label htmlFor="subject">Subject</Label>
                            <Select
                              value={newContent.subject}
                              onValueChange={(value) => setNewContent({ ...newContent, subject: value })}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select subject" />
                              </SelectTrigger>
                              <SelectContent>
                                {subjects.map((subject) => (
                                  <SelectItem key={subject} value={subject}>
                                    {subject}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div>
                            <Label htmlFor="description">Description</Label>
                            <Textarea
                              id="description"
                              value={newContent.description}
                              onChange={(e) => setNewContent({ ...newContent, description: e.target.value })}
                              placeholder="Enter content description"
                              rows={3}
                            />
                          </div>
                          <div>
                            <Label htmlFor="file">File</Label>
                            <Input
                              id="file"
                              type="file"
                              onChange={(e) => setNewContent({ ...newContent, file: e.target.files?.[0] || null })}
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                            Cancel
                          </Button>
                          <Button onClick={handleAddContent} className="bg-purple-600 hover:bg-purple-700">
                            Add Content
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                </CardContent>
              </Card>

{/* Content Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredContent.map((content, index) => (
                  <motion.div
                    key={content.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Card className="hover:shadow-lg transition-shadow border-purple-200">
                      <CardHeader className="pb-3">
                        <div className="flex items-start justify-between">
                          <div className="flex items-center space-x-2">
                            {getTypeIcon(content.type)}
                            <Badge className={getTypeBadgeColor(content.type)}>{content.type}</Badge>
                          </div>
                          <div className="flex space-x-1">
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleEditContent(content)}
                              className="h-8 w-8 p-0 text-purple-600 hover:text-purple-800"
                            >
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleDeleteContent(content.id)}
                              className="h-8 w-8 p-0 text-red-600 hover:text-red-800"
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                        <CardTitle className="text-lg text-purple-800">{content.title}</CardTitle>
                        <CardDescription className="text-purple-600">{content.subject}</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="text-sm text-gray-600 mb-4">{content.description}</p>
                        <div className="flex justify-between items-center text-sm text-gray-500">
                          <span>{content.uploadDate}</span>
                          <span>{content.size}</span>
                        </div>
                        <div className="flex items-center justify-between mt-4">
                          <div className="flex items-center space-x-1 text-sm text-gray-500">
                            <Download className="h-4 w-4" />
                            <span>{content.downloads} downloads</span>
                          </div>
                          <Button
                            size="sm"
                            variant="outline"
                            className="border-purple-200 text-purple-600 hover:bg-purple-50 bg-transparent"
                          >
                            View
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </TabsContent>

<TabsContent value="analytics" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Total Content</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-purple-800">{contentItems.length}</div>
                  </CardContent>
                </Card>
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Total Downloads</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-purple-800">
                      {contentItems.reduce((sum, item) => sum + item.downloads, 0)}
                    </div>
                  </CardContent>
                </Card>
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Most Popular</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-sm font-medium text-purple-800">
                      {contentItems.sort((a, b) => b.downloads - a.downloads)[0]?.title.substring(0, 20) + "..." ||
                        "N/A"}
                    </div>
                  </CardContent>
                </Card>
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Subjects Covered</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-purple-800">
                      {new Set(contentItems.map((item) => item.subject)).size}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>

{/* Edit Dialog */}
          <Dialog open={!!editingContent} onOpenChange={() => setEditingContent(null)}>
            <DialogContent className="sm:max-w-md">
              <DialogHeader>
                <DialogTitle>Edit Content</DialogTitle>
                <DialogDescription>Update the content information</DialogDescription>
              </DialogHeader>
              {editingContent && (
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="edit-title">Title</Label>
                    <Input
                      id="edit-title"
                      value={editingContent.title}
                      onChange={(e) => setEditingContent({ ...editingContent, title: e.target.value })}
                    />
                  </div>
                  <div>
                    <Label htmlFor="edit-subject">Subject</Label>
                    <Select
                      value={editingContent.subject}
                      onValueChange={(value) => setEditingContent({ ...editingContent, subject: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {subjects.map((subject) => (
                          <SelectItem key={subject} value={subject}>
                            {subject}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="edit-description">Description</Label>
                    <Textarea
                      id="edit-description"
                      value={editingContent.description}
                      onChange={(e) => setEditingContent({ ...editingContent, description: e.target.value })}
                      rows={3}
                    />
                  </div>
                </div>
              )}
              <DialogFooter>
                <Button variant="outline" onClick={() => setEditingContent(null)}>
                  Cancel
                </Button>
                <Button onClick={handleUpdateContent} className="bg-purple-600 hover:bg-purple-700">
                  Update Content
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/content/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/hod/media/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Edit, Trash2, Search, Play, Download, Eye } from "lucide-react"
import { motion } from "framer-motion"

interface MediaItem {
  id: string
  title: string
  type: "image" | "video" | "audio"
  category: string
  uploadDate: string
  size: string
  views: number
  thumbnail: string
  description: string
}

export default function HODMediaPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedType, setSelectedType] = useState("all")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [editingMedia, setEditingMedia] = useState<MediaItem | null>(null)

const [mediaItems, setMediaItems] = useState<MediaItem[]>([
    {
      id: "1",
      title: "Physics Lab Demonstration",
      type: "video",
      category: "Educational",
      uploadDate: "2024-01-15",
      size: "45.2 MB",
      views: 128,
      thumbnail: "/placeholder.svg?height=200&width=300",
      description: "Comprehensive demonstration of physics laboratory experiments and procedures.",
    },
    {
      id: "2",
      title: "Campus Tour 2024",
      type: "video",
      category: "Promotional",
      uploadDate: "2024-01-14",
      size: "78.5 MB",
      views: 256,
      thumbnail: "/placeholder.svg?height=200&width=300",
      description: "Virtual tour of the campus facilities and departments.",
    },
    {
      id: "3",
      title: "Chemistry Periodic Table",
      type: "image",
      category: "Educational",
      uploadDate: "2024-01-13",
      size: "2.1 MB",
      views: 89,
      thumbnail: "/placeholder.svg?height=200&width=300",
      description: "High-resolution periodic table with element details.",
    },
    {
      id: "4",
      title: "Welcome Message Audio",
      type: "audio",
      category: "Announcement",
      uploadDate: "2024-01-12",
      size: "5.8 MB",
      views: 45,
      thumbnail: "/placeholder.svg?height=200&width=300",
      description: "Welcome message for new students from the HOD.",
    },
  ])

const [newMedia, setNewMedia] = useState({
    title: "",
    type: "image" as MediaItem["type"],
    category: "",
    description: "",
    file: null as File | null,
  })

const categories = ["Educational", "Promotional", "Announcement", "Event", "Training"]

const filteredMedia = mediaItems.filter((item) => {
    const matchesSearch =
      item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.category.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = selectedType === "all" || item.type === selectedType
    const matchesCategory = selectedCategory === "all" || item.category === selectedCategory
    return matchesSearch && matchesType && matchesCategory
  })

const handleAddMedia = () => {
    if (newMedia.title && newMedia.category && newMedia.description) {
      const media: MediaItem = {
        id: Date.now().toString(),
        title: newMedia.title,
        type: newMedia.type,
        category: newMedia.category,
        uploadDate: new Date().toISOString().split("T")[0],
        size: newMedia.file ? `${(newMedia.file.size / (1024 * 1024)).toFixed(1)} MB` : "0 MB",
        views: 0,
        thumbnail: `/placeholder.svg?height=200&width=300&query=${newMedia.title}`,
        description: newMedia.description,
      }
      setMediaItems([...mediaItems, media])
      setNewMedia({ title: "", type: "image", category: "", description: "", file: null })
      setIsAddDialogOpen(false)
    }
  }

const handleEditMedia = (media: MediaItem) => {
    setEditingMedia(media)
  }

const handleUpdateMedia = () => {
    if (editingMedia) {
      setMediaItems(mediaItems.map((item) => (item.id === editingMedia.id ? editingMedia : item)))
      setEditingMedia(null)
    }
  }

const handleDeleteMedia = (id: string) => {
    setMediaItems(mediaItems.filter((item) => item.id !== id))
  }

const getTypeBadgeColor = (type: MediaItem["type"]) => {
    switch (type) {
      case "image":
        return "bg-green-100 text-green-800"
      case "video":
        return "bg-red-100 text-red-800"
      case "audio":
        return "bg-blue-100 text-blue-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="flex min-h-screen bg-purple-50">
      <Sidebar isHOD={true} />

<div className="flex-1 ml-64">
        <div className="p-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-purple-800 mb-2">Media Management</h1>
            <p className="text-purple-600">Upload and manage multimedia content</p>
          </div>

<Tabs defaultValue="all-media" className="space-y-6">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="all-media">All Media</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
            </TabsList>

<TabsContent value="all-media" className="space-y-6">
              {/* Search and Filter Bar */}
              <Card>
                <CardContent className="p-6">
                  <div className="flex flex-col md:flex-row gap-4">
                    <div className="flex-1">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400 h-4 w-4" />
                        <Input
                          placeholder="Search media..."
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                          className="pl-10 border-purple-200 focus:border-purple-400"
                        />
                      </div>
                    </div>
                    <Select value={selectedType} onValueChange={setSelectedType}>
                      <SelectTrigger className="w-full md:w-48 border-purple-200">
                        <SelectValue placeholder="Filter by type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Types</SelectItem>
                        <SelectItem value="image">Images</SelectItem>
                        <SelectItem value="video">Videos</SelectItem>
                        <SelectItem value="audio">Audio</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                      <SelectTrigger className="w-full md:w-48 border-purple-200">
                        <SelectValue placeholder="Filter by category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Categories</SelectItem>
                        {categories.map((category) => (
                          <SelectItem key={category} value={category}>
                            {category}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
                      <DialogTrigger asChild>
                        <Button className="bg-purple-600 hover:bg-purple-700">
                          <Plus className="h-4 w-4 mr-2" />
                          Add Media
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="sm:max-w-md">
                        <DialogHeader>
                          <DialogTitle>Add New Media</DialogTitle>
                          <DialogDescription>Upload new multimedia content</DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4">
                          <div>
                            <Label htmlFor="title">Title</Label>
                            <Input
                              id="title"
                              value={newMedia.title}
                              onChange={(e) => setNewMedia({ ...newMedia, title: e.target.value })}
                              placeholder="Enter media title"
                            />
                          </div>
                          <div>
                            <Label htmlFor="type">Type</Label>
                            <Select
                              value={newMedia.type}
                              onValueChange={(value: MediaItem["type"]) => setNewMedia({ ...newMedia, type: value })}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="image">Image</SelectItem>
                                <SelectItem value="video">Video</SelectItem>
                                <SelectItem value="audio">Audio</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div>
                            <Label htmlFor="category">Category</Label>
                            <Select
                              value={newMedia.category}
                              onValueChange={(value) => setNewMedia({ ...newMedia, category: value })}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select category" />
                              </SelectTrigger>
                              <SelectContent>
                                {categories.map((category) => (
                                  <SelectItem key={category} value={category}>
                                    {category}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div>
                            <Label htmlFor="description">Description</Label>
                            <Input
                              id="description"
                              value={newMedia.description}
                              onChange={(e) => setNewMedia({ ...newMedia, description: e.target.value })}
                              placeholder="Enter media description"
                            />
                          </div>
                          <div>
                            <Label htmlFor="file">File</Label>
                            <Input
                              id="file"
                              type="file"
                              accept="image/*,video/*,audio/*"
                              onChange={(e) => setNewMedia({ ...newMedia, file: e.target.files?.[0] || null })}
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                            Cancel
                          </Button>
                          <Button onClick={handleAddMedia} className="bg-purple-600 hover:bg-purple-700">
                            Add Media
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                </CardContent>
              </Card>

{/* Media Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredMedia.map((media, index) => (
                  <motion.div
                    key={media.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <Card className="hover:shadow-lg transition-shadow border-purple-200">
                      <div className="relative">
                        <img
                          src={media.thumbnail || "/placeholder.svg"}
                          alt={media.title}
                          className="w-full h-48 object-cover rounded-t-lg"
                        />
                        <div className="absolute top-2 left-2">
                          <Badge className={getTypeBadgeColor(media.type)}>{media.type}</Badge>
                        </div>
                        <div className="absolute top-2 right-2 flex space-x-1">
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleEditMedia(media)}
                            className="h-8 w-8 p-0 bg-white/80 text-purple-600 hover:bg-white"
                          >
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => handleDeleteMedia(media.id)}
                            className="h-8 w-8 p-0 bg-white/80 text-red-600 hover:bg-white"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                        {media.type === "video" && (
                          <div className="absolute inset-0 flex items-center justify-center">
                            <Button
                              variant="ghost"
                              size="lg"
                              className="bg-black/50 text-white hover:bg-black/70 rounded-full"
                            >
                              <Play className="h-8 w-8" />
                            </Button>
                          </div>
                        )}
                      </div>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg text-purple-800">{media.title}</CardTitle>
                        <CardDescription className="text-purple-600">{media.category}</CardDescription>
                      </CardHeader>
                      <CardContent>
                        <p className="text-sm text-gray-600 mb-4">{media.description}</p>
                        <div className="flex justify-between items-center text-sm text-gray-500 mb-4">
                          <span>{media.uploadDate}</span>
                          <span>{media.size}</span>
                        </div>
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-1 text-sm text-gray-500">
                            <Eye className="h-4 w-4" />
                            <span>{media.views} views</span>
                          </div>
                          <div className="flex space-x-2">
                            <Button
                              size="sm"
                              variant="outline"
                              className="border-purple-200 text-purple-600 hover:bg-purple-50 bg-transparent"
                            >
                              <Eye className="h-4 w-4 mr-1" />
                              View
                            </Button>
                            <Button
                              size="sm"
                              variant="outline"
                              className="border-purple-200 text-purple-600 hover:bg-purple-50 bg-transparent"
                            >
                              <Download className="h-4 w-4 mr-1" />
                              Download
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                ))}
              </div>
            </TabsContent>

<TabsContent value="analytics" className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Total Media</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-purple-800">{mediaItems.length}</div>
                  </CardContent>
                </Card>
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Total Views</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-purple-800">
                      {mediaItems.reduce((sum, item) => sum + item.views, 0)}
                    </div>
                  </CardContent>
                </Card>
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Most Viewed</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-sm font-medium text-purple-800">
                      {mediaItems.sort((a, b) => b.views - a.views)[0]?.title.substring(0, 20) + "..." || "N/A"}
                    </div>
                  </CardContent>
                </Card>
                <Card className="border-purple-200">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium text-purple-600">Storage Used</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold text-purple-800">
                      {mediaItems.reduce((sum, item) => sum + Number.parseFloat(item.size), 0).toFixed(1)} MB
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
          </Tabs>

{/* Edit Dialog */}
          <Dialog open={!!editingMedia} onOpenChange={() => setEditingMedia(null)}>
            <DialogContent className="sm:max-w-md">
              <DialogHeader>
                <DialogTitle>Edit Media</DialogTitle>
                <DialogDescription>Update the media information</DialogDescription>
              </DialogHeader>
              {editingMedia && (
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="edit-title">Title</Label>
                    <Input
                      id="edit-title"
                      value={editingMedia.title}
                      onChange={(e) => setEditingMedia({ ...editingMedia, title: e.target.value })}
                    />
                  </div>
                  <div>
                    <Label htmlFor="edit-category">Category</Label>
                    <Select
                      value={editingMedia.category}
                      onValueChange={(value) => setEditingMedia({ ...editingMedia, category: value })}
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        {categories.map((category) => (
                          <SelectItem key={category} value={category}>
                            {category}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                  <div>
                    <Label htmlFor="edit-description">Description</Label>
                    <Input
                      id="edit-description"
                      value={editingMedia.description}
                      onChange={(e) => setEditingMedia({ ...editingMedia, description: e.target.value })}
                    />
                  </div>
                </div>
              )}
              <DialogFooter>
                <Button variant="outline" onClick={() => setEditingMedia(null)}>
                  Cancel
                </Button>
                <Button onClick={handleUpdateMedia} className="bg-purple-600 hover:bg-purple-700">
                  Update Media
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/hod/media/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/hod/activities/page.tsx" isEdit="true" isTerminated="true" isMerged="true"
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/sidebar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Plus, Search } from "lucide-react"
import { motion } from "framer-motion"

interface Activity {
  id: string
  title: string
  type: "academic" | "cultural" | "sports" | "workshop" | "seminar"
  description: string
  date: string
  time: string
  location: string
  organizer: string
  maxParticipants: number
  currentParticipants: number
  status: "upcoming" | "ongoing" | "completed" | "cancelled"
}

export default function HODActivitiesPage() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedType, setSelectedType] = useState("all")
  const [selectedStatus, setSelectedStatus] = useState("all")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [editingActivity, setEditingActivity] = useState<Activity | null>(null)

const [activities, setActivities] = useState<Activity[]>([
    {
      id: "1",
      title: "Annual Science Fair",
      type: "academic",
      description: "Students showcase their innovative science projects and research work.",
      date: "2024-02-15",
      time: "09:00",
      location: "Main Auditorium",
      organizer: "Science Department",
      maxParticipants: 200,
      currentParticipants: 156,
      status: "upcoming"
    },
    {
      id: "2",
      title: "Cultural Night 2024",
      type: "cultural",
      description: "An evening of music, dance, and cultural performances by students.",
      date: "2024-02-20",
      time: "18:00",
      location: "Open Air Theatre",
      organizer: "Cultural Committee",
      maxParticipants: 500,
      currentParticipants: 423,
      status: "upcoming"
    },
    {
      id: "3",
      title: "Inter-College Basketball Tournament",
      type: "sports",
      description: "Annual basketball tournament between different colleges.",
      date: "2024-01-25",
      time: "14:00",
      location: "Sports Complex",
      organizer: "Sports Department",
      maxParticipants: 100,
      currentParticipants: 100,
      status: "completed"
    },
    {
      id: "4",
      title: "AI & Machine Learning Workshop",
      type: "workshop",
      description: "Hands-on workshop on artificial intelligence and machine learning concepts.",
      date: "2024-02-10",
      time: "10:00",
      location: "Computer Lab A",
      organizer: "CS Department",
      maxParticipants: 50,
      currentParticipants: 45,
      status: "ongoing"
    }
  ])

const [newActivity, setNewActivity] = useState({
    title: "",
    type: "academic" as Activity["type"],
    description: "",
    date: "",
    time: "",
    location: "",
    organizer: "",
    maxParticipants: 0
  })

const activityTypes = ["academic", "cultural", "sports", "workshop", "seminar"]
  const statusOptions = ["upcoming", "ongoing", "completed", "cancelled"]

const filteredActivities = activities.filter(activity => {
    const matchesSearch = activity.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         activity.organizer.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesType = selectedType === "all" || activity.type === selectedType
    const matchesStatus = selectedStatus === "all" || activity.status === selectedStatus
    return matchesSearch && matchesType && matchesStatus
  })

const handleAddActivity = () => {
    if (newActivity.title && newActivity.description && newActivity.date && newActivity.location) {
      const activity: Activity = {
        id: Date.now().toString(),
        ...newActivity,
        currentParticipants: 0,
        status: "upcoming"
      }
      setActivities([...activities, activity])
      setNewActivity({
        title: "",
        type: "academic",
        description: "",
        date: "",
        time: "",
        location: "",
        organizer: "",
        maxParticipants: 0
      })
      setIsAddDialogOpen(false)
    }
  }

const handleEditActivity = (activity: Activity) => {
    setEditingActivity(activity)
  }

const handleUpdateActivity = () => {
    if (editingActivity) {
      setActivities(activities.map(activity => 
        activity.id === editingActivity.id ? editingActivity : activity
      ))
      setEditingActivity(null)
    }
  }

const handleDeleteActivity = (id: string) => {
    setActivities(activities.filter(activity => activity.id !== id))
  }

const getStatusBadgeColor = (status: Activity["status"]) => {
    switch (status) {
      case "upcoming": return "bg-blue-100 text-blue-800"
      case "ongoing": return "bg-green-100 text-green-800"
      case "completed": return "bg-gray-100 text-gray-800"
      case "cancelled": return "bg-red-100 text-red-800"
      default: return "bg-gray-100 text-gray-800"
    }
  }

const getTypeBadgeColor = (type: Activity["type"]) => {
    switch (type) {
      case "academic": return "bg-purple-100 text-purple-800"
      case "cultural": return "bg-pink-100 text-pink-800"
      case "sports": return "bg-orange-100 text-orange-800"
      case "workshop": return "bg-indigo-100 text-indigo-800"
      case "seminar": return "bg-teal-100 text-teal-800"
      default: return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="flex min-h-screen bg-purple-50">
      <Sidebar isHOD={true} />
      
      <div className="flex-1 ml-64">
        <div className="p-8">
          <div className="mb-8">
            <h1 className="text-3xl font-bold text-purple-800 mb-2">Activities Management</h1>
            <p className="text-purple-600">Organize and manage college activities and events</p>
          </div>

<Tabs defaultValue="all-activities" className="space-y-6">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="all-activities">All Activities</TabsTrigger>
              <TabsTrigger value="analytics">Analytics</TabsTrigger>
            </TabsList>

<TabsContent value="all-activities" className="space-y-6">
              {/* Search and Filter Bar */}
              <Card>
                <CardContent className="p-6">
                  <div className="flex flex-col md:flex-row gap-4">
                    <div className="flex-1">
                      <div className="relative">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400 h-4 w-4" />
                        <Input
                          placeholder="Search activities..."
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                          className="pl-10 border-purple-200 focus:border-purple-400"
                        />
                      </div>
                    </div>
                    <Select value={selectedType} onValueChange={setSelectedType}>
                      <SelectTrigger className="w-full md:w-48 border-purple-200">
                        <SelectValue placeholder="Filter by type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Types</SelectItem>
                        {activityTypes.map(type => (
                          <SelectItem key={type} value={type}>{type.charAt(0).toUpperCase() + type.slice(1)}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Select value={selectedStatus} onValueChange={setSelectedStatus}>
                      <SelectTrigger className="w-full md:w-48 border-purple-200">
                        <SelectValue placeholder="Filter by status" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Status</SelectItem>
                        {statusOptions.map(status => (
                          <SelectItem key={status} value={status}>{status.charAt(0).toUpperCase() + status.slice(1)}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
                      <DialogTrigger asChild>
                        <Button className="bg-purple-600 hover:bg-purple-700">
                          <Plus className="h-4 w-4 mr-2" />
                          Add Activity
                        </Button>
                      </DialogTrigger>
                      <DialogContent className="sm:max-w-md">
                        <DialogHeader>
                          <DialogTitle>Add New Activity</DialogTitle>
                          <DialogDescription>
                            Create a new college activity or event
                          </DialogDescription>
                        </DialogHeader>
                        <div className="space-y-4">
                          <div>
                            <Label htmlFor="title">Title</Label>
                            <Input
                              id="title"
                              value={newActivity.title}
                              onChange={(e) => setNewActivity({...newActivity, title: e.target.value})}
                              placeholder="Enter activity title"
                            />
                          </div>
                          <div>
                            <Label htmlFor="type">Type</Label>
                            <Select value={newActivity.type} onValueChange={(value: Activity["type"]) => setNewActivity({...newActivity, type: value})}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                {activityTypes.map(type => (
                                  <SelectItem key={type} value={type}>{type.charAt(0).toUpperCase() + type.slice(1)}</SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>
                          <div>
                            <Label htmlFor="description">Description</Label>
                            <Textarea
                              id="description"
                              value={newActivity.description}
                              onChange={(e) => setNewActivity({...newActivity, description: e.target.value})}
                              placeholder="Enter activity description"
                              rows={3}
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-4">
                            <div>
                              <Label htmlFor="date">Date</Label>
                              <Input
                                id="date"
                                type="date"
                                value={newActivity.date}
                                onChange={(e) => setNewActivity({...newActivity, date: e.target.value})}
                              />
                            </div>
                            <div>
                              <Label htmlFor="time">Time</Label>
                              <Input
                                id="time"
                                type="time"
                                value={newActivity.time}
                                onChange={(e) => setNewActivity({...newActivity, time: e.target.value})}
                              />
                            </div>
                          </div>
                          <div>
                            <Label htmlFor="location">Location</Label>
                            <Input
                              id="location"
                              value={newActivity.location}
                              onChange={(e) => setNewActivity({...newActivity, location: e.target.value})}
                              placeholder="Enter location"
                            />
                          </div>
                          <div>
                            <Label htmlFor="organizer">Organizer</Label>
                            <Input
                              id="organizer"
                              value={newActivity.organizer}
                              onChange={(e) => setNewActivity({...newActivity, organizer: e.target.value})}
                              placeholder="Enter organizer name"
                            />
                          </div>
                          <div>
                            <Label htmlFor="maxParticipants">Max Participants</Label>
                            <Input
                              id="maxParticipants"
                              type="number"
                              value={newActivity.maxParticipants}
                              onChange={(e) => setNewActivity({...newActivity, maxParticipants: Number.parseInt(e.target.value) || 0})}
                              placeholder="Enter maximum participants"
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                            Cancel
                          </Button>
                          <Button onClick={handleAddActivity} className="bg-purple-600 hover:bg-purple-700">
                            Add Activity
                          </Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                </CardContent>
              </Card>

{/* Activities Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredActivities.map((activity, index) => (
                  <motion.div
                    key={activity.id}
                    initial={{ opacity: 0,\
[V0_FILE]typescriptreact:file="components/sidebar.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter, usePathname } from "next/navigation"
import { motion, AnimatePresence } from "framer-motion"
import {
  Home,
  Users,
  Calendar,
  Clock,
  Activity,
  FileText,
  ImageIcon,
  User,
  Settings,
  LogOut,
  Menu,
  UserPlus,
  UserCheck,
  BookOpen,
  ClipboardList,
  MessageSquare,
  Inbox,
  FileEdit,
  ChevronDown,
  ChevronRight,
  GraduationCap,
  FolderOpen,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import Link from "next/link"

interface SidebarProps {
  userType: "student" | "admin" | "hod"
  isOpen: boolean
  onToggle: () => void
}

export function Sidebar({ userType, isOpen, onToggle }: SidebarProps) {
  const router = useRouter()
  const pathname = usePathname()

// State for collapsible sections
  const [openSections, setOpenSections] = useState<Record<string, boolean>>({
    userManagement: false,
    attendance: false,
    timetables: false,
    content: false,
    reports: false,
  })

const handleLogout = () => {
    router.push("/")
  }

const toggleSection = (section: string) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

const getMenuItems = () => {
    switch (userType) {
      case "student":
        return [
          { icon: Home, label: "Dashboard", href: "/student-dashboard" },
          { icon: Users, label: "Attendance", href: "/student-dashboard/attendance" },
          { icon: Clock, label: "Exam Timetable", href: "/student/exam-timetable" },
          { icon: Calendar, label: "Regular Timetable", href: "/student/regular-timetable" },
          { icon: Activity, label: "Activities", href: "/student/activities" },
          { icon: FileText, label: "Content", href: "/student/content" },
          { icon: ImageIcon, label: "Media", href: "/student/media" },
          { icon: FileEdit, label: "New Report", href: "/student/new-report" },
          { icon: MessageSquare, label: "Report History", href: "/student/report-history" },
          { icon: User, label: "Profile", href: "/student/profile" },
          { icon: Settings, label: "Settings", href: "/student/settings" },
        ]

case "admin":
        return [
          { icon: Home, label: "Dashboard", href: "/admin-dashboard" },
          { icon: UserPlus, label: "Branches", href: "/admin/branches" },
          { icon: BookOpen, label: "Subjects", href: "/admin/subjects" },
          { icon: UserCheck, label: "Mark Attendance", href: "/admin/mark-attendance" },
          { icon: Users, label: "View Attendance", href: "/admin/view-attendance" },
          { icon: Clock, label: "Exam Timetable", href: "/admin/exam-timetable" },
          { icon: Calendar, label: "Regular Timetable", href: "/admin/regular-timetable" },
          { icon: Activity, label: "Activities", href: "/admin/activities" },
          { icon: FileText, label: "Content", href: "/admin/content" },
          { icon: ImageIcon, label: "Media", href: "/admin/media" },
          { icon: User, label: "Profile", href: "/admin/profile" },
          { icon: Settings, label: "Settings", href: "/admin/settings" },
        ]

case "hod":
        return {
          single: [{ icon: Home, label: "Dashboard", href: "/hod-dashboard" }],
          grouped: [
            {
              key: "userManagement",
              icon: GraduationCap,
              label: "User Management",
              items: [
                { icon: UserPlus, label: "Add Student", href: "/hod/add-student" },
                { icon: UserPlus, label: "Add Teacher", href: "/hod/add-teacher" },
                { icon: ClipboardList, label: "Add Exam", href: "/hod/add-exam" },
              ],
            },
            {
              key: "attendance",
              icon: UserCheck,
              label: "Attendance",
              items: [
                { icon: Users, label: "Student Attendance", href: "/hod/student-attendance" },
                { icon: UserCheck, label: "Teacher Attendance", href: "/hod/teacher-attendance" },
              ],
            },
            {
              key: "timetables",
              icon: Calendar,
              label: "Timetables",
              items: [
                { icon: Clock, label: "Exam Timetable", href: "/hod/exam-timetable" },
                { icon: Calendar, label: "Regular Timetable", href: "/hod/regular-timetable" },
              ],
            },
            {
              key: "content",
              icon: FolderOpen,
              label: "Content Management",
              items: [
                { icon: Activity, label: "Activities", href: "/hod/activities" },
                { icon: FileText, label: "Content", href: "/hod/content" },
                { icon: ImageIcon, label: "Media", href: "/hod/media" },
              ],
            },
            {
              key: "reports",
              icon: MessageSquare,
              label: "Reports",
              items: [
                { icon: MessageSquare, label: "Anonymous Reports", href: "/hod/anonymous-reports" },
                { icon: Inbox, label: "Report Inbox", href: "/hod/report-inbox" },
              ],
            },
          ],
          bottom: [
            { icon: User, label: "Profile", href: "/hod/profile" },
            { icon: Settings, label: "Settings", href: "/hod/settings" },
          ],
        }

default:
        return []
    }
  }

const menuItems = getMenuItems()

const getThemeColors = () => {
    switch (userType) {
      case "student":
        return {
          bg: "bg-pink-50",
          border: "border-pink-200",
          text: "text-pink-800",
          hover: "hover:bg-pink-100",
          active: "bg-pink-200",
          button: "bg-pink-500 hover:bg-pink-600",
        }
      case "admin":
        return {
          bg: "bg-purple-50",
          border: "border-purple-200",
          text: "text-purple-800",
          hover: "hover:bg-purple-100",
          active: "bg-purple-200",
          button: "bg-purple-500 hover:bg-purple-600",
        }
      case "hod":
        return {
          bg: "bg-purple-50",
          border: "border-purple-200",
          text: "text-purple-800",
          hover: "hover:bg-purple-100",
          active: "bg-purple-200",
          button: "bg-purple-500 hover:bg-purple-600",
        }
      default:
        return {
          bg: "bg-gray-50",
          border: "border-gray-200",
          text: "text-gray-800",
          hover: "hover:bg-gray-100",
          active: "bg-gray-200",
          button: "bg-gray-500 hover:bg-gray-600",
        }
    }
  }

const theme = getThemeColors()

return (
      <nav className="space-y-2">
        {/* Single items */}
        {hodItems.single.map((item, index) => (
          <motion.div
            key={item.href}
            initial={{ x: -20, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ delay: index * 0.05 }}
          >
            <Link href={item.href}>
              <Button
                variant="ghost"
                className={`w-full justify-start ${theme.text} ${theme.hover} ${
                  pathname === item.href ? theme.active : ""
                } transition-colors`}
              >
                <item.icon className="mr-3 h-4 w-4" />
                {item.label}
              </Button>
            </Link>
          </motion.div>
        ))}

{/* Grouped items */}
        {hodItems.grouped.map((group, groupIndex) => (
          <motion.div
            key={group.key}
            initial={{ x: -20, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ delay: (hodItems.single.length + groupIndex) * 0.05 }}
          >
            <Collapsible open={openSections[group.key]} onOpenChange={() => toggleSection(group.key)}>
              <CollapsibleTrigger asChild>
                <Button
                  variant="ghost"
                  className={`w-full justify-between ${theme.text} ${theme.hover} transition-colors`}
                >
                  <span className="flex items-center">
                    <group.icon className="mr-3 h-4 w-4" />
                    {group.label}
                  </span>
                  {openSections[group.key] ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                </Button>
              </CollapsibleTrigger>
              <CollapsibleContent className="space-y-1 ml-6 mt-1">
                {group.items.map((item) => (
                  <Link key={item.href} href={item.href}>
                    <Button
                      variant="ghost"
                      className={`w-full justify-start text-sm ${theme.text} ${theme.hover} ${
                        pathname === item.href ? theme.active : ""
                      } transition-colors`}
                    >
                      <item.icon className="mr-3 h-3 w-3" />
                      {item.label}
                    </Button>
                  </Link>
                ))}
              </CollapsibleContent>
            </Collapsible>
          </motion.div>
        ))}

{/* Bottom items */}
        <div className="pt-4 border-t border-gray-200">
          {hodItems.bottom.map((item, index) => (
            <motion.div
              key={item.href}
              initial={{ x: -20, opacity: 0 }}
              animate={{ x: 0, opacity: 1 }}
              transition={{ delay: (hodItems.single.length + hodItems.grouped.length + index) * 0.05 }}
            >
              <Link href={item.href}>
                <Button
                  variant="ghost"
                  className={`w-full justify-start ${theme.text} ${theme.hover} ${
                    pathname === item.href ? theme.active : ""
                  } transition-colors`}
                >
                  <item.icon className="mr-3 h-4 w-4" />
                  {item.label}
                </Button>
              </Link>
            </motion.div>
          ))}
        </div>
      </nav>
    )
  }

const renderRegularMenu = () => {
    const items = menuItems as Array<{ icon: any; label: string; href: string }>

return (
      <nav className="space-y-2">
        {items.map((item, index) => (
          <motion.div
            key={item.href}
            initial={{ x: -20, opacity: 0 }}
            animate={{ x: 0, opacity: 1 }}
            transition={{ delay: index * 0.05 }}
          >
            <Link href={item.href}>
              <Button
                variant="ghost"
                className={`w-full justify-start ${theme.text} ${theme.hover} ${
                  pathname === item.href ? theme.active : ""
                } transition-colors`}
              >
                <item.icon className="mr-3 h-4 w-4" />
                {item.label}
              </Button>
            </Link>
          </motion.div>
        ))}
      </nav>
    )
  }

return (
    <AnimatePresence>
      {isOpen && (
        <motion.aside
          initial={{ width: 0, opacity: 0 }}
          animate={{ width: 280, opacity: 1 }}
          exit={{ width: 0, opacity: 0 }}
          transition={{ duration: 0.3 }}
          className={`${theme.bg} ${theme.border} border-r shadow-lg overflow-hidden flex flex-col`}
        >
          <div className="p-4 flex-1 overflow-y-auto">
            <div className="flex items-center justify-between mb-6">
              <h2 className={`text-xl font-bold ${theme.text}`}>{userType.toUpperCase()} Portal</h2>
              <Button variant="ghost" size="icon" className="lg:hidden" onClick={onToggle}>
                <Menu className={theme.text} />
              </Button>
            </div>

{userType === "hod" ? renderHODMenu() : renderRegularMenu()}
          </div>

<div className="p-4 border-t border-gray-200">
            <Button
              onClick={handleLogout}
              variant="ghost"
              className={`w-full justify-start ${theme.text} ${theme.hover} transition-colors`}
              title="Sign Out"
            >
              <LogOut className="mr-3 h-4 w-4" />
              Sign Out
            </Button>
          </div>
        </motion.aside>
      )}
    </AnimatePresence>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar,
} from "recharts"
import {
  Home,
  FileText,
  ImageIcon,
  User,
  Settings,
  Menu,
  Bell,
  Search,
  LogOut,
  BookOpen,
  TrendingUp,
  Users,
  Calendar,
  Clock,
  Activity,
  File,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { ProfilePage } from "./profile-page"
import { ContentPage } from "./content-page"
import { MediaPage } from "./media-page"
import { SettingsPage } from "./settings-page"
import { AttendancePage } from "./attendance-page"
import { ExamTimetablePage } from "./exam-timetable-page"
import { RegularTimetablePage } from "./regular-timetable-page"
import { ActivitiesPage } from "./activities-page"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useRouter } from "next/navigation"

const performanceData = [
  { month: "Jan", score: 85 },
  { month: "Feb", score: 78 },
  { month: "Mar", score: 92 },
  { month: "Apr", score: 88 },
  { month: "May", score: 95 },
  { month: "Jun", score: 90 },
]

const courseDistribution = [
  { name: "Mathematics", value: 30 },
  { name: "Science", value: 25 },
  { name: "Literature", value: 20 },
  { name: "History", value: 15 },
  { name: "Art", value: 10 },
]

const assignmentCompletion = [
  { assignment: "Assignment 1", completed: 95 },
  { assignment: "Assignment 2", completed: 88 },
  { assignment: "Assignment 3", completed: 92 },
  { assignment: "Assignment 4", completed: 78 },
  { assignment: "Assignment 5", completed: 85 },
]

const COLORS = ["#8B5CF6", "#A78BFA", "#C4B5FD", "#DDD6FE", "#EDE9FE"]

export function Dashboard() {
  const [isSidebarOpen, setSidebarOpen] = useState(true)
  const [activePage, setActivePage] = useState("dashboard")
  const router = useRouter()

const sidebarItems = [
    { icon: Home, label: "Dashboard", key: "dashboard" },
    { icon: Users, label: "Attendance", key: "attendance" },
    { icon: Clock, label: "Exam Timetable", key: "exam-timetable" },
    { icon: Calendar, label: "Regular Timetable", key: "regular-timetable" },
    { icon: Activity, label: "Activities", key: "activities" },
    { icon: FileText, label: "Content", key: "content" },
    { icon: ImageIcon, label: "Media", key: "media" },
    { icon: User, label: "Profile", key: "profile" },
    { icon: Settings, label: "Settings", key: "settings" },
    { icon: File, label: "Report", key: "report" },
  ]

const stats = [
    { title: "Total Courses", value: 12, icon: BookOpen, color: "bg-blue-500" },
    { title: "Average Grade", value: "A-", icon: TrendingUp, color: "bg-green-500" },
    { title: "Attendance Rate", value: "95%", icon: Users, color: "bg-yellow-500" },
    { title: "Upcoming Events", value: 3, icon: Calendar, color: "bg-purple-500" },
  ]

const toggleSidebar = () => {
    setSidebarOpen(!isSidebarOpen)
  }

const [showReportForm, setShowReportForm] = useState(false)
  const [reportDescription, setReportDescription] = useState("")

const handleSubmitReport = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Report submitted:", reportDescription)
    setReportDescription("")
    setShowReportForm(false)
    alert("Your report has been submitted successfully.")
  }

const handleNewReport = () => {
    router.push("/student/new-report")
  }

const renderPage = () => {
    switch (activePage) {
      case "profile":
        return <ProfilePage />
      case "content":
        return <ContentPage />
      case "media":
        return <MediaPage />
      case "settings":
        return <SettingsPage />
      case "attendance":
        return <AttendancePage />
      case "exam-timetable":
        return <ExamTimetablePage />
      case "regular-timetable":
        return <RegularTimetablePage />
      case "activities":
        return <ActivitiesPage />
      case "report":
        return (
          <div>
            <h1 className="text-3xl font-bold mb-6">Student Reports</h1>
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>Submit a Report</span>
                  <Button onClick={handleNewReport}>Go to New Report Page</Button>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Click the button above to go to the dedicated report submission page where you can submit detailed
                  reports and view your report history.
                </p>
              </CardContent>
            </Card>
          </div>
        )
      case "dashboard":
        return (
          <div>
            <h1 className="text-3xl font-bold mb-6">Student Dashboard</h1>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
              {stats.map((stat, index) => (
                <motion.div
                  key={stat.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                      <div className={`${stat.color} p-2 rounded-full`}>
                        <stat.icon className="h-4 w-4 text-white" />
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{stat.value}</div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
              <Card>
                <CardHeader>
                  <CardTitle>Performance Over Time</CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <LineChart data={performanceData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="month" />
                      <YAxis />
                      <Tooltip />
                      <Line type="monotone" dataKey="score" stroke="#8884d8" strokeWidth={2} />
                    </LineChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>
              <Card>
                <CardHeader>
                  <CardTitle>Course Distribution</CardTitle>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={300}>
                    <PieChart>
                      <Pie
                        data={courseDistribution}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                      >
                        {courseDistribution.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                        ))}
                      </Pie>
                      <Tooltip />
                    </PieChart>
                  </ResponsiveContainer>
                  <div className="grid grid-cols-2 gap-2 mt-4">
                    {courseDistribution.map((course, index) => (
                      <div key={course.name} className="flex items-center">
                        <div
                          className="w-3 h-3 rounded-full mr-2"
                          style={{ backgroundColor: COLORS[index % COLORS.length] }}
                        ></div>
                        <span className="text-sm">{course.name}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
            <Card>
              <CardHeader>
                <CardTitle>Assignment Completion Rates</CardTitle>
              </CardHeader>
              <CardContent>
                <ResponsiveContainer width="100%" height={300}>
                  <BarChart data={assignmentCompletion}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="assignment" />
                    <YAxis />
                    <Tooltip />
                    <Bar dataKey="completed" fill="#8884d8" />
                  </BarChart>
                </ResponsiveContainer>
              </CardContent>
            </Card>
            <Card className="mt-8">
              <CardHeader>
                <CardTitle className="flex items-center justify-between">
                  <span>Submit a Report</span>
                  <Button onClick={() => setShowReportForm(!showReportForm)}>
                    {showReportForm ? "Cancel" : "New Report"}
                  </Button>
                </CardTitle>
              </CardHeader>
              {showReportForm && (
                <CardContent>
                  <form onSubmit={handleSubmitReport} className="space-y-4">
                    <div>
                      <Label htmlFor="reportDescription">Report Description</Label>
                      <Textarea
                        id="reportDescription"
                        placeholder="Enter your report here..."
                        value={reportDescription}
                        onChange={(e) => setReportDescription(e.target.value)}
                        rows={4}
                      />
                    </div>
                    <Button type="submit">Submit Report</Button>
                  </form>
                </CardContent>
              )}
            </Card>
          </div>
        )
      default:
        return <div>Dashboard Content</div>
    }
  }

return (
    <div className="min-h-screen bg-gray-100 flex">
      <AnimatePresence>
        {isSidebarOpen && (
          <motion.aside
            initial={{ width: 0, opacity: 0 }}
            animate={{ width: 250, opacity: 1 }}
            exit={{ width: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="bg-white shadow-md overflow-hidden"
          >
            <div className="p-4 space-y-4">
              <div className="flex items-center justify-between mb-6">
                <h2 className="text-xl font-bold text-gray-800">CMS Dashboard</h2>
                <Button variant="ghost" size="icon" className="lg:hidden" onClick={toggleSidebar}>
                  <Menu />
                </Button>
              </div>
              {sidebarItems.map((item, index) => (
                <motion.button
                  key={item.key}
                  initial={{ x: -20, opacity: 0 }}
                  animate={{ x: 0, opacity: 1 }}
                  transition={{ delay: index * 0.1 }}
                  className={`flex items-center space-x-3 w-full p-3 rounded-lg transition-colors ${
                    activePage === item.key ? "bg-gray-200 text-gray-800" : "text-gray-600 hover:bg-gray-100"
                  }`}
                  onClick={() => setActivePage(item.key)}
                >
                  <item.icon size={20} />
                  <span>{item.label}</span>
                </motion.button>
              ))}
            </div>
          </motion.aside>
        )}
      </AnimatePresence>
      <main className="flex-1 overflow-x-hidden overflow-y-auto">
        <header className="bg-white shadow-sm">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center">
              <Button variant="ghost" size="icon" onClick={toggleSidebar} className="mr-2">
                <Menu />
              </Button>
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
                <Input type="text" placeholder="Search..." className="pl-10 pr-4" />
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="icon">
                <Bell />
              </Button>
              <Button variant="ghost" size="icon">
                <User />
              </Button>
              <Button variant="ghost" size="icon" onClick={() => router.push("/")}>
                <LogOut />
              </Button>
            </div>
          </div>
        </header>
        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} className="p-6">
          {renderPage()}
        </motion.div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hod-dashboard.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useRouter } from "next/navigation"
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar,
} from "recharts"
import {
  Users,
  GraduationCap,
  BookOpen,
  TrendingUp,
  Bell,
  Search,
  LogOut,
  Menu,
  Calendar,
  FileText,
  CheckCircle,
  Clock,
  AlertCircle,
  Plus,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Sidebar } from "./sidebar"

const performanceData = [
  { month: "Jan", students: 450, teachers: 25, performance: 85 },
  { month: "Feb", students: 465, teachers: 26, performance: 88 },
  { month: "Mar", students: 480, teachers: 27, performance: 92 },
  { month: "Apr", students: 495, teachers: 28, performance: 89 },
  { month: "May", students: 510, teachers: 29, performance: 94 },
  { month: "Jun", students: 525, teachers: 30, performance: 91 },
]

const departmentData = [
  { name: "Computer Science", value: 35, students: 180 },
  { name: "Mathematics", value: 25, students: 130 },
  { name: "Physics", value: 20, students: 105 },
  { name: "Chemistry", value: 15, students: 80 },
  { name: "Biology", value: 5, students: 30 },
]

const attendanceData = [
  { day: "Mon", students: 95, teachers: 98 },
  { day: "Tue", students: 92, teachers: 96 },
  { day: "Wed", students: 88, teachers: 94 },
  { day: "Thu", students: 94, teachers: 97 },
  { day: "Fri", students: 90, teachers: 95 },
]

const examScores = [
  { subject: "Mathematics", average: 78 },
  { subject: "Physics", average: 82 },
  { subject: "Chemistry", average: 75 },
  { subject: "Computer Science", average: 88 },
  { subject: "English", average: 80 },
]

const COLORS = ["#8B5CF6", "#A78BFA", "#C4B5FD", "#DDD6FE", "#EDE9FE"]

const AnimatedValue = ({ value }: { value: number }) => {
  const [count, setCount] = useState(0)

useEffect(() => {
    const animationDuration = 2000
    const frameDuration = 1000 / 60
    const totalFrames = Math.round(animationDuration / frameDuration)
    let frame = 0

const timer = setInterval(() => {
      frame++
      const progress = frame / totalFrames
      setCount(Math.floor(value * progress))

if (frame === totalFrames) {
        clearInterval(timer)
      }
    }, frameDuration)

return () => clearInterval(timer)
  }, [value])

return <span>{count}</span>
}

export function HODDashboard() {
  const [isSidebarOpen, setSidebarOpen] = useState(true)
  const [currentTime, setCurrentTime] = useState(new Date())
  const [isMobile, setIsMobile] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const router = useRouter()

useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000)
    return () => clearInterval(timer)
  }, [])

useEffect(() => {
    const checkIfMobile = () => {
      const mobile = window.innerWidth < 768
      setIsMobile(mobile)
      if (mobile) {
        setSidebarOpen(false)
      } else {
        setSidebarOpen(true)
      }
    }

checkIfMobile()
    window.addEventListener("resize", checkIfMobile)
    return () => window.removeEventListener("resize", checkIfMobile)
  }, [])

const handleSignOut = () => {
    router.push("/")
  }

const toggleSidebar = () => {
    setSidebarOpen(!isSidebarOpen)
  }

const stats = [
    {
      title: "Total Students",
      value: 525,
      change: "+12",
      icon: GraduationCap,
      color: "bg-purple-500",
      trend: "up",
    },
    {
      title: "Total Teachers",
      value: 30,
      change: "+2",
      icon: Users,
      color: "bg-blue-500",
      trend: "up",
    },
    {
      title: "Active Courses",
      value: 45,
      change: "+3",
      icon: BookOpen,
      color: "bg-green-500",
      trend: "up",
    },
    {
      title: "Avg Performance",
      value: 91,
      change: "+5",
      icon: TrendingUp,
      color: "bg-yellow-500",
      trend: "up",
    },
  ]

const recentReports = [
    {
      id: 1,
      title: "Classroom Facilities Issue",
      department: "Computer Science",
      status: "New",
      date: "2023-07-22",
    },
    {
      id: 2,
      title: "Lab Equipment Request",
      department: "Physics",
      status: "In Progress",
      date: "2023-07-20",
    },
    {
      id: 3,
      title: "Curriculum Feedback",
      department: "Mathematics",
      status: "Resolved",
      date: "2023-07-18",
    },
    {
      id: 4,
      title: "Student Grievance",
      department: "English",
      status: "New",
      date: "2023-07-21",
    },
  ]

const upcomingEvents = [
    {
      id: 1,
      title: "Faculty Meeting",
      date: "2023-07-25",
      time: "10:00 AM",
    },
    {
      id: 2,
      title: "Mid-term Exams",
      date: "2023-08-05",
      time: "9:00 AM",
    },
    {
      id: 3,
      title: "Department Review",
      date: "2023-07-28",
      time: "2:00 PM",
    },
  ]

const getStatusColor = (status: string) => {
    switch (status) {
      case "New":
        return "bg-blue-100 text-blue-800"
      case "In Progress":
        return "bg-amber-100 text-amber-800"
      case "Resolved":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="min-h-screen bg-purple-50 flex">
      <Sidebar userType="hod" isOpen={isSidebarOpen} onToggle={toggleSidebar} />

<main className="flex-1 transition-all duration-300">
        {/* Header */}
        <header className="bg-white shadow-sm border-b border-purple-200 sticky top-0 z-10">
          <div className="px-4 sm:px-6 lg:px-8 py-3 sm:py-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2 sm:space-x-4">
                <Button variant="ghost" size="icon" onClick={toggleSidebar}>
                  <Menu className="text-purple-600 h-4 w-4 sm:h-5 sm:w-5" />
                </Button>
                <div className="flex flex-col">
                  <h1 className="text-lg sm:text-xl lg:text-2xl font-bold text-purple-800">HOD Dashboard</h1>
                  <p className="text-xs sm:text-sm text-purple-600 hidden sm:block">
                    Welcome back! Here's what's happening in your institution.
                  </p>
                </div>
              </div>
              <div className="flex items-center space-x-2 sm:space-x-4">
                <div className="text-xs sm:text-sm text-purple-600 hidden md:block">
                  {currentTime.toLocaleTimeString()}
                </div>
                <div className="relative hidden sm:block">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400" size={16} />
                  <Input
                    type="text"
                    placeholder="Search..."
                    className="pl-10 pr-4 w-32 sm:w-48 lg:w-64 border-purple-200 focus:border-purple-400"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <Button variant="ghost" size="icon" className="text-purple-600 hover:bg-purple-100">
                  <Bell className="h-4 w-4 sm:h-5 sm:w-5" />
                </Button>
                <Avatar className="h-8 w-8 sm:h-10 sm:w-10">
                  <AvatarImage src="https://github.com/shadcn.png" />
                  <AvatarFallback className="bg-purple-500 text-white text-xs sm:text-sm">HD</AvatarFallback>
                </Avatar>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={handleSignOut}
                  className="text-purple-600 hover:bg-purple-100"
                  title="Sign Out"
                >
                  <LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
                </Button>
              </div>
            </div>
            {/* Mobile Search */}
            <div className="mt-3 sm:hidden">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400" size={16} />
                <Input
                  type="text"
                  placeholder="Search students, teachers, courses..."
                  className="pl-10 pr-4 w-full border-purple-200 focus:border-purple-400"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>
          </div>
        </header>

{/* Main Content */}
        <div className="px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
            {/* Stats Grid */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-6 sm:mb-8">
              {stats.map((stat, index) => (
                <motion.div
                  key={stat.title}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5, delay: index * 0.1 }}
                >
                  <Card className="border-purple-200 hover:shadow-lg transition-shadow bg-gradient-to-br from-white to-purple-50">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 p-3 sm:p-4 lg:p-6">
                      <CardTitle className="text-xs sm:text-sm font-medium text-purple-700 leading-tight">
                        {stat.title}
                      </CardTitle>
                      <div className={`${stat.color} p-1.5 sm:p-2 rounded-full`}>
                        <stat.icon className="h-3 w-3 sm:h-4 sm:w-4 text-white" />
                      </div>
                    </CardHeader>
                    <CardContent className="p-3 sm:p-4 lg:p-6 pt-0">
                      <div className="text-lg sm:text-xl lg:text-2xl font-bold text-purple-800">
                        <AnimatedValue value={stat.value} />
                        {stat.title === "Avg Performance" && "%"}
                      </div>
                      <p className="text-xs text-green-600 flex items-center mt-1">
                        <TrendingUp className="h-3 w-3 mr-1" />
                        <span className="hidden sm:inline">{stat.change} from last month</span>
                        <span className="sm:hidden">{stat.change}</span>
                      </p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>

{/* Charts Grid */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8">
              {/* Performance Chart */}
              <Card className="border-purple-200 shadow-md bg-white">
                <CardHeader className="p-4 sm:p-6">
                  <CardTitle className="text-lg sm:text-xl text-purple-800">Institution Performance</CardTitle>
                  <CardDescription className="text-sm text-purple-600">Monthly performance overview</CardDescription>
                </CardHeader>
                <CardContent className="p-4 sm:p-6 pt-0">
                  <div className="h-[250px] sm:h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <LineChart data={performanceData}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
                        <XAxis dataKey="month" stroke="#6B7280" fontSize={12} />
                        <YAxis stroke="#6B7280" fontSize={12} />
                        <Tooltip
                          contentStyle={{
                            backgroundColor: "#F9FAFB",
                            border: "1px solid #E5E7EB",
                            borderRadius: "8px",
                            fontSize: "12px",
                          }}
                        />
                        <Line
                          type="monotone"
                          dataKey="performance"
                          stroke="#8B5CF6"
                          strokeWidth={3}
                          dot={{ fill: "#8B5CF6", strokeWidth: 2, r: 4 }}
                          name="Performance %"
                        />
                      </LineChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

{/* Department Distribution */}
              <Card className="border-purple-200 shadow-md bg-white">
                <CardHeader className="p-4 sm:p-6">
                  <CardTitle className="text-lg sm:text-xl text-purple-800">Department Distribution</CardTitle>
                  <CardDescription className="text-sm text-purple-600">
                    Student enrollment by department
                  </CardDescription>
                </CardHeader>
                <CardContent className="p-4 sm:p-6 pt-0">
                  <div className="h-[200px] sm:h-[250px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                        <Pie
                          data={departmentData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius="80%"
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, percent }) => `${name.split(" ")[0]} ${(percent * 100).toFixed(0)}%`}
                        >
                          {departmentData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
                    {departmentData.map((dept, index) => (
                      <div key={dept.name} className="flex items-center text-xs sm:text-sm">
                        <div
                          className="w-3 h-3 rounded-full mr-2 flex-shrink-0"
                          style={{ backgroundColor: COLORS[index % COLORS.length] }}
                        ></div>
                        <span className="truncate">{dept.name}</span>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>

{/* Bottom Section */}
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
              {/* Attendance Chart */}
              <Card className="lg:col-span-2 border-purple-200 shadow-md bg-white">
                <CardHeader className="p-4 sm:p-6">
                  <CardTitle className="text-lg sm:text-xl text-purple-800">Weekly Attendance</CardTitle>
                  <CardDescription className="text-sm text-purple-600">Daily attendance comparison</CardDescription>
                </CardHeader>
                <CardContent className="p-4 sm:p-6 pt-0">
                  <div className="h-[250px] sm:h-[300px]">
                    <ResponsiveContainer width="100%" height="100%">
                      <BarChart data={attendanceData}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
                        <XAxis dataKey="day" stroke="#6B7280" fontSize={12} />
                        <YAxis stroke="#6B7280" fontSize={12} />
                        <Tooltip
                          contentStyle={{
                            backgroundColor: "#F9FAFB",
                            border: "1px solid #E5E7EB",
                            borderRadius: "8px",
                            fontSize: "12px",
                          }}
                        />
                        <Bar dataKey="students" fill="#8B5CF6" name="Students" />
                        <Bar dataKey="teachers" fill="#A78BFA" name="Teachers" />
                      </BarChart>
                    </ResponsiveContainer>
                  </div>
                </CardContent>
              </Card>

{/* Upcoming Events */}
              <Card className="border-purple-200 shadow-md bg-white">
                <CardHeader className="p-4 sm:p-6">
                  <CardTitle className="text-lg sm:text-xl text-purple-800">Upcoming Events</CardTitle>
                  <CardDescription className="text-sm text-purple-600">Schedule for the next few days</CardDescription>
                </CardHeader>
                <CardContent className="p-4 sm:p-6 pt-0">
                  <div className="space-y-4">
                    {upcomingEvents.map((event) => (
                      <div
                        key={event.id}
                        className="flex items-start gap-3 pb-3 border-b border-gray-100 last:border-0"
                      >
                        <div className="bg-purple-100 p-2 rounded-lg flex-shrink-0">
                          <Calendar className="h-3 w-3 sm:h-4 sm:w-4 text-purple-600" />
                        </div>
                        <div className="min-w-0 flex-1">
                          <h4 className="font-medium text-xs sm:text-sm text-purple-800 truncate">{event.title}</h4>
                          <div className="flex items-center gap-2 mt-1">
                            <p className="text-xs text-purple-500">{event.date}</p>
                            <span className="text-xs text-purple-300">•</span>
                            <p className="text-xs text-purple-500">{event.time}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <Button variant="outline" className="w-full mt-4 bg-transparent text-xs">
                    <Plus className="h-3 w-3 mr-2" />
                    Add New Event
                  </Button>
                </CardContent>
              </Card>
            </div>

{/* Exam Performance Chart */}
            <Card className="mb-6 sm:mb-8 border-purple-200 shadow-md bg-white">
              <CardHeader className="p-4 sm:p-6">
                <CardTitle className="text-lg sm:text-xl text-purple-800">Exam Performance</CardTitle>
                <CardDescription className="text-sm text-purple-600">Average scores by subject</CardDescription>
              </CardHeader>
              <CardContent className="p-4 sm:p-6 pt-0">
                <div className="h-[250px] sm:h-[300px] lg:h-[350px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={examScores}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#E5E7EB" />
                      <XAxis dataKey="subject" stroke="#6B7280" fontSize={12} />
                      <YAxis stroke="#6B7280" fontSize={12} />
                      <Tooltip
                        contentStyle={{
                          backgroundColor: "#F9FAFB",
                          border: "1px solid #E5E7EB",
                          borderRadius: "8px",
                          fontSize: "12px",
                        }}
                      />
                      <Bar dataKey="average" fill="#8B5CF6" name="Average Score" />
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </CardContent>
            </Card>

{/* Recent Reports */}
            <Card className="mb-6 sm:mb-8 border-purple-200 shadow-md bg-white">
              <CardHeader className="p-4 sm:p-6">
                <CardTitle className="text-lg sm:text-xl text-purple-800">Recent Reports</CardTitle>
                <CardDescription className="text-sm text-purple-600">
                  Student and faculty reports requiring attention
                </CardDescription>
              </CardHeader>
              <CardContent className="p-4 sm:p-6 pt-0">
                <div className="space-y-4">
                  {recentReports.map((report) => (
                    <div key={report.id} className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
                      <div className="flex-1 min-w-0">
                        <h4 className="font-medium text-sm sm:text-base text-purple-800 truncate">{report.title}</h4>
                        <div className="flex items-center gap-2 mt-1">
                          <p className="text-xs sm:text-sm text-purple-600">{report.department}</p>
                          <span className="text-xs text-purple-300">•</span>
                          <p className="text-xs sm:text-sm text-purple-600">{report.date}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline" className={`${getStatusColor(report.status)} text-xs`}>
                          {report.status}
                        </Badge>
                        <Button variant="ghost" size="sm" className="text-xs">
                          View
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="flex flex-col sm:flex-row justify-center gap-2 mt-6">
                  <Button variant="outline" className="bg-transparent text-xs sm:text-sm">
                    View All Reports
                  </Button>
                  <Button className="text-xs sm:text-sm">
                    <FileText className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
                    Generate Report
                  </Button>
                </div>
              </CardContent>
            </Card>

{/* Bottom Stats Grid */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
              <Card className="border-purple-200 shadow-md bg-gradient-to-br from-white to-purple-50">
                <CardHeader className="pb-2 p-4">
                  <CardTitle className="text-base sm:text-lg font-semibold text-purple-800">
                    Teacher Attendance
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4 pt-0">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-2xl sm:text-3xl font-bold text-purple-900">94%</p>
                      <p className="text-xs sm:text-sm text-purple-600">This month</p>
                    </div>
                    <div className="bg-green-100 p-3 rounded-full">
                      <CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-green-600" />
                    </div>
                  </div>
                  <div className="mt-4 text-xs sm:text-sm text-purple-600">
                    <p className="flex items-center">
                      <TrendingUp className="h-3 w-3 sm:h-4 sm:w-4 mr-1 text-green-500" />
                      <span>2% higher than last month</span>
                    </p>
                  </div>
                </CardContent>
              </Card>

<Card className="border-purple-200 shadow-md bg-gradient-to-br from-white to-purple-50">
                <CardHeader className="pb-2 p-4">
                  <CardTitle className="text-base sm:text-lg font-semibold text-purple-800">
                    Student Attendance
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4 pt-0">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-2xl sm:text-3xl font-bold text-purple-900">89%</p>
                      <p className="text-xs sm:text-sm text-purple-600">This month</p>
                    </div>
                    <div className="bg-amber-100 p-3 rounded-full">
                      <AlertCircle className="h-5 w-5 sm:h-6 sm:w-6 text-amber-600" />
                    </div>
                  </div>
                  <div className="mt-4 text-xs sm:text-sm text-purple-600">
                    <p className="flex items-center">
                      <TrendingUp className="h-3 w-3 sm:h-4 sm:w-4 mr-1 text-green-500" />
                      <span>1% higher than last month</span>
                    </p>
                  </div>
                </CardContent>
              </Card>

<Card className="border-purple-200 shadow-md bg-gradient-to-br from-white to-purple-50 sm:col-span-2 lg:col-span-1">
                <CardHeader className="pb-2 p-4">
                  <CardTitle className="text-base sm:text-lg font-semibold text-purple-800">
                    Upcoming Deadlines
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4 pt-0">
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <div className="bg-red-100 p-2 rounded-full flex-shrink-0">
                        <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-red-600" />
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="text-xs sm:text-sm font-medium text-purple-800 truncate">
                          Exam Results Submission
                        </p>
                        <p className="text-xs text-purple-500">Due in 2 days</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-3">
                      <div className="bg-amber-100 p-2 rounded-full flex-shrink-0">
                        <Clock className="h-3 w-3 sm:h-4 sm:w-4 text-amber-600" />
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="text-xs sm:text-sm font-medium text-purple-800 truncate">Department Budget</p>
                        <p className="text-xs text-purple-500">Due in 5 days</p>
                      </div>
                    </div>
                  </div>
                  <Button variant="outline" className="w-full mt-4 text-xs bg-transparent">
                    View All Deadlines
                  </Button>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-dashboard.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useRouter } from "next/navigation"
import {
  Users,
  BookOpen,
  Building,
  GraduationCap,
  Bell,
  Search,
  LogOut,
  TrendingUp,
  Calendar,
  FileText,
  Activity,
  UserCheck,
  Menu,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Sidebar } from "@/components/sidebar"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

const data = [
  { name: "Jan", students: 400, courses: 240 },
  { name: "Feb", students: 300, courses: 139 },
  { name: "Mar", students: 200, courses: 980 },
  { name: "Apr", students: 278, courses: 390 },
  { name: "May", students: 189, courses: 480 },
  { name: "Jun", students: 239, courses: 380 },
  { name: "Jul", students: 349, courses: 430 },
]

const AnimatedValue = ({ value }: { value: number }) => {
  const [count, setCount] = useState(0)

useEffect(() => {
    const animationDuration = 2000
    const frameDuration = 1000 / 60
    const totalFrames = Math.round(animationDuration / frameDuration)
    let frame = 0

const timer = setInterval(() => {
      frame++
      const progress = frame / totalFrames
      setCount(Math.floor(value * progress))

if (frame === totalFrames) {
        clearInterval(timer)
      }
    }, frameDuration)

return () => clearInterval(timer)
  }, [value])

return <span>{count}</span>
}

export function AdminDashboard() {
  const router = useRouter()
  const [isSidebarOpen, setSidebarOpen] = useState(true)
  const [isMobile, setIsMobile] = useState(false)

checkIfMobile()
    window.addEventListener("resize", checkIfMobile)
    return () => window.removeEventListener("resize", checkIfMobile)
  }, [])

const stats = [
    { title: "Total Students", value: 1234, icon: Users, color: "bg-purple-500" },
    { title: "Total Courses", value: 56, icon: BookOpen, color: "bg-purple-400" },
    { title: "Total Branches", value: 8, icon: Building, color: "bg-purple-300" },
    { title: "Total Faculty", value: 120, icon: GraduationCap, color: "bg-purple-200" },
  ]

const handleSignOut = () => {
    router.push("/")
  }

const toggleSidebar = () => {
    setSidebarOpen(!isSidebarOpen)
  }

return (
    <div className="min-h-screen bg-purple-50 flex">
      <Sidebar userType="admin" isOpen={isSidebarOpen} onToggle={toggleSidebar} />
      <div className="flex-1 transition-all duration-300">
        <header className="bg-purple-100 shadow-sm border-b border-purple-200">
          <div className="px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
            <div className="flex items-center">
              <Button
                variant="ghost"
                size="icon"
                onClick={toggleSidebar}
                className="mr-4 text-purple-600 hover:text-purple-800 hover:bg-purple-100"
              >
                <Menu size={20} />
              </Button>
              <h1 className="text-xl sm:text-2xl font-semibold text-purple-800">Admin Dashboard</h1>
            </div>
            <div className="flex items-center space-x-2 sm:space-x-4">
              <div className="relative hidden sm:block">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400" size={20} />
                <Input
                  type="text"
                  placeholder="Search..."
                  className="pl-10 pr-4 w-48 lg:w-64 bg-white border-purple-200 placeholder-purple-300 text-purple-800 focus:border-purple-400 focus:ring-purple-400"
                />
              </div>
              <Button variant="ghost" size="icon" className="text-purple-600 hover:text-purple-800 hover:bg-purple-100">
                <Bell className="h-4 w-4 sm:h-5 sm:w-5" />
              </Button>
              <Avatar className="h-8 w-8 sm:h-10 sm:w-10">
                <AvatarImage src="https://github.com/shadcn.png" />
                <AvatarFallback className="bg-purple-500 text-white">AD</AvatarFallback>
              </Avatar>
              <Button
                variant="ghost"
                size="icon"
                onClick={handleSignOut}
                className="text-purple-600 hover:text-purple-800 hover:bg-purple-100"
                title="Logout"
              >
                <LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
              </Button>
            </div>
          </div>
          {/* Mobile Search */}
          <div className="px-4 sm:px-6 lg:px-8 pb-4 sm:hidden">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-purple-400" size={16} />
              <Input
                type="text"
                placeholder="Search..."
                className="pl-10 pr-4 w-full bg-white border-purple-200 placeholder-purple-300 text-purple-800 focus:border-purple-400 focus:ring-purple-400"
              />
            </div>
          </div>
        </header>

<main className="px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
            {stats.map((stat, index) => (
              <motion.div
                key={stat.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="border-purple-200 shadow-md hover:shadow-lg transition-shadow duration-300 bg-gradient-to-br from-white to-purple-50">
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 p-3 sm:p-4 lg:p-6">
                    <CardTitle className="text-xs sm:text-sm font-medium text-purple-800 leading-tight">
                      {stat.title}
                    </CardTitle>
                    <div className={`${stat.color} p-1.5 sm:p-2 rounded-full shadow-sm`}>
                      <stat.icon className="h-3 w-3 sm:h-4 sm:w-4 text-white" />
                    </div>
                  </CardHeader>
                  <CardContent className="p-3 sm:p-4 lg:p-6 pt-0">
                    <div className="text-lg sm:text-xl lg:text-2xl font-bold text-purple-900">
                      <AnimatedValue value={stat.value} />
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

<Card className="mb-6 sm:mb-8 border-purple-200 shadow-md bg-white">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-white border-b border-purple-100 p-4 sm:p-6">
              <CardTitle className="text-lg sm:text-xl font-semibold flex items-center text-purple-800">
                <TrendingUp className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                Student and Course Trends
              </CardTitle>
            </CardHeader>
            <CardContent className="p-4 sm:p-6">
              <div className="h-[300px] sm:h-[400px]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={data}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#f3e8ff" />
                    <XAxis dataKey="name" stroke="#9333ea" fontSize={12} />
                    <YAxis stroke="#9333ea" fontSize={12} />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "#fff",
                        borderColor: "#f3e8ff",
                        fontSize: "12px",
                      }}
                    />
                    <Line type="monotone" dataKey="students" stroke="#a855f7" strokeWidth={2} name="Students" />
                    <Line type="monotone" dataKey="courses" stroke="#d8b4fe" strokeWidth={2} name="Courses" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
              <Card className="hover:shadow-lg transition-shadow duration-300 border-purple-200 bg-gradient-to-br from-white to-purple-50">
                <CardHeader className="border-b border-purple-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-purple-800">
                    <Calendar className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                    <span className="truncate">Exam Timetable</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/exam-timetable")}
                  >
                    Manage Exam Timetable
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
            >
              <Card className="hover:shadow-lg transition-shadow duration-300 border-purple-200 bg-gradient-to-br from-white to-purple-50">
                <CardHeader className="border-b border-purple-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-purple-800">
                    <Calendar className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                    <span className="truncate">Regular Timetable</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/regular-timetable")}
                  >
                    Manage Regular Timetable
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <Card className="hover:shadow-lg transition-shadow duration-300 border-purple-200 bg-gradient-to-br from-white to-purple-50">
                <CardHeader className="border-b border-purple-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-purple-800">
                    <Activity className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                    <span className="truncate">Activities</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/activities")}
                  >
                    Manage Activities
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.3 }}
            >
              <Card className="hover:shadow-lg transition-shadow duration-300 border-purple-200 bg-gradient-to-br from-white to-purple-50">
                <CardHeader className="border-b border-purple-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-purple-800">
                    <FileText className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                    <span className="truncate">Content</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/content")}
                  >
                    Manage Content
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
            <Card className="border-purple-200 shadow-md bg-gradient-to-br from-white to-purple-50">
              <CardHeader className="border-b border-purple-100 p-4 sm:p-6">
                <CardTitle className="text-base sm:text-lg font-semibold flex items-center text-purple-800">
                  <UserCheck className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                  Attendance Management
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4 sm:p-6">
                <div className="space-y-3">
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/mark-attendance")}
                  >
                    Mark Attendance
                  </Button>
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/view-attendance")}
                  >
                    View Attendance
                  </Button>
                </div>
              </CardContent>
            </Card>
            <Card className="border-purple-200 shadow-md bg-gradient-to-br from-white to-purple-50">
              <CardHeader className="border-b border-purple-100 p-4 sm:p-6">
                <CardTitle className="text-base sm:text-lg font-semibold flex items-center text-purple-800">
                  <FileText className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-purple-600" />
                  Content Management
                </CardTitle>
              </CardHeader>
              <CardContent className="p-4 sm:p-6">
                <div className="space-y-3">
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/content")}
                  >
                    Manage Content
                  </Button>
                  <Button
                    className="w-full bg-purple-500 hover:bg-purple-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/admin/media")}
                  >
                    Manage Media
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </main>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/student-dashboard.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import { useRouter } from "next/navigation"
import { Book, Bell, Search, LogOut, TrendingUp, Clock, Calendar, Activity, Menu } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Sidebar } from "@/components/sidebar"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

const data = [
  { name: "Jan", performance: 400, attendance: 240 },
  { name: "Feb", performance: 300, attendance: 139 },
  { name: "Mar", performance: 200, attendance: 980 },
  { name: "Apr", performance: 278, attendance: 390 },
  { name: "May", performance: 189, attendance: 480 },
  { name: "Jun", performance: 239, attendance: 380 },
  { name: "Jul", performance: 349, attendance: 430 },
]

const AnimatedValue = ({ value }: { value: number }) => {
  const [count, setCount] = useState(0)

useEffect(() => {
    const animationDuration = 2000
    const frameDuration = 1000 / 60
    const totalFrames = Math.round(animationDuration / frameDuration)
    let frame = 0

const timer = setInterval(() => {
      frame++
      const progress = frame / totalFrames
      setCount(Math.floor(value * progress))

if (frame === totalFrames) {
        clearInterval(timer)
      }
    }, frameDuration)

return () => clearInterval(timer)
  }, [value])

return <span>{count}</span>
}

export function StudentDashboard() {
  const router = useRouter()
  const [isSidebarOpen, setSidebarOpen] = useState(true)
  const [isMobile, setIsMobile] = useState(false)

checkIfMobile()
    window.addEventListener("resize", checkIfMobile)
    return () => window.removeEventListener("resize", checkIfMobile)
  }, [])

const stats = [
    { title: "Courses Enrolled", value: 6, icon: Book, color: "bg-pink-500" },
    { title: "Upcoming Exams", value: 3, icon: Clock, color: "bg-pink-400" },
    { title: "Attendance Rate", value: 95, icon: Calendar, color: "bg-pink-300" },
    { title: "Activities", value: 4, icon: Activity, color: "bg-pink-200" },
  ]

const handleSignOut = () => {
    router.push("/")
  }

const toggleSidebar = () => {
    setSidebarOpen(!isSidebarOpen)
  }

return (
    <div className="min-h-screen bg-pink-50 flex">
      <Sidebar userType="student" isOpen={isSidebarOpen} onToggle={toggleSidebar} />
      <div className="flex-1 transition-all duration-300">
        <header className="bg-pink-100 shadow-sm border-b border-pink-200">
          <div className="px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
            <div className="flex items-center">
              <Button
                variant="ghost"
                size="icon"
                onClick={toggleSidebar}
                className="mr-4 text-pink-600 hover:text-pink-800 hover:bg-pink-100"
              >
                <Menu size={20} />
              </Button>
              <h1 className="text-xl sm:text-2xl font-semibold text-pink-800">Student Dashboard</h1>
            </div>
            <div className="flex items-center space-x-2 sm:space-x-4">
              <div className="relative hidden sm:block">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-pink-400" size={20} />
                <Input
                  type="text"
                  placeholder="Search..."
                  className="pl-10 pr-4 w-48 lg:w-64 bg-white border-pink-200 placeholder-pink-300 text-pink-800 focus:border-pink-400 focus:ring-pink-400"
                />
              </div>
              <Button variant="ghost" size="icon" className="text-pink-600 hover:text-pink-800 hover:bg-pink-100">
                <Bell className="h-4 w-4 sm:h-5 sm:w-5" />
              </Button>
              <Avatar className="h-8 w-8 sm:h-10 sm:w-10">
                <AvatarImage src="https://github.com/shadcn.png" />
                <AvatarFallback className="bg-pink-500 text-white">ST</AvatarFallback>
              </Avatar>
              <Button
                variant="ghost"
                size="icon"
                onClick={handleSignOut}
                className="text-pink-600 hover:text-pink-800 hover:bg-pink-100"
                title="Logout"
              >
                <LogOut className="h-4 w-4 sm:h-5 sm:w-5" />
              </Button>
            </div>
          </div>
          {/* Mobile Search */}
          <div className="px-4 sm:px-6 lg:px-8 pb-4 sm:hidden">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-pink-400" size={16} />
              <Input
                type="text"
                placeholder="Search..."
                className="pl-10 pr-4 w-full bg-white border-pink-200 placeholder-pink-300 text-pink-800 focus:border-pink-400 focus:ring-pink-400"
              />
            </div>
          </div>
        </header>

<main className="px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
            {stats.map((stat, index) => (
              <motion.div
                key={stat.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="border-pink-200 shadow-md hover:shadow-lg transition-shadow duration-300 bg-gradient-to-br from-white to-pink-50">
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 p-3 sm:p-4 lg:p-6">
                    <CardTitle className="text-xs sm:text-sm font-medium text-pink-800 leading-tight">
                      {stat.title}
                    </CardTitle>
                    <div className={`${stat.color} p-1.5 sm:p-2 rounded-full shadow-sm`}>
                      <stat.icon className="h-3 w-3 sm:h-4 sm:w-4 text-white" />
                    </div>
                  </CardHeader>
                  <CardContent className="p-3 sm:p-4 lg:p-6 pt-0">
                    <div className="text-lg sm:text-xl lg:text-2xl font-bold text-pink-900">
                      <AnimatedValue value={stat.value} />
                      {stat.title === "Attendance Rate" && "%"}
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>

<Card className="mb-6 sm:mb-8 border-pink-200 shadow-md bg-white">
            <CardHeader className="bg-gradient-to-r from-pink-50 to-white border-b border-pink-100 p-4 sm:p-6">
              <CardTitle className="text-lg sm:text-xl font-semibold flex items-center text-pink-800">
                <TrendingUp className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-pink-600" />
                Performance and Attendance Trends
              </CardTitle>
            </CardHeader>
            <CardContent className="p-4 sm:p-6">
              <div className="h-[300px] sm:h-[400px]">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart data={data}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#fce7f3" />
                    <XAxis dataKey="name" stroke="#db2777" fontSize={12} />
                    <YAxis stroke="#db2777" fontSize={12} />
                    <Tooltip
                      contentStyle={{
                        backgroundColor: "#fff",
                        borderColor: "#fbcfe8",
                        fontSize: "12px",
                      }}
                    />
                    <Line
                      type="monotone"
                      dataKey="performance"
                      stroke="#ec4899"
                      strokeWidth={2}
                      activeDot={{ r: 8 }}
                      name="Performance"
                    />
                    <Line type="monotone" dataKey="attendance" stroke="#f472b6" strokeWidth={2} name="Attendance" />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 mb-6 sm:mb-8">
            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}>
              <Card className="hover:shadow-lg transition-shadow duration-300 border-pink-200 bg-gradient-to-br from-white to-pink-50">
                <CardHeader className="border-b border-pink-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-pink-800">
                    <Clock className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-pink-600" />
                    <span className="truncate">Exam Timetable</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-pink-500 hover:bg-pink-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/student/exam-timetable")}
                  >
                    View Exam Timetable
                  </Button>
                </CardContent>
              </Card>
            </motion.div>

<motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.1 }}
            >
              <Card className="hover:shadow-lg transition-shadow duration-300 border-pink-200 bg-gradient-to-br from-white to-pink-50">
                <CardHeader className="border-b border-pink-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-pink-800">
                    <Calendar className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-pink-600" />
                    <span className="truncate">Regular Timetable</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-pink-500 hover:bg-pink-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/student/regular-timetable")}
                  >
                    View Regular Timetable
                  </Button>
                </CardContent>
              </Card>
            </motion.div>

<motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.2 }}
            >
              <Card className="hover:shadow-lg transition-shadow duration-300 border-pink-200 bg-gradient-to-br from-white to-pink-50">
                <CardHeader className="border-b border-pink-100 p-4">
                  <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold flex items-center text-pink-800">
                    <Activity className="mr-2 h-4 w-4 sm:h-5 sm:w-5 text-pink-600" />
                    <span className="truncate">Activities</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="p-4">
                  <Button
                    className="w-full bg-pink-500 hover:bg-pink-600 text-white shadow-sm text-xs sm:text-sm"
                    onClick={() => router.push("/student/activities")}
                  >
                    View Activities
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </main>
      </div>
    </div>
  )
}</article></body></html>