[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]plaintext:file="Accounts/AdminAccounts.txt" isMerged="true" =========================================== ADMIN ACCOUNTS =========================================== Last Updated: 11/14/2025, 6:13:20 PM Account 1: ----------- Name: Admin User Email: admin@test.com Password: Admin123! ID: 1762957360836_9fre45pzu Account 2: ----------- Name: Masha Kujou Email: MashaKujou@admin.com Password: MashaKujou09 ID: admin_1763112146259 [V0_FILE]plaintext:file="Accounts/StudentAccounts.txt" isMerged="true" =========================================== STUDENT ACCOUNTS =========================================== Last Updated: 11/14/2025, 6:16:30 PM Account 1: ----------- Name: Masha Kujou Email: MashaKujou@gmail.com Password: MashaKujou09 ID: STU1762956357172 Status: pending Academic Level: undefined Year: undefined Course/Strand: N/A Account 2: ----------- Name: Masha Kujou Email: MariaKujou@gmail.com Password: MashaKujou09 ID: STU1762957079165 Status: approved Academic Level: diploma Year: 3 Course/Strand: DIT Account 3: ----------- Name: Maria Student Email: student_senior@test.com Password: Student123! ID: 1762957360841_s9i30p1u4 Status: approved Academic Level: senior_high Year: undefined Course/Strand: STEM Account 4: ----------- Name: Juan Diploma Email: student_diploma@test.com Password: Student123! ID: 1762957360841_4k1kdbhkp Status: approved Academic Level: diploma Year: 2 Course/Strand: DIT Account 5: ----------- Name: Ana Bachelor Email: student_bachelor@test.com Password: Student123! ID: 1762957360841_zj51rrqqo Status: approved Academic Level: bachelor Year: 3 Course/Strand: BTVTED [V0_FILE]plaintext:file="Accounts/TeacherAccounts.txt" isMerged="true" =========================================== TEACHER ACCOUNTS =========================================== Last Updated: 11/14/2025, 6:37:29 PM Account 1: ----------- Name: John Instructor Email: teacher@test.com Password: Teacher123! ID: 1762957360840_0dnak2s8m Department: Information Technology Subjects: Web Development,Database [V0_FILE]markdown:file="README.md" isMerged="true" # Student portal structure *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/emre08266-3823s-projects/v0-student-portal-structure) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/mkzwZZPXsU0) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/emre08266-3823s-projects/v0-student-portal-structure](https://vercel.com/emre08266-3823s-projects/v0-student-portal-structure)** ## Build your app Continue building your app on: **[https://v0.app/chat/mkzwZZPXsU0](https://v0.app/chat/mkzwZZPXsU0)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { AdminAnalytics } from "@/app/components/admin/analytics" export default function AdminAnalyticsPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/classes/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { AddClasses } from "@/app/components/admin/add-classes" export default function AdminClassesPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/college-courses/page.tsx" isMerged="true" "use client" import { ProtectedRoute } from "@/app/components/shared/protected-route" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { CollegeCourses } from "@/app/components/admin/college-courses" export default function CollegeCoursesPage() { return (

College Course Management

Add or remove diploma and bachelor program courses

) } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { AdminDashboardHome } from "@/app/components/admin/dashboard-home" export default function AdminDashboardPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/grade-approval/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { GradeApproval } from "@/app/components/admin/grade-approval" export default function GradeApprovalPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/messages/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { AdminMessages } from "@/app/components/admin/messages" export default function AdminMessagesPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/pending-registrations/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { PendingRegistrations } from "@/app/components/admin/pending-registrations" export default function PendingRegistrationsPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/requests/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { RequestManagement } from "@/app/components/admin/request-management" export default function RequestManagementPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { AdminSettings } from "@/app/components/admin/admin-settings" export default function AdminSettingsPage() { return ( ) } [V0_FILE]typescriptreact:file="app/admin/user-management/page.tsx" isMerged="true" import { AdminDashboard } from "@/app/components/admin/admin-dashboard" import { UserManagement } from "@/app/components/admin/user-management" export default function UserManagementPage() { return ( ) } [V0_FILE]typescriptreact:file="app/components/admin/add-classes.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { adminService } from "@/app/services/admin-service" import { userStorage, subjectStorage } from "@/lib/storage" import { useMemo, useState } from "react" import { ACADEMIC_LEVELS, SENIOR_HIGH_GRADES, DIPLOMA_YEARS, BACHELOR_YEARS, SENIOR_HIGH_STRANDS, } from "@/lib/constants" import { collegeCoursesStorage } from "@/lib/storage" export const AddClasses = () => { const [subjectCode, setSubjectCode] = useState("") const [selectedSubject, setSelectedSubject] = useState(null) const [selectedTeacher, setSelectedTeacher] = useState("") const [semester, setSemester] = useState("1") const [year, setYear] = useState("1") const [newCode, setNewCode] = useState("") const [newName, setNewName] = useState("") const [newTime, setNewTime] = useState("") const [newDay, setNewDay] = useState("") const [newUnit, setNewUnit] = useState("") const [refreshKey, setRefreshKey] = useState(0) const [bulkAcademicLevel, setBulkAcademicLevel] = useState("") const [bulkCourse, setBulkCourse] = useState("") const [bulkYear, setBulkYear] = useState("") const [bulkClassId, setBulkClassId] = useState("") const [bulkEnrollMessage, setBulkEnrollMessage] = useState("") const [attendanceSearchId, setAttendanceSearchId] = useState("") const [attendanceRecords, setAttendanceRecords] = useState([]) const [attendanceSearched, setAttendanceSearched] = useState(false) const [selectedRecordId, setSelectedRecordId] = useState(null) const [statusFilter, setStatusFilter] = useState<"all" | "present" | "absent" | "late">("all") const [academicLevelFilter, setAcademicLevelFilter] = useState("") const [yearFilter, setYearFilter] = useState("") const [selectedClassStudents, setSelectedClassStudents] = useState([]) const [isStudentModalOpen, setIsStudentModalOpen] = useState(false) const [selectedClassName, setSelectedClassName] = useState("") const [isBulkStudentModalOpen, setIsBulkStudentModalOpen] = useState(false) const subjects = useMemo(() => { return subjectStorage.getAll() }, [refreshKey]) const teachers = useMemo(() => { return userStorage.getTeachers() }, []) const classes = useMemo(() => { return adminService.getAllClasses() }, [refreshKey]) const availableCourses = useMemo(() => { if (bulkAcademicLevel === ACADEMIC_LEVELS.SENIOR_HIGH) { return SENIOR_HIGH_STRANDS } else if (bulkAcademicLevel === ACADEMIC_LEVELS.DIPLOMA) { return collegeCoursesStorage.getAll().diplomaCourses } else if (bulkAcademicLevel === ACADEMIC_LEVELS.BACHELOR) { return collegeCoursesStorage.getAll().bachelorCourses } return [] }, [bulkAcademicLevel]) const availableYears = useMemo(() => { if (bulkAcademicLevel === ACADEMIC_LEVELS.SENIOR_HIGH) { return SENIOR_HIGH_GRADES } else if (bulkAcademicLevel === ACADEMIC_LEVELS.DIPLOMA) { return DIPLOMA_YEARS } else if (bulkAcademicLevel === ACADEMIC_LEVELS.BACHELOR) { return BACHELOR_YEARS } return [] }, [bulkAcademicLevel]) const matchingStudents = useMemo(() => { if (!bulkAcademicLevel || !bulkCourse || !bulkYear) return [] const allStudents = userStorage.getStudents() if (bulkAcademicLevel === ACADEMIC_LEVELS.SENIOR_HIGH) { return allStudents.filter( (s) => s.academicLevel === ACADEMIC_LEVELS.SENIOR_HIGH && s.strand === bulkCourse && s.grade === bulkYear && s.status === "approved", ) } else if (bulkAcademicLevel === ACADEMIC_LEVELS.DIPLOMA) { return allStudents.filter( (s) => s.academicLevel === ACADEMIC_LEVELS.DIPLOMA && s.course === bulkCourse && s.year === bulkYear && s.status === "approved", ) } else if (bulkAcademicLevel === ACADEMIC_LEVELS.BACHELOR) { return allStudents.filter( (s) => s.academicLevel === ACADEMIC_LEVELS.BACHELOR && s.course === bulkCourse && s.year === bulkYear && s.status === "approved", ) } return [] }, [bulkAcademicLevel, bulkCourse, bulkYear]) const handleSearchSubject = () => { const found = subjectStorage.getByCode(subjectCode) setSelectedSubject(found || null) } const handleAddClass = () => { if (selectedSubject && selectedTeacher) { adminService.addClass(selectedSubject.code, selectedTeacher, semester, year) setSelectedSubject(null) setSelectedTeacher("") setSemester("1") setYear("1") setSubjectCode("") setRefreshKey((k) => k + 1) } } const handleCreateSubject = () => { if (newCode && newName && newTime && newDay && newUnit) { adminService.createSubject(newCode, newName, newTime, newDay, newUnit) setNewCode("") setNewName("") setNewTime("") setNewDay("") setNewUnit("") setRefreshKey((k) => k + 1) } } const handleDeleteSubject = (id: string) => { adminService.deleteSubject(id) setRefreshKey((k) => k + 1) } const handleBulkEnroll = () => { if (!bulkAcademicLevel || !bulkCourse || !bulkYear || !bulkClassId) { setBulkEnrollMessage("Please fill in all fields") return } adminService.bulkEnrollStudents( bulkClassId, matchingStudents.map((s) => s.id), ) setBulkEnrollMessage(`Successfully enrolled ${matchingStudents.length} students`) setTimeout(() => { setBulkEnrollMessage("") setBulkAcademicLevel("") setBulkCourse("") setBulkYear("") setBulkClassId("") setRefreshKey((k) => k + 1) }, 2000) } const handleSearchAttendance = () => { const allAttendance = JSON.parse(localStorage.getItem("attendance") || "[]") const filtered = attendanceSearchId ? allAttendance.filter((att: any) => att.id.toLowerCase().includes(attendanceSearchId.toLowerCase()) || att.classId.toLowerCase().includes(attendanceSearchId.toLowerCase()) ) : allAttendance setAttendanceRecords(filtered) setAttendanceSearched(true) setStatusFilter("all") setSelectedRecordId(null) } const handleStatusFilterClick = (recordId: string, status: "present" | "absent" | "late") => { if (selectedRecordId === recordId && statusFilter === status) { setStatusFilter("all") setSelectedRecordId(null) } else { setStatusFilter(status) setSelectedRecordId(recordId) } } const getFilteredStudents = (record: any) => { let filtered = record.records if (selectedRecordId === record.id && statusFilter !== "all") { filtered = filtered.filter((r: any) => r.status === statusFilter) } if (academicLevelFilter || yearFilter) { const allStudents = userStorage.getStudents() filtered = filtered.filter((r: any) => { const student = allStudents.find((s) => s.id === r.studentId) if (!student) return false let matches = true if (academicLevelFilter && student.academicLevel !== academicLevelFilter) { matches = false } if (yearFilter) { const studentYear = student.year || student.grade if (studentYear !== yearFilter) { matches = false } } return matches }) } return filtered } const handleViewStudents = (classData: any) => { const allStudents = userStorage.getStudents() const enrolledStudents = classData.students .map((studentId: string) => allStudents.find((s) => s.id === studentId)) .filter(Boolean) .sort((a: any, b: any) => { const nameA = `${a.firstName} ${a.lastName}`.toLowerCase() const nameB = `${b.firstName} ${b.lastName}`.toLowerCase() return nameA.localeCompare(nameB) }) setSelectedClassStudents(enrolledStudents) setSelectedClassName(`${classData.subjectCode} - ${classData.subjectName}`) setIsStudentModalOpen(true) } const handleViewBulkStudents = () => { const sortedStudents = [...matchingStudents].sort((a, b) => { const nameA = `${a.firstName} ${a.lastName}`.toLowerCase() const nameB = `${b.firstName} ${b.lastName}`.toLowerCase() return nameA.localeCompare(nameB) }) setSelectedClassStudents(sortedStudents) setSelectedClassName(`${bulkAcademicLevel} - ${bulkCourse} (Year ${bulkYear})`) setIsBulkStudentModalOpen(true) } return (

Classes & Subjects

Manage subjects and create class sections

Add Class Bulk Enroll Students Manage Subjects View Classes Attendance Create Class Section Add a new class by selecting subject and teacher

Search Subject by Code

setSubjectCode(e.target.value.toUpperCase())} />

{selectedSubject && (

Subject Found

Code: {selectedSubject.code}

Name: {selectedSubject.name}

Time: {selectedSubject.time}

Day: {selectedSubject.day}

)} {selectedSubject && ( <>

Select Teacher

Semester

Year/Level

)} Bulk Enroll Students Enroll multiple students to a class based on academic level, course, and year

Select Academic Level

{bulkAcademicLevel && (

Select {bulkAcademicLevel === ACADEMIC_LEVELS.SENIOR_HIGH ? "Strand" : "Course Program"}

)} {bulkAcademicLevel && bulkCourse && (

Select Year/Level

)} {bulkAcademicLevel && bulkCourse && bulkYear && ( <>

{matchingStudents.length} Students Found

These students will be enrolled to the selected class

Select Class to Enroll In

{bulkEnrollMessage && (

{bulkEnrollMessage}

)} )}

Create Subject setNewCode(e.target.value.toUpperCase())} /> setNewName(e.target.value)} /> setNewTime(e.target.value)} /> setNewUnit(e.target.value)} /> Subject List {subjects.length === 0 ? (

No subjects created yet

) : (

{subjects.map((subject) => (

{subject.code}

{subject.name}

{subject.day} • {subject.time}

))}

)}

All Classes Classes created from subjects {classes.length === 0 ? (

No classes created yet

) : (

{classes.map((cls) => { const allStudents = userStorage.getStudents() const existingStudents = cls.students.filter((studentId: string) => allStudents.find((s) => s.id === studentId) ) const studentCount = existingStudents.length return (

{cls.subjectCode} - {cls.subjectName}

Teacher: {cls.teacherName}

Semester {cls.semester} • Year {cls.year} • {cls.day} at {cls.time}

{studentCount === 0 ? 'No Students' : `${studentCount} ${studentCount === 1 ? 'Student' : 'Students'} Found` }

) })}

)} View Attendance Records Search and view attendance by ID or view all records Filter Students

Academic Level

Year/Grade

{(academicLevelFilter || yearFilter) && ( )}

setAttendanceSearchId(e.target.value)} />

{attendanceSearched && (

{attendanceRecords.length === 0 ? (

No attendance records found

) : (

Found {attendanceRecords.length} attendance record(s)

{attendanceRecords.map((record) => { const filteredStudents = getFilteredStudents(record) // Hide entire record if no students match the filters if (filteredStudents.length === 0 && (academicLevelFilter || yearFilter)) { return null } const presentCount = filteredStudents.filter((r: any) => r.status === "present").length const absentCount = filteredStudents.filter((r: any) => r.status === "absent").length const lateCount = filteredStudents.filter((r: any) => r.status === "late").length return (

Attendance #{record.id} Date: {new Date(record.date).toLocaleDateString()}

{record.subjectCode}

{record.className}

{selectedRecordId === record.id && statusFilter !== "all" && (

Showing only {statusFilter} students

)} {(academicLevelFilter || yearFilter) && (

Filtered by:{" "} {academicLevelFilter && ( {academicLevelFilter === ACADEMIC_LEVELS.SENIOR_HIGH ? "Senior High" : academicLevelFilter === ACADEMIC_LEVELS.DIPLOMA ? "Diploma" : "Bachelor"} )} {academicLevelFilter && yearFilter && " • "} {yearFilter && Year/Grade {yearFilter}}

)}

{filteredStudents.length === 0 ? ( ) : ( filteredStudents.map((student: any, idx: number) => ( )) )}

Student Name	Status
No students match the selected filters
{student.studentName}	{student.status.toUpperCase()}

) })}

)}

)} Students Enrolled in {selectedClassName}

{selectedClassStudents.length === 0 ? (

No students enrolled yet

) : (

Total: {selectedClassStudents.length} {selectedClassStudents.length === 1 ? 'student' : 'students'}

{selectedClassStudents.map((student: any, idx: number) => ( ))}

#	Student Name	Email	Course/Strand
{idx + 1}	{student.firstName} {student.lastName}	{student.email}	{student.academicLevel === ACADEMIC_LEVELS.SENIOR_HIGH ? student.strand : student.course}

)}

Students to be Enrolled - {selectedClassName}

{selectedClassStudents.length === 0 ? (

No students found

) : (

Total: {selectedClassStudents.length} {selectedClassStudents.length === 1 ? 'student' : 'students'}

{selectedClassStudents.map((student: any, idx: number) => ( ))}

#	Student Name	Email	Course/Strand
{idx + 1}	{student.firstName} {student.lastName}	{student.email}	{student.academicLevel === ACADEMIC_LEVELS.SENIOR_HIGH ? student.strand : student.course}

)}

) } [V0_FILE]typescriptreact:file="app/components/admin/admin-dashboard.tsx" isMerged="true" "use client" import type React from "react" import { ProtectedRoute } from "@/app/components/shared/protected-route" import { Navbar } from "@/app/components/shared/navbar" import { Sidebar } from "@/app/components/shared/sidebar" import { useAuth } from "@/app/contexts/auth-context" interface AdminDashboardProps { children: React.ReactNode } export const AdminDashboard: React.FC = ({ children }) => { const { user } = useAuth() const sidebarItems = [ { label: "Dashboard", href: "/admin/dashboard" }, { label: "Pending Registrations", href: "/admin/pending-registrations" }, { label: "User Management", href: "/admin/user-management" }, { label: "Classes & Subjects", href: "/admin/classes" }, { label: "Grade Approval", href: "/admin/grade-approval" }, { label: "Request Management", href: "/admin/requests" }, { label: "Student Messages", href: "/admin/messages" }, { label: "Financial Management", href: "/admin/financial" }, { label: "Library Management", href: "/admin/library" }, { label: "Notifications", href: "/admin/notifications" }, { label: "Feedback", href: "/admin/feedback" }, { label: "Analytics", href: "/admin/analytics" }, { label: "Archive Management", href: "/admin/archives" }, { label: "Settings", href: "/admin/settings" }, ] return (

{children}

) } [V0_FILE]typescriptreact:file="app/components/admin/admin-settings.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useState, useEffect } from "react" import { Settings, UserPlus, Trash2 } from 'lucide-react' import { userStorage, type Admin } from "@/lib/storage" import { validateEmail, validatePassword } from "@/lib/validation" import { ExportAccounts } from './export-accounts' export const AdminSettings = () => { const [newCollegerCourse, setNewCollegerCourse] = useState("") const [settings, setSettings] = useState({ systemName: "Student Portal", maintenanceMode: false, }) const [admins, setAdmins] = useState([]) const [showAddAdmin, setShowAddAdmin] = useState(false) const [adminForm, setAdminForm] = useState({ email: "", password: "", firstName: "", lastName: "", }) const [errors, setErrors] = useState>({}) // Load admins on mount useEffect(() => { const loadedAdmins = userStorage.getAdmins() setAdmins(loadedAdmins) }, []) const handleSaveSettings = () => { localStorage.setItem("adminSettings", JSON.stringify(settings)) } const handleAddAdmin = () => { setErrors({}) // Validate email if (!validateEmail(adminForm.email).valid) { setErrors({ email: "Invalid email address" }) return } // Validate password const passwordValidation = validatePassword(adminForm.password) if (!passwordValidation.valid) { setErrors({ password: passwordValidation.errors[0] }) return } // Validate names if (!adminForm.firstName.trim()) { setErrors({ firstName: "First name is required" }) return } if (!adminForm.lastName.trim()) { setErrors({ lastName: "Last name is required" }) return } try { const newAdmin: Admin = { id: `admin_${Date.now()}`, email: adminForm.email, password: adminForm.password, firstName: adminForm.firstName, lastName: adminForm.lastName, role: "admin", permissions: ["manage_users", "manage_requests", "view_analytics"], status: "active", registeredAt: new Date().toISOString(), } userStorage.addAdmin(newAdmin) setAdmins(userStorage.getAdmins()) setAdminForm({ email: "", password: "", firstName: "", lastName: "" }) setShowAddAdmin(false) alert("Admin account created successfully!") } catch (error) { setErrors({ form: error instanceof Error ? error.message : "Failed to create admin account" }) } } const handleDeleteAdmin = (adminId: string) => { if (confirm("Are you sure you want to delete this admin account?")) { try { userStorage.deleteAdmin(adminId) setAdmins(userStorage.getAdmins()) alert("Admin account deleted successfully!") } catch (error) { alert("Failed to delete admin account") } } } return (

Admin Settings

Configure system settings and preferences

{/* Export Accounts */} {/* Admin Account Management */} Admin Account Management Manage admin accounts and permissions {/* Add Admin Form */} {showAddAdmin && (

Create New Admin Account

First Name setAdminForm({ ...adminForm, firstName: e.target.value })} placeholder="First name" /> {errors.firstName &&

{errors.firstName}

}

Last Name setAdminForm({ ...adminForm, lastName: e.target.value })} placeholder="Last name" /> {errors.lastName &&

{errors.lastName}

}

Email setAdminForm({ ...adminForm, email: e.target.value })} placeholder="admin@example.com" /> {errors.email &&

{errors.email}

}

Password setAdminForm({ ...adminForm, password: e.target.value })} placeholder="Minimum 8 characters" /> {errors.password &&

{errors.password}

}

{errors.form && (

{errors.form}

)}

)} {/* Existing Admins List */}

Current Admin Accounts ({admins.length})

{admins.length === 0 ? (

No admin accounts found.

) : (

{admins.map((admin) => (

{admin.firstName} {admin.lastName}

{admin.email}

Role: {admin.role} | Status: {admin.status}

))}

)}

{/* System Settings */} System Settings General system configuration

System Name setSettings({ ...settings, systemName: e.target.value })} placeholder="e.g., Student Portal" />

Maintenance Mode

Enable to restrict user access

setSettings({ ...settings, maintenanceMode: e.target.checked })} className="w-4 h-4" /> {settings.maintenanceMode ? "On" : "Off"}

{/* Notification Settings */} Notification Settings Configure when admins receive notifications Notify on new registration Notify on new student request Notify on new message

) } [V0_FILE]typescriptreact:file="app/components/admin/college-courses.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { collegeCoursesStorage } from "@/lib/storage" export const CollegeCourses = () => { const [diplomaCourses, setDiplomaCourses] = useState([]) const [bachelorCourses, setBachelorCourses] = useState([]) const [newDiplomaCourse, setNewDiplomaCourse] = useState("") const [newBachelorCourse, setNewBachelorCourse] = useState("") const [isLoading, setIsLoading] = useState(false) useEffect(() => { const courses = collegeCoursesStorage.getAll() setDiplomaCourses(courses.diplomaCourses) setBachelorCourses(courses.bachelorCourses) }, []) const handleAddDiplomaCourse = () => { if (newDiplomaCourse.trim()) { if (diplomaCourses.includes(newDiplomaCourse.toUpperCase())) { alert("This course already exists") return } const updated = [...diplomaCourses, newDiplomaCourse.toUpperCase()] setDiplomaCourses(updated) collegeCoursesStorage.update(updated, bachelorCourses) setNewDiplomaCourse("") } } const handleRemoveDiplomaCourse = (course: string) => { const updated = diplomaCourses.filter((c) => c !== course) setDiplomaCourses(updated) collegeCoursesStorage.update(updated, bachelorCourses) } const handleAddBachelorCourse = () => { if (newBachelorCourse.trim()) { if (bachelorCourses.includes(newBachelorCourse.toUpperCase())) { alert("This course already exists") return } const updated = [...bachelorCourses, newBachelorCourse.toUpperCase()] setBachelorCourses(updated) collegeCoursesStorage.update(diplomaCourses, updated) setNewBachelorCourse("") } } const handleRemoveBachelorCourse = (course: string) => { const updated = bachelorCourses.filter((c) => c !== course) setBachelorCourses(updated) collegeCoursesStorage.update(diplomaCourses, updated) } return (

Diploma Courses (3 Years) Manage available diploma program courses

setNewDiplomaCourse(e.target.value)} onKeyPress={(e) => { if (e.key === "Enter") handleAddDiplomaCourse() }} />

{diplomaCourses.map((course) => (

{course}

))}

Bachelor Courses (4 Years) Manage available bachelor program courses

setNewBachelorCourse(e.target.value)} onKeyPress={(e) => { if (e.key === "Enter") handleAddBachelorCourse() }} />

{bachelorCourses.map((course) => (

{course}

))}

) } [V0_FILE]typescriptreact:file="app/components/admin/dashboard-home.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { adminService } from "@/app/services/admin-service" import { useMemo } from "react" import Link from "next/link" export const AdminDashboardHome = () => { const stats = useMemo(() => { return adminService.getSystemStatistics() }, []) return (

Admin Dashboard

System administration and management

Total Students

{stats.totalStudents}

{stats.approvedStudents} approved

Pending Approvals

{stats.pendingStudents}

Awaiting review

Teachers

{stats.totalTeachers}

{stats.activeTeachers} active

Admins

{stats.totalAdmins}

