[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { CalendarDays, Users, BookOpen, BarChart3 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import AttendanceCalendar from "@/components/attendance-calendar" import RecentAttendance from "@/components/recent-attendance" import ClassesOverview from "@/components/classes-overview" export default function Dashboard() { return (

AttendanceTracker

Total Classes

Active classes this semester

Total Students

248

Enrolled across all classes

Today's Attendance

92%

Average across all classes

Weekly Average

87%

Attendance rate this week

Attendance Calendar Track attendance across all classes by date Recent Attendance Latest attendance records across classes

Classes Overview Manage your classes and take attendance

) } [V0_FILE]typescriptreact:file="app/classes/page.tsx" isMerged="true" import Link from "next/link" import { BookOpen, Plus, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import ClassList from "@/components/class-list" export default function ClassesPage() { return (

AttendanceTracker

Classes

All Classes Manage your classes and view attendance records

) } [V0_FILE]typescriptreact:file="app/classes/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/students/page.tsx" isMerged="true" import Link from "next/link" import { BookOpen, Plus, Search } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import StudentList from "@/components/student-list" export default function StudentsPage() { return (

AttendanceTracker

Students

All Students Manage your students and view attendance records

) } [V0_FILE]typescriptreact:file="app/students/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/recent-attendance.tsx" isMerged="true" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" export default function RecentAttendance() { // Mock data for recent attendance const recentAttendance = [ { id: 1, student: { name: "Alex Johnson", image: "/placeholder.svg?height=32&width=32" }, class: "Math 101", date: "Today, 9:30 AM", status: "present", }, { id: 2, student: { name: "Samantha Lee", image: "/placeholder.svg?height=32&width=32" }, class: "Physics 202", date: "Today, 10:15 AM", status: "late", }, { id: 3, student: { name: "Michael Chen", image: "/placeholder.svg?height=32&width=32" }, class: "Chemistry 101", date: "Today, 11:00 AM", status: "absent", }, { id: 4, student: { name: "Emily Wilson", image: "/placeholder.svg?height=32&width=32" }, class: "Biology 303", date: "Today, 1:30 PM", status: "present", }, { id: 5, student: { name: "David Kim", image: "/placeholder.svg?height=32&width=32" }, class: "Computer Science 101", date: "Today, 2:45 PM", status: "excused", }, { id: 6, student: { name: "Jessica Martinez", image: "/placeholder.svg?height=32&width=32" }, class: "Math 101", date: "Yesterday, 9:30 AM", status: "present", }, { id: 7, student: { name: "Ryan Taylor", image: "/placeholder.svg?height=32&width=32" }, class: "Physics 202", date: "Yesterday, 10:15 AM", status: "absent", }, ] const getStatusColor = (status: string) => { switch (status) { case "present": return "bg-green-500 hover:bg-green-600" case "absent": return "bg-red-500 hover:bg-red-600" case "late": return "bg-yellow-500 hover:bg-yellow-600" case "excused": return "bg-blue-500 hover:bg-blue-600" default: return "bg-gray-500 hover:bg-gray-600" } } return (

{recentAttendance.map((record) => (

{record.student.name.charAt(0)}

{record.student.name}

{record.status.charAt(0).toUpperCase() + record.status.slice(1)}

{record.class} • {record.date}

))}

) } [V0_FILE]typescriptreact:file="components/classes-overview.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" export default function ClassesOverview() { // Mock data for classes const classes = [ { id: "math101", name: "Math 101", schedule: "MWF 9:30 AM - 10:45 AM", students: 32, attendance: 95, lastSession: "Today", }, { id: "physics202", name: "Physics 202", schedule: "TTh 10:15 AM - 11:45 AM", students: 28, attendance: 88, lastSession: "Yesterday", }, { id: "chemistry101", name: "Chemistry 101", schedule: "MWF 11:00 AM - 12:15 PM", students: 30, attendance: 92, lastSession: "Today", }, { id: "biology303", name: "Biology 303", schedule: "TTh 1:30 PM - 3:00 PM", students: 25, attendance: 90, lastSession: "2 days ago", }, { id: "computerscience101", name: "Computer Science 101", schedule: "MWF 2:45 PM - 4:00 PM", students: 35, attendance: 85, lastSession: "Today", }, ] const getAttendanceColor = (attendance: number) => { if (attendance >= 90) return "text-green-600" if (attendance >= 80) return "text-yellow-600" return "text-red-600" } return ( Class Name Schedule Students Attendance Rate Last Session Actions {classes.map((cls) => ( {cls.name} {cls.schedule} {cls.students} {cls.attendance}% {cls.lastSession}

))}

) } [V0_FILE]typescriptreact:file="components/class-list.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { MoreHorizontal, Edit, Trash2, Users } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export default function ClassList() { // Mock data for classes const classes = [ { id: "math101", name: "Math 101", instructor: "Dr. Smith", schedule: "MWF 9:30 AM - 10:45 AM", room: "Science Building 101", students: 32, attendance: 95, }, { id: "physics202", name: "Physics 202", instructor: "Prof. Johnson", schedule: "TTh 10:15 AM - 11:45 AM", room: "Science Building 203", students: 28, attendance: 88, }, { id: "chemistry101", name: "Chemistry 101", instructor: "Dr. Williams", schedule: "MWF 11:00 AM - 12:15 PM", room: "Science Building 105", students: 30, attendance: 92, }, { id: "biology303", name: "Biology 303", instructor: "Prof. Davis", schedule: "TTh 1:30 PM - 3:00 PM", room: "Science Building 302", students: 25, attendance: 90, }, { id: "computerscience101", name: "Computer Science 101", instructor: "Dr. Miller", schedule: "MWF 2:45 PM - 4:00 PM", room: "Technology Building 201", students: 35, attendance: 85, }, { id: "english201", name: "English 201", instructor: "Prof. Wilson", schedule: "TTh 9:00 AM - 10:30 AM", room: "Humanities Building 105", students: 22, attendance: 93, }, { id: "history101", name: "History 101", instructor: "Dr. Brown", schedule: "MWF 1:00 PM - 2:15 PM", room: "Humanities Building 203", students: 27, attendance: 89, }, ] const getAttendanceColor = (attendance: number) => { if (attendance >= 90) return "bg-green-100 text-green-800" if (attendance >= 80) return "bg-yellow-100 text-yellow-800" return "bg-red-100 text-red-800" } return ( Class Name Instructor Schedule Room Students Attendance Actions {classes.map((cls) => ( {cls.name} {cls.instructor} {cls.schedule} {cls.room} {cls.students} {cls.attendance}%

Actions View Students Edit Class Delete Class

))}

) } [V0_FILE]typescriptreact:file="components/student-list.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { MoreHorizontal, Edit, Trash2, FileText } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function StudentList() { // Mock data for students const students = [ { id: "s1", name: "Alex Johnson", email: "alex.johnson@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["Math 101", "Physics 202"], attendance: 95, }, { id: "s2", name: "Samantha Lee", email: "samantha.lee@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["Chemistry 101", "Biology 303"], attendance: 88, }, { id: "s3", name: "Michael Chen", email: "michael.chen@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["Computer Science 101", "Math 101"], attendance: 92, }, { id: "s4", name: "Emily Wilson", email: "emily.wilson@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["Biology 303", "Chemistry 101"], attendance: 90, }, { id: "s5", name: "David Kim", email: "david.kim@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["Physics 202", "Computer Science 101"], attendance: 85, }, { id: "s6", name: "Jessica Martinez", email: "jessica.martinez@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["Math 101", "English 201"], attendance: 93, }, { id: "s7", name: "Ryan Taylor", email: "ryan.taylor@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["History 101", "English 201"], attendance: 89, }, ] const getAttendanceColor = (attendance: number) => { if (attendance >= 90) return "bg-green-100 text-green-800" if (attendance >= 80) return "bg-yellow-100 text-yellow-800" return "bg-red-100 text-red-800" } return ( Student Email Classes Attendance Actions {students.map((student) => (

{student.name.charAt(0)} {student.name}

{student.email}

{student.classes.map((cls, index) => ( {cls} ))}

{student.attendance}%

Actions View Report Edit Student Delete Student

))}

) } [V0_FILE]typescriptreact:file="lib/data-service.ts" isMerged="true" // Data structure types export type Student = { id: string name: string email: string image: string classes?: string[] } export type Class = { id: string name: string instructor: string schedule: string room: string students: number } export type AttendanceRecord = { id: string studentId: string classId: string date: string // ISO format date string status: "present" | "absent" | "late" | "excused" notes?: string } // Mock initial data const initialStudents: Student[] = [ { id: "s1", name: "Alex Johnson", email: "alex.johnson@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["math101", "physics202"], }, { id: "s2", name: "Samantha Lee", email: "samantha.lee@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["chemistry101", "biology303"], }, { id: "s3", name: "Michael Chen", email: "michael.chen@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["computerscience101", "math101"], }, { id: "s4", name: "Emily Wilson", email: "emily.wilson@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["biology303", "chemistry101"], }, { id: "s5", name: "David Kim", email: "david.kim@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["physics202", "computerscience101"], }, { id: "s6", name: "Jessica Martinez", email: "jessica.martinez@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["math101", "english201"], }, { id: "s7", name: "Ryan Taylor", email: "ryan.taylor@example.com", image: "/placeholder.svg?height=32&width=32", classes: ["history101", "english201"], }, ] const initialClasses: Class[] = [ { id: "math101", name: "Math 101", instructor: "Dr. Smith", schedule: "MWF 9:30 AM - 10:45 AM", room: "Science Building 101", students: 32, }, { id: "physics202", name: "Physics 202", instructor: "Prof. Johnson", schedule: "TTh 10:15 AM - 11:45 AM", room: "Science Building 203", students: 28, }, { id: "chemistry101", name: "Chemistry 101", instructor: "Dr. Williams", schedule: "MWF 11:00 AM - 12:15 PM", room: "Science Building 105", students: 30, }, { id: "biology303", name: "Biology 303", instructor: "Prof. Davis", schedule: "TTh 1:30 PM - 3:00 PM", room: "Science Building 302", students: 25, }, { id: "computerscience101", name: "Computer Science 101", instructor: "Dr. Miller", schedule: "MWF 2:45 PM - 4:00 PM", room: "Technology Building 201", students: 35, }, { id: "english201", name: "English 201", instructor: "Prof. Wilson", schedule: "TTh 9:00 AM - 10:30 AM", room: "Humanities Building 105", students: 22, }, { id: "history101", name: "History 101", instructor: "Dr. Brown", schedule: "MWF 1:00 PM - 2:15 PM", room: "Humanities Building 203", students: 27, }, ] // Generate some initial attendance records const generateInitialAttendanceRecords = (): AttendanceRecord[] => { const records: AttendanceRecord[] = [] const statuses: ("present" | "absent" | "late" | "excused")[] = ["present", "absent", "late", "excused"] const today = new Date() // Generate records for the past 7 days for (let i = 0; i < 7; i++) { const date = new Date() date.setDate(today.getDate() - i) const dateStr = date.toISOString().split("T")[0] // For each class initialClasses.forEach((cls) => { // For students in this class initialStudents .filter((student) => student.classes?.includes(cls.id)) .forEach((student) => { // Randomly assign a status, with 80% chance of being present const randomIndex = Math.random() < 0.8 ? 0 : Math.floor(Math.random() * 3) + 1 records.push({ id: `${dateStr}-${cls.id}-${student.id}`, studentId: student.id, classId: cls.id, date: dateStr, status: statuses[randomIndex], notes: randomIndex !== 0 ? "Auto-generated note" : undefined, }) }) }) } return records } // Data service class class DataService { private students: Student[] private classes: Class[] private attendanceRecords: AttendanceRecord[] constructor() { // Initialize with data from localStorage or use initial data this.students = this.getFromLocalStorage("students") || initialStudents this.classes = this.getFromLocalStorage("classes") || initialClasses this.attendanceRecords = this.getFromLocalStorage("attendanceRecords") || generateInitialAttendanceRecords() // Save initial data to localStorage if it doesn't exist if (!this.getFromLocalStorage("students")) { this.saveToLocalStorage("students", this.students) } if (!this.getFromLocalStorage("classes")) { this.saveToLocalStorage("classes", this.classes) } if (!this.getFromLocalStorage("attendanceRecords")) { this.saveToLocalStorage("attendanceRecords", this.attendanceRecords) } } // LocalStorage helpers private getFromLocalStorage(key: string): T | null { if (typeof window === "undefined") return null try { const item = localStorage.getItem(`attendance-tracker-${key}`) return item ? JSON.parse(item) : null } catch (error) { console.error(`Error getting ${key} from localStorage:`, error) return null } } private saveToLocalStorage(key: string, data: T): void { if (typeof window === "undefined") return try { localStorage.setItem(`attendance-tracker-${key}`, JSON.stringify(data)) } catch (error) { console.error(`Error saving ${key} to localStorage:`, error) } } // Students methods getStudents(): Student[] { return this.students } getStudentsByClass(classId: string): Student[] { return this.students.filter((student) => student.classes?.includes(classId)) } getStudent(id: string): Student | undefined { return this.students.find((student) => student.id === id) } // Classes methods getClasses(): Class[] { return this.classes } getClass(id: string): Class | undefined { return this.classes.find((cls) => cls.id === id) } // Attendance methods getAttendanceRecords(): AttendanceRecord[] { return this.attendanceRecords } getAttendanceByClass(classId: string, date?: string): AttendanceRecord[] { return this.attendanceRecords.filter((record) => record.classId === classId && (date ? record.date === date : true)) } getAttendanceByStudent(studentId: string): AttendanceRecord[] { return this.attendanceRecords.filter((record) => record.studentId === studentId) } getAttendanceByDate(date: string): AttendanceRecord[] { return this.attendanceRecords.filter((record) => record.date === date) } saveAttendanceRecords(records: AttendanceRecord[]): void { // Find existing records with the same id and replace them, or add new ones const updatedRecords = [...this.attendanceRecords] records.forEach((newRecord) => { const index = updatedRecords.findIndex((record) => record.id === newRecord.id) if (index !== -1) { updatedRecords[index] = newRecord } else { updatedRecords.push(newRecord) } }) this.attendanceRecords = updatedRecords this.saveToLocalStorage("attendanceRecords", this.attendanceRecords) } // Calculate attendance statistics getAttendanceStats(classId?: string, startDate?: string, endDate?: string) { let records = this.attendanceRecords if (classId) { records = records.filter((record) => record.classId === classId) } if (startDate) { records = records.filter((record) => record.date >= startDate) } if (endDate) { records = records.filter((record) => record.date <= endDate) } const total = records.length if (total === 0) return { present: 0, absent: 0, late: 0, excused: 0 } const present = records.filter((record) => record.status === "present").length const absent = records.filter((record) => record.status === "absent").length const late = records.filter((record) => record.status === "late").length const excused = records.filter((record) => record.status === "excused").length return { present: Math.round((present / total) * 100), absent: Math.round((absent / total) * 100), late: Math.round((late / total) * 100), excused: Math.round((excused / total) * 100), } } // Get attendance rate by date for calendar getAttendanceRatesByDate(): Record { const dateMap: Record = {} this.attendanceRecords.forEach((record) => { if (!dateMap[record.date]) { dateMap[record.date] = { total: 0, present: 0 } } dateMap[record.date].total += 1 if (record.status === "present") { dateMap[record.date].present += 1 } }) const result: Record = {} Object.entries(dateMap).forEach(([date, data]) => { result[date] = Math.round((data.present / data.total) * 100) }) return result } } // Create a singleton instance const dataService = typeof window !== "undefined" ? new DataService() : null export default dataService [V0_FILE]typescriptreact:file="lib/export-utils.ts" isMerged="true" import type { AttendanceRecord, Student, Class } from "./data-service" // Function to convert attendance data to CSV format export function exportAttendanceToCSV( records: AttendanceRecord[], students: Student[], classes: Record, dateRange?: { start: string; end: string }, ): string { // Create CSV header let csv = "Date,Class,Student,Status,Notes\n" // Sort records by date, class, and student const sortedRecords = [...records].sort((a, b) => { if (a.date !== b.date) return a.date.localeCompare(b.date) if (a.classId !== b.classId) return a.classId.localeCompare(b.classId) return a.studentId.localeCompare(b.studentId) }) // Create a map of student IDs to names for quick lookup const studentMap = students.reduce( (map, student) => { map[student.id] = student.name return map }, {} as Record, ) // Add each record as a row in the CSV sortedRecords.forEach((record) => { const className = classes[record.classId]?.name || record.classId const studentName = studentMap[record.studentId] || record.studentId const status = record.status.charAt(0).toUpperCase() + record.status.slice(1) const notes = record.notes ? `"${record.notes.replace(/"/g, '""')}"` : "" csv += `${record.date},${className},${studentName},${status},${notes}\n` }) return csv } // Function to trigger download of CSV file export function downloadCSV(csv: string, filename: string): void { const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", filename) link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } // Function to export attendance data to Excel (CSV) and trigger download export function exportAttendanceToExcel( records: AttendanceRecord[], students: Student[], classes: Record, dateRange?: { start: string; end: string }, ): void { const csv = exportAttendanceToCSV(records, students, classes, dateRange) const date = new Date().toISOString().split("T")[0] const filename = `attendance-report-${date}.csv` downloadCSV(csv, filename) } [V0_FILE]typescriptreact:file="components/attendance-calendar.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Calendar } from "@/components/ui/calendar" import { Card } from "@/components/ui/card" import { cn } from "@/lib/utils" import dataService from "@/lib/data-service" export default function AttendanceCalendar() { const [date, setDate] = useState(new Date()) const [attendanceData, setAttendanceData] = useState>({}) useEffect(() => { if (dataService) { const rates = dataService.getAttendanceRatesByDate() setAttendanceData(rates) } }, []) return ( { // Check if day is defined and is a Date object before processing if (!day || !(day instanceof Date)) { return } // Format the date to match our data keys (YYYY-MM-DD) const dateKey = day.toISOString().split("T")[0] const attendance = attendanceData[dateKey] return ( ) }, }} /> ) } [V0_FILE]typescriptreact:file="components/attendance-form.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Input } from "@/components/ui/input" import { format } from "date-fns" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Download, Save } from "lucide-react" import dataService, { type Student, type AttendanceRecord } from "@/lib/data-service" import { exportAttendanceToExcel } from "@/lib/export-utils" interface AttendanceFormProps { classId: string date: Date status: "present" | "absent" | "late" | "excused" onSave?: () => void } export default function AttendanceForm({ classId, date, status, onSave }: AttendanceFormProps) { const [students, setStudents] = useState([]) const [studentAttendance, setStudentAttendance] = useState>({}) const [searchQuery, setSearchQuery] = useState("") const [notes, setNotes] = useState>({}) const [isSaving, setIsSaving] = useState(false) const [savedMessage, setSavedMessage] = useState("") useEffect(() => { if (dataService) { // Get students for this class const classStudents = dataService.getStudentsByClass(classId) setStudents(classStudents) // Get existing attendance records for this class and date const dateStr = date.toISOString().split("T")[0] const existingRecords = dataService.getAttendanceByClass(classId, dateStr) // Initialize attendance state from existing records or default to the provided status const attendanceState: Record = {} const notesState: Record = {} classStudents.forEach((student) => { const record = existingRecords.find((r) => r.studentId === student.id) attendanceState[student.id] = record ? record.status : status if (record?.notes) { notesState[student.id] = record.notes } }) setStudentAttendance(attendanceState) setNotes(notesState) } }, [classId, date, status]) const filteredStudents = students.filter((student) => student.name.toLowerCase().includes(searchQuery.toLowerCase())) const handleAttendanceChange = (studentId: string, value: string) => { setStudentAttendance((prev) => ({ ...prev, [studentId]: value, })) } const handleNoteChange = (studentId: string, value: string) => { setNotes((prev) => ({ ...prev, [studentId]: value, })) } const handleSave = () => { if (!dataService) return setIsSaving(true) const dateStr = date.toISOString().split("T")[0] // Create attendance records for all students const records: AttendanceRecord[] = students.map((student) => ({ id: `${dateStr}-${classId}-${student.id}`, studentId: student.id, classId: classId, date: dateStr, status: studentAttendance[student.id] as "present" | "absent" | "late" | "excused", notes: notes[student.id], })) // Save to data service (which saves to localStorage) dataService.saveAttendanceRecords(records) // Show saved message setSavedMessage("Attendance saved successfully!") setTimeout(() => setSavedMessage(""), 3000) setIsSaving(false) // Call onSave callback if provided if (onSave) onSave() } const handleExport = () => { if (!dataService) return const dateStr = date.toISOString().split("T")[0] const records = dataService.getAttendanceByClass(classId, dateStr) const allStudents = dataService.getStudents() const classes = dataService.getClasses().reduce( (acc, cls) => { acc[cls.id] = cls return acc }, {} as Record, ) exportAttendanceToExcel(records, allStudents, classes) } return (