Quick Actions Common administrative tasks

) } [V0_FILE]typescriptreact:file="app/components/admin/export-accounts.tsx" isMerged="true" 'use client' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Download } from 'lucide-react' import { userStorage } from '@/lib/storage' export function ExportAccounts() { const exportToFile = (data: string, filename: string) => { const blob = new Blob([data], { type: 'text/plain' }) const url = URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = filename document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) } const exportAdmins = () => { const admins = userStorage.getAdmins() let content = '===========================================\n' content += 'ADMIN ACCOUNTS\n' content += '===========================================\n' content += `Last Updated: ${new Date().toLocaleString()}\n\n` admins.forEach((admin, index) => { content += `Account ${index + 1}:\n` content += '-----------\n' content += `Name: ${admin.firstName} ${admin.lastName}\n` content += `Email: ${admin.email}\n` content += `Password: ${admin.password}\n` content += `ID: ${admin.id}\n\n` }) exportToFile(content, 'AdminAccounts.txt') } const exportTeachers = () => { const teachers = userStorage.getTeachers() let content = '===========================================\n' content += 'TEACHER ACCOUNTS\n' content += '===========================================\n' content += `Last Updated: ${new Date().toLocaleString()}\n\n` teachers.forEach((teacher, index) => { content += `Account ${index + 1}:\n` content += '-----------\n' content += `Name: ${teacher.firstName} ${teacher.lastName}\n` content += `Email: ${teacher.email}\n` content += `Password: ${teacher.password}\n` content += `ID: ${teacher.id}\n` content += `Department: ${teacher.department || 'N/A'}\n` content += `Subjects: ${teacher.subjects || 'N/A'}\n\n` }) exportToFile(content, 'TeacherAccounts.txt') } const exportStudents = () => { const students = userStorage.getStudents() let content = '===========================================\n' content += 'STUDENT ACCOUNTS\n' content += '===========================================\n' content += `Last Updated: ${new Date().toLocaleString()}\n\n` students.forEach((student, index) => { content += `Account ${index + 1}:\n` content += '-----------\n' content += `Name: ${student.firstName} ${student.lastName}\n` content += `Email: ${student.email}\n` content += `Password: ${student.password}\n` content += `ID: ${student.id}\n` content += `Status: ${student.status}\n` content += `Academic Level: ${student.academicLevel}\n` content += `Year: ${student.year}\n` content += `Course/Strand: ${student.course || student.strand || 'N/A'}\n\n` }) exportToFile(content, 'StudentAccounts.txt') } const exportAll = () => { exportAdmins() setTimeout(() => exportTeachers(), 100) setTimeout(() => exportStudents(), 200) } const updateAccountFiles = () => { // Note: Browser can't directly write to project files, but we'll export them for download // Admin can then replace the files in Accounts folder manually exportAll() alert('Account files have been exported! Please replace the files in the Accounts folder with the downloaded versions.') } return ( Export Account Credentials Download current account data as text files for easy reference

This will download all account files. Save them to the Accounts folder to keep files updated.

Note: Exported files will contain plain text passwords. Keep them secure.

) } [V0_FILE]typescriptreact:file="app/components/admin/grade-approval.tsx" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { useState, useEffect } from "react" import { gradesStorage, userStorage, type Grade } from "@/lib/storage" import { useAuth } from "@/app/contexts/auth-context" export const GradeApproval = () => { const { user } = useAuth() const [pendingGrades, setPendingGrades] = useState([]) const [selectedGrade, setSelectedGrade] = useState(null) const [rejectReason, setRejectReason] = useState("") const [filterSemester, setFilterSemester] = useState("all") const [filterTerm, setFilterTerm] = useState("all") useEffect(() => { loadPendingGrades() }, [filterSemester, filterTerm]) const loadPendingGrades = () => { let grades = gradesStorage.getPendingApproval() if (filterSemester !== "all") { grades = grades.filter((g) => g.semester === filterSemester) } if (filterTerm !== "all") { grades = grades.filter((g) => g.term === filterTerm) } setPendingGrades(grades) } const handleApprove = (gradeId: string) => { gradesStorage.update(gradeId, { status: "approved", approvedAt: new Date().toISOString(), approvedBy: user?.id, }) loadPendingGrades() setSelectedGrade(null) alert("Grade approved successfully!") } const handleReject = (gradeId: string) => { if (!rejectReason.trim()) { alert("Please provide a reason for rejection") return } gradesStorage.update(gradeId, { status: "rejected", rejectedReason: rejectReason, approvedAt: new Date().toISOString(), approvedBy: user?.id, }) loadPendingGrades() setSelectedGrade(null) setRejectReason("") alert("Grade rejected") } const getStudentName = (studentId: string) => { const student = userStorage.getStudents().find((s) => s.id === studentId) return student ? `${student.firstName} ${student.lastName}` : "Unknown Student" } return (

Grade Approval

Review and approve submitted grades

Filter by Semester

Filter by Term

Pending Grade Approvals ({pendingGrades.length}) Review grades submitted by teachers {pendingGrades.length === 0 ? (

No pending grade approvals

) : (

{pendingGrades.map((grade) => (

{grade.subjectCode} - {grade.subjectName}

Student: {getStudentName(grade.studentId)}

Teacher: {grade.teacherName}

{grade.semester} {grade.term} Score: {grade.score}

{grade.submittedAt && (

Submitted: {new Date(grade.submittedAt).toLocaleString()}

)}

{selectedGrade?.id === grade.id ? (

Reason for Rejection (optional)

setRejectReason(e.target.value)}
                          className="w-full px-3 py-2 border border-input rounded-md bg-background"
                          rows={2}
                          placeholder="Provide feedback if rejecting..."
                        />
                      </div>
                      <div className="flex gap-2">
                        <Button onClick={() => handleApprove(grade.id)} className="flex-1" variant="default">
                          Approve
                        </Button>
                        <Button onClick={() => handleReject(grade.id)} className="flex-1" variant="destructive">
                          Reject
                        </Button>
                        <Button onClick={() => setSelectedGrade(null)} variant="outline">
                          Cancel
                        </Button>
                      </div>
                    </div>
                  ) : (
                    <Button onClick={() => setSelectedGrade(grade)} className="w-full mt-2">
                      Review Grade
                    </Button>
                  )}
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/admin/messages.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { messagingService } from "@/app/services/messaging-service"
import { useState, useEffect } from "react"
import { formatDate } from "@/lib/formatters"
import { userStorage } from "@/lib/storage"

export const AdminMessages = () => {
  const [selectedMessage, setSelectedMessage] = useState<string | null>(null)
  const [messages, setMessages] = useState<any[]>([])
  const [replyText, setReplyText] = useState("")
  const [sending, setSending] = useState(false)

useEffect(() => {
    const fetchMessages = () => {
      const inbox = messagingService.getInbox("ADMIN") || []
      // Get sender info for each message
      const messagesWithSender = inbox.map((msg) => {
        const students = userStorage.getStudents()
        const sender = students.find((s) => s.id === msg.senderId)
        return {
          ...msg,
          senderName: sender ? `${sender.firstName} ${sender.lastName}` : "Unknown Student",
          senderEmail: sender?.email || "N/A",
        }
      })
      setMessages(messagesWithSender)
    }

fetchMessages()
    const interval = setInterval(fetchMessages, 3000)
    return () => clearInterval(interval)
  }, [])

const selectedMsg = messages.find((m) => m.id === selectedMessage)

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

setSending(true)
    try {
      messagingService.sendMessage({
        senderId: "ADMIN",
        receiverId: selectedMsg.senderId,
        subject: `Re: ${selectedMsg.subject}`,
        content: replyText,
      })
      setReplyText("")
      alert("Reply sent successfully!")
    } catch (error) {
      alert("Failed to send reply")
    } finally {
      setSending(false)
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Student Messages</h1>
        <p className="text-muted-foreground">View and reply to inquiries from students</p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <Card className="lg:col-span-1">
          <CardHeader>
            <CardTitle>Inbox</CardTitle>
            <CardDescription>{messages.length} messages</CardDescription>
          </CardHeader>
          <CardContent>
            {messages.length === 0 ? (
              <p className="text-muted-foreground text-center py-8">No messages</p>
            ) : (
              <div className="space-y-2">
                {messages.map((msg) => (
                  <button
                    key={msg.id}
                    onClick={() => setSelectedMessage(msg.id)}
                    className={`w-full text-left p-3 rounded-lg border ${
                      selectedMessage === msg.id
                        ? "bg-primary text-primary-foreground border-primary"
                        : "border-border hover:bg-muted"
                    }`}
                  >
                    <p className="font-semibold text-sm">{msg.senderName}</p>
                    <p className="font-sm text-sm truncate opacity-75">{msg.subject}</p>
                    <p className="text-xs opacity-75">{formatDate(msg.createdAt)}</p>
                  </button>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

<Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>Message Details</CardTitle>
          </CardHeader>
          <CardContent>
            {selectedMsg ? (
              <div className="space-y-4">
                <div className="p-4 bg-muted rounded-lg">
                  <p className="text-sm text-muted-foreground">From</p>
                  <p className="font-semibold">{selectedMsg.senderName}</p>
                  <p className="text-sm text-muted-foreground">{selectedMsg.senderEmail}</p>
                </div>

<div>
                  <p className="text-sm text-muted-foreground">Subject</p>
                  <p className="font-semibold">{selectedMsg.subject}</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Date</p>
                  <p>{formatDate(selectedMsg.createdAt)}</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">Message</p>
                  <p className="mt-2 p-4 bg-muted rounded-lg whitespace-pre-wrap">{selectedMsg.content}</p>
                </div>

<div className="border-t pt-4 space-y-3">
                  <p className="text-sm font-semibold">Reply to Student</p>
                  <Textarea
                    placeholder="Type your reply here..."
                    value={replyText}
                    onChange={(e) => setReplyText(e.target.value)}
                    rows={4}
                    className="w-full"
                  />
                  <div className="flex gap-2">
                    <Button onClick={handleReply} disabled={sending || !replyText.trim()}>
                      {sending ? "Sending..." : "Send Reply"}
                    </Button>
                    <Button variant="outline" onClick={() => messagingService.markAsRead(selectedMsg.id)}>
                      Mark as Read
                    </Button>
                  </div>
                </div>
              </div>
            ) : (
              <p className="text-muted-foreground text-center py-12">Select a message to view</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/admin/pending-registrations.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { adminService } from "@/app/services/admin-service"
import { useMemo, useState } from "react"
import { formatDate } from "@/lib/formatters"

export const PendingRegistrations = () => {
  const [refreshKey, setRefreshKey] = useState(0)

const pendingStudents = useMemo(() => {
    return adminService.getPendingStudents()
  }, [refreshKey])

const handleApprove = (studentId: string) => {
    adminService.approveStudent(studentId)
    setRefreshKey((k) => k + 1)
  }

const handleReject = (studentId: string) => {
    adminService.rejectStudent(studentId)
    setRefreshKey((k) => k + 1)
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Pending Registrations</h1>
        <p className="text-muted-foreground">Review and approve new student registrations</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Student Registration Requests</CardTitle>
          <CardDescription>Approve or reject pending registrations</CardDescription>
        </CardHeader>
        <CardContent>
          {pendingStudents.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No pending registrations</p>
          ) : (
            <div className="space-y-3">
              {pendingStudents.map((student) => (
                <div key={student.id} className="p-4 border border-border rounded-lg hover:bg-muted">
                  <div className="flex items-start justify-between mb-3">
                    <div>
                      <p className="font-semibold">
                        {student.firstName} {student.lastName}
                      </p>
                      <p className="text-sm text-muted-foreground">{student.email}</p>
                      <p className="text-xs text-muted-foreground mt-1">
                        Grade {student.grade} - Section {student.section}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-xs text-muted-foreground">Registered: {formatDate(student.registeredAt)}</p>
                    </div>
                  </div>

<div className="flex gap-2">
                    <Button
                      size="sm"
                      onClick={() => handleApprove(student.id)}
                      className="bg-green-600 hover:bg-green-700"
                    >
                      Approve
                    </Button>
                    <Button size="sm" variant="destructive" onClick={() => handleReject(student.id)}>
                      Reject
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/admin/request-management.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { adminService } from "@/app/services/admin-service"
import { userStorage } from "@/lib/storage"
import { useMemo, useState } from "react"
import { formatDate } from "@/lib/formatters"
import { REQUEST_TYPES_COLLEGE } from "@/lib/constants"
import { Download, FileText } from 'lucide-react'
import { studentService } from "@/app/services/student-service"

const statusMessages: { [key: string]: string } = {
  pending: "Your Request is still Pending",
  read: "Your Request has been read by admin",
  in_progress: "Your Request has been viewed by admin and in Progress",
  completed: "Your Request has been Completed pick it up on Registrar",
  rejected: "I'm sorry but your Request is Rejected",
}

export const RequestManagement = () => {
  const [filterStatus, setFilterStatus] = useState("pending")
  const [selectedRequest, setSelectedRequest] = useState<any>(null)
  const [replyMessage, setReplyMessage] = useState("")
  const [newRequestType, setNewRequestType] = useState("")
  const [selectedStudent, setSelectedStudent] = useState("")
  const [showAddRequest, setShowAddRequest] = useState(false)
  const [refreshKey, setRefreshKey] = useState(0)
  const [showDocuments, setShowDocuments] = useState(false)
  const [documentTypeFilter, setDocumentTypeFilter] = useState("all")
  const [academicLevelFilter, setAcademicLevelFilter] = useState("all")

const requests = useMemo(() => {
    return adminService.getAllRequests().filter((r) => r.status === filterStatus)
  }, [filterStatus, refreshKey])

const students = useMemo(() => {
    return userStorage.getStudents()
  }, [])

const allDocuments = useMemo(() => {
    const students = userStorage.getStudents()
    let docs: any[] = []
    
    students.forEach(student => {
      const studentDocs = studentService.getDocuments(student.id)
      studentDocs.forEach((doc: any) => {
        docs.push({
          ...doc,
          studentName: `${student.firstName} ${student.lastName}`,
          studentEmail: student.email,
          academicLevel: student.academicLevel,
          course: student.course || student.strand,
          year: student.year || student.grade
        })
      })
    })

if (documentTypeFilter !== "all") {
      docs = docs.filter(doc => doc.type === documentTypeFilter)
    }
    if (academicLevelFilter !== "all") {
      docs = docs.filter(doc => doc.academicLevel === academicLevelFilter)
    }

return docs.sort((a, b) => new Date(b.uploadedAt).getTime() - new Date(a.uploadedAt).getTime())
  }, [refreshKey, documentTypeFilter, academicLevelFilter])

const documentTypes = ["Transcript", "Certificate", "Transfer Certificate", "Leave Letter", "Identity Card Photo", "Admission Letter"]

const handleSelectRequest = (req: any) => {
    if (req.status === "pending") {
      adminService.updateRequestStatus(req.id, req.studentId, "read")
    }
    setSelectedRequest(req)
    setRefreshKey((k) => k + 1)
  }

const handleReply = () => {
    if (selectedRequest && replyMessage) {
      adminService.addRequestMessage(selectedRequest.id, selectedRequest.studentId, replyMessage, "admin")
      setReplyMessage("")
      setRefreshKey((k) => k + 1)
    }
  }

const handleStatusChange = (newStatus: string) => {
    if (selectedRequest) {
      adminService.updateRequestStatus(selectedRequest.id, selectedRequest.studentId, newStatus)
      setRefreshKey((k) => k + 1)
      setSelectedRequest(null)
    }
  }

const handleAddRequest = () => {
    if (selectedStudent && newRequestType) {
      adminService.createRequest(selectedStudent, newRequestType)
      setNewRequestType("")
      setSelectedStudent("")
      setShowAddRequest(false)
      setRefreshKey((k) => k + 1)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Request Management</h1>
          <p className="text-muted-foreground">Process student document requests</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => setShowDocuments(!showDocuments)}>
            <FileText className="w-4 h-4 mr-2" />
            {showDocuments ? "View Requests" : "View Documents"}
          </Button>
          <Button onClick={() => setShowAddRequest(!showAddRequest)}>Add Request</Button>
        </div>
      </div>

{showDocuments ? (
        <div className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Student Documents</CardTitle>
              <CardDescription>View and filter all uploaded documents</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium mb-2">Filter by Document Type</label>
                  <select
                    value={documentTypeFilter}
                    onChange={(e) => setDocumentTypeFilter(e.target.value)}
                    className="w-full p-2 border rounded"
                  >
                    <option value="all">All Types</option>
                    {documentTypes.map(type => (
                      <option key={type} value={type}>{type}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium mb-2">Filter by Academic Level</label>
                  <select
                    value={academicLevelFilter}
                    onChange={(e) => setAcademicLevelFilter(e.target.value)}
                    className="w-full p-2 border rounded"
                  >
                    <option value="all">All Levels</option>
                    <option value="senior_high">Senior High</option>
                    <option value="diploma">Diploma</option>
                    <option value="bachelor">Bachelor</option>
                  </select>
                </div>
              </div>

<div className="border rounded-lg overflow-hidden">
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead className="bg-muted">
                      <tr>
                        <th className="text-left p-3 font-semibold">Document Name</th>
                        <th className="text-left p-3 font-semibold">Type</th>
                        <th className="text-left p-3 font-semibold">Student</th>
                        <th className="text-left p-3 font-semibold">Academic Level</th>
                        <th className="text-left p-3 font-semibold">Course/Strand</th>
                        <th className="text-left p-3 font-semibold">Upload Date</th>
                        <th className="text-left p-3 font-semibold">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      {allDocuments.length === 0 ? (
                        <tr>
                          <td colSpan={7} className="text-center p-8 text-muted-foreground">
                            No documents found
                          </td>
                        </tr>
                      ) : (
                        allDocuments.map((doc) => (
                          <tr key={doc.id} className="border-t hover:bg-muted/50">
                            <td className="p-3">{doc.name}</td>
                            <td className="p-3">
                              <span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs font-medium">
                                {doc.type}
                              </span>
                            </td>
                            <td className="p-3">
                              <div>
                                <p className="font-medium">{doc.studentName}</p>
                                <p className="text-xs text-muted-foreground">{doc.studentEmail}</p>
                              </div>
                            </td>
                            <td className="p-3 capitalize">{doc.academicLevel.replace('_', ' ')}</td>
                            <td className="p-3">{doc.course || 'N/A'} - Year {doc.year || 'N/A'}</td>
                            <td className="p-3">{new Date(doc.uploadedAt).toLocaleDateString()}</td>
                            <td className="p-3">
                              <a href={doc.url} download={doc.name}>
                                <Button size="sm" variant="outline">
                                  <Download className="w-4 h-4" />
                                </Button>
                              </a>
                            </td>
                          </tr>
                        ))
                      )}
                    </tbody>
                  </table>
                </div>
              </div>

<p className="text-sm text-muted-foreground">
                Showing {allDocuments.length} document(s)
              </p>
            </CardContent>
          </Card>
        </div>
      ) : (
        <>
          {showAddRequest && (
            <Card className="border-blue-200 bg-blue-50">
              <CardHeader>
                <CardTitle>Create Request for Student</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <select
                  value={selectedStudent}
                  onChange={(e) => setSelectedStudent(e.target.value)}
                  className="w-full p-2 border rounded"
                >
                  <option value="">Select Student</option>
                  {students.map((s) => (
                    <option key={s.id} value={s.id}>
                      {s.firstName} {s.lastName} ({s.email})
                    </option>
                  ))}
                </select>
                <select
                  value={newRequestType}
                  onChange={(e) => setNewRequestType(e.target.value)}
                  className="w-full p-2 border rounded"
                >
                  <option value="">Select Request Type</option>
                  {REQUEST_TYPES_COLLEGE.map((type) => (
                    <option key={type} value={type}>
                      {type}
                    </option>
                  ))}
                </select>
                <div className="flex gap-2">
                  <Button onClick={handleAddRequest} className="bg-green-600 hover:bg-green-700">
                    Create
                  </Button>
                  <Button variant="outline" onClick={() => setShowAddRequest(false)}>
                    Cancel
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}

<div className="flex gap-2 overflow-x-auto">
            {["pending", "read", "in_progress", "completed", "rejected"].map((status) => (
              <Button
                key={status}
                variant={filterStatus === status ? "default" : "outline"}
                onClick={() => setFilterStatus(status)}
                className="whitespace-nowrap"
              >
                {status.replace("_", " ").charAt(0).toUpperCase() + status.slice(1).replace("_", " ")}
              </Button>
            ))}
          </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <Card className="lg:col-span-2">
              <CardHeader>
                <CardTitle>Requests</CardTitle>
                <CardDescription>
                  {requests.length} {filterStatus} request(s)
                </CardDescription>
              </CardHeader>
              <CardContent>
                {requests.length === 0 ? (
                  <p className="text-muted-foreground text-center py-8">No {filterStatus} requests</p>
                ) : (
                  <div className="space-y-2">
                    {requests.map((req) => (
                      <div
                        key={req.id}
                        onClick={() => handleSelectRequest(req)}
                        className={`p-4 border rounded-lg cursor-pointer transition-colors ${
                          selectedRequest?.id === req.id ? "bg-blue-100 border-blue-500" : "hover:bg-muted"
                        }`}
                      >
                        <div className="flex items-start justify-between">
                          <div className="flex-1">
                            <p className="font-semibold">{req.type}</p>
                            <p className="text-sm text-muted-foreground">{req.studentName}</p>
                            <p className="text-xs text-muted-foreground">{formatDate(req.createdAt)}</p>
                          </div>
                          <span
                            className={`px-2 py-1 rounded text-xs font-medium ${
                              req.status === "completed"
                                ? "bg-green-100 text-green-800"
                                : req.status === "rejected"
                                  ? "bg-red-100 text-red-800"
                                  : req.status === "in_progress"
                                    ? "bg-blue-100 text-blue-800"
                                    : "bg-yellow-100 text-yellow-800"
                            }`}
                          >
                            {req.status.replace("_", " ")}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

{selectedRequest && (
              <Card>
                <CardHeader>
                  <CardTitle>Request Details</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <p className="text-sm font-medium">Student:</p>
                    <p className="text-sm">{selectedRequest.studentName}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Type:</p>
                    <p className="text-sm">{selectedRequest.type}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Reason/Details:</p>
                    <div className="text-sm bg-gray-50 p-3 rounded border border-gray-200">
                      {selectedRequest.reason || "No details provided"}
                    </div>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Status Note:</p>
                    <p className="text-sm bg-blue-50 p-2 rounded border border-blue-200">
                      {statusMessages[selectedRequest.status] || "Status unknown"}
                    </p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Change Status:</p>
                    <select
                      value={selectedRequest.status}
                      onChange={(e) => handleStatusChange(e.target.value)}
                      className="w-full p-2 border rounded text-sm"
                    >
                      <option value="read">Read</option>
                      <option value="in_progress">In Progress</option>
                      <option value="completed">Completed</option>
                      <option value="rejected">Rejected</option>
                    </select>
                  </div>
                  <div className="space-y-2">
                    <p className="text-sm font-medium">Messages:</p>
                    <div className="bg-muted p-3 rounded max-h-32 overflow-y-auto text-xs space-y-2">
                      {adminService.getRequestMessages(selectedRequest.id).map((msg: any) => (
                        <div key={msg.id}>
                          <p className="font-semibold capitalize">{msg.senderRole}:</p>
                          <p>{msg.message}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                  <Textarea
                    placeholder="Reply to request..."
                    value={replyMessage}
                    onChange={(e) => setReplyMessage(e.target.value)}
                    className="min-h-20"
                  />
                  <Button onClick={handleReply} className="w-full">
                    Send Reply
                  </Button>
                </CardContent>
              </Card>
            )}
          </div>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/admin/user-management.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { adminService } from "@/app/services/admin-service"
import { userStorage, type Student, type Teacher } from "@/lib/storage"
import { useMemo, useState } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  SENIOR_HIGH_GRADES,
  SENIOR_HIGH_STRANDS,
  DIPLOMA_YEARS,
  BACHELOR_YEARS,
  DEFAULT_DIPLOMA_COURSES,
  DEFAULT_BACHELOR_COURSES,
} from "@/lib/constants"
import { generateId } from "@/lib/helpers"
import { ExportAccounts } from './export-accounts'

export const UserManagement = () => {
  const [searchQuery, setSearchQuery] = useState("")
  const [editingUser, setEditingUser] = useState<any>(null)
  const [addingUser, setAddingUser] = useState<"student" | "teacher" | null>(null)
  const [editFormData, setEditFormData] = useState({ firstName: "", lastName: "", status: "", email: "" })
  const [addFormData, setAddFormData] = useState<any>({})
  const [refreshKey, setRefreshKey] = useState(0)

const students = useMemo(() => {
    const all = adminService.getAllStudents()
    return all.filter(
      (s) =>
        s.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        s.email.toLowerCase().includes(searchQuery.toLowerCase()),
    )
  }, [searchQuery, refreshKey])

const teachers = useMemo(() => {
    const all = adminService.getAllTeachers()
    return all.filter(
      (t) =>
        t.firstName.toLowerCase().includes(searchQuery.toLowerCase()) ||
        t.email.toLowerCase().includes(searchQuery.toLowerCase()),
    )
  }, [searchQuery, refreshKey])

const handleEditClick = (user: any, type: "student" | "teacher") => {
    setEditingUser({ ...user, type })
    setEditFormData({
      firstName: user.firstName,
      lastName: user.lastName,
      status: user.status,
      email: user.email,
    })
  }

const handleSaveEdit = () => {
    try {
      if (editingUser.type === "student") {
        userStorage.updateStudent(editingUser.id, {
          firstName: editFormData.firstName,
          lastName: editFormData.lastName,
          status: editFormData.status as any,
        })
      } else {
        userStorage.updateTeacher(editingUser.id, {
          firstName: editFormData.firstName,
          lastName: editFormData.lastName,
          status: editFormData.status as any,
        })
      }
      setRefreshKey((k) => k + 1)
      setEditingUser(null)
    } catch (error: any) {
      alert(error.message)
    }
  }

const refreshAndExport = () => {
    setRefreshKey((k) => k + 1)
    // Optionally auto-trigger export notification
  }

const handleDeleteUser = (userId: string, type: "student" | "teacher") => {
    if (confirm("Are you sure you want to delete this account? This action cannot be undone.")) {
      adminService.deleteUser(userId, type)
      refreshAndExport() // Use new function
    }
  }

const handleAddStudent = () => {
    try {
      const newStudent: Student = {
        id: generateId("STU"),
        email: addFormData.email,
        password: addFormData.password,
        firstName: addFormData.firstName,
        lastName: addFormData.lastName,
        studentId: generateId("ID"),
        academicLevel: addFormData.academicLevel,
        grade: addFormData.grade,
        strand: addFormData.strand,
        year: addFormData.year,
        course: addFormData.course,
        status: "approved",
        registeredAt: new Date().toISOString(),
      }
      userStorage.addStudent(newStudent)
      refreshAndExport() // Use new function
      setAddingUser(null)
      setAddFormData({})
    } catch (error: any) {
      alert(error.message)
    }
  }

const handleAddTeacher = () => {
    try {
      const newTeacher: Teacher = {
        id: generateId("TCH"),
        email: addFormData.email,
        password: addFormData.password,
        firstName: addFormData.firstName,
        lastName: addFormData.lastName,
        teacherId: generateId("ID"),
        department: addFormData.department,
        subjects: addFormData.subjects?.split(",").map((s: string) => s.trim()) || [],
        status: "active",
        registeredAt: new Date().toISOString(),
      }
      userStorage.addTeacher(newTeacher)
      refreshAndExport() // Use new function
      setAddingUser(null)
      setAddFormData({})
    } catch (error: any) {
      alert(error.message)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">User Management</h1>
          <p className="text-muted-foreground">Manage all system users</p>
        </div>
      </div>

<div>
        <Input
          placeholder="Search by name or email..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
      </div>

<Tabs defaultValue="students">
        <TabsList>
          <TabsTrigger value="students">Students ({students.length})</TabsTrigger>
          <TabsTrigger value="teachers">Teachers ({teachers.length})</TabsTrigger>
        </TabsList>

<TabsContent value="students">
          <div className="mb-4">
            <Button onClick={() => setAddingUser("student")}>Add New Student</Button>
          </div>
          <Card>
            <CardHeader>
              <CardTitle>Student List</CardTitle>
              <CardDescription>All registered students in the system</CardDescription>
            </CardHeader>
            <CardContent>
              {students.length === 0 ? (
                <p className="text-muted-foreground text-center py-8">No students found</p>
              ) : (
                <div className="space-y-2">
                  {students.map((student) => (
                    <div
                      key={student.id}
                      className="p-4 border border-border rounded-lg flex items-center justify-between hover:bg-muted"
                    >
                      <div className="flex-1">
                        <p className="font-semibold">
                          {student.firstName} {student.lastName}
                        </p>
                        <p className="text-sm text-muted-foreground">{student.email}</p>
                        <p className="text-xs text-muted-foreground">
                          {student.academicLevel === "senior_high"
                            ? `Grade ${student.grade}`
                            : `${student.course} Year ${student.year}`}{" "}
                          - {student.studentId}
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <span
                          className={`px-2 py-1 rounded text-xs font-medium ${
                            student.status === "approved"
                              ? "bg-green-100 text-green-800"
                              : student.status === "pending"
                                ? "bg-yellow-100 text-yellow-800"
                                : "bg-red-100 text-red-800"
                          }`}
                        >
                          {student.status}
                        </span>
                        <Button size="sm" variant="outline" onClick={() => handleEditClick(student, "student")}>
                          Edit
                        </Button>
                        <Button size="sm" variant="destructive" onClick={() => handleDeleteUser(student.id, "student")}>
                          Delete
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="teachers">
          <div className="mb-4">
            <Button onClick={() => setAddingUser("teacher")}>Add New Teacher</Button>
          </div>
          <Card>
            <CardHeader>
              <CardTitle>Teacher List</CardTitle>
              <CardDescription>All registered teachers in the system</CardDescription>
            </CardHeader>
            <CardContent>
              {teachers.length === 0 ? (
                <p className="text-muted-foreground text-center py-8">No teachers found</p>
              ) : (
                <div className="space-y-2">
                  {teachers.map((teacher) => (
                    <div
                      key={teacher.id}
                      className="p-4 border border-border rounded-lg flex items-center justify-between hover:bg-muted"
                    >
                      <div className="flex-1">
                        <p className="font-semibold">
                          {teacher.firstName} {teacher.lastName}
                        </p>
                        <p className="text-sm text-muted-foreground">{teacher.email}</p>
                        <p className="text-xs text-muted-foreground">
                          {teacher.department} - {teacher.subjects.join(", ")}
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <span
                          className={`px-2 py-1 rounded text-xs font-medium ${
                            teacher.status === "active" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
                          }`}
                        >
                          {teacher.status}
                        </span>
                        <Button size="sm" variant="outline" onClick={() => handleEditClick(teacher, "teacher")}>
                          Edit
                        </Button>
                        <Button size="sm" variant="destructive" onClick={() => handleDeleteUser(teacher.id, "teacher")}>
                          Delete
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Edit Dialog */}
      <Dialog open={!!editingUser} onOpenChange={() => setEditingUser(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingUser?.type === "student" ? "Edit Student" : "Edit Teacher"}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <label className="text-sm font-medium">First Name</label>
              <Input
                value={editFormData.firstName}
                onChange={(e) => setEditFormData({ ...editFormData, firstName: e.target.value })}
              />
            </div>
            <div>
              <label className="text-sm font-medium">Last Name</label>
              <Input
                value={editFormData.lastName}
                onChange={(e) => setEditFormData({ ...editFormData, lastName: e.target.value })}
              />
            </div>
            <div>
              <label className="text-sm font-medium">Status</label>
              <select
                value={editFormData.status}
                onChange={(e) => setEditFormData({ ...editFormData, status: e.target.value })}
                className="w-full p-2 border rounded"
              >
                {editingUser?.type === "student" ? (
                  <>
                    <option value="pending">Pending</option>
                    <option value="approved">Approved</option>
                    <option value="rejected">Rejected</option>
                    <option value="suspended">Suspended</option>
                  </>
                ) : (
                  <>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                  </>
                )}
              </select>
            </div>
            <div className="flex gap-2 justify-end">
              <Button variant="outline" onClick={() => setEditingUser(null)}>
                Cancel
              </Button>
              <Button onClick={handleSaveEdit}>Save Changes</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

<Dialog open={addingUser === "student"} onOpenChange={() => setAddingUser(null)}>
        <DialogContent className="max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Add New Student</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium">First Name</label>
                <Input
                  value={addFormData.firstName || ""}
                  onChange={(e) => setAddFormData({ ...addFormData, firstName: e.target.value })}
                  placeholder="First Name"
                />
              </div>
              <div>
                <label className="text-sm font-medium">Last Name</label>
                <Input
                  value={addFormData.lastName || ""}
                  onChange={(e) => setAddFormData({ ...addFormData, lastName: e.target.value })}
                  placeholder="Last Name"
                />
              </div>
            </div>

<div>
              <label className="text-sm font-medium">Email</label>
              <Input
                type="email"
                value={addFormData.email || ""}
                onChange={(e) => setAddFormData({ ...addFormData, email: e.target.value })}
                placeholder="student@email.com"
              />
            </div>

<div>
              <label className="text-sm font-medium">Password</label>
              <Input
                type="password"
                value={addFormData.password || ""}
                onChange={(e) => setAddFormData({ ...addFormData, password: e.target.value })}
                placeholder="Enter password"
              />
            </div>

<div>
              <label className="text-sm font-medium">Academic Level</label>
              <select
                value={addFormData.academicLevel || ""}
                onChange={(e) => setAddFormData({ ...addFormData, academicLevel: e.target.value })}
                className="w-full p-2 border rounded"
              >
                <option value="">Select Level</option>
                <option value="senior_high">Senior High School</option>
                <option value="diploma">Diploma</option>
                <option value="bachelor">Bachelor</option>
              </select>
            </div>

{addFormData.academicLevel === "senior_high" && (
              <>
                <div>
                  <label className="text-sm font-medium">Grade</label>
                  <select
                    value={addFormData.grade || ""}
                    onChange={(e) => setAddFormData({ ...addFormData, grade: e.target.value })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="">Select Grade</option>
                    {SENIOR_HIGH_GRADES.map((g) => (
                      <option key={g} value={g}>
                        Grade {g}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-medium">Strand</label>
                  <select
                    value={addFormData.strand || ""}
                    onChange={(e) => setAddFormData({ ...addFormData, strand: e.target.value })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="">Select Strand</option>
                    {SENIOR_HIGH_STRANDS.map((s) => (
                      <option key={s} value={s}>
                        {s}
                      </option>
                    ))}
                  </select>
                </div>
              </>
            )}

{addFormData.academicLevel === "diploma" && (
              <>
                <div>
                  <label className="text-sm font-medium">Year</label>
                  <select
                    value={addFormData.year || ""}
                    onChange={(e) => setAddFormData({ ...addFormData, year: e.target.value })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="">Select Year</option>
                    {DIPLOMA_YEARS.map((y) => (
                      <option key={y} value={y}>
                        Year {y}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-medium">Course</label>
                  <select
                    value={addFormData.course || ""}
                    onChange={(e) => setAddFormData({ ...addFormData, course: e.target.value })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="">Select Course</option>
                    {DEFAULT_DIPLOMA_COURSES.map((c) => (
                      <option key={c} value={c}>
                        {c}
                      </option>
                    ))}
                  </select>
                </div>
              </>
            )}

{addFormData.academicLevel === "bachelor" && (
              <>
                <div>
                  <label className="text-sm font-medium">Year</label>
                  <select
                    value={addFormData.year || ""}
                    onChange={(e) => setAddFormData({ ...addFormData, year: e.target.value })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="">Select Year</option>
                    {BACHELOR_YEARS.map((y) => (
                      <option key={y} value={y}>
                        Year {y}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="text-sm font-medium">Course</label>
                  <select
                    value={addFormData.course || ""}
                    onChange={(e) => setAddFormData({ ...addFormData, course: e.target.value })}
                    className="w-full p-2 border rounded"
                  >
                    <option value="">Select Course</option>
                    {DEFAULT_BACHELOR_COURSES.map((c) => (
                      <option key={c} value={c}>
                        {c}
                      </option>
                    ))}
                  </select>
                </div>
              </>
            )}

<div className="flex gap-2 justify-end">
              <Button variant="outline" onClick={() => setAddingUser(null)}>
                Cancel
              </Button>
              <Button onClick={handleAddStudent}>Add Student</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>

<Dialog open={addingUser === "teacher"} onOpenChange={() => setAddingUser(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add New Teacher</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-sm font-medium">First Name</label>
                <Input
                  value={addFormData.firstName || ""}
                  onChange={(e) => setAddFormData({ ...addFormData, firstName: e.target.value })}
                  placeholder="First Name"
                />
              </div>
              <div>
                <label className="text-sm font-medium">Last Name</label>
                <Input
                  value={addFormData.lastName || ""}
                  onChange={(e) => setAddFormData({ ...addFormData, lastName: e.target.value })}
                  placeholder="Last Name"
                />
              </div>
            </div>

<div>
              <label className="text-sm font-medium">Email</label>
              <Input
                type="email"
                value={addFormData.email || ""}
                onChange={(e) => setAddFormData({ ...addFormData, email: e.target.value })}
                placeholder="teacher@email.com"
              />
            </div>

<div>
              <label className="text-sm font-medium">Department</label>
              <Input
                value={addFormData.department || ""}
                onChange={(e) => setAddFormData({ ...addFormData, department: e.target.value })}
                placeholder="e.g., Computer Science"
              />
            </div>

<div>
              <label className="text-sm font-medium">Subjects (comma-separated)</label>
              <Input
                value={addFormData.subjects || ""}
                onChange={(e) => setAddFormData({ ...addFormData, subjects: e.target.value })}
                placeholder="Math, Physics, Chemistry"
              />
            </div>

<div className="flex gap-2 justify-end">
              <Button variant="outline" onClick={() => setAddingUser(null)}>
                Cancel
              </Button>
              <Button onClick={handleAddTeacher}>Add Teacher</Button>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/auth/login-form.tsx" isMerged="true"
"use client"

import type React from "react"

export const LoginForm = () => {
  const router = useRouter()
  const { login } = useAuth()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

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

if (!email || !password) {
      setError("Email and password are required")
      return
    }

if (!validateEmail(email)) {
      setError("Invalid email address")
      return
    }

setIsLoading(true)
    try {
      await login(email, password)

// For now, redirect to student dashboard - role detection will happen via auth context
      router.push("/student/dashboard")
    } catch (err) {
      setError(err instanceof Error ? err.message : "Login failed")
    } finally {
      setIsLoading(false)
    }
  }

return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Login</CardTitle>
        <CardDescription>Sign in to your account</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="email" className="block text-sm font-medium mb-2">
              Email
            </label>
            <Input
              id="email"
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={isLoading}
            />
          </div>

<div>
            <label htmlFor="password" className="block text-sm font-medium mb-2">
              Password
            </label>
            <Input
              id="password"
              type="password"
              placeholder="Enter your password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={isLoading}
            />
          </div>

{error && (
            <div className="p-3 bg-destructive/10 border border-destructive text-destructive rounded-md text-sm">
              {error}
            </div>
          )}

<Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? "Logging in..." : "Login"}
          </Button>

<div className="text-center space-y-2 text-sm">
            <p>
              Don't have an account?{" "}
              <Link href="/register" className="text-primary hover:underline">
                Register here
              </Link>
            </p>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/auth/pending-approval.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export const PendingApproval = () => {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Pending Approval</CardTitle>
        <CardDescription>Your registration is being reviewed</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <p className="text-sm text-blue-900">
            Thank you for registering! Your account has been submitted for approval. An administrator will review your
            registration and contact you within 24-48 hours.
          </p>
        </div>

<div className="space-y-2">
          <h3 className="font-semibold text-sm">What happens next?</h3>
          <ul className="text-sm space-y-1 list-disc list-inside">
            <li>Admin reviews your information</li>
            <li>You'll receive an approval or rejection email</li>
            <li>Once approved, you can log in to your account</li>
          </ul>
        </div>

<Link href="/login">
          <Button variant="outline" className="w-full bg-transparent">
            Back to Login
          </Button>
        </Link>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/auth/register-form.tsx" isMerged="true"
"use client"

import 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 { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import { validateRegistrationForm } from "@/lib/validation"
import Link from "next/link"
import {
  SENIOR_HIGH_GRADES,
  SENIOR_HIGH_STRANDS,
  DIPLOMA_YEARS,
  BACHELOR_YEARS,
  DEFAULT_DIPLOMA_COURSES,
  DEFAULT_BACHELOR_COURSES,
} from "@/lib/constants"
import { collegeCoursesStorage } from "@/lib/storage"

export const RegisterForm = () => {
  const router = useRouter()
  const { registerStudent } = useAuth()
  const [academicLevel, setAcademicLevel] = useState<"senior_high" | "diploma" | "bachelor">("senior_high")
  const [diplomaCourses, setDiplomaCourses] = useState<string[]>(DEFAULT_DIPLOMA_COURSES)
  const [bachelorCourses, setBachelorCourses] = useState<string[]>(DEFAULT_BACHELOR_COURSES)
  const [formData, setFormData] = useState({
    email: "",
    password: "",
    confirmPassword: "",
    firstName: "",
    lastName: "",
    studentId: "",
    grade: "",
    strand: "",
    year: "",
    course: "",
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isLoading, setIsLoading] = useState(false)

// Load college courses on mount
  React.useEffect(() => {
    const courses = collegeCoursesStorage.getAll()
    setDiplomaCourses(courses.diplomaCourses)
    setBachelorCourses(courses.bachelorCourses)
  }, [])

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
    if (errors[name]) {
      setErrors((prev) => {
        const newErrors = { ...prev }
        delete newErrors[name]
        return newErrors
      })
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setErrors({})

const validation = validateRegistrationForm({
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      firstName: formData.firstName,
      lastName: formData.lastName,
    })

if (!validation.valid) {
      setErrors(validation.errors)
      return
    }

if (!formData.studentId) {
      setErrors({ form: "Student ID is required" })
      return
    }

// Validate academic level specific fields
    if (academicLevel === "senior_high") {
      if (!formData.grade || !formData.strand) {
        setErrors({ form: "Grade and Strand are required for Senior High" })
        return
      }
    } else if (academicLevel === "diploma") {
      if (!formData.year || !formData.course) {
        setErrors({ form: "Year and Course are required for Diploma" })
        return
      }
    } else if (academicLevel === "bachelor") {
      if (!formData.year || !formData.course) {
        setErrors({ form: "Year and Course are required for Bachelor" })
        return
      }
    }

setIsLoading(true)
    try {
      await registerStudent({
        email: formData.email,
        password: formData.password,
        firstName: formData.firstName,
        lastName: formData.lastName,
        studentId: formData.studentId,
        academicLevel,
        grade: formData.grade || undefined,
        strand: formData.strand || undefined,
        year: formData.year || undefined,
        course: formData.course || undefined,
      })

router.push("/pending-approval")
    } catch (err) {
      setErrors({ form: err instanceof Error ? err.message : "Registration failed" })
    } finally {
      setIsLoading(false)
    }
  }

const getYearOptions = () => {
    if (academicLevel === "diploma") {
      return DIPLOMA_YEARS
    }
    return BACHELOR_YEARS
  }

const getCourseOptions = () => {
    if (academicLevel === "diploma") {
      return diplomaCourses
    }
    return bachelorCourses
  }

return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Student Registration</CardTitle>
        <CardDescription>Create a new student account</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4 max-h-96 overflow-y-auto">
          {/* Academic Level Selection */}
          <div>
            <label htmlFor="academicLevel" className="block text-sm font-medium mb-2">
              Choose Academic Level
            </label>
            <select
              id="academicLevel"
              value={academicLevel}
              onChange={(e) => setAcademicLevel(e.target.value as any)}
              className="w-full px-3 py-2 border border-input rounded-md bg-background"
            >
              <option value="senior_high">Senior High School</option>
              <option value="diploma">Diploma (College - 3 Years)</option>
              <option value="bachelor">Bachelor (College - 4 Years)</option>
            </select>
          </div>

{/* Basic Information */}
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label htmlFor="firstName" className="block text-sm font-medium mb-2">
                First Name
              </label>
              <Input
                id="firstName"
                name="firstName"
                placeholder="First name"
                value={formData.firstName}
                onChange={handleChange}
                disabled={isLoading}
              />
              {errors.firstName && <p className="text-xs text-destructive mt-1">{errors.firstName}</p>}
            </div>
            <div>
              <label htmlFor="lastName" className="block text-sm font-medium mb-2">
                Last Name
              </label>
              <Input
                id="lastName"
                name="lastName"
                placeholder="Last name"
                value={formData.lastName}
                onChange={handleChange}
                disabled={isLoading}
              />
              {errors.lastName && <p className="text-xs text-destructive mt-1">{errors.lastName}</p>}
            </div>
          </div>

<div>
            <label htmlFor="email" className="block text-sm font-medium mb-2">
              Email
            </label>
            <Input
              id="email"
              name="email"
              type="email"
              placeholder="Email address"
              value={formData.email}
              onChange={handleChange}
              disabled={isLoading}
            />
            {errors.email && <p className="text-xs text-destructive mt-1">{errors.email}</p>}
          </div>

<div>
            <label htmlFor="password" className="block text-sm font-medium mb-2">
              Password
            </label>
            <Input
              id="password"
              name="password"
              type="password"
              placeholder="Password"
              value={formData.password}
              onChange={handleChange}
              disabled={isLoading}
            />
            {errors.password && <p className="text-xs text-destructive mt-1">{errors.password}</p>}
          </div>

<div>
            <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">
              Confirm Password
            </label>
            <Input
              id="confirmPassword"
              name="confirmPassword"
              type="password"
              placeholder="Confirm password"
              value={formData.confirmPassword}
              onChange={handleChange}
              disabled={isLoading}
            />
            {errors.confirmPassword && <p className="text-xs text-destructive mt-1">{errors.confirmPassword}</p>}
          </div>

<div>
            <label htmlFor="studentId" className="block text-sm font-medium mb-2">
              Student ID
            </label>
            <Input
              id="studentId"
              name="studentId"
              placeholder="Student ID"
              value={formData.studentId}
              onChange={handleChange}
              disabled={isLoading}
            />
          </div>

{/* Senior High School Fields */}
          {academicLevel === "senior_high" && (
            <>
              <div>
                <label htmlFor="grade" className="block text-sm font-medium mb-2">
                  Grade Level
                </label>
                <select
                  id="grade"
                  name="grade"
                  value={formData.grade}
                  onChange={handleChange}
                  className="w-full px-3 py-2 border border-input rounded-md bg-background"
                  disabled={isLoading}
                >
                  <option value="">Select Grade</option>
                  {SENIOR_HIGH_GRADES.map((grade) => (
                    <option key={grade} value={grade}>
                      Grade {grade}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label htmlFor="strand" className="block text-sm font-medium mb-2">
                  Strand
                </label>
                <select
                  id="strand"
                  name="strand"
                  value={formData.strand}
                  onChange={handleChange}
                  className="w-full px-3 py-2 border border-input rounded-md bg-background"
                  disabled={isLoading}
                >
                  <option value="">Select Strand</option>
                  {SENIOR_HIGH_STRANDS.map((strand) => (
                    <option key={strand} value={strand}>
                      {strand}
                    </option>
                  ))}
                </select>
              </div>
            </>
          )}

{/* College Fields (Diploma or Bachelor) */}
          {(academicLevel === "diploma" || academicLevel === "bachelor") && (
            <>
              <div>
                <label htmlFor="year" className="block text-sm font-medium mb-2">
                  Year Level
                </label>
                <select
                  id="year"
                  name="year"
                  value={formData.year}
                  onChange={handleChange}
                  className="w-full px-3 py-2 border border-input rounded-md bg-background"
                  disabled={isLoading}
                >
                  <option value="">Select Year</option>
                  {getYearOptions().map((year) => (
                    <option key={year} value={year}>
                      Year {year}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label htmlFor="course" className="block text-sm font-medium mb-2">
                  Course
                </label>
                <select
                  id="course"
                  name="course"
                  value={formData.course}
                  onChange={handleChange}
                  className="w-full px-3 py-2 border border-input rounded-md bg-background"
                  disabled={isLoading}
                >
                  <option value="">Select Course</option>
                  {getCourseOptions().map((course) => (
                    <option key={course} value={course}>
                      {course}
                    </option>
                  ))}
                </select>
              </div>
            </>
          )}

{errors.form && (
            <div className="p-3 bg-destructive/10 border border-destructive text-destructive rounded-md text-sm">
              {errors.form}
            </div>
          )}

<Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? "Registering..." : "Register"}
          </Button>

<p className="text-center text-sm">
            Already have an account?{" "}
            <Link href="/login" className="text-primary hover:underline">
              Login here
            </Link>
          </p>
        </form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/shared/confirm-dialog.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"

export interface ConfirmDialogProps {
  title: string
  description?: string
  onConfirm: () => void
  onCancel?: () => void
  confirmText?: string
  cancelText?: string
  isDangerous?: boolean
}

export const useConfirmDialog = () => {
  const [dialog, setDialog] = useState<ConfirmDialogProps | null>(null)

const open = (config: ConfirmDialogProps) => setDialog(config)
  const close = () => setDialog(null)

return { dialog, open, close }
}

export const ConfirmDialog: React.FC<{
  config: ConfirmDialogProps | null
  onConfirm: () => void
  onCancel: () => void
}> = ({ config, onConfirm, onCancel }) => {
  if (!config) return null

return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-background border border-border rounded-lg p-6 max-w-sm">
        <h2 className="font-semibold text-lg mb-2">{config.title}</h2>
        {config.description && <p className="text-muted-foreground text-sm mb-6">{config.description}</p>}
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={onCancel}>
            {config.cancelText || "Cancel"}
          </Button>
          <Button onClick={onConfirm} variant={config.isDangerous ? "destructive" : "default"}>
            {config.confirmText || "Confirm"}
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/shared/error-boundary.tsx" isMerged="true"
"use client"

import React from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface Props {
  children: React.ReactNode
}

interface State {
  hasError: boolean
  error?: Error
}

export class ErrorBoundary extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false }
  }

static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

componentDidCatch(error: Error) {
    console.error("Error caught by boundary:", error)
  }

render() {
    if (this.state.hasError) {
      return (
        <div className="min-h-screen flex items-center justify-center p-4">
          <Card className="max-w-md w-full">
            <CardHeader>
              <CardTitle>Something went wrong</CardTitle>
              <CardDescription>An unexpected error occurred</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="text-sm text-muted-foreground">
                {this.state.error?.message || "Please refresh the page and try again."}
              </p>
              <Button
                onClick={() => {
                  this.setState({ hasError: false })
                  window.location.reload()
                }}
                className="w-full"
              >
                Reload Page
              </Button>
            </CardContent>
          </Card>
        </div>
      )
    }

return this.props.children
  }
}
[V0_FILE]typescriptreact:file="app/components/shared/loading.tsx" isMerged="true"
"use client"

export const Loading = () => {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="space-y-4 text-center">
        <div className="inline-flex space-x-2">
          <div className="w-3 h-3 bg-primary rounded-full animate-bounce" />
          <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0.2s" }} />
          <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0.4s" }} />
        </div>
        <p className="text-muted-foreground">Loading...</p>
      </div>
    </div>
  )
}

export default Loading
[V0_FILE]typescriptreact:file="app/components/shared/navbar.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/app/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Bell, LogOut, User } from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useState } from "react"

export const Navbar: React.FC<{ title?: string }> = ({ title = "Student Portal" }) => {
  const { user, logout } = useAuth()
  const router = useRouter()
  const [showMenu, setShowMenu] = useState(false)

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

return (
    <nav className="bg-primary text-primary-foreground shadow-md sticky top-0 z-40">
      <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
        <Link href="/" className="font-bold text-lg">
          {title}
        </Link>

{user && (
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="sm" className="text-primary-foreground hover:bg-primary/80">
              <Bell className="w-5 h-5" />
            </Button>

<div className="relative">
              <button
                onClick={() => setShowMenu(!showMenu)}
                className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-primary/80"
              >
                <User className="w-5 h-5" />
                <span className="text-sm">{user.firstName}</span>
              </button>

{showMenu && (
                <div className="absolute right-0 mt-2 w-48 bg-background text-foreground rounded-lg shadow-lg border border-border">
                  <div className="p-4 border-b border-border">
                    <p className="font-semibold text-sm">
                      {user.firstName} {user.lastName}
                    </p>
                    <p className="text-xs text-muted-foreground">{user.email}</p>
                  </div>
                  <button
                    onClick={handleLogout}
                    className="w-full px-4 py-2 text-left text-sm hover:bg-muted flex items-center gap-2 text-destructive"
                  >
                    <LogOut className="w-4 h-4" />
                    Logout
                  </button>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </nav>
  )
}
[V0_FILE]typescriptreact:file="app/components/shared/not-found.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"

const NotFound = () => {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <Card className="max-w-md w-full text-center">
        <CardHeader>
          <div className="text-6xl font-bold text-muted-foreground mb-4">404</div>
          <CardTitle>Page Not Found</CardTitle>
          <CardDescription>The page you're looking for doesn't exist</CardDescription>
        </CardHeader>
        <CardContent>
          <Link href="/">
            <Button className="w-full">Back to Home</Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  )
}

export default NotFound
[V0_FILE]typescriptreact:file="app/components/shared/notification.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { X } from "lucide-react"

export interface NotificationProps {
  id: string
  type: "success" | "error" | "warning" | "info"
  message: string
  onClose: (id: string) => void
}

export const Notification: React.FC<NotificationProps> = ({ id, type, message, onClose }) => {
  const [isVisible, setIsVisible] = useState(true)

const handleClose = () => {
    setIsVisible(false)
    setTimeout(() => onClose(id), 300)
  }

const bgColor = {
    success: "bg-green-50 border-green-200",
    error: "bg-red-50 border-red-200",
    warning: "bg-yellow-50 border-yellow-200",
    info: "bg-blue-50 border-blue-200",
  }[type]

const textColor = {
    success: "text-green-900",
    error: "text-red-900",
    warning: "text-yellow-900",
    info: "text-blue-900",
  }[type]

return (
    <div
      className={`${bgColor} ${textColor} border rounded-lg p-4 flex items-start justify-between transition-opacity ${
        isVisible ? "opacity-100" : "opacity-0"
      }`}
    >
      <p className="text-sm">{message}</p>
      <button onClick={handleClose} className="ml-2 flex-shrink-0">
        <X className="w-4 h-4" />
      </button>
    </div>
  )
}

export const NotificationContainer: React.FC<{ notifications: NotificationProps[] }> = ({ notifications }) => {
  return (
    <div className="fixed top-4 right-4 space-y-2 z-50">
      {notifications.map((notification) => (
        <Notification key={notification.id} {...notification} />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/shared/protected-route.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/app/contexts/auth-context"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { Loading } from "./loading"

interface ProtectedRouteProps {
  children: React.ReactNode
  allowedRoles?: string[]
}

export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, allowedRoles = [] }) => {
  const { user, isLoading } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isLoading && !user) {
      router.push("/login")
    } else if (!isLoading && user && allowedRoles.length > 0 && !allowedRoles.includes(user.role)) {
      router.push("/")
    }
  }, [user, isLoading, router, allowedRoles])

if (isLoading) {
    return <Loading />
  }

if (!user) {
    return null
  }

if (allowedRoles.length > 0 && !allowedRoles.includes(user.role)) {
    return null
  }

return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/components/shared/sidebar.tsx" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/app/contexts/auth-context"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState } from "react"
import { Menu, X } from "lucide-react"

interface NavItem {
  label: string
  href: string
  icon?: string
}

interface SidebarProps {
  items: NavItem[]
}

export const Sidebar: React.FC<SidebarProps> = ({ items }) => {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()
  const { user } = useAuth()

if (!user) return null

return (
    <>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="md:hidden fixed bottom-4 right-4 p-2 bg-primary text-primary-foreground rounded-full shadow-lg z-30"
      >
        {isOpen ? <X /> : <Menu />}
      </button>

<aside
        className={`fixed md:static top-0 left-0 h-screen md:h-auto w-64 bg-sidebar text-sidebar-foreground transform transition-transform md:transform-none md:translate-x-0 z-20 border-r border-sidebar-border ${
          isOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="p-4 pt-20 md:pt-4 space-y-2">
          {items.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              onClick={() => setIsOpen(false)}
              className={`block px-4 py-2 rounded-md transition-colors ${
                pathname === item.href
                  ? "bg-sidebar-primary text-sidebar-primary-foreground"
                  : "hover:bg-sidebar-accent text-sidebar-foreground"
              }`}
            >
              {item.label}
            </Link>
          ))}
        </div>
      </aside>

{isOpen && <div className="fixed inset-0 bg-black/50 md:hidden z-10" onClick={() => setIsOpen(false)} />}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/attendance.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import { studentService } from "@/app/services/student-service"
import { useMemo } from "react"
import { formatDate, formatAttendancePercentage } from "@/lib/formatters"

export const StudentAttendance = () => {
  const { user } = useAuth()

const attendanceData = useMemo(() => {
    if (!user) return { records: [], percentage: "0%", present: 0, absent: 0, late: 0 }
    const records = studentService.getAttendance(user.id)
    const present = records.filter((r) => r.status === "present").length
    const absent = records.filter((r) => r.status === "absent").length
    const late = records.filter((r) => r.status === "late").length

return {
      records: records.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()),
      percentage: formatAttendancePercentage(present, records.length),
      present,
      absent,
      late,
    }
  }, [user])

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Attendance</h1>
        <p className="text-muted-foreground">Your attendance records</p>
      </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Attendance Rate</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{attendanceData.percentage}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Present</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{attendanceData.present}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Absent</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-red-600">{attendanceData.absent}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Late</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-yellow-600">{attendanceData.late}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Attendance Records</CardTitle>
          <CardDescription>Recent attendance history</CardDescription>
        </CardHeader>
        <CardContent>
          {attendanceData.records.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No attendance records yet</p>
          ) : (
            <div className="space-y-2">
              {attendanceData.records.slice(0, 20).map((record) => (
                <div key={record.id} className="flex items-center justify-between p-4 border border-border rounded-lg">
                  <div>
                    <p className="font-semibold">{record.subject}</p>
                    <p className="text-sm text-muted-foreground">{formatDate(record.date)}</p>
                  </div>
                  <div
                    className={`px-3 py-1 rounded-full text-sm font-medium ${
                      record.status === "present"
                        ? "bg-green-100 text-green-800"
                        : record.status === "absent"
                          ? "bg-red-100 text-red-800"
                          : "bg-yellow-100 text-yellow-800"
                    }`}
                  >
                    {record.status.charAt(0).toUpperCase() + record.status.slice(1)}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/class-details.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/app/contexts/auth-context"
import { classesStorage, userStorage } from "@/lib/storage"
import { useMemo } from "react"
import Link from "next/link"

interface StudentClassDetailsProps {
  classId: string
}

export const StudentClassDetails = ({ classId }: StudentClassDetailsProps) => {
  const { user } = useAuth()

const classData = useMemo(() => {
    if (!user || !classId) return null
    const allClasses = classesStorage.getAll()
    const cls = allClasses.find((c) => c.id === classId)
    if (!cls || !cls.students.includes(user.id)) return null

// Get teacher details
    const teachers = userStorage.getTeachers()
    const teacher = teachers.find((t) => t.id === cls.teacherId)

// Get all students in the class
    const students = userStorage.getStudents()
    const classStudents = students.filter((s) => cls.students.includes(s.id))

return {
      ...cls,
      teacher,
      classStudents,
    }
  }, [user, classId])

if (!classData) {
    return (
      <div className="space-y-6">
        <h1 className="text-3xl font-bold">Class Details</h1>
        <Card>
          <CardContent className="py-8">
            <p className="text-muted-foreground text-center">Class not found or you are not enrolled</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div>
        <Link href="/student/classes">
          <Button variant="outline" size="sm">
            ← Back to Classes
          </Button>
        </Link>
        <h1 className="text-3xl font-bold mt-4">{classData.subjectName}</h1>
        <p className="text-muted-foreground">{classData.subjectCode}</p>
      </div>

{/* Class Information */}
      <Card>
        <CardHeader>
          <CardTitle>Class Information</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-sm text-muted-foreground">Subject Code</p>
              <p className="font-semibold">{classData.subjectCode}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Subject Name</p>
              <p className="font-semibold">{classData.subjectName}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Schedule</p>
              <p className="font-semibold">
                {classData.day} at {classData.time}
              </p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground">Term</p>
              <p className="font-semibold">
                Semester {classData.semester}, Year {classData.year}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Instructor Information */}
      <Card>
        <CardHeader>
          <CardTitle>Instructor</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="p-3 border border-border rounded-lg">
            <p className="font-medium">
              {classData.teacher?.firstName} {classData.teacher?.lastName}
            </p>
            <p className="text-sm text-muted-foreground">{classData.teacher?.email}</p>
          </div>
        </CardContent>
      </Card>

{/* Class Students */}
      <Card>
        <CardHeader>
          <CardTitle>Classmates</CardTitle>
          <CardDescription>{classData.classStudents.length} students enrolled</CardDescription>
        </CardHeader>
        <CardContent>
          {classData.classStudents.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No other students in this class</p>
          ) : (
            <div className="space-y-2">
              {classData.classStudents.map((student) => (
                <div key={student.id} className="p-3 border border-border rounded-lg">
                  <p className="font-medium">
                    {student.firstName} {student.lastName}
                  </p>
                  <p className="text-sm text-muted-foreground">{student.email}</p>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/contact-admin.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/app/contexts/auth-context"
import { messagingService } from "@/app/services/messaging-service"
import { INQUIRY_CATEGORIES } from "@/lib/constants"
import { useEffect, useState } from "react"
import { ChevronDown, ChevronUp, Mail, Reply } from 'lucide-react'

export const StudentContactAdmin = () => {
  const { user } = useAuth()
  const [category, setCategory] = useState("")
  const [subject, setSubject] = useState("")
  const [message, setMessage] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [messages, setMessages] = useState<any[]>([])
  const [expandedMessageId, setExpandedMessageId] = useState<string | null>(null)
  const [replyText, setReplyText] = useState("")

useEffect(() => {
    const fetchMessages = () => {
      if (!user) return
      const allMessages = messagingService.getMessages(user.id)
      setMessages(allMessages)
    }
    
    fetchMessages()
    const interval = setInterval(fetchMessages, 3000)
    return () => clearInterval(interval)
  }, [user])

const handleSendMessage = async () => {
    if (!user || !category || !subject || !message.trim()) return

setIsSubmitting(true)
    try {
      messagingService.sendMessage({
        senderId: user.id,
        receiverId: "ADMIN",
        subject: `[${category}] ${subject}`,
        content: message,
      })

setCategory("")
      setSubject("")
      setMessage("")
      const allMessages = messagingService.getMessages(user.id)
      setMessages(allMessages)
    } finally {
      setIsSubmitting(false)
    }
  }

const handleReply = (originalMessage: any) => {
    if (!user || !replyText.trim()) return
    
    messagingService.sendMessage({
      senderId: user.id,
      receiverId: "ADMIN",
      subject: `Re: ${originalMessage.subject}`,
      content: replyText,
    })
    
    setReplyText("")
    const allMessages = messagingService.getMessages(user.id)
    setMessages(allMessages)
  }

const getConversationThread = (subjectLine: string) => {
    return messages.filter(msg => 
      msg.subject === subjectLine || 
      msg.subject === `Re: ${subjectLine}` ||
      subjectLine.startsWith('Re: ') && msg.subject === subjectLine.replace('Re: ', '')
    ).sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Contact Administration</h1>
        <p className="text-muted-foreground">Send messages or inquiries to the admin</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Send Message</CardTitle>
          <CardDescription>Contact the administration</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="category" className="block text-sm font-medium mb-2">
              Inquiry Category
            </label>
            <select
              id="category"
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              className="w-full px-3 py-2 border border-input rounded-md bg-background"
            >
              <option value="">Select a category</option>
              {INQUIRY_CATEGORIES.map((cat) => (
                <option key={cat} value={cat}>
                  {cat}
                </option>
              ))}
            </select>
          </div>

<div>
            <label htmlFor="subject" className="block text-sm font-medium mb-2">
              Subject
            </label>
            <Input
              id="subject"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
              placeholder="Message subject"
            />
          </div>

<div>
            <label htmlFor="message" className="block text-sm font-medium mb-2">
              Message
            </label>
            <textarea
              id="message"
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              placeholder="Your message..."
              className="w-full px-3 py-2 border border-input rounded-md bg-background"
              rows={6}
            />
          </div>

<Button
            onClick={handleSendMessage}
            disabled={isSubmitting || !category || !subject || !message}
            className="w-full"
          >
            {isSubmitting ? "Sending..." : "Send Message"}
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Message History</CardTitle>
          <CardDescription>Your conversations with administration</CardDescription>
        </CardHeader>
        <CardContent>
          {messages.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No messages yet</p>
          ) : (
            <div className="space-y-2">
              {messages
                .filter(msg => msg.senderId === user?.id)
                .map((msg) => {
                  const conversation = getConversationThread(msg.subject)
                  const isExpanded = expandedMessageId === msg.id
                  const hasReplies = conversation.length > 1
                  
                  return (
                    <div key={msg.id} className="border border-border rounded-lg">
                      <button
                        onClick={() => setExpandedMessageId(isExpanded ? null : msg.id)}
                        className="w-full p-4 text-left hover:bg-muted transition-colors flex items-center justify-between"
                      >
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <Mail className="h-4 w-4 text-muted-foreground" />
                            <p className="font-semibold text-sm">{msg.subject}</p>
                            {hasReplies && (
                              <span className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
                                {conversation.length} messages
                              </span>
                            )}
                          </div>
                          <p className="text-xs text-muted-foreground mt-1">
                            {new Date(msg.createdAt).toLocaleString()}
                          </p>
                        </div>
                        {isExpanded ? (
                          <ChevronUp className="h-4 w-4 text-muted-foreground" />
                        ) : (
                          <ChevronDown className="h-4 w-4 text-muted-foreground" />
                        )}
                      </button>
                      
                      {isExpanded && (
                        <div className="border-t border-border p-4 space-y-4 bg-muted/30">
                          {/* Conversation thread */}
                          <div className="space-y-3">
                            {conversation.map((threadMsg, index) => (
                              <div
                                key={threadMsg.id}
                                className={`p-3 rounded-lg ${
                                  threadMsg.senderId === user?.id
                                    ? "bg-primary/10 ml-4"
                                    : "bg-secondary mr-4"
                                }`}
                              >
                                <div className="flex items-center justify-between mb-2">
                                  <span className="text-xs font-semibold">
                                    {threadMsg.senderId === user?.id ? "You" : "Admin"}
                                  </span>
                                  <span className="text-xs text-muted-foreground">
                                    {new Date(threadMsg.createdAt).toLocaleString()}
                                  </span>
                                </div>
                                <p className="text-sm whitespace-pre-wrap">{threadMsg.content}</p>
                              </div>
                            ))}
                          </div>
                          
                          {/* Reply form */}
                          <div className="space-y-2">
                            <label className="text-sm font-medium flex items-center gap-2">
                              <Reply className="h-4 w-4" />
                              Reply to Admin
                            </label>
                            <textarea
                              value={replyText}
                              onChange={(e) => setReplyText(e.target.value)}
                              placeholder="Type your reply..."
                              className="w-full px-3 py-2 border border-input rounded-md bg-background text-sm"
                              rows={3}
                            />
                            <Button
                              onClick={() => handleReply(msg)}
                              disabled={!replyText.trim()}
                              size="sm"
                              className="w-full"
                            >
                              Send Reply
                            </Button>
                          </div>
                        </div>
                      )}
                    </div>
                  )
                })}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/dashboard-home.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { studentService } from "@/app/services/student-service"
import { useMemo } from "react"
import { calculateAttendancePercentage } from "@/lib/helpers"

export const StudentDashboardHome = () => {
  const { user } = useAuth()

const stats = useMemo(() => {
    if (!user) return { attendance: 0, grades: 0, requests: 0 }
    const attendance = studentService.getAttendance(user.id)
    const grades = studentService.getGrades(user.id)
    const requests = studentService.getRequests(user.id)

const present = attendance.filter((a) => a.status === "present").length
    const attendancePercentage = calculateAttendancePercentage(present, attendance.length)

return {
      attendance: attendancePercentage.toFixed(1),
      grades: grades.length,
      requests: requests.filter((r) => r.status === "pending").length,
    }
  }, [user])

if (!user) return null

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Welcome, {user.firstName}</h1>
        <p className="text-muted-foreground mt-2">
          Grade {(user as any).grade} - Section {(user as any).section}
        </p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Attendance</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.attendance}%</div>
            <p className="text-xs text-muted-foreground mt-1">Current attendance rate</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Grades</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.grades}</div>
            <p className="text-xs text-muted-foreground mt-1">Total grades entered</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Pending Requests</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.requests}</div>
            <p className="text-xs text-muted-foreground mt-1">Awaiting approval</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Quick Links</CardTitle>
          <CardDescription>Access commonly used features</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
            <Link href="/student/grades">
              <Button variant="outline" className="w-full bg-transparent">
                View Grades
              </Button>
            </Link>
            <Link href="/student/attendance">
              <Button variant="outline" className="w-full bg-transparent">
                Check Attendance
              </Button>
            </Link>
            <Link href="/student/schedule">
              <Button variant="outline" className="w-full bg-transparent">
                View Schedule
              </Button>
            </Link>
            <Link href="/student/requests">
              <Button variant="outline" className="w-full bg-transparent">
                Make Request
              </Button>
            </Link>
            <Link href="/student/settings">
              <Button variant="outline" className="w-full bg-transparent">
                Settings
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/documents.tsx" isMerged="true"
"use client"

import type React from "react"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/app/contexts/auth-context"
import { studentService } from "@/app/services/student-service"
import { useState, useEffect } from "react"
import { Download, Trash2, Upload } from 'lucide-react'

export const StudentDocuments = () => {
  const { user } = useAuth()

const [documents, setDocuments] = useState<any[]>([])
  const [refreshKey, setRefreshKey] = useState(0)
  const [documentName, setDocumentName] = useState("")
  const [documentType, setDocumentType] = useState("Transcript")
  const [isUploading, setIsUploading] = useState(false)

useEffect(() => {
    if (!user) return
    const docs = studentService.getDocuments(user.id)
    setDocuments(docs)
  }, [user, refreshKey])

const documentsByType = documents.reduce((acc: any, doc: any) => {
    if (!acc[doc.type]) {
      acc[doc.type] = []
    }
    acc[doc.type].push(doc)
    return acc
  }, {})

const handleUploadDocument = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file || !documentName) return

setIsUploading(true)
    try {
      const reader = new FileReader()
      reader.onload = (event) => {
        const fileUrl = event.target?.result as string
        studentService.uploadDocument({
          studentId: user!.id,
          name: documentName,
          url: fileUrl,
          type: documentType,
        })
        setDocumentName("")
        setDocumentType("Transcript")
        setRefreshKey(prev => prev + 1)
        e.target.value = ""
      }
      reader.readAsDataURL(file)
    } finally {
      setIsUploading(false)
    }
  }

const handleDeleteDocument = (docId: string) => {
    studentService.deleteDocument(docId, user!.id)
    setRefreshKey(prev => prev + 1)
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Documents</h1>
        <p className="text-muted-foreground">Upload and manage your documents</p>
      </div>

{/* Upload Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Upload className="w-5 h-5" />
            Upload Document
          </CardTitle>
          <CardDescription>Upload important documents and forms</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="doc-name" className="block text-sm font-medium mb-2">
              Document Name
            </label>
            <Input
              id="doc-name"
              value={documentName}
              onChange={(e) => setDocumentName(e.target.value)}
              placeholder="e.g., My Transcript 2024"
            />
          </div>

<div>
            <label htmlFor="doc-type" className="block text-sm font-medium mb-2">
              Document Type
            </label>
            <select
              id="doc-type"
              value={documentType}
              onChange={(e) => setDocumentType(e.target.value)}
              className="w-full px-3 py-2 border border-input rounded-md bg-background"
            >
              <option value="Transcript">Transcript</option>
              <option value="Certificate">Certificate</option>
              <option value="Transfer Certificate">Transfer Certificate</option>
              <option value="Leave Letter">Leave Letter</option>
              <option value="Identity Card Photo">Identity Card Photo</option>
              <option value="Admission Letter">Admission Letter</option>
            </select>
          </div>

<div>
            <label htmlFor="file-upload" className="block text-sm font-medium mb-2">
              Choose File
            </label>
            <label htmlFor="file-upload" className="cursor-pointer">
              <div className="flex items-center justify-center gap-2 px-4 py-8 border-2 border-dashed border-border rounded-lg hover:bg-muted">
                <Upload className="w-5 h-5" />
                <span className="text-sm">Click to upload or drag and drop</span>
              </div>
            </label>
            <input
              id="file-upload"
              type="file"
              onChange={handleUploadDocument}
              disabled={isUploading || !documentName}
              className="hidden"
            />
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Your Documents</CardTitle>
          <CardDescription>Organized by document type</CardDescription>
        </CardHeader>
        <CardContent>
          {documents.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No documents uploaded yet</p>
          ) : (
            <div className="space-y-6">
              {Object.keys(documentsByType).sort().map((type) => (
                <div key={type} className="space-y-2">
                  <h3 className="font-semibold text-lg border-b pb-2">{type}</h3>
                  <div className="space-y-2">
                    {documentsByType[type].map((doc: any) => (
                      <div
                        key={doc.id}
                        className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted"
                      >
                        <div>
                          <p className="font-semibold">{doc.name}</p>
                          <p className="text-sm text-muted-foreground">
                            Uploaded on {new Date(doc.uploadedAt).toLocaleDateString()}
                          </p>
                        </div>
                        <div className="flex gap-2">
                          <a href={doc.url} download={doc.name}>
                            <Button size="sm" variant="outline">
                              <Download className="w-4 h-4" />
                            </Button>
                          </a>
                          <Button
                            size="sm"
                            variant="outline"
                            className="text-destructive"
                            onClick={() => handleDeleteDocument(doc.id)}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/grades.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import { studentService } from "@/app/services/student-service"
import { useMemo } from "react"
import { calculateGPA, getGradeFromScore } from "@/lib/helpers"

export const StudentGrades = () => {
  const { user } = useAuth()

const gradesData = useMemo(() => {
    if (!user) return { grades: [], gpa: 0, average: 0 }
    const grades = studentService.getGrades(user.id)
    const scores = grades.map((g) => g.score)
    const gpa = calculateGPA(scores)
    const average = scores.length > 0 ? scores.reduce((a, b) => a + b) / scores.length : 0

return {
      grades: grades.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
      gpa,
      average,
    }
  }, [user])

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Grades</h1>
        <p className="text-muted-foreground">Your academic performance</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">GPA</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{gradesData.gpa.toFixed(2)}</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Average Score</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{gradesData.average.toFixed(1)}%</div>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Total Grades</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{gradesData.grades.length}</div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Grade Records</CardTitle>
          <CardDescription>Your complete grade history</CardDescription>
        </CardHeader>
        <CardContent>
          {gradesData.grades.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No grades recorded yet</p>
          ) : (
            <div className="space-y-2">
              {gradesData.grades.map((grade) => (
                <div
                  key={grade.id}
                  className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted"
                >
                  <div>
                    <p className="font-semibold">{grade.subject}</p>
                    <p className="text-sm text-muted-foreground">
                      {grade.term} - {grade.semester}
                    </p>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-bold">{grade.score}</div>
                    <div className="text-sm text-muted-foreground">Grade: {getGradeFromScore(grade.score)}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/my-classes.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useAuth } from "@/app/contexts/auth-context"
import { classesStorage } from "@/lib/storage"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Link from "next/link"

interface Class {
  id: string
  subjectId: string
  subjectCode: string
  subjectName: string
  teacherId: string
  teacherName: string
  time: string
  day: string
  semester: string
  year: string
  students: string[]
  createdAt: string
}

export const MyClasses: React.FC = () => {
  const { user } = useAuth()
  const [enrolledClasses, setEnrolledClasses] = useState<Class[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    if (!user?.id) return

// Get all classes and filter for the ones the student is enrolled in
    const allClasses = classesStorage.getAll()
    const studentClasses = allClasses.filter((cls) => cls.students.includes(user.id))
    setEnrolledClasses(studentClasses)
    setLoading(false)
  }, [user?.id])

if (loading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="text-muted-foreground">Loading your classes...</div>
      </div>
    )
  }

if (enrolledClasses.length === 0) {
    return (
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">My Classes</h1>
        <Card>
          <CardContent className="pt-6">
            <p className="text-center text-muted-foreground">You are not enrolled in any classes yet.</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-4">
      <h1 className="text-3xl font-bold">My Classes</h1>
      <div className="grid gap-4 md:grid-cols-2">
        {enrolledClasses.map((cls) => (
          <Card key={cls.id}>
            <CardHeader>
              <CardTitle className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-sm text-muted-foreground">{cls.subjectCode}</p>
                  <p>{cls.subjectName}</p>
                </div>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <p className="text-sm font-medium text-muted-foreground">Instructor</p>
                <p>{cls.teacherName}</p>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Day</p>
                  <p>{cls.day}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Time</p>
                  <p>{cls.time}</p>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Semester</p>
                  <p>{cls.semester}</p>
                </div>
                <div>
                  <p className="text-sm font-medium text-muted-foreground">Year</p>
                  <p>{cls.year}</p>
                </div>
              </div>
              <div>
                <p className="text-sm font-medium text-muted-foreground">Total Students Enrolled</p>
                <p>{cls.students.length}</p>
              </div>
              <Link href={`/student/classes/${cls.id}`}>
                <Button className="w-full mt-2">View Class Details</Button>
              </Link>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/requests.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/app/contexts/auth-context"
import { studentService } from "@/app/services/student-service"
import { useEffect, useState } from "react"
import { REQUEST_TYPES } from "@/lib/constants"
import { CheckCircle, Clock, XCircle, Eye } from 'lucide-react'
import { requestMessagesStorage } from "@/lib/storage"

export const StudentRequests = () => {
  const { user } = useAuth()
  const [requestType, setRequestType] = useState("")
  const [reason, setReason] = useState("")
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [expandedRequest, setExpandedRequest] = useState<string | null>(null)
  const [requests, setRequests] = useState<any[]>([])

useEffect(() => {
    if (!user) return

const fetchRequests = () => {
      const allRequests = studentService.getRequests(user.id)
      console.log("[v0] Fetched requests for student:", user.id, allRequests)
      setRequests(allRequests)
    }

fetchRequests()

const interval = setInterval(fetchRequests, 3000)
    return () => clearInterval(interval)
  }, [user])

const getRequestMessages = (requestId: string) => {
    return requestMessagesStorage.getByRequestId(requestId)
  }

const statusMessages: { [key: string]: string } = {
    pending: "Your Request is still Pending",
    read: "Your Request has been read by admin",
    in_progress: "Your Request has been viewed by admin and in Progress",
    completed: "Your Request has been Completed pick it up on Registrar",
    rejected: "I'm sorry but your Request is Rejected",
  }

const handleSubmitRequest = async () => {
    if (!user || !requestType || !reason.trim()) return

setIsSubmitting(true)
    try {
      studentService.createRequest({
        studentId: user.id,
        type: requestType,
        status: "pending",
        reason,
      })
      setRequestType("")
      setReason("")
      const updatedRequests = studentService.getRequests(user.id)
      setRequests(updatedRequests)
    } finally {
      setIsSubmitting(false)
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle className="w-5 h-5 text-green-500" />
      case "rejected":
        return <XCircle className="w-5 h-5 text-red-500" />
      case "pending":
        return <Clock className="w-5 h-5 text-yellow-500" />
      case "read":
      case "in_progress":
        return <Eye className="w-5 h-5 text-blue-500" />
      default:
        return <Eye className="w-5 h-5 text-blue-500" />
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Document Requests</h1>
        <p className="text-muted-foreground">Submit and track document requests</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Submit a Request</CardTitle>
          <CardDescription>Request documents or services from the administration</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div>
              <label htmlFor="type" className="block text-sm font-medium mb-2">
                Request Type
              </label>
              <select
                id="type"
                value={requestType}
                onChange={(e) => setRequestType(e.target.value)}
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
              >
                <option value="">Select a request type</option>
                {REQUEST_TYPES.map((type) => (
                  <option key={type} value={type}>
                    {type}
                  </option>
                ))}
              </select>
            </div>

<div>
              <label htmlFor="reason" className="block text-sm font-medium mb-2">
                Reason/Details
              </label>
              <textarea
                id="reason"
                value={reason}
                onChange={(e) => setReason(e.target.value)}
                placeholder="Provide details about your request"
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
                rows={4}
              />
            </div>

<Button onClick={handleSubmitRequest} disabled={isSubmitting || !requestType || !reason}>
              {isSubmitting ? "Submitting..." : "Submit Request"}
            </Button>
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Your Requests</CardTitle>
          <CardDescription>Track the status of your submitted requests</CardDescription>
        </CardHeader>
        <CardContent>
          {requests.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No requests submitted yet</p>
          ) : (
            <div className="space-y-2">
              {requests.map((req) => (
                <div
                  key={req.id}
                  className="p-4 border border-border rounded-lg hover:bg-muted cursor-pointer transition"
                  onClick={() => setExpandedRequest(expandedRequest === req.id ? null : req.id)}
                >
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3 flex-1">
                      {getStatusIcon(req.status)}
                      <div>
                        <p className="font-semibold">{req.type}</p>
                        <p className="text-sm text-muted-foreground">{req.reason}</p>
                      </div>
                    </div>
                    <div
                      className={`px-3 py-1 rounded-full text-sm font-medium ${
                        req.status === "completed"
                          ? "bg-green-100 text-green-800"
                          : req.status === "rejected"
                            ? "bg-red-100 text-red-800"
                            : req.status === "in_progress"
                              ? "bg-blue-100 text-blue-800"
                              : req.status === "read"
                                ? "bg-blue-50 text-blue-700"
                                : "bg-yellow-100 text-yellow-800"
                      }`}
                    >
                      {req.status.replace("_", " ").charAt(0).toUpperCase() + req.status.replace("_", " ").slice(1)}
                    </div>
                  </div>

{expandedRequest === req.id && (
                    <div className="mt-4 pt-4 border-t space-y-4">
                      <div>
                        <p className="text-sm font-medium mb-1">Status Message:</p>
                        <p className="text-sm bg-blue-50 p-2 rounded border border-blue-200">
                          {statusMessages[req.status] || "No message"}
                        </p>
                      </div>

{getRequestMessages(req.id).length > 0 && (
                        <div>
                          <p className="text-sm font-medium mb-2">Admin Messages:</p>
                          <div className="space-y-2">
                            {getRequestMessages(req.id).map((msg) => (
                              <div key={msg.id} className="bg-gray-50 p-3 rounded border border-gray-200">
                                <p className="text-xs font-semibold text-gray-600 mb-1">Admin Reply</p>
                                <p className="text-sm text-gray-700">{msg.message}</p>
                                <p className="text-xs text-gray-500 mt-1">{new Date(msg.createdAt).toLocaleString()}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}

<p className="text-xs text-muted-foreground">
                        Created: {new Date(req.createdAt).toLocaleDateString()}
                        {req.completedAt && ` • Completed: ${new Date(req.completedAt).toLocaleDateString()}`}
                      </p>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/schedule.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import { studentService } from "@/app/services/student-service"
import { useMemo } from "react"

const DAYS_ORDER = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

export const StudentSchedule = () => {
  const { user } = useAuth()

const scheduleData = useMemo(() => {
    if (!user) return {}
    const schedule = studentService.getSchedule(user.id)

const grouped: Record<string, typeof schedule> = {}
    schedule.forEach((item) => {
      if (!grouped[item.day]) grouped[item.day] = []
      grouped[item.day].push(item)
    })

return grouped
  }, [user])

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Class Schedule</h1>
        <p className="text-muted-foreground">Your weekly class schedule</p>
      </div>

{DAYS_ORDER.length === 0 || Object.keys(scheduleData).length === 0 ? (
        <Card>
          <CardContent className="py-12">
            <p className="text-muted-foreground text-center">No schedule available yet</p>
          </CardContent>
        </Card>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {DAYS_ORDER.map(
            (day) =>
              scheduleData[day] && (
                <Card key={day}>
                  <CardHeader>
                    <CardTitle className="text-base">{day}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {scheduleData[day].map((item) => (
                        <div key={item.id} className="p-3 bg-muted rounded-lg border border-border">
                          <p className="font-semibold">{item.subject}</p>
                          <p className="text-sm text-muted-foreground">{item.time}</p>
                          <p className="text-sm text-muted-foreground">
                            {item.teacher} | Room {item.room}
                          </p>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              ),
          )}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/student-dashboard.tsx" isMerged="true"
"use client"

import type React from "react"

import { ProtectedRoute } from "@/app/components/shared/protected-route"
import { Navbar } from "@/app/components/shared/navbar"
import { Sidebar } from "@/app/components/shared/sidebar"
import { useAuth } from "@/app/contexts/auth-context"

interface StudentDashboardProps {
  children: React.ReactNode
}

export const StudentDashboard: React.FC<StudentDashboardProps> = ({ children }) => {
  const { user } = useAuth()

const sidebarItems = [
    { label: "Dashboard", href: "/student/dashboard" },
    { label: "My Classes", href: "/student/classes" },
    { label: "Grades", href: "/student/grades" },
    { label: "Attendance", href: "/student/attendance" },
    { label: "Schedule", href: "/student/schedule" },
    { label: "Documents", href: "/student/documents" },
    { label: "Requests", href: "/student/requests" },
    { label: "Financial", href: "/student/financial" },
    { label: "Library", href: "/student/library" },
    { label: "Notifications", href: "/student/notifications" },
    { label: "Feedback", href: "/student/feedback" },
    { label: "Contact Admin", href: "/student/contact-admin" },
  ]

return (
    <ProtectedRoute allowedRoles={["student"]}>
      <Navbar title={`Welcome, ${user?.firstName}`} />
      <div className="flex min-h-screen bg-background">
        <Sidebar items={sidebarItems} />
        <main className="flex-1 p-4 md:p-6">{children}</main>
      </div>
    </ProtectedRoute>
  )
}
[V0_FILE]typescriptreact:file="app/components/student/student-settings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/app/contexts/auth-context"
import { studentService } from "@/app/services/student-service"
import { User, Lock, Upload } from "lucide-react"

export const StudentSettings = () => {
  const { user, updateUser } = useAuth()
  const [currentPassword, setCurrentPassword] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [profilePicture, setProfilePicture] = useState(user?.profilePicture || "")
  const [isUpdating, setIsUpdating] = useState(false)
  const [message, setMessage] = useState("")

const handleProfilePictureChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

const reader = new FileReader()
    reader.onload = (event) => {
      const base64 = event.target?.result as string
      setProfilePicture(base64)
      studentService.updateStudentProfile(user!.id, { profilePicture: base64 })
      updateUser({ ...user!, profilePicture: base64 })
    }
    reader.readAsDataURL(file)
  }

const handlePasswordChange = async () => {
    if (!currentPassword || !newPassword || !confirmPassword) {
      setMessage("Please fill all fields")
      return
    }

if (newPassword !== confirmPassword) {
      setMessage("New passwords do not match")
      return
    }

if (newPassword.length < 8) {
      setMessage("Password must be at least 8 characters")
      return
    }

if (user?.password !== currentPassword) {
      setMessage("Current password is incorrect")
      return
    }

setIsUpdating(true)
    try {
      studentService.updateStudentProfile(user!.id, { password: newPassword })
      updateUser({ ...user!, password: newPassword })
      setMessage("Password changed successfully")
      setCurrentPassword("")
      setNewPassword("")
      setConfirmPassword("")
      setTimeout(() => setMessage(""), 3000)
    } catch (error) {
      setMessage("Failed to update password")
    } finally {
      setIsUpdating(false)
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Account Settings</h1>
        <p className="text-muted-foreground">Manage your profile and security</p>
      </div>

{message && (
        <div
          className={`p-4 rounded-lg ${message.includes("successfully") ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
        >
          {message}
        </div>
      )}

{/* Profile Picture */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <User className="w-5 h-5" />
            Profile Picture
          </CardTitle>
          <CardDescription>Update your profile picture</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center gap-4">
            {profilePicture && (
              <img
                src={profilePicture || "/placeholder.svg"}
                alt="Profile"
                className="w-24 h-24 rounded-full object-cover"
              />
            )}
            <div>
              <label htmlFor="picture-upload" className="cursor-pointer">
                <div className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90">
                  <Upload className="w-4 h-4" />
                  Upload Picture
                </div>
              </label>
              <input
                id="picture-upload"
                type="file"
                accept="image/*"
                onChange={handleProfilePictureChange}
                className="hidden"
              />
              <p className="text-xs text-muted-foreground mt-2">JPG, PNG up to 5MB</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Change Password */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Lock className="w-5 h-5" />
            Change Password
          </CardTitle>
          <CardDescription>Update your password regularly for security</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="current-pwd" className="block text-sm font-medium mb-2">
              Current Password
            </label>
            <Input
              id="current-pwd"
              type="password"
              value={currentPassword}
              onChange={(e) => setCurrentPassword(e.target.value)}
              placeholder="Enter current password"
            />
          </div>

<div>
            <label htmlFor="new-pwd" className="block text-sm font-medium mb-2">
              New Password
            </label>
            <Input
              id="new-pwd"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              placeholder="Enter new password"
            />
          </div>

<div>
            <label htmlFor="confirm-pwd" className="block text-sm font-medium mb-2">
              Confirm Password
            </label>
            <Input
              id="confirm-pwd"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder="Confirm new password"
            />
          </div>

<Button onClick={handlePasswordChange} disabled={isUpdating} className="w-full">
            {isUpdating ? "Updating..." : "Update Password"}
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/analytics.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import { teacherService } from "@/app/services/teacher-service"
import { useMemo } from "react"
import { BarChart3, Users, BookOpen, TrendingUp } from "lucide-react"

export const TeacherAnalytics = () => {
  const { user } = useAuth()

const stats = useMemo(() => {
    if (!user) return null
    const classes = teacherService.getClasses(user.id)
    const students = classes.reduce((acc, cls) => acc + (cls.students?.length || 0), 0)

return {
      totalClasses: classes.length,
      totalStudents: students,
      averageClassSize: classes.length > 0 ? Math.round(students / classes.length) : 0,
      activeClasses: classes.filter((cls) => cls.active).length,
    }
  }, [user])

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Analytics</h1>
        <p className="text-muted-foreground">View your teaching statistics and performance</p>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <BookOpen className="w-4 h-4" />
              Total Classes
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats?.totalClasses || 0}</div>
            <p className="text-xs text-muted-foreground">Classes assigned</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <Users className="w-4 h-4" />
              Total Students
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats?.totalStudents || 0}</div>
            <p className="text-xs text-muted-foreground">Across all classes</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <BarChart3 className="w-4 h-4" />
              Avg Class Size
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats?.averageClassSize || 0}</div>
            <p className="text-xs text-muted-foreground">Students per class</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium flex items-center gap-2">
              <TrendingUp className="w-4 h-4" />
              Active Classes
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats?.activeClasses || 0}</div>
            <p className="text-xs text-muted-foreground">Currently active</p>
          </CardContent>
        </Card>
      </div>

{/* Detailed Analytics */}
      <Card>
        <CardHeader>
          <CardTitle>Class Performance Overview</CardTitle>
          <CardDescription>Breakdown of your classes and enrollment</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            <p className="text-sm text-muted-foreground">
              Analytics data will be displayed here as more data is collected throughout the semester.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/attendance-marking.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/app/contexts/auth-context"
import { teacherService } from "@/app/services/teacher-service"
import { classesStorage, userStorage } from "@/lib/storage"
import { useEffect, useState } from "react"
import { generateId } from "@/lib/helpers"

interface AttendanceRecord {
  id: string
  classId: string
  subjectCode: string
  className: string
  date: string
  records: {
    studentId: string
    studentName: string
    status: "present" | "absent" | "late"
  }[]
  createdAt: string
}

export const TeacherAttendanceMarking = () => {
  const { user } = useAuth()
  const [classes, setClasses] = useState<any[]>([])
  const [selectedClass, setSelectedClass] = useState("")
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split("T")[0])
  const [attendance, setAttendance] = useState<Record<string, "present" | "absent" | "late">>({})
  const [students, setStudents] = useState<any[]>([])
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [savedAttendance, setSavedAttendance] = useState<AttendanceRecord[]>([])
  const [viewingRecord, setViewingRecord] = useState<AttendanceRecord | null>(null)
  const [isViewModalOpen, setIsViewModalOpen] = useState(false)
  const [currentAttendanceId, setCurrentAttendanceId] = useState("")

useEffect(() => {
    if (user) {
      const teacherClasses = classesStorage.getByTeacherId(user.id)
      setClasses(teacherClasses)
      
      // Load saved attendance
      const saved = localStorage.getItem("attendance")
      if (saved) {
        setSavedAttendance(JSON.parse(saved))
      }
    }
  }, [user])

useEffect(() => {
    if (selectedClass) {
      const classItem = classes.find((c) => c.id === selectedClass)
      if (classItem) {
        const allStudents = userStorage.getStudents()
        const enrolledStudents = allStudents.filter((s) => 
          classItem.students.includes(s.id)
        )
        setStudents(enrolledStudents)
        
        // Initialize all students as present by default
        const initialAttendance: Record<string, "present" | "absent" | "late"> = {}
        enrolledStudents.forEach((student) => {
          initialAttendance[student.id] = "present"
        })
        setAttendance(initialAttendance)
        
        const shortId = generateId("ATT").split("_")[1]
        setCurrentAttendanceId(shortId)
      }
    } else {
      setStudents([])
      setAttendance({})
      setCurrentAttendanceId("")
    }
  }, [selectedClass, classes])

const handleStatusChange = (studentId: string, status: "present" | "absent" | "late") => {
    setAttendance((prev) => ({ ...prev, [studentId]: status }))
  }

const handleSubmitAttendance = () => {
    if (!selectedClass || students.length === 0) return

setIsSubmitting(true)
    try {
      const classInfo = classes.find((c) => c.id === selectedClass)
      const attendanceRecord: AttendanceRecord = {
        id: currentAttendanceId, // Use the simple ID format
        classId: selectedClass,
        subjectCode: classInfo?.subjectCode || "",
        className: classInfo?.subjectName || "",
        date: selectedDate,
        records: students.map((student) => ({
          studentId: student.id,
          studentName: `${student.firstName} ${student.lastName}`,
          status: attendance[student.id] || "present",
        })),
        createdAt: new Date().toISOString(),
      }

const existingRecords = JSON.parse(localStorage.getItem("attendance") || "[]")
      const allRecords = [...existingRecords, attendanceRecord]
      localStorage.setItem("attendance", JSON.stringify(allRecords))
      setSavedAttendance(allRecords)

alert("Attendance submitted successfully!")
      
      // Reset form
      setSelectedClass("")
      setAttendance({})
      setStudents([])
      setCurrentAttendanceId("")
    } finally {
      setIsSubmitting(false)
    }
  }

const handleViewDetails = (record: AttendanceRecord) => {
    setViewingRecord(record)
    setIsViewModalOpen(true)
  }

const handleDeleteAttendance = (recordId: string) => {
    if (!confirm("Are you sure you want to delete this attendance record? This action cannot be undone.")) {
      return
    }
    
    const existingRecords = JSON.parse(localStorage.getItem("attendance") || "[]")
    const updatedRecords = existingRecords.filter((r: AttendanceRecord) => r.id !== recordId)
    localStorage.setItem("attendance", JSON.stringify(updatedRecords))
    setSavedAttendance(updatedRecords)
    
    if (viewingRecord?.id === recordId) {
      setIsViewModalOpen(false)
      setViewingRecord(null)
    }
  }

const selectedClassInfo = classes.find((c) => c.id === selectedClass)

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Mark Attendance</h1>
        <p className="text-muted-foreground">Record student attendance for your classes</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Select Class</CardTitle>
          <CardDescription>Choose a class and date to mark attendance</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="class" className="block text-sm font-medium mb-2">
                Select Class
              </label>
              <select
                id="class"
                value={selectedClass}
                onChange={(e) => setSelectedClass(e.target.value)}
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
              >
                <option value="">Choose a class</option>
                {classes.map((cls) => (
                  <option key={cls.id} value={cls.id}>
                    {cls.subjectCode} - {cls.subjectName} ({cls.day} {cls.time})
                  </option>
                ))}
              </select>
            </div>

<div>
              <label htmlFor="date" className="block text-sm font-medium mb-2">
                Date
              </label>
              <input
                id="date"
                type="date"
                value={selectedDate}
                onChange={(e) => setSelectedDate(e.target.value)}
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
              />
            </div>
          </div>

{selectedClass && students.length > 0 && (
            <div className="space-y-4 mt-6">
              <div className="border-b pb-2">
                <h3 className="font-semibold text-lg">
                  Attendance #{currentAttendanceId}
                </h3>
                <p className="text-sm text-muted-foreground">
                  Date: {new Date(selectedDate).toLocaleDateString()} | Class: {selectedClassInfo?.subjectCode}
                </p>
              </div>

<div className="overflow-x-auto">
                <table className="w-full border-collapse border border-border">
                  <thead>
                    <tr className="bg-muted">
                      <th className="border border-border px-4 py-2 text-left">Student</th>
                      <th className="border border-border px-4 py-2 text-center">Present</th>
                      <th className="border border-border px-4 py-2 text-center">Absent</th>
                      <th className="border border-border px-4 py-2 text-center">Late</th>
                    </tr>
                  </thead>
                  <tbody>
                    {students.map((student) => (
                      <tr key={student.id} className="hover:bg-muted/50">
                        <td className="border border-border px-4 py-3">
                          <div>
                            <p className="font-medium">{student.firstName} {student.lastName}</p>
                            <p className="text-sm text-muted-foreground">{student.studentId}</p>
                          </div>
                        </td>
                        <td className="border border-border px-4 py-3 text-center">
                          <input
                            type="checkbox"
                            checked={attendance[student.id] === "present"}
                            onChange={() => handleStatusChange(student.id, "present")}
                            className="w-5 h-5 cursor-pointer"
                          />
                        </td>
                        <td className="border border-border px-4 py-3 text-center">
                          <input
                            type="checkbox"
                            checked={attendance[student.id] === "absent"}
                            onChange={() => handleStatusChange(student.id, "absent")}
                            className="w-5 h-5 cursor-pointer"
                          />
                        </td>
                        <td className="border border-border px-4 py-3 text-center">
                          <input
                            type="checkbox"
                            checked={attendance[student.id] === "late"}
                            onChange={() => handleStatusChange(student.id, "late")}
                            className="w-5 h-5 cursor-pointer"
                          />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

<Button onClick={handleSubmitAttendance} disabled={isSubmitting} className="w-full mt-4">
                {isSubmitting ? "Submitting..." : "Submit Attendance"}
              </Button>
            </div>
          )}

{selectedClass && students.length === 0 && (
            <div className="text-center py-8 text-muted-foreground">
              No students enrolled in this class yet.
            </div>
          )}
        </CardContent>
      </Card>

{savedAttendance.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Attendance History</CardTitle>
            <CardDescription>Previously submitted attendance records</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {savedAttendance.slice().reverse().map((record) => {
                const classInfo = classes.find((c) => c.id === record.classId)
                const presentCount = record.records.filter((r) => r.status === "present").length
                const absentCount = record.records.filter((r) => r.status === "absent").length
                const lateCount = record.records.filter((r) => r.status === "late").length

return (
                  <div key={record.id} className="border border-border rounded-lg p-4">
                    <div className="flex justify-between items-start mb-2">
                      <div>
                        <p className="font-semibold">{classInfo?.subjectCode} - {classInfo?.subjectName}</p>
                        <p className="text-sm text-muted-foreground">
                          Date: {new Date(record.date).toLocaleDateString()}
                        </p>
                        <p className="text-xs text-muted-foreground mt-1">
                          ID: {record.id}
                        </p>
                      </div>
                      <div className="flex flex-col items-end gap-2">
                        <div className="text-right text-sm">
                          <p className="text-green-600">Present: {presentCount}</p>
                          <p className="text-red-600">Absent: {absentCount}</p>
                          <p className="text-yellow-600">Late: {lateCount}</p>
                        </div>
                        <div className="flex gap-2">
                          <Button 
                            size="sm" 
                            variant="outline"
                            onClick={() => handleViewDetails(record)}
                          >
                            View Details
                          </Button>
                          <Button 
                            size="sm" 
                            variant="destructive"
                            onClick={() => handleDeleteAttendance(record.id)}
                          >
                            Delete
                          </Button>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          </CardContent>
        </Card>
      )}

{isViewModalOpen && viewingRecord && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-background rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
            <div className="p-6">
              <div className="flex justify-between items-start mb-6">
                <div>
                  <h2 className="text-2xl font-bold">Attendance Details</h2>
                  <p className="text-sm text-muted-foreground mt-1">Attendance ID: {viewingRecord.id}</p>
                </div>
                <Button 
                  variant="ghost" 
                  size="sm"
                  onClick={() => setIsViewModalOpen(false)}
                >
                  Close
                </Button>
              </div>

<div className="space-y-4">
                <div className="grid grid-cols-2 gap-4 p-4 bg-muted rounded-lg">
                  <div>
                    <p className="text-sm text-muted-foreground">Class</p>
                    <p className="font-medium">{viewingRecord.subjectCode} - {viewingRecord.className}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Date</p>
                    <p className="font-medium">{new Date(viewingRecord.date).toLocaleDateString()}</p>
                  </div>
                </div>

<div className="border rounded-lg overflow-hidden">
                  <table className="w-full">
                    <thead className="bg-muted">
                      <tr>
                        <th className="text-left p-3 font-medium">Student Name</th>
                        <th className="text-center p-3 font-medium">Present</th>
                        <th className="text-center p-3 font-medium">Absent</th>
                        <th className="text-center p-3 font-medium">Late</th>
                      </tr>
                    </thead>
                    <tbody>
                      {viewingRecord.records.map((student, idx) => (
                        <tr key={idx} className="border-t">
                          <td className="p-3">{student.studentName}</td>
                          <td className="p-3 text-center">
                            <input 
                              type="checkbox" 
                              checked={student.status === "present"} 
                              disabled 
                              className="w-5 h-5"
                            />
                          </td>
                          <td className="p-3 text-center">
                            <input 
                              type="checkbox" 
                              checked={student.status === "absent"} 
                              disabled 
                              className="w-5 h-5"
                            />
                          </td>
                          <td className="p-3 text-center">
                            <input 
                              type="checkbox" 
                              checked={student.status === "late"} 
                              disabled 
                              className="w-5 h-5"
                            />
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/class-details.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useAuth } from "@/app/contexts/auth-context"
import { classesStorage, userStorage } from "@/lib/storage"
import { useMemo } from "react"
import Link from "next/link"

interface ClassDetailsProps {
  classId: string
}

export const ClassDetails = ({ classId }: ClassDetailsProps) => {
  const { user } = useAuth()

// Get student details
    const students = userStorage.getStudents()
    const classStudents = students.filter((s) => cls.students.includes(s.id))

return {
      ...cls,
      classStudents,
    }
  }, [user, classId])

if (!classData) {
    return (
      <div className="space-y-6">
        <h1 className="text-3xl font-bold">Class Details</h1>
        <Card>
          <CardContent className="py-8">
            <p className="text-muted-foreground text-center">Class not found</p>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div>
        <Link href="/teacher/classes">
          <Button variant="outline" size="sm">
            ← Back to Classes
          </Button>
        </Link>
        <h1 className="text-3xl font-bold mt-4">{classData.subjectName}</h1>
        <p className="text-muted-foreground">{classData.subjectCode}</p>
      </div>

{/* Class Students */}
      <Card>
        <CardHeader>
          <CardTitle>Students Enrolled</CardTitle>
          <CardDescription>{classData.classStudents.length} students</CardDescription>
        </CardHeader>
        <CardContent>
          {classData.classStudents.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No students enrolled yet</p>
          ) : (
            <div className="space-y-2">
              {classData.classStudents.map((student) => (
                <div key={student.id} className="p-3 border border-border rounded-lg">
                  <p className="font-medium">
                    {student.firstName} {student.lastName}
                  </p>
                  <p className="text-sm text-muted-foreground">{student.email}</p>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

{/* Quick Actions */}
      <div className="grid grid-cols-2 gap-4">
        <Link href={`/teacher/grade-input?classId=${classId}`}>
          <Button className="w-full">Enter Grades</Button>
        </Link>
        <Link href={`/teacher/attendance?classId=${classId}`}>
          <Button variant="outline" className="w-full bg-transparent">
            Mark Attendance
          </Button>
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/dashboard-home.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { teacherService } from "@/app/services/teacher-service"
import { useMemo } from "react"

export const TeacherDashboardHome = () => {
  const { user } = useAuth()

const stats = useMemo(() => {
    if (!user) return { classes: 0, students: 0, gradesToday: 0 }
    const classes = teacherService.getClasses(user.id)
    const totalStudents = classes.reduce((acc, c) => acc + c.studentCount, 0)
    const grades = classes.flatMap((c) => teacherService.getGradesByClass(c.id))

return {
      classes: classes.length,
      students: totalStudents,
      gradesToday: grades.length,
    }
  }, [user])

if (!user) return null

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Welcome, {user.firstName}</h1>
        <p className="text-muted-foreground mt-2">{(user as any).department}</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Classes</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.classes}</div>
            <p className="text-xs text-muted-foreground mt-1">Teaching</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Students</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.students}</div>
            <p className="text-xs text-muted-foreground mt-1">Across all classes</p>
          </CardContent>
        </Card>

<Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-sm font-medium">Grades Entered</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.gradesToday}</div>
            <p className="text-xs text-muted-foreground mt-1">Total grades</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Quick Actions</CardTitle>
          <CardDescription>Common tasks</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
            <Link href="/teacher/classes">
              <Button variant="outline" className="w-full bg-transparent">
                View Classes
              </Button>
            </Link>
            <Link href="/teacher/grade-input">
              <Button variant="outline" className="w-full bg-transparent">
                Enter Grades
              </Button>
            </Link>
            <Link href="/teacher/attendance-marking">
              <Button variant="outline" className="w-full bg-transparent">
                Mark Attendance
              </Button>
            </Link>
            <Link href="/teacher/materials">
              <Button variant="outline" className="w-full bg-transparent">
                Upload Materials
              </Button>
            </Link>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/grade-input.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/app/contexts/auth-context"
import { useState, useEffect } from "react"
import { classesStorage, userStorage, gradesStorage, type Grade } from "@/lib/storage"

export const TeacherGradeInput = () => {
  const { user } = useAuth()
  const [classes, setClasses] = useState<any[]>([])
  const [selectedClass, setSelectedClass] = useState("")
  const [selectedSemester, setSelectedSemester] = useState<"1st Semester" | "2nd Semester">("1st Semester")
  const [selectedTerm, setSelectedTerm] = useState<"Prelim" | "Midterm" | "PreFinals" | "Finals">("Prelim")
  const [studentGrades, setStudentGrades] = useState<Record<string, number>>({})
  const [students, setStudents] = useState<any[]>([])
  const [isSubmitting, setIsSubmitting] = useState(false)

useEffect(() => {
    if (user) {
      const teacherClasses = classesStorage.getByTeacherId(user.id)
      setClasses(teacherClasses)
    }
  }, [user])

useEffect(() => {
    if (selectedClass) {
      const classData = classes.find((c) => c.id === selectedClass)
      if (classData) {
        const allStudents = userStorage.getStudents()
        const enrolledStudents = allStudents.filter((s) => classData.students.includes(s.id))
        setStudents(enrolledStudents)

const existingGrades = gradesStorage.getByClassId(selectedClass).filter(
          (g) => g.semester === selectedSemester && g.term === selectedTerm,
        )

const gradesMap: Record<string, number> = {}
        existingGrades.forEach((grade) => {
          gradesMap[grade.studentId] = grade.score
        })
        setStudentGrades(gradesMap)
      }
    }
  }, [selectedClass, selectedSemester, selectedTerm, classes])

const handleGradeChange = (studentId: string, score: string) => {
    const numScore = parseFloat(score)
    if (!isNaN(numScore) && numScore >= 0 && numScore <= 100) {
      setStudentGrades((prev) => ({ ...prev, [studentId]: numScore }))
    } else if (score === "") {
      setStudentGrades((prev) => {
        const newGrades = { ...prev }
        delete newGrades[studentId]
        return newGrades
      })
    }
  }

const calculateAverage = (studentId: string) => {
    const studentClassGrades = gradesStorage
      .getByClassId(selectedClass)
      .filter((g) => g.studentId === studentId && g.semester === selectedSemester)

if (studentClassGrades.length === 0) return 0

const total = studentClassGrades.reduce((sum, grade) => sum + grade.score, 0)
    return (total / studentClassGrades.length).toFixed(2)
  }

const handleSubmitGrades = async () => {
    if (!selectedClass || !user) return

const classData = classes.find((c) => c.id === selectedClass)
    if (!classData) return

setIsSubmitting(true)
    try {
      Object.entries(studentGrades).forEach(([studentId, score]) => {
        const existingGrade = gradesStorage
          .getAll()
          .find(
            (g) =>
              g.studentId === studentId &&
              g.classId === selectedClass &&
              g.semester === selectedSemester &&
              g.term === selectedTerm,
          )

if (existingGrade) {
          gradesStorage.update(existingGrade.id, {
            score,
            status: "submitted",
            submittedAt: new Date().toISOString(),
          })
        } else {
          gradesStorage.add({
            studentId,
            classId: selectedClass,
            subjectCode: classData.subjectCode,
            subjectName: classData.subjectName,
            teacherId: user.id,
            teacherName: `${user.firstName} ${user.lastName}`,
            semester: selectedSemester,
            term: selectedTerm,
            score,
            status: "submitted",
            submittedAt: new Date().toISOString(),
          })
        }
      })

alert("Grades submitted successfully for admin approval!")
      setStudentGrades({})
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Grade Input</h1>
        <p className="text-muted-foreground">Enter and manage student grades</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Enter Grades</CardTitle>
          <CardDescription>Input grades for your students by semester and term</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
              <label htmlFor="class" className="block text-sm font-medium mb-2">
                Select Class
              </label>
              <select
                id="class"
                value={selectedClass}
                onChange={(e) => setSelectedClass(e.target.value)}
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
              >
                <option value="">Choose a class</option>
                {classes.map((cls) => (
                  <option key={cls.id} value={cls.id}>
                    {cls.subjectCode} - {cls.subjectName}
                  </option>
                ))}
              </select>
            </div>

<div>
              <label htmlFor="semester" className="block text-sm font-medium mb-2">
                Semester
              </label>
              <select
                id="semester"
                value={selectedSemester}
                onChange={(e) => setSelectedSemester(e.target.value as any)}
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
              >
                <option value="1st Semester">1st Semester</option>
                <option value="2nd Semester">2nd Semester</option>
              </select>
            </div>

<div>
              <label htmlFor="term" className="block text-sm font-medium mb-2">
                Term
              </label>
              <select
                id="term"
                value={selectedTerm}
                onChange={(e) => setSelectedTerm(e.target.value as any)}
                className="w-full px-3 py-2 border border-input rounded-md bg-background"
              >
                <option value="Prelim">Prelim</option>
                <option value="Midterm">Midterm</option>
                <option value="PreFinals">PreFinals</option>
                <option value="Finals">Finals</option>
              </select>
            </div>
          </div>

{selectedClass && students.length > 0 && (
            <div className="space-y-3">
              <h3 className="font-semibold">Enter Student Grades (0-100)</h3>
              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead>
                    <tr className="border-b">
                      <th className="text-left p-2">Student ID</th>
                      <th className="text-left p-2">Name</th>
                      <th className="text-left p-2">Grade</th>
                      <th className="text-left p-2">Semester Average</th>
                    </tr>
                  </thead>
                  <tbody>
                    {students.map((student) => (
                      <tr key={student.id} className="border-b hover:bg-muted/50">
                        <td className="p-2">{student.studentId}</td>
                        <td className="p-2">
                          {student.firstName} {student.lastName}
                        </td>
                        <td className="p-2">
                          <Input
                            type="number"
                            placeholder="0-100"
                            min="0"
                            max="100"
                            step="0.01"
                            value={studentGrades[student.id] || ""}
                            onChange={(e) => handleGradeChange(student.id, e.target.value)}
                            className="w-24"
                          />
                        </td>
                        <td className="p-2 font-semibold">{calculateAverage(student.id)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <Button onClick={handleSubmitGrades} disabled={isSubmitting} className="w-full">
                {isSubmitting ? "Submitting..." : "Submit Grades for Admin Approval"}
              </Button>
            </div>
          )}

{selectedClass && students.length === 0 && (
            <p className="text-muted-foreground text-center py-4">No students enrolled in this class</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/materials.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/app/contexts/auth-context"
import { teacherService } from "@/app/services/teacher-service"
import { useMemo, useState } from "react"
import { Trash2 } from "lucide-react"

export const TeacherMaterials = () => {
  const { user } = useAuth()
  const [selectedClass, setSelectedClass] = useState("")
  const [title, setTitle] = useState("")
  const [type, setType] = useState("")
  const [isUploading, setIsUploading] = useState(false)

const classes = useMemo(() => {
    if (!user) return []
    return teacherService.getClasses(user.id)
  }, [user])

const materials = useMemo(() => {
    if (!selectedClass) return []
    return teacherService.getMaterials(selectedClass)
  }, [selectedClass])

const handleUploadMaterial = async () => {
    if (!selectedClass || !title || !type) return

setIsUploading(true)
    try {
      teacherService.uploadMaterial({
        teacherId: user!.id,
        classId: selectedClass,
        title,
        url: `material_${Date.now()}`,
        type,
      })
      setTitle("")
      setType("")
    } finally {
      setIsUploading(false)
    }
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">Study Materials</h1>
        <p className="text-muted-foreground">Upload and manage study materials</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Upload Materials</CardTitle>
          <CardDescription>Share study materials with students</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label htmlFor="class" className="block text-sm font-medium mb-2">
              Select Class
            </label>
            <select
              id="class"
              value={selectedClass}
              onChange={(e) => setSelectedClass(e.target.value)}
              className="w-full px-3 py-2 border border-input rounded-md bg-background"
            >
              <option value="">Choose a class</option>
              {classes.map((cls) => (
                <option key={cls.id} value={cls.id}>
                  {cls.name}
                </option>
              ))}
            </select>
          </div>

{selectedClass && (
            <>
              <div>
                <label htmlFor="title" className="block text-sm font-medium mb-2">
                  Material Title
                </label>
                <Input
                  id="title"
                  value={title}
                  onChange={(e) => setTitle(e.target.value)}
                  placeholder="e.g., Chapter 5 - Equations"
                />
              </div>

<div>
                <label htmlFor="type" className="block text-sm font-medium mb-2">
                  Material Type
                </label>
                <select
                  id="type"
                  value={type}
                  onChange={(e) => setType(e.target.value)}
                  className="w-full px-3 py-2 border border-input rounded-md bg-background"
                >
                  <option value="">Select type</option>
                  <option value="notes">Notes</option>
                  <option value="assignment">Assignment</option>
                  <option value="exam">Exam</option>
                  <option value="solution">Solution</option>
                </select>
              </div>

<Button onClick={handleUploadMaterial} disabled={isUploading || !title || !type} className="w-full">
                {isUploading ? "Uploading..." : "Upload Material"}
              </Button>
            </>
          )}
        </CardContent>
      </Card>

{selectedClass && (
        <Card>
          <CardHeader>
            <CardTitle>Uploaded Materials</CardTitle>
          </CardHeader>
          <CardContent>
            {materials.length === 0 ? (
              <p className="text-muted-foreground text-center py-8">No materials uploaded yet</p>
            ) : (
              <div className="space-y-2">
                {materials.map((mat) => (
                  <div
                    key={mat.id}
                    className="flex items-center justify-between p-4 border border-border rounded-lg hover:bg-muted"
                  >
                    <div>
                      <p className="font-semibold">{mat.title}</p>
                      <p className="text-sm text-muted-foreground">{mat.type}</p>
                    </div>
                    <Button size="sm" variant="outline" className="text-destructive bg-transparent">
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/my-classes.tsx" isMerged="true"
"use client"

export const TeacherMyClasses = () => {
  const { user } = useAuth()

const classes = useMemo(() => {
    if (!user) return []
    const allClasses = classesStorage.getByTeacherId(user.id)
    return allClasses.map((cls) => ({
      id: cls.id,
      name: `${cls.subjectCode} - ${cls.subjectName}`,
      grade: `Semester ${cls.semester}, Year ${cls.year}`,
      studentCount: cls.students.length,
      subject: cls.subjectName,
    }))
  }, [user])

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">My Classes</h1>
        <p className="text-muted-foreground">Classes you're teaching</p>
      </div>

<Card>
        <CardHeader>
          <CardTitle>Classes</CardTitle>
          <CardDescription>Your assigned classes</CardDescription>
        </CardHeader>
        <CardContent>
          {classes.length === 0 ? (
            <p className="text-muted-foreground text-center py-8">No classes assigned yet</p>
          ) : (
            <div className="space-y-2">
              {classes.map((cls) => (
                <div
                  key={cls.id}
                  className="p-4 border border-border rounded-lg hover:bg-muted flex items-center justify-between"
                >
                  <div>
                    <p className="font-semibold">{cls.name}</p>
                    <p className="text-sm text-muted-foreground">
                      {cls.grade} · {cls.studentCount} students
                    </p>
                  </div>
                  <Link href={`/teacher/classes/${cls.id}`}>
                    <Button size="sm">View Details</Button>
                  </Link>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/teacher/teacher-dashboard.tsx" isMerged="true"
"use client"

import type React from "react"

interface TeacherDashboardProps {
  children: React.ReactNode
}

export const TeacherDashboard: React.FC<TeacherDashboardProps> = ({ children }) => {
  const { user } = useAuth()

const sidebarItems = [
    { label: "Dashboard", href: "/teacher/dashboard" },
    { label: "My Classes", href: "/teacher/classes" },
    { label: "Grade Input", href: "/teacher/grade-input" },
    { label: "Attendance", href: "/teacher/attendance-marking" },
    { label: "Materials", href: "/teacher/materials" },
    { label: "Analytics", href: "/teacher/analytics" },
  ]

return (
    <ProtectedRoute allowedRoles={["teacher"]}>
      <Navbar title={`Teacher - ${user?.firstName}`} />
      <div className="flex min-h-screen bg-background">
        <Sidebar items={sidebarItems} />
        <main className="flex-1 p-4 md:p-6">{children}</main>
      </div>
    </ProtectedRoute>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Updated to modern blue/teal educational theme */
  --background: oklch(0.99 0 0);
  --foreground: oklch(0.15 0.01 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0.01 240);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.15 0.01 240);
  --primary: oklch(0.45 0.15 240);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0.01 240);
  --secondary-foreground: oklch(0.15 0.01 240);
  --muted: oklch(0.96 0.005 240);
  --muted-foreground: oklch(0.5 0.01 240);
  --accent: oklch(0.55 0.18 200);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.9 0.005 240);
  --input: oklch(0.9 0.005 240);
  --ring: oklch(0.45 0.15 240);
  --chart-1: oklch(0.55 0.18 240);
  --chart-2: oklch(0.6 0.15 200);
  --chart-3: oklch(0.5 0.12 180);
  --chart-4: oklch(0.65 0.16 260);
  --chart-5: oklch(0.7 0.14 220);
  --radius: 0.5rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  /* Modern dark theme with better contrast */
  --background: oklch(0.12 0.01 240);
  --foreground: oklch(0.98 0.005 240);
  --card: oklch(0.15 0.01 240);
  --card-foreground: oklch(0.98 0.005 240);
  --popover: oklch(0.15 0.01 240);
  --popover-foreground: oklch(0.98 0.005 240);
  --primary: oklch(0.65 0.18 240);
  --primary-foreground: oklch(0.12 0.01 240);
  --secondary: oklch(0.22 0.01 240);
  --secondary-foreground: oklch(0.98 0.005 240);
  --muted: oklch(0.22 0.01 240);
  --muted-foreground: oklch(0.65 0.01 240);
  --accent: oklch(0.6 0.2 200);
  --accent-foreground: oklch(0.12 0.01 240);
  --destructive: oklch(0.5 0.2 27.325);
  --destructive-foreground: oklch(0.98 0.005 240);
  --border: oklch(0.25 0.01 240);
  --input: oklch(0.25 0.01 240);
  --ring: oklch(0.65 0.18 240);
  --chart-1: oklch(0.6 0.2 240);
  --chart-2: oklch(0.65 0.18 200);
  --chart-3: oklch(0.7 0.16 180);
  --chart-4: oklch(0.55 0.22 260);
  --chart-5: oklch(0.75 0.15 220);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="app/init-test-accounts/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { userStorage } from "@/lib/storage"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { generateId } from "@/lib/helpers"

export default function InitTestAccounts() {
  const [isInitialized, setIsInitialized] = useState(false)
  const [message, setMessage] = useState("")

useEffect(() => {
    const admins = userStorage.getAdmins()
    setIsInitialized(admins.length > 0)
  }, [])

const initializeTestAccounts = () => {
    try {
      // Admin Account
      const admin = {
        id: generateId(),
        email: "admin@test.com",
        password: "Admin123!",
        firstName: "Admin",
        lastName: "User",
        role: "super_admin" as const,
        permissions: ["manage_users", "approve_registrations", "manage_courses"],
        status: "active" as const,
        registeredAt: new Date().toISOString(),
      }

// Teacher Account
      const teacher = {
        id: generateId(),
        email: "teacher@test.com",
        password: "Teacher123!",
        firstName: "John",
        lastName: "Instructor",
        teacherId: "T001",
        department: "Information Technology",
        subjects: ["Web Development", "Database"],
        status: "active" as const,
        registeredAt: new Date().toISOString(),
      }

// Senior High Student
      const senioreHighStudent = {
        id: generateId(),
        email: "student_senior@test.com",
        password: "Student123!",
        firstName: "Maria",
        lastName: "Student",
        studentId: "S001",
        academicLevel: "senior_high" as const,
        grade: "12",
        strand: "STEM",
        status: "approved" as const,
        registeredAt: new Date().toISOString(),
        approvedAt: new Date().toISOString(),
        approvedBy: "admin@test.com",
      }

// Diploma Student
      const diplomaStudent = {
        id: generateId(),
        email: "student_diploma@test.com",
        password: "Student123!",
        firstName: "Juan",
        lastName: "Diploma",
        studentId: "S002",
        academicLevel: "diploma" as const,
        year: "2",
        course: "DIT",
        status: "approved" as const,
        registeredAt: new Date().toISOString(),
        approvedAt: new Date().toISOString(),
        approvedBy: "admin@test.com",
      }

// Bachelor Student
      const bachelorStudent = {
        id: generateId(),
        email: "student_bachelor@test.com",
        password: "Student123!",
        firstName: "Ana",
        lastName: "Bachelor",
        studentId: "S003",
        academicLevel: "bachelor" as const,
        year: "3",
        course: "BTVTED",
        status: "approved" as const,
        registeredAt: new Date().toISOString(),
        approvedAt: new Date().toISOString(),
        approvedBy: "admin@test.com",
      }

userStorage.addAdmin(admin)
      userStorage.addTeacher(teacher)
      userStorage.addStudent(senioreHighStudent)
      userStorage.addStudent(diplomaStudent)
      userStorage.addStudent(bachelorStudent)

setMessage("Test accounts initialized successfully!")
      setIsInitialized(true)
    } catch (error) {
      setMessage(`Error: ${error instanceof Error ? error.message : "Unknown error"}`)
    }
  }

const clearAllData = () => {
    if (window.confirm("Are you sure? This will clear ALL data.")) {
      localStorage.clear()
      setMessage("All data cleared!")
      setIsInitialized(false)
    }
  }

return (
    <div className="flex items-center justify-center min-h-screen bg-background p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Test Accounts Setup</CardTitle>
          <CardDescription>Initialize demo accounts for testing</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {isInitialized ? (
            <div className="bg-green-50 dark:bg-green-950 p-4 rounded-lg border border-green-200 dark:border-green-800">
              <p className="font-semibold text-green-900 dark:text-green-100 mb-4">Test Accounts Ready:</p>
              <div className="space-y-2 text-sm text-green-800 dark:text-green-200 font-mono">
                <p>Admin: admin@test.com / Admin123!</p>
                <p>Teacher: teacher@test.com / Teacher123!</p>
                <p>Student (SHS): student_senior@test.com / Student123!</p>
                <p>Student (Diploma): student_diploma@test.com / Student123!</p>
                <p>Student (Bachelor): student_bachelor@test.com / Student123!</p>
              </div>
            </div>
          ) : (
            <div className="bg-blue-50 dark:bg-blue-950 p-4 rounded-lg border border-blue-200 dark:border-blue-800">
              <p className="text-sm text-blue-900 dark:text-blue-100">
                No test accounts found. Click the button below to initialize them.
              </p>
            </div>
          )}

{message && (
            <div
              className={`p-3 rounded-lg text-sm ${message.includes("successfully") ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
            >
              {message}
            </div>
          )}

<div className="space-y-3">
            <Button onClick={initializeTestAccounts} className="w-full">
              Initialize Test Accounts
            </Button>
            <Button onClick={clearAllData} variant="outline" className="w-full bg-transparent">
              Clear All Data
            </Button>
          </div>

<p className="text-xs text-muted-foreground text-center">
            Go to <strong>/login</strong> to login with any test account
          </p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"
import { AuthProvider } from "@/app/contexts/auth-context"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "v0 App",
  description: "Created with v0",
  generator: "v0.app",
  icons: {
    icon: [
      {
        url: "/icon-light-32x32.png",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/icon-dark-32x32.png",
        media: "(prefers-color-scheme: dark)",
      },
      {
        url: "/icon.svg",
        type: "image/svg+xml",
      },
    ],
    apple: "/apple-icon.png",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={`font-sans antialiased`}>
        <AuthProvider>{children}</AuthProvider>
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true"
import { LoginForm } from "@/app/components/auth/login-form"

export default function LoginPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <LoginForm />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/not-found.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import Link from "next/link"
import { FileQuestion } from 'lucide-react'

export default function NotFound() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background to-muted">
      <Card className="max-w-md w-full text-center shadow-lg">
        <CardHeader className="space-y-4">
          <div className="flex justify-center">
            <div className="rounded-full bg-destructive/10 p-6">
              <FileQuestion className="w-16 h-16 text-destructive" />
            </div>
          </div>
          <div className="text-8xl font-bold text-muted-foreground">404</div>
          <CardTitle className="text-2xl">Page Not Found</CardTitle>
          <CardDescription className="text-base">
            The page you're looking for doesn't exist or has been moved.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-3">
          <Link href="/" className="block">
            <Button className="w-full" size="lg">
              Return to Home
            </Button>
          </Link>
          <Link href="/login" className="block">
            <Button variant="outline" className="w-full" size="lg">
              Go to Login
            </Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { useAuth } from "@/app/contexts/auth-context"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { GraduationCap, BookOpen, Users, FileText, Calendar, BarChart, Award, MessageSquare } from "lucide-react"

export default function HomePage() {
  const { user, isLoading } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isLoading && user) {
      if (user.role === "student") {
        router.push("/student/dashboard")
      } else if (user.role === "teacher") {
        router.push("/teacher/dashboard")
      } else if (user.role === "admin") {
        router.push("/admin/dashboard")
      }
    }
  }, [user, isLoading, router])

if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="space-y-4 text-center">
          <div className="inline-flex space-x-2">
            <div className="w-3 h-3 bg-primary rounded-full animate-bounce" />
            <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0.2s" }} />
            <div className="w-3 h-3 bg-primary rounded-full animate-bounce" style={{ animationDelay: "0.4s" }} />
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-background">
      <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center gap-2">
              <GraduationCap className="h-8 w-8 text-primary" />
              <span className="text-xl font-bold">CSA Student Portal</span>
            </div>
            <div className="flex items-center gap-3">
              <Link href="/login">
                <Button variant="ghost">Login</Button>
              </Link>
              <Link href="/register">
                <Button>Join us!</Button>
              </Link>
            </div>
          </div>
        </div>
      </nav>

<section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-secondary/5" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
          <div className="text-center max-w-3xl mx-auto">
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-balance mb-6">
              Your Complete Academic Management Platform
            </h1>
            <p className="text-lg sm:text-xl text-muted-foreground text-pretty mb-8 leading-relaxed">
              Streamline education management for students, teachers, and administrators. Track grades, manage
              attendance, and collaborate seamlessly in one powerful platform.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/register">
                <Button size="lg" className="w-full sm:w-auto text-base">
                  Create your Account
                </Button>
              </Link>
              <Link href="/login">
                <Button size="lg" variant="outline" className="w-full sm:w-auto text-base bg-transparent">
                  Login to Portal
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-24 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Built for Everyone</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Tailored experiences for students, teachers, and administrators
            </p>
          </div>

<div className="grid md:grid-cols-3 gap-8">
            {/* Student Card */}
            <Card className="border-2 hover:border-primary transition-colors">
              <CardContent className="pt-6">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                  <GraduationCap className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">For Students</h3>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  Access grades, track attendance, view schedules, and manage your academic documents all in one place.
                </p>
                <ul className="space-y-2 mb-6 text-sm">
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    View grades and transcripts
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Track attendance records
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Submit document requests
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Contact administrators
                  </li>
                </ul>
                <Link href="/login" className="block">
                  <Button className="w-full">Student Portal</Button>
                </Link>
              </CardContent>
            </Card>

{/* Teacher Card */}
            <Card className="border-2 hover:border-primary transition-colors">
              <CardContent className="pt-6">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                  <BookOpen className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">For Teachers</h3>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  Manage classes, input grades, mark attendance, and track student progress with powerful analytics.
                </p>
                <ul className="space-y-2 mb-6 text-sm">
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Grade input and approval
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Attendance management
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Upload course materials
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    View class analytics
                  </li>
                </ul>
                <Link href="/login" className="block">
                  <Button className="w-full">Teacher Portal</Button>
                </Link>
              </CardContent>
            </Card>

{/* Admin Card */}
            <Card className="border-2 hover:border-primary transition-colors">
              <CardContent className="pt-6">
                <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
                  <Users className="h-6 w-6 text-primary" />
                </div>
                <h3 className="text-xl font-semibold mb-2">For Administrators</h3>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  Comprehensive system management with user oversight, grade approval, and analytics.
                </p>
                <ul className="space-y-2 mb-6 text-sm">
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    User management
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Grade approval workflow
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    Request processing
                  </li>
                  <li className="flex items-center gap-2">
                    <div className="h-1.5 w-1.5 rounded-full bg-primary" />
                    System analytics
                  </li>
                </ul>
                <Link href="/login" className="block">
                  <Button className="w-full">Admin Portal</Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold mb-4">Everything You Need</h2>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Comprehensive tools designed to enhance the educational experience
            </p>
          </div>

<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <Award className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Grade Management</h3>
              <p className="text-sm text-muted-foreground">
                Track and manage grades across all terms with automated calculations
              </p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <Calendar className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Attendance Tracking</h3>
              <p className="text-sm text-muted-foreground">Real-time attendance marking and comprehensive reporting</p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <FileText className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Document Management</h3>
              <p className="text-sm text-muted-foreground">Upload, organize, and access academic documents securely</p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <BarChart className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Analytics Dashboard</h3>
              <p className="text-sm text-muted-foreground">Visualize performance data with powerful insights</p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <MessageSquare className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Communication</h3>
              <p className="text-sm text-muted-foreground">Direct messaging between students, teachers, and admins</p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <Users className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Class Management</h3>
              <p className="text-sm text-muted-foreground">
                Create and manage classes with flexible enrollment options
              </p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <BookOpen className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Course Materials</h3>
              <p className="text-sm text-muted-foreground">Share resources and materials with students easily</p>
            </div>

<div className="text-center">
              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                <GraduationCap className="h-6 w-6 text-primary" />
              </div>
              <h3 className="font-semibold mb-2">Request System</h3>
              <p className="text-sm text-muted-foreground">Submit and track academic requests with approval workflow</p>
            </div>
          </div>
        </div>
      </section>

<section className="py-16 sm:py-24 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-primary/10 via-background to-secondary/10" />
        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl sm:text-4xl font-bold mb-4">Ready to Get Started?</h2>
          <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
            Join thousands of students, teachers, and administrators managing their academic journey with our platform.
          </p>
          <Link href="/register">
            <Button size="lg" className="text-base">
              Create Your Account
            </Button>
          </Link>
        </div>
      </section>

<footer className="border-t py-8 bg-muted/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2">
              <GraduationCap className="h-6 w-6 text-primary" />
              <span className="font-semibold">Student Portal</span>
            </div>
            <p className="text-sm text-muted-foreground">
              © {new Date().getFullYear()} Student Portal. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/pending-approval/page.tsx" isMerged="true"
import { PendingApproval } from "@/app/components/auth/pending-approval"

export default function PendingApprovalPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <PendingApproval />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true"
import { RegisterForm } from "@/app/components/auth/register-form"

export default function RegisterPage() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <RegisterForm />
    </div>
  )
}
[V0_FILE]typescript:file="app/services/admin-service.ts" isMerged="true"
'use server'

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

export interface Student {
  id: string
  firstName: string
  lastName: string
  email: string
  phone: string
  dateOfBirth: string
  gender: string
  academicLevel: string
  strand?: string
  program?: string
  year?: string
  status: 'approved' | 'pending' | 'rejected'
  approvedAt?: string
  approvedBy?: string
  profilePicture?: string
  createdAt: string
}

export interface Teacher {
  id: string
  firstName: string
  lastName: string
  email: string
  phone: string
  department: string
  specialty: string
  status: 'active' | 'inactive'
  profilePicture?: string
  createdAt: string
}

export interface Subject {
  id: string
  code: string
  name: string
  time: string
  day: string
  unit: string
  createdAt: string
}

export interface Class {
  id: string
  subjectId: string
  subjectCode: string
  subjectName: string
  teacherId: string
  teacherName: string
  time: string
  day: string
  semester: string
  year: string
  students: string[]
  createdAt: string
}

export const adminService = {
  // Student management
  getAllStudents: async (): Promise<Student[]> => {
    const { data, error } = await supabase
      .from('students')
      .select('*')
      .order('first_name', { ascending: true })

if (error) {
      console.error('Error fetching students:', error)
      return []
    }
    return data || []
  },

getPendingStudents: async (): Promise<Student[]> => {
    const { data, error } = await supabase
      .from('students')
      .select('*')
      .eq('status', 'pending')
      .order('created_at', { ascending: false })

if (error) {
      console.error('Error fetching pending students:', error)
      return []
    }
    return data || []
  },

approveStudent: async (studentId: string): Promise<Student | null> => {
    const { data, error } = await supabase
      .from('students')
      .update({
        status: 'approved',
        approved_at: new Date().toISOString(),
        approved_by: 'admin',
      })
      .eq('id', studentId)
      .select()

if (error) {
      console.error('Error approving student:', error)
      return null
    }
    return data?.[0] || null
  },

rejectStudent: async (studentId: string): Promise<Student | null> => {
    const { data, error } = await supabase
      .from('students')
      .update({ status: 'rejected' })
      .eq('id', studentId)
      .select()

if (error) {
      console.error('Error rejecting student:', error)
      return null
    }
    return data?.[0] || null
  },

deleteStudent: async (studentId: string): Promise<boolean> => {
    const { error } = await supabase
      .from('students')
      .delete()
      .eq('id', studentId)

if (error) {
      console.error('Error deleting student:', error)
      return false
    }
    return true
  },

// Teacher management
  getAllTeachers: async (): Promise<Teacher[]> => {
    const { data, error } = await supabase
      .from('teachers')
      .select('*')
      .order('first_name', { ascending: true })

if (error) {
      console.error('Error fetching teachers:', error)
      return []
    }
    return data || []
  },

deleteTeacher: async (teacherId: string): Promise<boolean> => {
    const { error } = await supabase
      .from('teachers')
      .delete()
      .eq('id', teacherId)

if (error) {
      console.error('Error deleting teacher:', error)
      return false
    }
    return true
  },

// System statistics
  getSystemStatistics: async () => {
    const [students, teachers, classes, subjects] = await Promise.all([
      adminService.getAllStudents(),
      adminService.getAllTeachers(),
      adminService.getAllClasses(),
      adminService.getAllSubjects(),
    ])

return {
      totalStudents: students.length,
      approvedStudents: students.filter((s) => s.status === 'approved').length,
      pendingStudents: students.filter((s) => s.status === 'pending').length,
      totalTeachers: teachers.length,
      activeTeachers: teachers.filter((t) => t.status === 'active').length,
      totalClasses: classes.length,
      totalSubjects: subjects.length,
    }
  },

// Subject management
  createSubject: async (code: string, name: string, time: string, day: string, unit: string): Promise<Subject | null> => {
    const { data, error } = await supabase
      .from('subjects')
      .insert([{ code, name, time, day, unit }])
      .select()

if (error) {
      console.error('Error creating subject:', error)
      return null
    }
    return data?.[0] || null
  },

getAllSubjects: async (): Promise<Subject[]> => {
    const { data, error } = await supabase
      .from('subjects')
      .select('*')
      .order('code', { ascending: true })

if (error) {
      console.error('Error fetching subjects:', error)
      return []
    }
    return data || []
  },

deleteSubject: async (id: string): Promise<boolean> => {
    const { error } = await supabase
      .from('subjects')
      .delete()
      .eq('id', id)

if (error) {
      console.error('Error deleting subject:', error)
      return false
    }
    return true
  },

// Class management
  addClass: async (subjectCode: string, teacherId: string, semester: string, year: string): Promise<Class | null> => {
    const [subjects, teachers] = await Promise.all([
      adminService.getAllSubjects(),
      adminService.getAllTeachers(),
    ])

const subject = subjects.find((s) => s.code === subjectCode)
    const teacher = teachers.find((t) => t.id === teacherId)

if (!subject || !teacher) {
      console.error('Subject or teacher not found')
      return null
    }

const { data, error } = await supabase
      .from('classes')
      .insert([
        {
          subject_id: subject.id,
          subject_code: subject.code,
          subject_name: subject.name,
          teacher_id: teacherId,
          teacher_name: `${teacher.firstName} ${teacher.lastName}`,
          time: subject.time,
          day: subject.day,
          semester,
          year,
          students: [],
        },
      ])
      .select()

if (error) {
      console.error('Error adding class:', error)
      return null
    }
    return data?.[0] || null
  },

getAllClasses: async (): Promise<Class[]> => {
    const { data, error } = await supabase
      .from('classes')
      .select('*')
      .order('created_at', { ascending: false })

if (error) {
      console.error('Error fetching classes:', error)
      return []
    }
    return data || []
  },

bulkEnrollStudents: async (classId: string, studentIds: string[]): Promise<boolean> => {
    const { data: classData, error: fetchError } = await supabase
      .from('classes')
      .select('students')
      .eq('id', classId)
      .single()

if (fetchError) {
      console.error('Error fetching class:', fetchError)
      return false
    }

const existingStudents = new Set(classData?.students || [])
    studentIds.forEach((id) => existingStudents.add(id))

const { error } = await supabase
      .from('classes')
      .update({ students: Array.from(existingStudents) })
      .eq('id', classId)

if (error) {
      console.error('Error enrolling students:', error)
      return false
    }
    return true
  },
}
[V0_FILE]typescript:file="app/services/messaging-service.ts" isMerged="true"
import { STORAGE_KEYS } from "@/lib/constants"
import { storage } from "@/lib/storage"
import { generateId } from "@/lib/helpers"

export interface Message {
  id: string
  senderId: string
  receiverId: string
  subject: string
  content: string
  isRead: boolean
  createdAt: string
}

export interface Notification {
  id: string
  userId: string
  type: "info" | "success" | "warning" | "error"
  title: string
  message: string
  isRead: boolean
  createdAt: string
}

export const messagingService = {
  // Message operations
  getMessages: (userId: string): Message[] => {
    const messages = storage.get<Message[]>(STORAGE_KEYS.MESSAGES) || []
    return messages.filter((m) => m.receiverId === userId || m.senderId === userId)
  },

getInbox: (userId: string): Message[] => {
    const messages = messagingService.getMessages(userId)
    return messages.filter((m) => m.receiverId === userId)
  },

getSent: (userId: string): Message[] => {
    const messages = messagingService.getMessages(userId)
    return messages.filter((m) => m.senderId === userId)
  },

sendMessage: (message: Omit<Message, "id" | "createdAt" | "isRead">): Message => {
    const newMessage: Message = {
      ...message,
      id: generateId("MSG"),
      isRead: false,
      createdAt: new Date().toISOString(),
    }
    const messages = storage.get<Message[]>(STORAGE_KEYS.MESSAGES) || []
    messages.push(newMessage)
    storage.set(STORAGE_KEYS.MESSAGES, messages)
    return newMessage
  },

markAsRead: (messageId: string): void => {
    const messages = storage.get<Message[]>(STORAGE_KEYS.MESSAGES) || []
    const message = messages.find((m) => m.id === messageId)
    if (message) {
      message.isRead = true
      storage.set(STORAGE_KEYS.MESSAGES, messages)
    }
  },

// Notification operations
  getNotifications: (userId: string): Notification[] => {
    const notifications = storage.get<Notification[]>(STORAGE_KEYS.NOTIFICATIONS) || []
    return notifications.filter((n) => n.userId === userId)
  },

createNotification: (notification: Omit<Notification, "id" | "createdAt" | "isRead">): Notification => {
    const newNotification: Notification = {
      ...notification,
      id: generateId("NOT"),
      isRead: false,
      createdAt: new Date().toISOString(),
    }
    const notifications = storage.get<Notification[]>(STORAGE_KEYS.NOTIFICATIONS) || []
    notifications.push(newNotification)
    storage.set(STORAGE_KEYS.NOTIFICATIONS, notifications)
    return newNotification
  },

markNotificationAsRead: (notificationId: string): void => {
    const notifications = storage.get<Notification[]>(STORAGE_KEYS.NOTIFICATIONS) || []
    const notification = notifications.find((n) => n.id === notificationId)
    if (notification) {
      notification.isRead = true
      storage.set(STORAGE_KEYS.NOTIFICATIONS, notifications)
    }
  },
}
[V0_FILE]typescript:file="app/services/student-service.ts" isMerged="true"
'use server'

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

export interface Grade {
  id: string
  studentId: string
  subject: string
  score: number
  term: string
  semester: string
  createdAt: string
}

export interface Attendance {
  id: string
  studentId: string
  date: string
  status: 'present' | 'absent' | 'late' | 'excused'
  subject: string
  createdAt: string
}

export interface Request {
  id: string
  studentId: string
  type: string
  status: 'pending' | 'approved' | 'rejected' | 'completed' | 'read' | 'in_progress'
  reason: string
  createdAt: string
  completedAt?: string
}

export interface Schedule {
  id: string
  studentId: string
  day: string
  time: string
  subject: string
  teacher: string
  room: string
  createdAt: string
}

export interface Document {
  id: string
  studentId: string
  name: string
  url: string
  type: string
  uploadedAt: string
}

export const studentService = {
  // Grade operations
  getGrades: async (studentId: string): Promise<Grade[]> => {
    const { data, error } = await supabase
      .from('grades')
      .select('*')
      .eq('student_id', studentId)
      .order('created_at', { ascending: false })

if (error) {
      console.error('Error fetching grades:', error)
      return []
    }
    return data || []
  },

// Attendance operations
  getAttendance: async (studentId: string): Promise<Attendance[]> => {
    const { data, error } = await supabase
      .from('attendance')
      .select('*')
      .eq('student_id', studentId)
      .order('date', { ascending: false })

if (error) {
      console.error('Error fetching attendance:', error)
      return []
    }
    return data || []
  },

// Request operations
  getRequests: async (studentId: string): Promise<Request[]> => {
    const { data, error } = await supabase
      .from('requests')
      .select('*')
      .eq('student_id', studentId)
      .order('created_at', { ascending: false })

if (error) {
      console.error('Error fetching requests:', error)
      return []
    }
    return data || []
  },

createRequest: async (request: Omit<Request, 'id' | 'createdAt'>): Promise<Request | null> => {
    const { data, error } = await supabase
      .from('requests')
      .insert([request])
      .select()

if (error) {
      console.error('Error creating request:', error)
      return null
    }
    return data?.[0] || null
  },

// Schedule operations
  getSchedule: async (studentId: string): Promise<Schedule[]> => {
    const { data, error } = await supabase
      .from('schedules')
      .select('*')
      .eq('student_id', studentId)
      .order('created_at', { ascending: true })

if (error) {
      console.error('Error fetching schedule:', error)
      return []
    }
    return data || []
  },

// Document operations
  getDocuments: async (studentId: string): Promise<Document[]> => {
    const { data, error } = await supabase
      .from('documents')
      .select('*')
      .eq('student_id', studentId)
      .order('uploaded_at', { ascending: false })

if (error) {
      console.error('Error fetching documents:', error)
      return []
    }
    return data || []
  },

uploadDocument: async (document: Omit<Document, 'id' | 'uploadedAt'>): Promise<Document | null> => {
    const { data, error } = await supabase
      .from('documents')
      .insert([document])
      .select()

if (error) {
      console.error('Error uploading document:', error)
      return null
    }
    return data?.[0] || null
  },

deleteDocument: async (documentId: string): Promise<boolean> => {
    const { error } = await supabase
      .from('documents')
      .delete()
      .eq('id', documentId)

if (error) {
      console.error('Error deleting document:', error)
      return false
    }
    return true
  },
      STORAGE_KEYS.DOCUMENTS,
      documents.filter((d) => !(d.id === documentId && d.studentId === studentId)),
    )
  },

// Student profile operations
  updateStudentProfile: (studentId: string, updates: { profilePicture?: string; password?: string }): void => {
    userStorage.updateStudent(studentId, {
      profilePicture: updates.profilePicture,
      lastPasswordChange: updates.password ? new Date().toISOString() : undefined,
      password: updates.password || undefined,
    } as any)
  },

getStudentProfile: (studentId: string) => {
    const students = userStorage.getStudents()
    return students.find((s) => s.id === studentId)
  },
}
[V0_FILE]typescript:file="app/services/teacher-service.ts" isMerged="true"
import { STORAGE_KEYS } from "@/lib/constants"
import { storage, classesStorage, userStorage } from "@/lib/storage"
import { generateId } from "@/lib/helpers"

export interface Class {
  id: string
  teacherId: string
  name: string
  grade: string
  studentCount: number
  subject: string
  createdAt: string
}

export interface ClassGrade {
  id: string
  teacherId: string
  classId: string
  studentId: string
  score: number
  term: string
  semester: string
  status: "draft" | "submitted" | "approved" | "rejected"
  submittedAt?: string
  createdAt: string
}

export interface Material {
  id: string
  teacherId: string
  classId: string
  title: string
  url: string
  type: string
  uploadedAt: string
}

export const teacherService = {
  // Class operations
  getClasses: (teacherId: string): Class[] => {
    const classes = storage.get<Class[]>(STORAGE_KEYS.SCHEDULES) || []
    return (classes as any).filter((c: any) => c.teacherId === teacherId)
  },

addClass: (classData: Omit<Class, "id" | "createdAt">): Class => {
    const newClass: Class = {
      ...classData,
      id: generateId("CLS"),
      createdAt: new Date().toISOString(),
    }
    const classes = storage.get<Class[]>(STORAGE_KEYS.SCHEDULES) || []
    classes.push(newClass as any)
    storage.set(STORAGE_KEYS.SCHEDULES, classes)
    return newClass
  },

// Grade operations
  getGradesByClass: (classId: string): ClassGrade[] => {
    const grades = storage.get<ClassGrade[]>("teacher_grades") || []
    return grades.filter((g) => g.classId === classId)
  },

submitGrade: (grade: Omit<ClassGrade, "id" | "createdAt" | "submittedAt">): ClassGrade => {
    const newGrade: ClassGrade = {
      ...grade,
      id: generateId("TGRDE"),
      createdAt: new Date().toISOString(),
      submittedAt: new Date().toISOString(),
    }
    const grades = storage.get<ClassGrade[]>("teacher_grades") || []
    grades.push(newGrade)
    storage.set("teacher_grades", grades)
    return newGrade
  },

// Material operations
  getMaterials: (classId: string): Material[] => {
    const materials = storage.get<Material[]>("teacher_materials") || []
    return materials.filter((m) => m.classId === classId)
  },

uploadMaterial: (material: Omit<Material, "id" | "uploadedAt">): Material => {
    const newMaterial: Material = {
      ...material,
      id: generateId("MAT"),
      uploadedAt: new Date().toISOString(),
    }
    const materials = storage.get<Material[]>("teacher_materials") || []
    materials.push(newMaterial)
    storage.set("teacher_materials", materials)
    return newMaterial
  },

getMyClasses: (teacherId: string) => {
    return classesStorage.getByTeacherId(teacherId)
  },

getTeacherAnalytics: (teacherId: string) => {
    const classes = classesStorage.getByTeacherId(teacherId)
    const allGrades = storage.get<any[]>(STORAGE_KEYS.GRADES) || []

const analytics = {
      totalClasses: classes.length,
      totalStudents: classes.reduce((sum, c) => sum + c.students.length, 0),
      gradesEntered: allGrades.length,
      averageGrade: 0,
    }

if (allGrades.length > 0) {
      const avg = allGrades.reduce((sum, g: any) => sum + (g.score || 0), 0) / allGrades.length
      analytics.averageGrade = Math.round(avg * 100) / 100
    }

return analytics
  },

getClassStudents: (classId: string) => {
    const classes = classesStorage.getAll()
    const classItem = classes.find((c) => c.id === classId)
    if (!classItem) return []

const students = userStorage.getStudents()
    return students.filter((s) => classItem.students.includes(s.id))
  },

recordAttendance: (classId: string, attendanceData: any): void => {
    const attendance = storage.get<any[]>(STORAGE_KEYS.ATTENDANCE) || []
    attendance.push({
      ...attendanceData,
      id: generateId("ATT"),
      classId,
      createdAt: new Date().toISOString(),
    })
    storage.set(STORAGE_KEYS.ATTENDANCE, attendance)
  },
}
[V0_FILE]typescriptreact:file="app/student/attendance/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentAttendance } from "@/app/components/student/attendance"

export default function StudentAttendancePage() {
  return (
    <StudentDashboard>
      <StudentAttendance />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/classes/[id]/page.tsx" isMerged="true"
"use client"

import { StudentClassDetails } from "@/app/components/student/class-details"
import { useParams } from "next/navigation"

export default function StudentClassDetailsPage() {
  const params = useParams()
  const classId = params.id as string

return (
    <div className="min-h-screen bg-background p-6">
      <div className="max-w-4xl mx-auto">
        <StudentClassDetails classId={classId} />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/student/classes/page.tsx" isMerged="true"
import { MyClasses } from "@/app/components/student/my-classes"
import { StudentDashboard } from "@/app/components/student/student-dashboard"

export default function MyClassesPage() {
  return (
    <StudentDashboard>
      <MyClasses />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/contact-admin/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentContactAdmin } from "@/app/components/student/contact-admin"

export default function StudentContactAdminPage() {
  return (
    <StudentDashboard>
      <StudentContactAdmin />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/dashboard/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentDashboardHome } from "@/app/components/student/dashboard-home"

export default function StudentDashboardPage() {
  return (
    <StudentDashboard>
      <StudentDashboardHome />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/documents/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentDocuments } from "@/app/components/student/documents"

export default function StudentDocumentsPage() {
  return (
    <StudentDashboard>
      <StudentDocuments />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/grades/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentGrades } from "@/app/components/student/grades"

export default function StudentGradesPage() {
  return (
    <StudentDashboard>
      <StudentGrades />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/requests/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentRequests } from "@/app/components/student/requests"

export default function StudentRequestsPage() {
  return (
    <StudentDashboard>
      <StudentRequests />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/schedule/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentSchedule } from "@/app/components/student/schedule"

export default function StudentSchedulePage() {
  return (
    <StudentDashboard>
      <StudentSchedule />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/student/settings/page.tsx" isMerged="true"
import { StudentDashboard } from "@/app/components/student/student-dashboard"
import { StudentSettings } from "@/app/components/student/student-settings"

export default function StudentSettingsPage() {
  return (
    <StudentDashboard>
      <StudentSettings />
    </StudentDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/analytics/page.tsx" isMerged="true"
import { TeacherDashboard } from "@/app/components/teacher/teacher-dashboard"
import { TeacherAnalytics } from "@/app/components/teacher/analytics"

export default function TeacherAnalyticsPage() {
  return (
    <TeacherDashboard>
      <TeacherAnalytics />
    </TeacherDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/attendance-marking/page.tsx" isMerged="true"
import { TeacherDashboard } from "@/app/components/teacher/teacher-dashboard"
import { TeacherAttendanceMarking } from "@/app/components/teacher/attendance-marking"

export default function TeacherAttendanceMarkingPage() {
  return (
    <TeacherDashboard>
      <TeacherAttendanceMarking />
    </TeacherDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/classes/[id]/page.tsx" isMerged="true"
import { ClassDetails } from "@/app/components/teacher/class-details"
import { Suspense } from "react"
import { Loading } from "@/app/components/shared/loading"

interface PageProps {
  params: Promise<{ id: string }>
}

export default async function ClassDetailsPage({ params }: PageProps) {
  const { id } = await params

return (
    <Suspense fallback={<Loading />}>
      <ClassDetails classId={id} />
    </Suspense>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/classes/page.tsx" isMerged="true"
import { TeacherDashboard } from "@/app/components/teacher/teacher-dashboard"
import { TeacherMyClasses } from "@/app/components/teacher/my-classes"

export default function TeacherClassesPage() {
  return (
    <TeacherDashboard>
      <TeacherMyClasses />
    </TeacherDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/dashboard/page.tsx" isMerged="true"
import { TeacherDashboard } from "@/app/components/teacher/teacher-dashboard"
import { TeacherDashboardHome } from "@/app/components/teacher/dashboard-home"

export default function TeacherDashboardPage() {
  return (
    <TeacherDashboard>
      <TeacherDashboardHome />
    </TeacherDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/grade-input/page.tsx" isMerged="true"
import { TeacherDashboard } from "@/app/components/teacher/teacher-dashboard"
import { TeacherGradeInput } from "@/app/components/teacher/grade-input"

export default function TeacherGradeInputPage() {
  return (
    <TeacherDashboard>
      <TeacherGradeInput />
    </TeacherDashboard>
  )
}
[V0_FILE]typescriptreact:file="app/teacher/materials/page.tsx" isMerged="true"
import { TeacherDashboard } from "@/app/components/teacher/teacher-dashboard"
import { TeacherMaterials } from "@/app/components/teacher/materials"

export default function TeacherMaterialsPage() {
  return (
    <TeacherDashboard>
      <TeacherMaterials />
    </TeacherDashboard>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
  {
    variants: {
      variant: {
        default:
          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
        secondary:
          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
        destructive:
          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

function Badge({
  className,
  variant,
  asChild = false,
  ...props
}: React.ComponentProps<'span'> &
  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : 'span'

return (
    <Comp
      data-slot="badge"
      className={cn(badgeVariants({ variant }), className)}
      {...props}
    />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as DialogPrimitive from '@radix-ui/react-dialog'
import { XIcon } from 'lucide-react'

import { cn } from '@/lib/utils'

function Dialog({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
  return <DialogPrimitive.Root data-slot="dialog" {...props} />
}

function DialogTrigger({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
}

function DialogPortal({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
}

function DialogClose({
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
}

function DialogOverlay({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
  return (
    <DialogPrimitive.Overlay
      data-slot="dialog-overlay"
      className={cn(
        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
        className,
      )}
      {...props}
    />
  )
}

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        data-slot="dialog-content"
        className={cn(
          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
          className,
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <DialogPrimitive.Close
            data-slot="dialog-close"
            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
          >
            <XIcon />
            <span className="sr-only">Close</span>
          </DialogPrimitive.Close>
        )}
      </DialogPrimitive.Content>
    </DialogPortal>
  )
}

function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-header"
      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
      {...props}
    />
  )
}

function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function DialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
  return (
    <DialogPrimitive.Title
      data-slot="dialog-title"
      className={cn('text-lg leading-none font-semibold', className)}
      {...props}
    />
  )
}

function DialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
  return (
    <DialogPrimitive.Description
      data-slot="dialog-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

export {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

function Tabs({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return (
    <TabsPrimitive.Root
      data-slot="tabs"
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

function TabsList({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot="tabs-list"
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className,
      )}
      {...props}
    />
  )
}

function TabsTrigger({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot="tabs-trigger"
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className,
      )}
      {...props}
    />
  )
}

function TabsContent({
  className,
  ...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
  return (
    <TabsPrimitive.Content
      data-slot="tabs-content"
      className={cn('flex-1 outline-none', className)}
      {...props}
    />
  )
}

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
  return (
    <textarea
      data-slot="textarea"
      className={cn(
        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        className,
      )}
      {...props}
    />
  )
}

export { Textarea }
[V0_FILE]typescript:file="lib/constants.ts" isMerged="true"
// School constants and static configurations
export const ROLES = {
  STUDENT: "student",
  TEACHER: "teacher",
  ADMIN: "admin",
} as const

export const ACADEMIC_LEVELS = {
  SENIOR_HIGH: "senior_high",
  DIPLOMA: "diploma",
  BACHELOR: "bachelor",
} as const

export const SENIOR_HIGH_GRADES = ["11", "12"] as const

export const DIPLOMA_YEARS = ["1", "2", "3"] as const

export const BACHELOR_YEARS = ["1", "2", "3", "4"] as const

export const DEFAULT_DIPLOMA_COURSES = ["DIT", "DIC"] as const

export const DEFAULT_BACHELOR_COURSES = ["BTVTED", "BSMA"] as const

export const SENIOR_HIGH_STRANDS = ["STEM", "ABM", "HUMSS", "GAS", "HE", "ICT", "Sports", "Arts and Design"] as const

export const STUDENT_STATUS = {
  PENDING: "pending",
  APPROVED: "approved",
  REJECTED: "rejected",
  SUSPENDED: "suspended",
} as const

export const REQUEST_STATUS = {
  PENDING: "pending",
  APPROVED: "approved",
  REJECTED: "rejected",
  COMPLETED: "completed",
} as const

export const GRADE_STATUS = {
  DRAFT: "draft",
  SUBMITTED: "submitted",
  APPROVED: "approved",
  REJECTED: "rejected",
} as const

export const ATTENDANCE_STATUS = {
  PRESENT: "present",
  ABSENT: "absent",
  LATE: "late",
  EXCUSED: "excused",
} as const

export const GRADING_SCALE = {
  A: { min: 90, max: 100, gpa: 4.0 },
  B: { min: 80, max: 89, gpa: 3.0 },
  C: { min: 70, max: 79, gpa: 2.0 },
  D: { min: 60, max: 69, gpa: 1.0 },
  F: { min: 0, max: 59, gpa: 0.0 },
} as const

export const GRADING_TERMS = ["Prelim", "Midterm", "PreFinals", "Finals"] as const

export const REQUEST_TYPES = [
  "Transcript",
  "Certificate",
  "Transfer Certificate",
  "Leave Letter",
  "Identity Card",
  "Admission Letter",
  "Other",
] as const

export const REQUEST_TYPES_COLLEGE = [
  "Transcript of Records (TOR)",
  "Certificate of Enrollment",
  "Certificate of Good Moral Character",
  "Diploma Copy",
  "Clearance",
  "Recommendation Letter",
  "Grade Sheet",
  "Transfer Credential",
] as const

export const INQUIRY_CATEGORIES = ["General", "Academic", "Administrative", "Technical", "Financial", "Other"] as const

export const REQUEST_MESSAGE_STATUSES = {
  PENDING: "pending",
  READ: "read",
  IN_PROGRESS: "in_progress",
  COMPLETED: "completed",
  REJECTED: "rejected",
} as const

export const NOTIFICATION_TYPES = {
  DEADLINE: "deadline",
  SCHEDULE_CHANGE: "schedule_change",
  PAYMENT_DUE: "payment_due",
  GRADE_POSTED: "grade_posted",
  REGISTRATION_OPEN: "registration_open",
  EVENT: "event",
  SYSTEM: "system",
  OTHER: "other",
} as const

export const NOTIFICATION_STATUS = {
  UNREAD: "unread",
  READ: "read",
  ARCHIVED: "archived",
} as const

export const FINANCIAL_STATUS = {
  PAID: "paid",
  PARTIAL: "partial",
  UNPAID: "unpaid",
  OVERDUE: "overdue",
} as const

export const PAYMENT_METHOD = {
  CASH: "cash",
  CHECK: "check",
  BANK_TRANSFER: "bank_transfer",
  ONLINE: "online",
  INSTALLMENT: "installment",
} as const

export const FEEDBACK_STATUS = {
  NEW: "new",
  REVIEWING: "reviewing",
  RESOLVED: "resolved",
  CLOSED: "closed",
  REJECTED: "rejected",
} as const

export const FEEDBACK_CATEGORY = {
  BUG: "bug",
  FEATURE_REQUEST: "feature_request",
  GENERAL: "general",
  COMPLAINT: "complaint",
  SUGGESTION: "suggestion",
} as const

export const BOOK_STATUS = {
  AVAILABLE: "available",
  BORROWED: "borrowed",
  RESERVED: "reserved",
  LOST: "lost",
} as const

export const FACILITY_TYPE = {
  LAB: "lab",
  CLASSROOM: "classroom",
  LIBRARY: "library",
  CAFETERIA: "cafeteria",
  GYMNASIUM: "gymnasium",
  AUDITORIUM: "auditorium",
  OFFICE: "office",
  OTHER: "other",
} as const

export const LANGUAGES = {
  EN: "en",
  FIL: "fil",
  ES: "es",
} as const

export const STORAGE_KEYS = {
  STUDENTS: "student_portal_students",
  TEACHERS: "student_portal_teachers",
  ADMINS: "student_portal_admins",
  AUTH_USER: "student_portal_auth_user",
  GRADES: "student_portal_grades",
  ATTENDANCE: "student_portal_attendance",
  REQUESTS: "student_portal_requests",
  MESSAGES: "student_portal_messages",
  NOTIFICATIONS: "student_portal_notifications",
  SCHEDULES: "student_portal_schedules",
  DOCUMENTS: "student_portal_documents",
  FINANCIAL_RECORDS: "student_portal_financial_records",
  LIBRARY_CATALOG: "student_portal_library_catalog",
  LIBRARY_CHECKOUTS: "student_portal_library_checkouts",
  CAMPUS_RESOURCES: "student_portal_campus_resources",
  FEEDBACK: "student_portal_feedback",
  USER_PREFERENCES: "student_portal_user_preferences",
} as const

export const PAGINATION = {
  ITEMS_PER_PAGE: 10,
  MAX_ITEMS_PER_PAGE: 50,
} as const
[V0_FILE]typescript:file="lib/error-handler.ts" isMerged="true"
// Error handling utilities

export class AppError extends Error {
  constructor(
    public message: string,
    public statusCode = 400,
    public details?: any,
  ) {
    super(message)
    this.name = "AppError"
  }
}

export interface ErrorResponse {
  message: string
  statusCode: number
  details?: any
  timestamp: string
}

export const handleError = (error: unknown): ErrorResponse => {
  const timestamp = new Date().toISOString()

if (error instanceof AppError) {
    return {
      message: error.message,
      statusCode: error.statusCode,
      details: error.details,
      timestamp,
    }
  }

if (error instanceof Error) {
    return {
      message: error.message,
      statusCode: 500,
      timestamp,
    }
  }

return {
    message: "An unexpected error occurred",
    statusCode: 500,
    timestamp,
  }
}

export const createErrorResponse = (message: string, statusCode = 400, details?: any): ErrorResponse => {
  return {
    message,
    statusCode,
    details,
    timestamp: new Date().toISOString(),
  }
}

export const getErrorMessage = (error: unknown): string => {
  if (error instanceof Error) {
    return error.message
  }
  if (typeof error === "string") {
    return error
  }
  return "An unexpected error occurred"
}
[V0_FILE]typescript:file="lib/file-validation.ts" isMerged="true"
// File upload validation utilities

export const ALLOWED_FILE_TYPES = {
  DOCUMENTS: [
    "application/pdf",
    "application/msword",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  ],
  IMAGES: ["image/jpeg", "image/png", "image/gif", "image/webp"],
  SPREADSHEETS: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
  PRESENTATIONS: [
    "application/vnd.ms-powerpoint",
    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
  ],
} as const

export const MAX_FILE_SIZES = {
  DOCUMENT: 10 * 1024 * 1024, // 10MB
  IMAGE: 5 * 1024 * 1024, // 5MB
  VIDEO: 100 * 1024 * 1024, // 100MB
} as const

export interface FileValidationResult {
  valid: boolean
  error?: string
}

export const validateFileType = (file: File, allowedTypes: readonly string[]): FileValidationResult => {
  if (!allowedTypes.includes(file.type)) {
    return {
      valid: false,
      error: `Invalid file type. Allowed types: ${allowedTypes.join(", ")}`,
    }
  }
  return { valid: true }
}

export const validateFileSize = (file: File, maxSize: number): FileValidationResult => {
  if (file.size > maxSize) {
    return {
      valid: false,
      error: `File size exceeds maximum allowed size of ${(maxSize / 1024 / 1024).toFixed(0)}MB`,
    }
  }
  return { valid: true }
}

export const validateFile = (file: File, allowedTypes: readonly string[], maxSize: number): FileValidationResult => {
  const typeValidation = validateFileType(file, allowedTypes)
  if (!typeValidation.valid) return typeValidation

const sizeValidation = validateFileSize(file, maxSize)
  if (!sizeValidation.valid) return sizeValidation

return { valid: true }
}

export const getFileExtension = (filename: string): string => {
  return filename.split(".").pop()?.toLowerCase() || ""
}

export const isImageFile = (file: File): boolean => {
  return ALLOWED_FILE_TYPES.IMAGES.includes(file.type)
}

export const isDocumentFile = (file: File): boolean => {
  return ALLOWED_FILE_TYPES.DOCUMENTS.includes(file.type)
}
[V0_FILE]typescript:file="lib/formatters.ts" isMerged="true"
// Data formatting utilities

import { formatDistanceToNow, format } from "date-fns"

export const formatDate = (date: Date | string, formatStr = "MMM dd, yyyy"): string => {
  try {
    const dateObj = typeof date === "string" ? new Date(date) : date
    return format(dateObj, formatStr)
  } catch {
    return "Invalid date"
  }
}

export const formatDateTime = (date: Date | string): string => {
  return formatDate(date, "MMM dd, yyyy HH:mm")
}

export const formatRelativeTime = (date: Date | string): string => {
  try {
    const dateObj = typeof date === "string" ? new Date(date) : date
    return formatDistanceToNow(dateObj, { addSuffix: true })
  } catch {
    return "Unknown time"
  }
}

export const formatGPA = (gpa: number): string => {
  return gpa.toFixed(2)
}

export const formatPercentage = (value: number, decimals = 1): string => {
  return `${(value * 100).toFixed(decimals)}%`
}

export const formatAttendancePercentage = (present: number, total: number): string => {
  if (total === 0) return "0%"
  return formatPercentage(present / total)
}

export const formatCurrency = (amount: number): string => {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(amount)
}

export const formatFileSize = (bytes: number): string => {
  const units = ["B", "KB", "MB", "GB"]
  let size = bytes
  let unitIndex = 0

while (size >= 1024 && unitIndex < units.length - 1) {
    size /= 1024
    unitIndex++
  }

return `${size.toFixed(2)} ${units[unitIndex]}`
}

export const truncateText = (text: string, maxLength = 100): string => {
  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text
}

export const formatName = (firstName: string, lastName: string): string => {
  return `${firstName} ${lastName}`.trim()
}

export const initials = (firstName: string, lastName: string): string => {
  return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase()
}
[V0_FILE]typescript:file="lib/helpers.ts" isMerged="true"
// General helper utilities

export const generateId = (prefix = ""): string => {
  return `${prefix}${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
}

export const getGradeFromScore = (score: number): string => {
  if (score >= 90) return "A"
  if (score >= 80) return "B"
  if (score >= 70) return "C"
  if (score >= 60) return "D"
  return "F"
}

export const calculateGPA = (grades: number[]): number => {
  if (grades.length === 0) return 0

const gpaValues = grades.map((score) => {
    if (score >= 90) return 4.0
    if (score >= 80) return 3.0
    if (score >= 70) return 2.0
    if (score >= 60) return 1.0
    return 0.0
  })

return gpaValues.reduce((a, b) => a + b, 0) / gpaValues.length
}

export const calculateAttendancePercentage = (present: number, total: number): number => {
  if (total === 0) return 0
  return (present / total) * 100
}

export const sortByDate = (items: any[], dateField: string, ascending = false) => {
  return [...items].sort((a, b) => {
    const dateA = new Date(a[dateField]).getTime()
    const dateB = new Date(b[dateField]).getTime()
    return ascending ? dateA - dateB : dateB - dateA
  })
}

export const filterByStatus = (items: any[], status: string, statusField = "status") => {
  return items.filter((item) => item[statusField] === status)
}

export const searchInArray = (items: any[], query: string, searchFields: string[]): any[] => {
  const lowerQuery = query.toLowerCase()
  return items.filter((item) => searchFields.some((field) => String(item[field]).toLowerCase().includes(lowerQuery)))
}

export const groupByField = (items: any[], field: string): Record<string, any[]> => {
  return items.reduce(
    (acc, item) => {
      const key = item[field]
      if (!acc[key]) acc[key] = []
      acc[key].push(item)
      return acc
    },
    {} as Record<string, any[]>,
  )
}

export const debounce = <T extends (...args: any[]) => any>(
  func: T,
  wait: number,
): ((...args: Parameters<T>) => void) => {
  let timeout: NodeJS.Timeout
  return (...args: Parameters<T>) => {
    clearTimeout(timeout)
    timeout = setTimeout(() => func(...args), wait)
  }
}

export const isEmpty = (value: any): boolean => {
  if (value === null || value === undefined) return true
  if (typeof value === "string") return value.trim().length === 0
  if (Array.isArray(value)) return value.length === 0
  if (typeof value === "object") return Object.keys(value).length === 0
  return false
}
[V0_FILE]typescript:file="lib/storage.ts" isMerged="true"
import { STORAGE_KEYS } from "./constants"

interface StorageService {
  get<T>(key: string): T | null
  set<T>(key: string, data: T): void
  remove(key: string): void
  clear(): void
  getAllKeys(): string[]
}

const createStorageService = (): StorageService => {
  return {
    get: <T,>(key: string): T | null => {
      try {
        const item = typeof window !== "undefined" ? localStorage.getItem(key) : null
        return item ? JSON.parse(item) : null
      } catch (error) {
        console.error(`Error retrieving ${key} from storage:`, error)
        return null
      }
    },

set: <T,>(key: string, data: T): void => {
      try {
        if (typeof window !== "undefined") {
          localStorage.setItem(key, JSON.stringify(data))
        }
      } catch (error) {
        console.error(`Error storing ${key} to storage:`, error)
      }
    },

remove: (key: string): void => {
      try {
        if (typeof window !== "undefined") {
          localStorage.removeItem(key)
        }
      } catch (error) {
        console.error(`Error removing ${key} from storage:`, error)
      }
    },

clear: (): void => {
      try {
        if (typeof window !== "undefined") {
          localStorage.clear()
        }
      } catch (error) {
        console.error("Error clearing storage:", error)
      }
    },

getAllKeys: (): string[] => {
      try {
        if (typeof window !== "undefined") {
          return Object.keys(localStorage)
        }
        return []
      } catch (error) {
        console.error("Error getting storage keys:", error)
        return []
      }
    },
  }
}

export const storage = createStorageService()

export interface Student {
  id: string
  email: string
  password: string
  firstName: string
  lastName: string
  studentId: string
  academicLevel: "senior_high" | "diploma" | "bachelor"
  grade?: string // For senior high (11 or 12)
  strand?: string // For senior high
  year?: string // For college (1-3 for diploma, 1-4 for bachelor)
  course?: string // For college (DIT, DIC, BTVTED, BSMA)
  status: "pending" | "approved" | "rejected" | "suspended"
  registeredAt: string
  approvedAt?: string
  approvedBy?: string
  avatar?: string
  profilePicture?: string
  lastPasswordChange?: string
}

export interface Teacher {
  id: string
  email: string
  password: string
  firstName: string
  lastName: string
  teacherId: string
  department: string
  subjects: string[]
  status: "active" | "inactive"
  registeredAt: string
  avatar?: string
}

export interface Admin {
  id: string
  email: string
  password: string
  firstName: string
  lastName: string
  role: "super_admin" | "admin"
  permissions: string[]
  status: "active" | "inactive"
  registeredAt: string
}

export interface Subject {
  id: string
  code: string
  name: string
  time: string
  day: string
  unit: string
  credits?: number
  createdAt: string
}

export interface RequestMessage {
  id: string
  requestId: string
  senderId: string
  senderRole: "student" | "admin"
  message: string
  createdAt: string
}

export interface Grade {
  id: string
  studentId: string
  classId: string
  subjectCode: string
  subjectName: string
  teacherId: string
  teacherName: string
  semester: "1st Semester" | "2nd Semester"
  term: "Prelim" | "Midterm" | "Finals"
  score: number
  status: "draft" | "submitted" | "approved" | "rejected"
  submittedAt?: string
  approvedAt?: string
  approvedBy?: string
  rejectedReason?: string
  createdAt: string
}

export const userStorage = {
  getStudents: (): Student[] => {
    return storage.get<Student[]>(STORAGE_KEYS.STUDENTS) || []
  },

addStudent: (student: Student): void => {
    const allStudents = userStorage.getStudents()
    const teachers = userStorage.getTeachers()
    const admins = userStorage.getAdmins()

if (allStudents.find((s) => s.email === student.email)) {
      throw new Error("This email is already registered as a student account")
    }
    if (teachers.find((t) => t.email === student.email)) {
      throw new Error("This email is already registered as a teacher account")
    }
    if (admins.find((a) => a.email === student.email)) {
      throw new Error("This email is already registered as an admin account")
    }

allStudents.push(student)
    storage.set(STORAGE_KEYS.STUDENTS, allStudents)
  },

updateStudent: (id: string, updates: Partial<Student>): void => {
    const students = userStorage.getStudents()
    const index = students.findIndex((s) => s.id === id)
    if (index !== -1) {
      students[index] = { ...students[index], ...updates }
      storage.set(STORAGE_KEYS.STUDENTS, students)
    }
  },

getTeachers: (): Teacher[] => {
    return storage.get<Teacher[]>(STORAGE_KEYS.TEACHERS) || []
  },

addTeacher: (teacher: Teacher): void => {
    const teachers = userStorage.getTeachers()
    const students = userStorage.getStudents()
    const admins = userStorage.getAdmins()

if (students.find((s) => s.email === teacher.email)) {
      throw new Error("This email is already registered as a student account")
    }
    if (teachers.find((t) => t.email === teacher.email)) {
      throw new Error("This email is already registered as a teacher account")
    }
    if (admins.find((a) => a.email === teacher.email)) {
      throw new Error("This email is already registered as an admin account")
    }

teachers.push(teacher)
    storage.set(STORAGE_KEYS.TEACHERS, teachers)
  },

updateTeacher: (id: string, updates: Partial<Teacher>): void => {
    const teachers = userStorage.getTeachers()
    const index = teachers.findIndex((t) => t.id === id)
    if (index !== -1) {
      teachers[index] = { ...teachers[index], ...updates }
      storage.set(STORAGE_KEYS.TEACHERS, teachers)
    }
  },

getAdmins: (): Admin[] => {
    return storage.get<Admin[]>(STORAGE_KEYS.ADMINS) || []
  },

addAdmin: (admin: Admin): void => {
    const admins = userStorage.getAdmins()
    const students = userStorage.getStudents()
    const teachers = userStorage.getTeachers()

if (students.find((s) => s.email === admin.email)) {
      throw new Error("This email is already registered as a student account")
    }
    if (teachers.find((t) => t.email === admin.email)) {
      throw new Error("This email is already registered as a teacher account")
    }
    if (admins.find((a) => a.email === admin.email)) {
      throw new Error("This email is already registered as an admin account")
    }

admins.push(admin)
    storage.set(STORAGE_KEYS.ADMINS, admins)
  },

deleteAdmin: (id: string): void => {
    const admins = userStorage.getAdmins()
    const filtered = admins.filter((a) => a.id !== id)
    storage.set(STORAGE_KEYS.ADMINS, filtered)
  },

findUserByEmail: (email: string): Student | Teacher | Admin | null => {
    const students = userStorage.getStudents()
    if (students.find((s) => s.email === email)) {
      return students.find((s) => s.email === email)!
    }

const teachers = userStorage.getTeachers()
    if (teachers.find((t) => t.email === email)) {
      return teachers.find((t) => t.email === email)!
    }

const admins = userStorage.getAdmins()
    if (admins.find((a) => a.email === email)) {
      return admins.find((a) => a.email === email)!
    }

return null
  },
}

export const collegeCoursesStorage = {
  getAll: (): { diplomaCourses: string[]; bachelorCourses: string[] } => {
    return (
      storage.get("college_courses") || {
        diplomaCourses: ["DIT", "DIC"],
        bachelorCourses: ["BTVTED", "BSMA"],
      }
    )
  },

update: (diplomaCourses: string[], bachelorCourses: string[]): void => {
    storage.set("college_courses", { diplomaCourses, bachelorCourses })
  },

addDiplomaCourse: (course: string): void => {
    const courses = collegeCoursesStorage.getAll()
    if (!courses.diplomaCourses.includes(course)) {
      courses.diplomaCourses.push(course)
      storage.set("college_courses", courses)
    }
  },

removeDiplomaCourse: (course: string): void => {
    const courses = collegeCoursesStorage.getAll()
    courses.diplomaCourses = courses.diplomaCourses.filter((c) => c !== course)
    storage.set("college_courses", courses)
  },

addBachelorCourse: (course: string): void => {
    const courses = collegeCoursesStorage.getAll()
    if (!courses.bachelorCourses.includes(course)) {
      courses.bachelorCourses.push(course)
      storage.set("college_courses", courses)
    }
  },

removeBachelorCourse: (course: string): void => {
    const courses = collegeCoursesStorage.getAll()
    courses.bachelorCourses = courses.bachelorCourses.filter((c) => c !== course)
    storage.set("college_courses", courses)
  },
}

const generateId = (prefix: string): string => {
  return `${prefix}_${Math.random().toString(36).substr(2, 9)}`
}

export const subjectStorage = {
  getAll: (): Subject[] => {
    return storage.get<Subject[]>("subjects") || []
  },

add: (subject: Omit<Subject, "id" | "createdAt">): Subject => {
    const newSubject: Subject = {
      ...subject,
      id: generateId("SUB"),
      createdAt: new Date().toISOString(),
    }
    const subjects = subjectStorage.getAll()
    subjects.push(newSubject)
    storage.set("subjects", subjects)
    return newSubject
  },

getByCode: (code: string): Subject | undefined => {
    return subjectStorage.getAll().find((s) => s.code === code)
  },

delete: (id: string): void => {
    const subjects = subjectStorage.getAll()
    storage.set(
      "subjects",
      subjects.filter((s) => s.id !== id),
    )
  },
}

export const classesStorage = {
  getAll: (): Class[] => {
    return storage.get<Class[]>("classes") || []
  },

add: (classItem: Omit<Class, "id" | "createdAt">): Class => {
    const newClass: Class = {
      ...classItem,
      id: generateId("CLS"),
      createdAt: new Date().toISOString(),
    }
    const classes = classesStorage.getAll()
    classes.push(newClass)
    storage.set("classes", classes)
    return newClass
  },

getByTeacherId: (teacherId: string): Class[] => {
    return classesStorage.getAll().filter((c) => c.teacherId === teacherId)
  },

delete: (id: string): void => {
    const classes = classesStorage.getAll()
    storage.set(
      "classes",
      classes.filter((c) => c.id !== id),
    )
  },
}

export const requestMessagesStorage = {
  getByRequestId: (requestId: string): RequestMessage[] => {
    const messages = storage.get<RequestMessage[]>("request_messages") || []
    return messages.filter((m) => m.requestId === requestId)
  },

add: (message: Omit<RequestMessage, "id" | "createdAt">): RequestMessage => {
    const newMessage: RequestMessage = {
      ...message,
      id: generateId("MSG"),
      createdAt: new Date().toISOString(),
    }
    const messages = storage.get<RequestMessage[]>("request_messages") || []
    messages.push(newMessage)
    storage.set("request_messages", messages)
    return newMessage
  },
}

export const gradesStorage = {
  getAll: (): Grade[] => {
    return storage.get<Grade[]>(STORAGE_KEYS.GRADES) || []
  },

add: (grade: Omit<Grade, "id" | "createdAt">): Grade => {
    const newGrade: Grade = {
      ...grade,
      id: generateId("GRD"),
      createdAt: new Date().toISOString(),
    }
    const grades = gradesStorage.getAll()
    grades.push(newGrade)
    storage.set(STORAGE_KEYS.GRADES, grades)
    return newGrade
  },

update: (id: string, updates: Partial<Grade>): void => {
    const grades = gradesStorage.getAll()
    const index = grades.findIndex((g) => g.id === id)
    if (index !== -1) {
      grades[index] = { ...grades[index], ...updates }
      storage.set(STORAGE_KEYS.GRADES, grades)
    }
  },

getByStudentId: (studentId: string): Grade[] => {
    return gradesStorage.getAll().filter((g) => g.studentId === studentId)
  },

getByClassId: (classId: string): Grade[] => {
    return gradesStorage.getAll().filter((g) => g.classId === classId)
  },

getByTeacherId: (teacherId: string): Grade[] => {
    return gradesStorage.getAll().filter((g) => g.teacherId === teacherId)
  },

getPendingApproval: (): Grade[] => {
    return gradesStorage.getAll().filter((g) => g.status === "submitted")
  },

delete: (id: string): void => {
    const grades = gradesStorage.getAll()
    storage.set(
      STORAGE_KEYS.GRADES,
      grades.filter((g) => g.id !== id),
    )
  },
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescript:file="lib/validation.ts" isMerged="true"
// Form validation utilities

export const validateEmail = (email: string): { valid: boolean; error?: string } => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  const isValid = emailRegex.test(email)
  return {
    valid: isValid,
    error: isValid ? undefined : "Invalid email address"
  }
}

export const validatePassword = (password: string): { valid: boolean; errors: string[]; error?: string } => {
  const errors: string[] = []

if (password.length < 8) {
    errors.push("Password must be at least 8 characters")
  }
  if (!/[A-Z]/.test(password)) {
    errors.push("Password must contain at least one uppercase letter")
  }
  if (!/[a-z]/.test(password)) {
    errors.push("Password must contain at least one lowercase letter")
  }
  if (!/[0-9]/.test(password)) {
    errors.push("Password must contain at least one number")
  }

return {
    valid: errors.length === 0,
    errors,
    error: errors.length > 0 ? errors[0] : undefined
  }
}

export const validatePhoneNumber = (phone: string): boolean => {
  const phoneRegex = /^[+]?[(]?[0-9]{3}[)]?[-\s]?[0-9]{3}[-\s]?[0-9]{4,6}$/
  return phoneRegex.test(phone.replace(/\s/g, ""))
}

export const validateName = (name: string): boolean => {
  return name.trim().length >= 2 && name.trim().length <= 50
}

export const validateStudentId = (id: string): boolean => {
  return id.trim().length >= 5 && id.trim().length <= 20
}

export const validateGrade = (grade: number): boolean => {
  return grade >= 0 && grade <= 100
}

export interface ValidationResult {
  valid: boolean
  errors: Record<string, string>
}

export const validateRegistrationForm = (data: {
  email: string
  password: string
  confirmPassword: string
  firstName: string
  lastName: string
}): ValidationResult => {
  const errors: Record<string, string> = {}

const emailValidation = validateEmail(data.email)
  if (!emailValidation.valid) {
    errors.email = emailValidation.error
  }

const passwordValidation = validatePassword(data.password)
  if (!passwordValidation.valid) {
    errors.password = passwordValidation.error
  }

if (data.password !== data.confirmPassword) {
    errors.confirmPassword = "Passwords do not match"
  }

if (!validateName(data.firstName)) {
    errors.firstName = "First name must be 2-50 characters"
  }

if (!validateName(data.lastName)) {
    errors.lastName = "Last name must be 2-50 characters"
  }

return {
    valid: Object.keys(errors).length === 0,
    errors,
  }
}

export const validateLoginForm = (data: {
  email: string
  password: string
}): ValidationResult => {
  const errors: Record<string, string> = {}

if (!data.email) {
    errors.email = "Email is required"
  } else {
    const emailValidation = validateEmail(data.email)
    if (!emailValidation.valid) {
      errors.email = emailValidation.error
    }
  }

if (!data.password) {
    errors.password = "Password is required"
  }

return {
    valid: Object.keys(errors).length === 0,
    errors,
  }
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@supabase/supabase-js": "2.100.1",
    "@vercel/analytics": "latest",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "latest",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "tw-animate-css": "1.4.0",
    "vaul": "^0.9.9",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_K5jx6CQgA2Js2vmv7fsOpHTWWgxY/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]typescriptreact:file="app/contexts/auth-context.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import { createClient } from "@supabase/supabase-js"

// Use anon key for normal operations
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

type User = any & { role: string }

interface AuthContextType {
  user: User | null
  isLoading: boolean
  login: (email: string, password: string) => Promise<void>
  logout: () => void
  registerStudent: (data: any) => Promise<void>
  registerTeacher: (data: any) => Promise<void>
  registerAdmin: (data: any) => Promise<void>
  isAuthenticated: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [user, setUser] = useState<User | null>(null)
  const [isLoading, setIsLoading] = useState(true)

// Initialize auth on mount
  useEffect(() => {
    const initAuth = async () => {
      try {
        const storedUser = sessionStorage.getItem("auth_user")
        if (storedUser) {
          setUser(JSON.parse(storedUser))
        }
      } catch (error) {
        console.error("Failed to parse stored user:", error)
        sessionStorage.removeItem("auth_user")
      } finally {
        setIsLoading(false)
      }
    }
    initAuth()
  }, [])

const login = async (email: string, password: string) => {
    setIsLoading(true)
    try {
      throw new Error("Login not yet implemented")
    } catch (error) {
      console.error("Login error:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const logout = () => {
    setUser(null)
    sessionStorage.removeItem("auth_user")
  }

const registerStudent = async (data: any) => {
    setIsLoading(true)
    try {
      // First create user in users table
      const { data: newUser, error: userError } = await supabase
        .from("users")
        .insert([
          {
            email: data.email,
            password_hash: data.password,
            full_name: `${data.firstName} ${data.lastName}`,
            role: "student",
            status: "active",
          },
        ])
        .select()

if (userError) throw userError

const userId = newUser?.[0]?.id
      if (!userId) throw new Error("Failed to create user")

// Then create student record
      const { error: studentError } = await supabase
        .from("students")
        .insert([
          {
            user_id: userId,
            academic_level: data.academicLevel,
            strand: data.strand || null,
            program: data.program || null,
            year: data.year || null,
            enrollment_status: "pending",
          },
        ])

if (studentError) throw studentError
    } catch (error) {
      console.error("Student registration error:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const registerTeacher = async (data: any) => {
    setIsLoading(true)
    try {
      // First create user in users table
      const { data: newUser, error: userError } = await supabase
        .from("users")
        .insert([
          {
            email: data.email,
            password_hash: data.password,
            full_name: `${data.firstName} ${data.lastName}`,
            role: "teacher",
            status: "active",
          },
        ])
        .select()

if (userError) throw userError

const userId = newUser?.[0]?.id
      if (!userId) throw new Error("Failed to create user")

// Then create teacher record
      const { error: teacherError } = await supabase
        .from("teachers")
        .insert([
          {
            user_id: userId,
            department: data.department,
            specialization: data.specialty || null,
          },
        ])

if (teacherError) throw teacherError
    } catch (error) {
      console.error("Teacher registration error:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

const registerAdmin = async (data: any) => {
    setIsLoading(true)
    try {
      // First create user in users table
      const { data: newUser, error: userError } = await supabase
        .from("users")
        .insert([
          {
            email: data.email,
            password_hash: data.password,
            full_name: `${data.firstName} ${data.lastName}`,
            role: "admin",
            status: "active",
          },
        ])
        .select()

if (userError) throw userError

const userId = newUser?.[0]?.id
      if (!userId) throw new Error("Failed to create user")

// Then create admin record
      const { error: adminError } = await supabase
        .from("admins")
        .insert([
          {
            user_id: userId,
            permission_level: "full_access",
          },
        ])

if (adminError) throw adminError
    } catch (error) {
      console.error("Admin registration error:", error)
      throw error
    } finally {
      setIsLoading(false)
    }
  }

return (
    <AuthContext.Provider
      value={{
        user,
        isLoading,
        login,
        logout,
        registerStudent,
        registerTeacher,
        registerAdmin,
        isAuthenticated: !!user,
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export const useAuth = () => {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/components/admin/analytics.tsx"
'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Users, BookOpen, MessageSquare, TrendingUp, DollarSign, Award, PieChart } from 'lucide-react'

export const AdminAnalytics = () => {
  const [activeTab, setActiveTab] = useState('overview')

// Placeholder data - analytics service removed
  const stats = {
    totalStudents: 0,
    approvedStudents: 0,
    pendingStudents: 0,
    totalTeachers: 0,
  }
  const studentAnalytics = {}
  const financialAnalytics = {}
  const libraryAnalytics = {}
  const feedbackAnalytics = {}
  const attendanceAnalytics = {}

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold">System Analytics Dashboard</h1>
        <p className="text-muted-foreground">Comprehensive system-wide statistics and insights</p>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList className="grid w-full grid-cols-6">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="students">Students</TabsTrigger>
          <TabsTrigger value="financial">Financial</TabsTrigger>
          <TabsTrigger value="library">Library</TabsTrigger>
          <TabsTrigger value="attendance">Attendance</TabsTrigger>
          <TabsTrigger value="feedback">Feedback</TabsTrigger>
        </TabsList>

{/* Overview Tab */}
        <TabsContent value="overview" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <Users className="w-4 h-4" /> Total Students
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats?.totalStudents || 0}</div>
                <p className="text-xs text-muted-foreground">Active users</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <Award className="w-4 h-4" /> Approved
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-green-600">{stats?.approvedStudents || 0}</div>
                <p className="text-xs text-muted-foreground">Registered & verified</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <TrendingUp className="w-4 h-4" /> Pending
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-yellow-600">{stats?.pendingStudents || 0}</div>
                <p className="text-xs text-muted-foreground">Awaiting approval</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <BookOpen className="w-4 h-4" /> Total Teachers
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stats?.totalTeachers || 0}</div>
                <p className="text-xs text-muted-foreground">Faculty members</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <DollarSign className="w-4 h-4" /> Financial Summary
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">₱{(financialAnalytics?.totalCollected || 0).toLocaleString()}</div>
                <p className="text-xs text-muted-foreground">Total collected</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium flex items-center gap-2">
                  <BookOpen className="w-4 h-4" /> Library Items
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{libraryAnalytics?.totalBooks || 0}</div>
                <p className="text-xs text-muted-foreground">Books & modules</p>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Students Tab */}
        <TabsContent value="students" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Student Distribution by Level</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Senior High School:</span>
                  <span className="font-semibold">{studentAnalytics?.byLevel?.SHS || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Diploma Programs:</span>
                  <span className="font-semibold">{studentAnalytics?.byLevel?.Diploma || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Bachelor Degree:</span>
                  <span className="font-semibold">{studentAnalytics?.byLevel?.Bachelor || 0}</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Enrollment Status</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Approved:</span>
                  <Badge variant="default" className="bg-green-600">{studentAnalytics?.approved || 0}</Badge>
                </div>
                <div className="flex justify-between">
                  <span>Pending:</span>
                  <Badge variant="secondary">{studentAnalytics?.pending || 0}</Badge>
                </div>
                <div className="flex justify-between">
                  <span>Rejected:</span>
                  <Badge variant="destructive">{studentAnalytics?.rejected || 0}</Badge>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Financial Tab */}
        <TabsContent value="financial" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Payment Status</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Total Outstanding:</span>
                  <span className="font-semibold text-red-600">₱{(financialAnalytics?.outstanding || 0).toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span>Fully Paid:</span>
                  <span className="font-semibold text-green-600">{financialAnalytics?.fullyPaid || 0} records</span>
                </div>
                <div className="flex justify-between">
                  <span>Partial Payment:</span>
                  <span className="font-semibold text-yellow-600">{financialAnalytics?.partialPayment || 0} records</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Revenue by Type</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Tuition Fees:</span>
                  <span className="font-semibold">₱{(financialAnalytics?.tuitionRevenue || 0).toLocaleString()}</span>
                </div>
                <div className="flex justify-between">
                  <span>Other Fees:</span>
                  <span className="font-semibold">₱{(financialAnalytics?.otherFeesRevenue || 0).toLocaleString()}</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Library Tab */}
        <TabsContent value="library" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Library Inventory</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Available Books:</span>
                  <span className="font-semibold text-green-600">{libraryAnalytics?.available || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Currently Borrowed:</span>
                  <span className="font-semibold text-blue-600">{libraryAnalytics?.borrowed || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Reserved:</span>
                  <span className="font-semibold text-yellow-600">{libraryAnalytics?.reserved || 0}</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Circulation Stats</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Total Checkouts (this month):</span>
                  <span className="font-semibold">{libraryAnalytics?.checkoutsThisMonth || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Average Loan Duration:</span>
                  <span className="font-semibold">{libraryAnalytics?.avgLoanDays || 0} days</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Attendance Tab */}
        <TabsContent value="attendance" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Attendance Overview</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Total Records:</span>
                  <span className="font-semibold">{attendanceAnalytics?.totalRecords || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Average Attendance Rate:</span>
                  <span className="font-semibold text-green-600">{attendanceAnalytics?.avgRate || 0}%</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Status Breakdown</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Present:</span>
                  <Badge variant="default" className="bg-green-600">{attendanceAnalytics?.present || 0}</Badge>
                </div>
                <div className="flex justify-between">
                  <span>Absent:</span>
                  <Badge variant="destructive">{attendanceAnalytics?.absent || 0}</Badge>
                </div>
                <div className="flex justify-between">
                  <span>Late:</span>
                  <Badge variant="secondary">{attendanceAnalytics?.late || 0}</Badge>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

{/* Feedback Tab */}
        <TabsContent value="feedback" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>Feedback Summary</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Total Submissions:</span>
                  <span className="font-semibold">{feedbackAnalytics?.total || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Resolved:</span>
                  <span className="font-semibold text-green-600">{feedbackAnalytics?.resolved || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Pending:</span>
                  <span className="font-semibold text-yellow-600">{feedbackAnalytics?.pending || 0}</span>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Feedback by Category</CardTitle>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex justify-between">
                  <span>Bug Reports:</span>
                  <span className="font-semibold">{feedbackAnalytics?.byCategory?.bug || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>Feature Requests:</span>
                  <span className="font-semibold">{feedbackAnalytics?.byCategory?.feature || 0}</span>
                </div>
                <div className="flex justify-between">
                  <span>General Feedback:</span>
                  <span className="font-semibold">{feedbackAnalytics?.byCategory?.general || 0}</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}</article></body></html>