Attendance for {getClassName(classId)}

{format(date, "MMMM d, yyyy")}

setSearchQuery(e.target.value)} className="w-full" />

{savedMessage &&

{savedMessage}

} Student Attendance Status Notes {filteredStudents.length > 0 ? ( filteredStudents.map((student) => (

{student.name.charAt(0)}

{student.name}

{student.email}

handleAttendanceChange(student.id, value)} className="flex space-x-4" >

Present

Absent

Late

Excused

handleNoteChange(student.id, e.target.value)} /> )) ) : ( No students found. )}

) } // Helper function to get class name from class ID function getClassName(classId: string): string { const classNames: Record = { math101: "Math 101", physics202: "Physics 202", chemistry101: "Chemistry 101", biology303: "Biology 303", computerscience101: "Computer Science 101", } return classNames[classId] || "Unknown Class" } [V0_FILE]typescriptreact:file="app/take-attendance/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { BookOpen, Calendar, ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { format } from "date-fns" import AttendanceForm from "@/components/attendance-form" import { useRouter } from "next/navigation" export default function TakeAttendancePage() { const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedClass, setSelectedClass] = useState("") const [isSaved, setIsSaved] = useState(false) const router = useRouter() const handlePreviousDay = () => { const prevDay = new Date(selectedDate) prevDay.setDate(prevDay.getDate() - 1) setSelectedDate(prevDay) } const handleNextDay = () => { const nextDay = new Date(selectedDate) nextDay.setDate(nextDay.getDate() + 1) setSelectedDate(nextDay) } const handleSaveComplete = () => { setIsSaved(true) setTimeout(() => setIsSaved(false), 3000) } return (

AttendanceTracker

Take Attendance

Record Daily Attendance Mark attendance for a specific class and date

Select Class

Select Date

{format(selectedDate, "MMMM d, yyyy")}

{selectedClass ? ( ) : (

Please select a class to take attendance

)} {isSaved && Attendance saved successfully!}

) } [V0_FILE]typescriptreact:file="app/reports/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import { BookOpen, Download, Filter, Calendar } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import AttendanceReportTable from "@/components/attendance-report-table" import AttendanceChart from "@/components/attendance-chart" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar as CalendarComponent } from "@/components/ui/calendar" import { format } from "date-fns" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import dataService from "@/lib/data-service" import { exportAttendanceToExcel } from "@/lib/export-utils" export default function ReportsPage() { const [activeTab, setActiveTab] = useState("overview") const [startDate, setStartDate] = useState(new Date()) const [endDate, setEndDate] = useState(new Date()) const [selectedClass, setSelectedClass] = useState("all") const [classes, setClasses] = useState([]) useEffect(() => { if (dataService) { setClasses(dataService.getClasses()) } }, []) const handleExport = () => { if (!dataService) return const startDateStr = startDate ? startDate.toISOString().split("T")[0] : undefined const endDateStr = endDate ? endDate.toISOString().split("T")[0] : undefined let records = dataService.getAttendanceRecords() // Filter by date range if (startDateStr) { records = records.filter((record) => record.date >= startDateStr) } if (endDateStr) { records = records.filter((record) => record.date <= endDateStr) } // Filter by class if (selectedClass !== "all") { records = records.filter((record) => record.classId === selectedClass) } const allStudents = dataService.getStudents() const classesMap = classes.reduce( (acc, cls) => { acc[cls.id] = cls return acc }, {} as Record, ) exportAttendanceToExcel(records, allStudents, classesMap, { start: startDateStr || "", end: endDateStr || "", }) } return (

AttendanceTracker

Attendance Reports

Date Range

Start Date

End Date

Class

Overview By Class By Student By Date

Attendance Overview Overall attendance statistics Attendance Summary Summary of attendance records

Attendance by Class View attendance records for each class Attendance by Student View attendance records for each student Attendance by Date View attendance records by date

) } [V0_FILE]typescriptreact:file="components/attendance-report-table.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import dataService from "@/lib/data-service" interface AttendanceReportTableProps { filterBy?: "class" | "student" | "date" classId?: string startDate?: string endDate?: string } export default function AttendanceReportTable({ filterBy, classId, startDate, endDate }: AttendanceReportTableProps) { const [reportData, setReportData] = useState([]) useEffect(() => { if (!dataService) return // Get all attendance records let records = dataService.getAttendanceRecords() // Apply filters if (classId) { records = records.filter((record) => record.classId === classId) } if (startDate) { records = records.filter((record) => record.date >= startDate) } if (endDate) { records = records.filter((record) => record.date <= endDate) } // Get all classes and students for reference const classes = dataService.getClasses() const students = dataService.getStudents() // Process data based on filter type let processedData: any[] = [] if (filterBy === "class") { // Group by class const classMap = new Map< string, { present: number absent: number late: number excused: number total: number } >() // Initialize with all classes classes.forEach((cls) => { classMap.set(cls.id, { present: 0, absent: 0, late: 0, excused: 0, total: 0 }) }) // Count records records.forEach((record) => { const stats = classMap.get(record.classId) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } stats[record.status]++ stats.total++ classMap.set(record.classId, stats) }) // Convert to array processedData = classes.map((cls) => { const stats = classMap.get(cls.id) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } return { id: cls.id, name: cls.name, present: stats.total > 0 ? Math.round((stats.present / stats.total) * 100) : 0, absent: stats.total > 0 ? Math.round((stats.absent / stats.total) * 100) : 0, late: stats.total > 0 ? Math.round((stats.late / stats.total) * 100) : 0, excused: stats.total > 0 ? Math.round((stats.excused / stats.total) * 100) : 0, total: stats.total, } }) } else if (filterBy === "student") { // Group by student const studentMap = new Map< string, { present: number absent: number late: number excused: number total: number } >() // Initialize with all students students.forEach((student) => { studentMap.set(student.id, { present: 0, absent: 0, late: 0, excused: 0, total: 0 }) }) // Count records records.forEach((record) => { const stats = studentMap.get(record.studentId) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } stats[record.status]++ stats.total++ studentMap.set(record.studentId, stats) }) // Convert to array processedData = students.map((student) => { const stats = studentMap.get(student.id) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } return { id: student.id, name: student.name, present: stats.total > 0 ? Math.round((stats.present / stats.total) * 100) : 0, absent: stats.total > 0 ? Math.round((stats.absent / stats.total) * 100) : 0, late: stats.total > 0 ? Math.round((stats.late / stats.total) * 100) : 0, excused: stats.total > 0 ? Math.round((stats.excused / stats.total) * 100) : 0, total: stats.total, } }) } else if (filterBy === "date") { // Group by date const dateMap = new Map< string, { present: number absent: number late: number excused: number total: number } >() // Count records records.forEach((record) => { const stats = dateMap.get(record.date) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } stats[record.status]++ stats.total++ dateMap.set(record.date, stats) }) // Convert to array processedData = Array.from(dateMap.entries()) .map(([date, stats]) => { return { id: date, date: date, present: stats.total > 0 ? Math.round((stats.present / stats.total) * 100) : 0, absent: stats.total > 0 ? Math.round((stats.absent / stats.total) * 100) : 0, late: stats.total > 0 ? Math.round((stats.late / stats.total) * 100) : 0, excused: stats.total > 0 ? Math.round((stats.excused / stats.total) * 100) : 0, total: stats.total, } }) .sort((a, b) => b.date.localeCompare(a.date)) // Sort by date descending } else { // Overview - use class filter by default const classMap = new Map< string, { present: number absent: number late: number excused: number total: number } >() // Initialize with all classes classes.forEach((cls) => { classMap.set(cls.id, { present: 0, absent: 0, late: 0, excused: 0, total: 0 }) }) // Count records records.forEach((record) => { const stats = classMap.get(record.classId) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } stats[record.status]++ stats.total++ classMap.set(record.classId, stats) }) // Convert to array processedData = classes.map((cls) => { const stats = classMap.get(cls.id) || { present: 0, absent: 0, late: 0, excused: 0, total: 0 } return { id: cls.id, name: cls.name, present: stats.total > 0 ? Math.round((stats.present / stats.total) * 100) : 0, absent: stats.total > 0 ? Math.round((stats.absent / stats.total) * 100) : 0, late: stats.total > 0 ? Math.round((stats.late / stats.total) * 100) : 0, excused: stats.total > 0 ? Math.round((stats.excused / stats.total) * 100) : 0, total: stats.total, } }) } setReportData(processedData) }, [filterBy, classId, startDate, endDate]) const getAttendanceColor = (attendance: number) => { if (attendance >= 90) return "bg-green-100 text-green-800" if (attendance >= 80) return "bg-yellow-100 text-yellow-800" return "bg-red-100 text-red-800" } const nameField = filterBy === "date" ? "date" : "name" return ( {filterBy === "date" ? "Date" : filterBy === "student" ? "Student" : "Class"} Present Absent Late Excused Attendance Rate {reportData.length > 0 ? ( reportData.map((item) => ( {item[nameField]} {item.present}% {item.absent}% {item.late}% {item.excused}% {item.present}% )) ) : ( No data available )}

) } [V0_FILE]typescriptreact:file="components/attendance-chart.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" import dataService from "@/lib/data-service" interface AttendanceChartProps { classId?: string startDate?: string endDate?: string } export default function AttendanceChart({ classId, startDate, endDate }: AttendanceChartProps) { const [data, setData] = useState([]) useEffect(() => { if (!dataService) return // Get all classes const classes = dataService.getClasses() // Filter classes if classId is provided const filteredClasses = classId ? classes.filter((cls) => cls.id === classId) : classes // Get attendance stats for each class const chartData = filteredClasses.map((cls) => { const stats = dataService.getAttendanceStats(cls.id, startDate, endDate) return { name: cls.name, present: stats.present, absent: stats.absent, late: stats.late, excused: stats.excused, } }) setData(chartData) }, [classId, startDate, endDate]) return (

) } [V0_FILE]php:file="app/Models/Student.php" isMerged="true" belongsToMany(ClassModel::class, 'class_student', 'student_id', 'class_id'); } /** * Get the attendance records for the student. */ public function attendanceRecords(): HasMany { return $this->hasMany(AttendanceRecord::class); } } [V0_FILE]php:file="app/Models/ClassModel.php" isMerged="true" belongsToMany(Student::class, 'class_student', 'class_id', 'student_id'); } /** * Get the attendance records for the class. */ public function attendanceRecords(): HasMany { return $this->hasMany(AttendanceRecord::class, 'class_id'); } } [V0_FILE]php:file="app/Models/AttendanceRecord.php" isMerged="true" belongsTo(Student::class); } /** * Get the class that owns the attendance record. */ public function class(): BelongsTo { return $this->belongsTo(ClassModel::class, 'class_id'); } } [V0_FILE]php:file="database/migrations/2023_05_01_000001_create_students_table.php" isMerged="true" id(); $table->string('name'); $table->string('email')->unique(); $table->string('image')->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('students'); } }; [V0_FILE]php:file="database/migrations/2023_05_01_000002_create_classes_table.php" isMerged="true" id(); $table->string('name'); $table->string('instructor'); $table->string('schedule'); $table->string('room'); $table->timestamps(); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('classes'); } }; [V0_FILE]php:file="database/migrations/2023_05_01_000003_create_class_student_table.php" isMerged="true" id(); $table->foreignId('class_id')->constrained('classes')->onDelete('cascade'); $table->foreignId('student_id')->constrained('students')->onDelete('cascade'); $table->timestamps(); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('class_student'); } }; [V0_FILE]php:file="database/migrations/2023_05_01_000004_create_attendance_records_table.php" isMerged="true" id(); $table->foreignId('student_id')->constrained()->onDelete('cascade'); $table->foreignId('class_id')->constrained('classes')->onDelete('cascade'); $table->date('date'); $table->enum('status', ['present', 'absent', 'late', 'excused']); $table->text('notes')->nullable(); $table->timestamps(); // Unique constraint to prevent duplicate records $table->unique(['student_id', 'class_id', 'date']); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('attendance_records'); } }; [V0_FILE]php:file="database/seeders/DatabaseSeeder.php" isMerged="true" call([ ClassSeeder::class, StudentSeeder::class, AttendanceRecordSeeder::class, ]); } } [V0_FILE]php:file="database/seeders/ClassSeeder.php" isMerged="true" 'Math 101', 'instructor' => 'Dr. Smith', 'schedule' => 'MWF 9:30 AM - 10:45 AM', 'room' => 'Science Building 101', ], [ 'name' => 'Physics 202', 'instructor' => 'Prof. Johnson', 'schedule' => 'TTh 10:15 AM - 11:45 AM', 'room' => 'Science Building 203', ], [ 'name' => 'Chemistry 101', 'instructor' => 'Dr. Williams', 'schedule' => 'MWF 11:00 AM - 12:15 PM', 'room' => 'Science Building 105', ], [ 'name' => 'Biology 303', 'instructor' => 'Prof. Davis', 'schedule' => 'TTh 1:30 PM - 3:00 PM', 'room' => 'Science Building 302', ], [ 'name' => 'Computer Science 101', 'instructor' => 'Dr. Miller', 'schedule' => 'MWF 2:45 PM - 4:00 PM', 'room' => 'Technology Building 201', ], [ 'name' => 'English 201', 'instructor' => 'Prof. Wilson', 'schedule' => 'TTh 9:00 AM - 10:30 AM', 'room' => 'Humanities Building 105', ], [ 'name' => 'History 101', 'instructor' => 'Dr. Brown', 'schedule' => 'MWF 1:00 PM - 2:15 PM', 'room' => 'Humanities Building 203', ], ]; foreach ($classes as $class) { ClassModel::create($class); } } } [V0_FILE]php:file="database/seeders/StudentSeeder.php" isMerged="true" 'Alex Johnson', 'email' => 'alex.johnson@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [1, 2], // Math 101, Physics 202 ], [ 'name' => 'Samantha Lee', 'email' => 'samantha.lee@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [3, 4], // Chemistry 101, Biology 303 ], [ 'name' => 'Michael Chen', 'email' => 'michael.chen@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [5, 1], // Computer Science 101, Math 101 ], [ 'name' => 'Emily Wilson', 'email' => 'emily.wilson@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [4, 3], // Biology 303, Chemistry 101 ], [ 'name' => 'David Kim', 'email' => 'david.kim@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [2, 5], // Physics 202, Computer Science 101 ], [ 'name' => 'Jessica Martinez', 'email' => 'jessica.martinez@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [1, 6], // Math 101, English 201 ], [ 'name' => 'Ryan Taylor', 'email' => 'ryan.taylor@example.com', 'image' => '/placeholder.svg?height=32&width=32', 'classes' => [7, 6], // History 101, English 201 ], ]; foreach ($students as $studentData) { $classIds = $studentData['classes']; unset($studentData['classes']); $student = Student::create($studentData); $student->classes()->attach($classIds); } } } [V0_FILE]php:file="database/seeders/AttendanceRecordSeeder.php" isMerged="true" get(); // Generate records for the past 7 days for ($i = 0; $i < 7; $i++) { $date = $today->copy()->subDays($i); foreach ($classes as $class) { foreach ($class->students as $student) { // Randomly assign a status, with 80% chance of being present $randomIndex = mt_rand(1, 100) <= 80 ? 0 : mt_rand(1, 3); $status = $statuses[$randomIndex]; AttendanceRecord::create([ 'student_id' => $student->id, 'class_id' => $class->id, 'date' => $date->format('Y-m-d'), 'status' => $status, 'notes' => $randomIndex !== 0 ? 'Auto-generated note' : null, ]); } } } } } [V0_FILE]php:file="app/Http/Controllers/ClassController.php" isMerged="true" get() ->map(function ($class) { $records = $class->attendanceRecords; $present = $records->where('status', 'present')->count(); $attendance = $records->count() > 0 ? round(($present / $records->count()) * 100) : 0; return [ 'id' => $class->id, 'name' => $class->name, 'instructor' => $class->instructor, 'schedule' => $class->schedule, 'room' => $class->room, 'students' => $class->students_count, 'attendance' => $attendance, ]; }); return Inertia::render('Classes/Index', [ 'classes' => $classes, ]); } /** * Show the form for creating a new class. */ public function create() { return Inertia::render('Classes/Create'); } /** * Store a newly created class in storage. */ public function store(Request $request) { $validated = $request->validate([ 'name' => 'required|string|max:255', 'instructor' => 'required|string|max:255', 'schedule' => 'required|string|max:255', 'room' => 'required|string|max:255', ]); ClassModel::create($validated); return redirect()->route('classes.index') ->with('message', 'Class created successfully.'); } /** * Display the specified class. */ public function show(ClassModel $class) { $class->load('students'); $students = $class->students->map(function ($student) use ($class) { $records = $student->attendanceRecords()->where('class_id', $class->id)->get(); $present = $records->where('status', 'present')->count(); $attendance = $records->count() > 0 ? round(($present / $records->count()) * 100) : 0; return [ 'id' => $student->id, 'name' => $student->name, 'email' => $student->email, 'image' => $student->image, 'attendance' => $attendance, ]; }); return Inertia::render('Classes/Show', [ 'class' => [ 'id' => $class->id, 'name' => $class->name, 'instructor' => $class->instructor, 'schedule' => $class->schedule, 'room' => $class->room, ], 'students' => $students, ]); } /** * Show the form for editing the specified class. */ public function edit(ClassModel $class) { return Inertia::render('Classes/Edit', [ 'class' => $class, ]); } /** * Update the specified class in storage. */ public function update(Request $request, ClassModel $class) { $validated = $request->validate([ 'name' => 'required|string|max:255', 'instructor' => 'required|string|max:255', 'schedule' => 'required|string|max:255', 'room' => 'required|string|max:255', ]); $class->update($validated); return redirect()->route('classes.index') ->with('message', 'Class updated successfully.'); } /** * Remove the specified class from storage. */ public function destroy(ClassModel $class) { $class->delete(); return redirect()->route('classes.index') ->with('message', 'Class deleted successfully.'); } } [V0_FILE]php:file="app/Http/Controllers/StudentController.php" isMerged="true" get() ->map(function ($student) { $records = $student->attendanceRecords; $present = $records->where('status', 'present')->count(); $attendance = $records->count() > 0 ? round(($present / $records->count()) * 100) : 0; return [ 'id' => $student->id, 'name' => $student->name, 'email' => $student->email, 'image' => $student->image, 'classes' => $student->classes->pluck('name')->toArray(), 'attendance' => $attendance, ]; }); return Inertia::render('Students/Index', [ 'students' => $students, ]); } /** * Show the form for creating a new student. */ public function create() { $classes = ClassModel::all()->map(function ($class) { return [ 'id' => $class->id, 'name' => $class->name, ]; }); return Inertia::render('Students/Create', [ 'classes' => $classes, ]); } /** * Store a newly created student in storage. */ public function store(Request $request) { $validated = $request->validate([ 'name' => 'required|string|max:255', 'email' => 'required|email|unique:students,email', 'image' => 'nullable|string', 'classes' => 'required|array', 'classes.*' => 'exists:classes,id', ]); $student = Student::create([ 'name' => $validated['name'], 'email' => $validated['email'], 'image' => $validated['image'] ?? '/placeholder.svg?height=32&width=32', ]); $student->classes()->attach($validated['classes']); return redirect()->route('students.index') ->with('message', 'Student created successfully.'); } /** * Display the specified student. */ public function show(Student $student) { $student->load('classes'); $classes = $student->classes->map(function ($class) use ($student) { $records = $student->attendanceRecords()->where('class_id', $class->id)->get(); $present = $records->where('status', 'present')->count(); $attendance = $records->count() > 0 ? round(($present / $records->count()) * 100) : 0; return [ 'id' => $class->id, 'name' => $class->name, 'attendance' => $attendance, ]; }); return Inertia::render('Students/Show', [ 'student' => [ 'id' => $student->id, 'name' => $student->name, 'email' => $student->email, 'image' => $student->image, ], 'classes' => $classes, ]); } /** * Show the form for editing the specified student. */ public function edit(Student $student) { $student->load('classes'); $classes = ClassModel::all()->map(function ($class) { return [ 'id' => $class->id, 'name' => $class->name, ]; }); return Inertia::render('Students/Edit', [ 'student' => [ 'id' => $student->id, 'name' => $student->name, 'email' => $student->email, 'image' => $student->image, 'classes' => $student->classes->pluck('id')->toArray(), ], 'classes' => $classes, ]); } /** * Update the specified student in storage. */ public function update(Request $request, Student $student) { $validated = $request->validate([ 'name' => 'required|string|max:255', 'email' => 'required|email|unique:students,email,' . $student->id, 'image' => 'nullable|string', 'classes' => 'required|array', 'classes.*' => 'exists:classes,id', ]); $student->update([ 'name' => $validated['name'], 'email' => $validated['email'], 'image' => $validated['image'] ?? $student->image, ]); $student->classes()->sync($validated['classes']); return redirect()->route('students.index') ->with('message', 'Student updated successfully.'); } /** * Remove the specified student from storage. */ public function destroy(Student $student) { $student->delete(); return redirect()->route('students.index') ->with('message', 'Student deleted successfully.'); } } [V0_FILE]php:file="routes/web.php" isMerged="true" name('dashboard'); // Classes routes Route::resource('classes', ClassController::class); // Students routes Route::resource('students', StudentController::class); // Attendance routes Route::get('/take-attendance', [AttendanceController::class, 'create'])->name('attendance.create'); Route::post('/attendance/get-students', [AttendanceController::class, 'getStudents'])->name('attendance.get-students'); Route::post('/attendance', [AttendanceController::class, 'store'])->name('attendance.store'); Route::get('/attendance/export', [AttendanceController::class, 'export'])->name('attendance.export'); // Reports routes Route::get('/reports', [ReportController::class, 'index'])->name('reports.index'); Route::post('/reports/data', [ReportController::class, 'getData'])->name('reports.data'); Route::post('/reports/chart', [ReportController::class, 'getChartData'])->name('reports.chart'); [V0_FILE]typescriptreact:file="resources/js/Components/RecentAttendance.tsx" isMerged="true" import { Avatar, AvatarFallback, AvatarImage } from "@/Components/ui/avatar" import { Badge } from "@/Components/ui/badge" import { ScrollArea } from "@/Components/ui/scroll-area" interface RecentAttendanceProps { records: { id: number student: { name: string image: string } class: string date: string status: string }[] } export default function RecentAttendance({ records }: RecentAttendanceProps) { const getStatusColor = (status: string) => { switch (status) { case "present": return "bg-green-500 hover:bg-green-600" case "absent": return "bg-red-500 hover:bg-red-600" case "late": return "bg-yellow-500 hover:bg-yellow-600" case "excused": return "bg-blue-500 hover:bg-blue-600" default: return "bg-gray-500 hover:bg-gray-600" } } return (

{records.map((record) => (

{record.student.name.charAt(0)}

{record.student.name}

{record.status.charAt(0).toUpperCase() + record.status.slice(1)}

{record.class} • {record.date}

))}

) } [V0_FILE]typescriptreact:file="resources/js/Components/ClassesOverview.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import { Button } from "@/Components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table" import { route } from "ziggy-js" interface ClassesOverviewProps { classes: { id: number name: string schedule: string students: number attendance: number lastSession: string }[] } export default function ClassesOverview({ classes }: ClassesOverviewProps) { const getAttendanceColor = (attendance: number) => { if (attendance >= 90) return "text-green-600" if (attendance >= 80) return "text-yellow-600" return "text-red-600" } return ( Class Name Schedule Students Attendance Rate Last Session Actions {classes.map((cls) => ( {cls.name} {cls.schedule} {cls.students} {cls.attendance}% {cls.lastSession}

))}

) } [V0_FILE]typescriptreact:file="resources/js/Layouts/AppLayout.tsx" isFixed="true" isQuickEdit="true" isMerged="true" import type { ReactNode } from "react" import { BookOpen } from "lucide-react" import { Link, usePage } from "@inertiajs/react" interface AppLayoutProps { children: ReactNode } export default function AppLayout({ children }: AppLayoutProps) { const { url } = usePage() const route = (routeName: string, params: any = {}) => { const routeUrl = window.route(routeName, params) return routeUrl } const currentRoute = (routeName: string) => { return url.startsWith(window.route(routeName)) } return (

AttendanceTracker

{children}

) } [V0_FILE]typescriptreact:file="resources/js/Components/AttendanceReportTable.tsx" isMerged="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table" import { Badge } from "@/Components/ui/badge" interface AttendanceReportTableProps { data: any[] isLoading?: boolean } export default function AttendanceReportTable({ data, isLoading = false }: AttendanceReportTableProps) { const getAttendanceColor = (attendance: number) => { if (attendance >= 90) return "bg-green-100 text-green-800" if (attendance >= 80) return "bg-yellow-100 text-yellow-800" return "bg-red-100 text-red-800" } if (isLoading) { return (

Loading data...

) } return ( {data[0]?.date ? "Date" : data[0]?.name ? "Name" : "Class"} Present Absent Late Excused Attendance Rate {data.length > 0 ? ( data.map((item) => ( {item.date || item.name} {item.present}% {item.absent}% {item.late}% {item.excused}% {item.present}% )) ) : ( No data available )}

) } [V0_FILE]typescriptreact:file="resources/js/Components/AttendanceChart.tsx" isMerged="true" import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" interface AttendanceChartProps { data: any[] } export default function AttendanceChart({ data }: AttendanceChartProps) { if (data.length === 0) { return (

No data available

) } return (

) } [V0_FILE]typescriptreact:file="resources/js/Pages/Attendance/Create.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Head, useForm } from "@inertiajs/react" import { Calendar, ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/Components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/Components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select" import { format } from "date-fns" import AttendanceForm from "@/Components/AttendanceForm" import AppLayout from "@/Layouts/AppLayout" interface CreateProps { classes: { id: number name: string }[] } export default function Create({ classes }: CreateProps) { const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedClass, setSelectedClass] = useState("") const [students, setStudents] = useState([]) const [isSaved, setIsSaved] = useState(false) const [isLoading, setIsLoading] = useState(false) const { data, setData, post, processing, errors } = useForm({ class_id: "", date: format(new Date(), "yyyy-MM-dd"), }) const handlePreviousDay = () => { const prevDay = new Date(selectedDate) prevDay.setDate(prevDay.getDate() - 1) setSelectedDate(prevDay) setData("date", format(prevDay, "yyyy-MM-dd")) } const handleNextDay = () => { const nextDay = new Date(selectedDate) nextDay.setDate(nextDay.getDate() + 1) setSelectedDate(nextDay) setData("date", format(nextDay, "yyyy-MM-dd")) } const handleClassChange = (value: string) => { setSelectedClass(value) setData("class_id", value) } useEffect(() => { if (selectedClass) { loadStudents() } }, [selectedClass, selectedDate]) const loadStudents = () => { setIsLoading(true) post(route("attendance.get-students"), { preserveScroll: true, preserveState: true, onSuccess: (page) => { setStudents(page.props.students || []) setIsLoading(false) }, onError: () => { setIsLoading(false) }, }) } const handleSaveComplete = () => { setIsSaved(true) setTimeout(() => setIsSaved(false), 3000) } return (

Take Attendance

Record Daily Attendance Mark attendance for a specific class and date

Select Class {errors.class_id &&

{errors.class_id}

}

Select Date

{format(selectedDate, "MMMM d, yyyy")}

{errors.date &&

{errors.date}

}

{selectedClass ? ( isLoading ? (

Loading students...

) : ( ) ) : (

Please select a class to take attendance

)} {isSaved && Attendance saved successfully!}

) } [V0_FILE]typescriptreact:file="resources/js/Components/AttendanceForm.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useForm } from "@inertiajs/react" import { Avatar, AvatarFallback, AvatarImage } from "@/Components/ui/avatar" import { Input } from "@/Components/ui/input" import { format } from "date-fns" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table" import { Badge } from "@/Components/ui/badge" import { RadioGroup, RadioGroupItem } from "@/Components/ui/radio-group" import { Label } from "@/Components/ui/label" import { Button } from "@/Components/ui/button" import { Download, Save } from "lucide-react" interface Student { id: number name: string email: string image: string status: string notes: string | null } interface AttendanceFormProps { classId: string date: Date students: Student[] onSave?: () => void } export default function AttendanceForm({ classId, date, students, onSave }: AttendanceFormProps) { const [searchQuery, setSearchQuery] = useState("") const [savedMessage, setSavedMessage] = useState("") const { data, setData, post, processing, errors } = useForm({ class_id: classId, date: format(date, "yyyy-MM-dd"), records: students.map((student) => ({ student_id: student.id, status: student.status || "present", notes: student.notes || "", })), }) const filteredStudents = students.filter((student) => student.name.toLowerCase().includes(searchQuery.toLowerCase())) const handleAttendanceChange = (studentId: string, value: string) => { setData( "records", data.records.map((record) => record.student_id.toString() === studentId ? { ...record, status: value } : record, ), ) } const handleNoteChange = (studentId: string, value: string) => { setData( "records", data.records.map((record) => (record.student_id.toString() === studentId ? { ...record, notes: value } : record)), ) } const handleSave = () => { post(route("attendance.store"), { preserveScroll: true, onSuccess: () => { setSavedMessage("Attendance saved successfully!") setTimeout(() => setSavedMessage(""), 3000) if (onSave) onSave() }, onError: () => { setSavedMessage("Error saving attendance. Please try again.") }, }) } const handleExport = () => { window.location.href = route("attendance.export", { class_id: classId, start_date: format(date, "yyyy-MM-dd"), end_date: format(date, "yyyy-MM-dd"), }) } return (

Attendance for {getClassName(classId, students)}

{format(date, "MMMM d, yyyy")}

setSearchQuery(e.target.value)} className="w-full" />

{savedMessage &&

{savedMessage}

} {errors.records &&

{errors.records}

} Student Attendance Status Notes {filteredStudents.length > 0 ? ( filteredStudents.map((student) => { const recordIndex = data.records.findIndex((r) => r.student_id === student.id) const record = recordIndex >= 0 ? data.records[recordIndex] : null return (

{student.name.charAt(0)}

{student.name}

{student.email}

handleAttendanceChange(student.id.toString(), value)} className="flex space-x-4" >

Present

Absent

Late

Excused

handleNoteChange(student.id.toString(), e.target.value)} /> ) }) ) : ( No students found. )}

) } // Helper function to get class name from class ID and students array function getClassName(classId: string, students: Student[]): string { if (students.length === 0) return "Unknown Class" // Try to find a student in this class to get the class name const student = students[0] if (student && student.id) { return `Class #${classId}` } return "Unknown Class" } [V0_FILE]typescriptreact:file="resources/js/Pages/Reports/Index.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Head, router, usePage } from "@inertiajs/react" import { Download, Filter, Calendar } from "lucide-react" import { Button } from "@/Components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/Components/ui/tabs" import AttendanceReportTable from "@/Components/AttendanceReportTable" import AttendanceChart from "@/Components/AttendanceChart" import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover" import { Calendar as CalendarComponent } from "@/Components/ui/calendar" import { format } from "date-fns" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select" import AppLayout from "@/Layouts/AppLayout" interface ReportsProps { classes: { id: number name: string }[] reportData?: any[] chartData?: any[] } export default function Reports({ classes, reportData = [], chartData = [] }: ReportsProps) { const [activeTab, setActiveTab] = useState("overview") const [startDate, setStartDate] = useState(new Date()) const [endDate, setEndDate] = useState(new Date()) const [selectedClass, setSelectedClass] = useState("all") const [isLoading, setIsLoading] = useState(false) const { route } = usePage().props useEffect(() => { loadData() }, [activeTab, selectedClass, startDate, endDate]) const loadData = () => { setIsLoading(true) router.reload({ only: ["reportData", "chartData"], data: { filter_by: activeTab === "overview" ? "class" : activeTab.replace("by-", ""), class_id: selectedClass !== "all" ? selectedClass : undefined, start_date: startDate ? format(startDate, "yyyy-MM-dd") : undefined, end_date: endDate ? format(endDate, "yyyy-MM-dd") : undefined, }, onSuccess: () => { setIsLoading(false) }, onError: () => { setIsLoading(false) }, preserveState: true, }) } const handleExport = () => { window.location.href = route("attendance.export", { class_id: selectedClass !== "all" ? selectedClass : undefined, start_date: startDate ? format(startDate, "yyyy-MM-dd") : undefined, end_date: endDate ? format(endDate, "yyyy-MM-dd") : undefined, }) } return (

Attendance Reports

Date Range

Start Date

End Date

Class

Overview By Class By Student By Date

Attendance Overview Overall attendance statistics Attendance Summary Summary of attendance records

Attendance by Class View attendance records for each class Attendance by Student View attendance records for each student Attendance by Date View attendance records by date

) } [V0_FILE]php:file="app/Http/Controllers/AttendanceController.php" isEdit="true" isMerged="true" map(function ($class) { return [ 'id' => $class->id, 'name' => $class->name, ]; }); return Inertia::render('Attendance/Create', [ 'classes' => $classes, ]); } /** * Get students for a class. */ public function getStudents(Request $request) { $request->validate([ 'class_id' => 'required|exists:classes,id', 'date' => 'required|date', ]); $classId = $request->input('class_id'); $date = $request->input('date'); $class = ClassModel::findOrFail($classId); $students = $class->students; $attendanceRecords = AttendanceRecord::where('class_id', $classId) ->where('date', $date) ->get() ->keyBy('student_id'); $studentsData = $students->map(function ($student) use ($attendanceRecords) { $record = $attendanceRecords->get($student->id); return [ 'id' => $student->id, 'name' => $student->name, 'email' => $student->email, 'image' => $student->image, 'status' => $record ? $record->status : 'present', 'notes' => $record ? $record->notes : null, ]; }); return Inertia::render('Attendance/Create', [ 'students' => $studentsData, ]); } /** * Store attendance records. */ public function store(Request $request) { $request->validate([ 'class_id' => 'required|exists:classes,id', 'date' => 'required|date', 'records' => 'required|array', 'records.*.student_id' => 'required|exists:students,id', 'records.*.status' => 'required|in:present,absent,late,excused', 'records.*.notes' => 'nullable|string', ]); $classId = $request->input('class_id'); $date = $request->input('date'); $records = $request->input('records'); foreach ($records as $record) { AttendanceRecord::updateOrCreate( [ 'student_id' => $record['student_id'], 'class_id' => $classId, 'date' => $date, ], [ 'status' => $record['status'], 'notes' => $record['notes'] ?? null, ] ); } return redirect()->back()->with('success', 'Attendance records saved successfully.'); } /** * Export attendance records to CSV. */ public function export(Request $request) { $request->validate([ 'class_id' => 'nullable|exists:classes,id', 'start_date' => 'nullable|date', 'end_date' => 'nullable|date', ]); $classId = $request->input('class_id'); $startDate = $request->input('start_date'); $endDate = $request->input('end_date'); $query = AttendanceRecord::with(['student', 'class']); if ($classId) { $query->where('class_id', $classId); } if ($startDate) { $query->where('date', '>=', $startDate); } if ($endDate) { $query->where('date', '<=', $endDate); } $records = $query->orderBy('date', 'desc') ->orderBy('class_id') ->orderBy('student_id') ->get(); $filename = 'attendance-report-' . Carbon::now()->format('Y-m-d') . '.csv'; $headers = [ 'Content-Type' => 'text/csv', 'Content-Disposition' => 'attachment; filename="' . $filename . '"', ]; $callback = function () use ($records) { $file = fopen('php://output', 'w'); fputcsv($file, ['Date', 'Class', 'Student', 'Status', 'Notes']); foreach ($records as $record) { fputcsv($file, [ $record->date, $record->class->name, $record->student->name, ucfirst($record->status), $record->notes ?? '', ]); } fclose($file); }; return response()->stream($callback, 200, $headers); } } [V0_FILE]php:file="app/Http/Controllers/ReportController.php" isEdit="true" isMerged="true" map(function ($class) { return [ 'id' => $class->id, 'name' => $class->name, ]; }); $filterBy = $request->input('filter_by', 'class'); $classId = $request->input('class_id'); $startDate = $request->input('start_date'); $endDate = $request->input('end_date'); $reportData = []; $chartData = []; if ($request->has('filter_by')) { $reportData = $this->getReportData($filterBy, $classId, $startDate, $endDate); $chartData = $this->getChartData($classId, $startDate, $endDate); } return Inertia::render('Reports/Index', [ 'classes' => $classes, 'reportData' => $reportData, 'chartData' => $chartData, ]); } /** * Get report data based on filters. */ private function getReportData($filterBy, $classId, $startDate, $endDate) { $query = AttendanceRecord::query(); if ($classId) { $query->where('class_id', $classId); } if ($startDate) { $query->where('date', '>=', $startDate); } if ($endDate) { $query->where('date', '<=', $endDate); } $records = $query->get(); if ($filterBy === 'class') { return $this->getClassReport($records); } elseif ($filterBy === 'student') { return $this->getStudentReport($records); } elseif ($filterBy === 'date') { return $this->getDateReport($records); } return $this->getClassReport($records); } /** * Get chart data based on filters. */ private function getChartData($classId, $startDate, $endDate) { $query = ClassModel::query(); if ($classId) { $query->where('id', $classId); } $classes = $query->get(); $result = []; foreach ($classes as $class) { $recordsQuery = $class->attendanceRecords(); if ($startDate) { $recordsQuery->where('date', '>=', $startDate); } if ($endDate) { $recordsQuery->where('date', '<=', $endDate); } $records = $recordsQuery->get(); $total = $records->count(); if ($total === 0) continue; $present = $records->where('status', 'present')->count(); $absent = $records->where('status', 'absent')->count(); $late = $records->where('status', 'late')->count(); $excused = $records->where('status', 'excused')->count(); $result[] = [ 'name' => $class->name, 'present' => round(($present / $total) * 100), 'absent' => round(($absent / $total) * 100), 'late' => round(($late / $total) * 100), 'excused' => round(($excused / $total) * 100), ]; } return $result; } /** * Get report data grouped by class. */ private function getClassReport($records) { $classes = ClassModel::all(); $classMap = []; foreach ($classes as $class) { $classMap[$class->id] = [ 'id' => $class->id, 'name' => $class->name, 'present' => 0, 'absent' => 0, 'late' => 0, 'excused' => 0, 'total' => 0, ]; } foreach ($records as $record) { if (!isset($classMap[$record->class_id])) continue; $classMap[$record->class_id][$record->status]++; $classMap[$record->class_id]['total']++; } $result = []; foreach ($classMap as $classId => $data) { if ($data['total'] === 0) continue; $result[] = [ 'id' => $data['id'], 'name' => $data['name'], 'present' => round(($data['present'] / $data['total']) * 100), 'absent' => round(($data['absent'] / $data['total']) * 100), 'late' => round(($data['late'] / $data['total']) * 100), 'excused' => round(($data['excused'] / $data['total']) * 100), 'total' => $data['total'], ]; } return $result; } /** * Get report data grouped by student. */ private function getStudentReport($records) { $students = Student::all(); $studentMap = []; foreach ($students as $student) { $studentMap[$student->id] = [ 'id' => $student->id, 'name' => $student->name, 'present' => 0, 'absent' => 0, 'late' => 0, 'excused' => 0, 'total' => 0, ]; } foreach ($records as $record) { if (!isset($studentMap[$record->student_id])) continue; $studentMap[$record->student_id][$record->status]++; $studentMap[$record->student_id]['total']++; } $result = []; foreach ($studentMap as $studentId => $data) { if ($data['total'] === 0) continue; $result[] = [ 'id' => $data['id'], 'name' => $data['name'], 'present' => round(($data['present'] / $data['total']) * 100), 'absent' => round(($data['absent'] / $data['total']) * 100), 'late' => round(($data['late'] / $data['total']) * 100), 'excused' => round(($data['excused'] / $data['total']) * 100), 'total' => $data['total'], ]; } return $result; } /** * Get report data grouped by date. */ private function getDateReport($records) { $dateMap = []; foreach ($records as $record) { if (!isset($dateMap[$record->date])) { $dateMap[$record->date] = [ 'id' => $record->date, 'date' => $record->date, 'present' => 0, 'absent' => 0, 'late' => 0, 'excused' => 0, 'total' => 0, ]; } $dateMap[$record->date][$record->status]++; $dateMap[$record->date]['total']++; } $result = []; foreach ($dateMap as $date => $data) { $result[] = [ 'id' => $data['id'], 'date' => Carbon::parse($data['date'])->format('F j, Y'), 'present' => round(($data['present'] / $data['total']) * 100), 'absent' => round(($data['absent'] / $data['total']) * 100), 'late' => round(($data['late'] / $data['total']) * 100), 'excused' => round(($data['excused'] / $data['total']) * 100), 'total' => $data['total'], ]; } // Sort by date descending usort($result, function ($a, $b) { return strcmp($b['id'], $a['id']); }); return $result; } } [V0_FILE]typescriptreact:file="resources/js/Components/AttendanceCalendar.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Calendar } from "@/Components/ui/calendar" import { Card } from "@/Components/ui/card" import { cn } from "@/lib/utils" interface AttendanceCalendarProps { attendanceData: Record } export default function AttendanceCalendar({ attendanceData }: AttendanceCalendarProps) { const [date, setDate] = useState(new Date()) return ( { // Check if day is defined and is a Date object before processing if (!day || !(day instanceof Date)) { return } // Format the date to match our data keys (YYYY-MM-DD) const dateKey = day.toISOString().split("T")[0] const attendance = attendanceData[dateKey] return ( ) }, }} /> ) } [V0_FILE]typescriptreact:file="app/Http/Controllers/DashboardController.php" isEdit="true" isQuickEdit="true" format('Y-m-d'); $todayRecords = AttendanceRecord::where('date', $today)->get(); $todayPresent = $todayRecords->where('status', 'present')->count(); $todayAttendance = $todayRecords->count() > 0 ? round(($todayPresent / $todayRecords->count()) * 100) : 0; // Calculate weekly average $weekStart = Carbon::today()->subDays(7)->format('Y-m-d'); $weekRecords = AttendanceRecord::where('date', '>=', $weekStart)->get(); $weekPresent = $weekRecords->where('status', 'present')->count(); $weeklyAverage = $weekRecords->count() > 0 ? round(($weekPresent / $weekRecords->count()) * 100) : 0; // Get attendance rates by date for calendar $attendanceRates = $this->getAttendanceRatesByDate(); // Get recent attendance records $recentAttendance = AttendanceRecord::with(['student', 'class']) ->orderBy('date', 'desc') ->orderBy('created_at', 'desc') ->take(7) ->get() ->map(function ($record) { return [ 'id' => $record->id, 'student' => [ 'name' => $record->student->name, 'image' => $record->student->image, ], 'class' => $record->class->name, 'date' => Carbon::parse($record->date)->format('F j, Y'), 'status' => $record->status, ]; }); // Get classes for overview $classes = ClassModel::withCount('students') ->get() ->map(function ($class) { $records = $class->attendanceRecords; $present = $records->where('status', 'present')->count(); $attendance = $records->count() > 0 ? round(($present / $records->count()) * 100) : 0; $lastSession = $class->attendanceRecords() ->orderBy('date', 'desc') ->first(); return [ 'id' => $class->id, 'name' => $class->name, 'schedule' => $class->schedule, 'students' => $class->students_count, 'attendance' => $attendance, 'lastSession' => $lastSession ? $this->formatLastSession($lastSession->date) : 'N/A', ]; }); return Inertia::render('Dashboard', [ 'stats' => [ 'totalClasses' => $totalClasses, 'totalStudents' => $totalStudents, 'todayAttendance' => $todayAttendance, 'weeklyAverage' => $weeklyAverage, ], 'attendanceRates' => $attendanceRates, 'recentAttendance' => $recentAttendance, 'classes' => $classes, ]); } /** * Get attendance rates by date. */ private function getAttendanceRatesByDate() { $records = AttendanceRecord::selectRaw('date, status, COUNT(*) as count') ->groupBy('date', 'status') ->get(); $dateMap = []; foreach ($records as $record) { if (!isset($dateMap[$record->date])) { $dateMap[$record->date] = [ 'total' => 0, 'present' => 0, ]; } $dateMap[$record->date]['total'] += $record->count; if ($record->status === 'present') { $dateMap[$record->date]['present'] += $record->count; } } $result = []; foreach ($dateMap as $date => $data) { if ($data['total'] > 0) { $result[$date] = round(($data['present'] / $data['total']) * 100); } } // Ensure we have data for the current month $today = Carbon::today(); $startOfMonth = $today->copy()->startOfMonth(); $endOfMonth = $today->copy()->endOfMonth(); for ($date = $startOfMonth; $date->lte($endOfMonth); $date->addDay()) { $dateStr = $date->format('Y-m-d'); if (!isset($result[$dateStr])) { // Add a placeholder value for dates without data $result[$dateStr] = null; } } return $result; } /** * Format the last session date. */ private function formatLastSession($date) { $date = Carbon::parse($date); $today = Carbon::today(); if ($date->isSameDay($today)) { return 'Today'; } elseif ($date->isSameDay($today->copy()->subDay())) { return 'Yesterday'; } else { $diff = $today->diffInDays($date); return $diff . ' days ago'; } } } [V0_FILE]typescriptreact:file="resources/js/Components/ui/calendar.tsx" isQuickEdit="true" "use client" import type * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" import { buttonVariants } from "@/Components/ui/button" export type CalendarProps = React.ComponentProps function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( , IconRight: ({ ...props }) => , }} {...props} /> ) } Calendar.displayName = "Calendar" export { Calendar } [V0_FILE]typescriptreact:file="resources/js/Pages/Dashboard.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { Head } from "@inertiajs/react" import { CalendarDays, Users, BookOpen, BarChart3 } from "lucide-react" import { Button } from "@/Components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/Components/ui/card" import AttendanceCalendar from "@/Components/AttendanceCalendar" import RecentAttendance from "@/Components/RecentAttendance" import ClassesOverview from "@/Components/ClassesOverview" import AppLayout from "@/Layouts/AppLayout" interface DashboardProps { stats: { totalClasses: number totalStudents: number todayAttendance: number weeklyAverage: number } attendanceRates: Record recentAttendance: any[] classes: any[] } export default function Dashboard({ stats, attendanceRates, recentAttendance, classes }: DashboardProps) { // Ensure attendanceRates is an object, not null or undefined const safeAttendanceRates = attendanceRates || {} return (

Total Classes

{stats.totalClasses}

Active classes this semester

Total Students

{stats.totalStudents}

Enrolled across all classes

Today's Attendance

{stats.todayAttendance}%

Average across all classes

Weekly Average

{stats.weeklyAverage}%

Attendance rate this week

Attendance Calendar Track attendance across all classes by date Recent Attendance Latest attendance records across classes

Classes Overview Manage your classes and take attendance

) }