[V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Home() { return (

Student Attendance System

For Students Mark your attendance easily with your roll number and department

Students can login with their credentials to mark their daily attendance.

Simple attendance marking with just roll number and department
View your attendance history
Secure login with email and roll number

For Administrators Manage and monitor student attendance records

Administrators can view and export attendance records for all students.

View daily attendance reports
Export attendance data as downloadable files
Manage student records
Secure admin dashboard

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { z } from "zod" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { registerUser } from "@/app/actions/auth-actions" import { useToast } from "@/hooks/use-toast" // Form validation schema const registerSchema = z.object({ name: z.string().min(2, "Name must be at least 2 characters"), email: z.string().email("Please enter a valid email"), rollNumber: z.string().length(11, "Roll number must be 11 digits"), phone: z.string().min(10, "Phone number must be at least 10 digits"), department: z.string().min(2, "Department is required"), password: z.string().min(6, "Password must be at least 6 characters"), }) export default function RegisterPage() { const router = useRouter() const { toast } = useToast() const [formErrors, setFormErrors] = useState>({}) const [isLoading, setIsLoading] = useState(false) async function handleSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) setFormErrors({}) const formData = new FormData(event.currentTarget) const formValues = { name: formData.get("name") as string, email: formData.get("email") as string, rollNumber: formData.get("rollNumber") as string, phone: formData.get("phone") as string, department: formData.get("department") as string, password: formData.get("password") as string, } try { // Validate form data registerSchema.parse(formValues) // Call server action to register user const result = await registerUser(formValues) if (result.success) { toast({ title: "Registration successful", description: "You can now login with your credentials", }) router.push("/login") } else { toast({ title: "Registration failed", description: result.error, variant: "destructive", }) } } catch (error) { if (error instanceof z.ZodError) { const errors: Record = {} error.errors.forEach((err) => { if (err.path[0]) { errors[err.path[0] as string] = err.message } }) setFormErrors(errors) } else { toast({ title: "Registration failed", description: "An unexpected error occurred", variant: "destructive", }) } } finally { setIsLoading(false) } } return (

Create an account Enter your details to register as a student

Full Name {formErrors.name &&

{formErrors.name}

}

Email {formErrors.email &&

{formErrors.email}

}

Roll Number (11 digits) {formErrors.rollNumber &&

{formErrors.rollNumber}

}

Phone Number {formErrors.phone &&

{formErrors.phone}

}

Department {formErrors.department &&

{formErrors.department}

}

Password {formErrors.password &&

{formErrors.password}

}

Already have an account?{" "} Login

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" "use client" import type React from "react" import { useState } from "react" import Link from "next/link" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { loginUser } from "@/app/actions/auth-actions" import { useToast } from "@/hooks/use-toast" export default function LoginPage() { const router = useRouter() const searchParams = useSearchParams() const isAdmin = searchParams.get("role") === "admin" const { toast } = useToast() const [isLoading, setIsLoading] = useState(false) async function handleSubmit(event: React.FormEvent) { event.preventDefault() setIsLoading(true) const formData = new FormData(event.currentTarget) const email = formData.get("email") as string const password = formData.get("password") as string const isAdminLogin = isAdmin try { const result = await loginUser({ email, password, isAdmin: isAdminLogin }) if (result.success) { toast({ title: "Login successful", description: "Redirecting to dashboard", }) // Redirect based on user role if (isAdminLogin) { router.push("/admin/dashboard") } else { router.push("/student/dashboard") } } else { toast({ title: "Login failed", description: result.error || "Invalid credentials", variant: "destructive", }) } } catch (error) { toast({ title: "Login failed", description: "An unexpected error occurred", variant: "destructive", }) } finally { setIsLoading(false) } } return (

{isAdmin ? "Admin Login" : "Student Login"} Enter your credentials to access your account

{isAdmin ? ( Login as Student ) : ( <> Don't have an account?{" "} Register )}

) } [V0_FILE]typescriptreact:file="app/login/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/student/dashboard/page.tsx" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { markAttendance, getStudentAttendanceHistory } from "@/app/actions/attendance-actions" import { useToast } from "@/hooks/use-toast" import type { AttendanceRecord } from "@/app/types" import { getUserProfile, logout } from "@/app/actions/auth-actions" import { useRouter } from "next/navigation" export default function StudentDashboard() { const { toast } = useToast() const router = useRouter() const [department, setDepartment] = useState("") const [isLoading, setIsLoading] = useState(false) const [attendanceHistory, setAttendanceHistory] = useState([]) const [userProfile, setUserProfile] = useState<{ name: string; rollNumber: string; department: string } | null>(null) const [isSubmitting, setIsSubmitting] = useState(false) useEffect(() => { async function loadUserData() { try { const profile = await getUserProfile() if (!profile.success) { toast({ title: "Authentication Error", description: "Please login to continue", variant: "destructive", }) router.push("/login") return } setUserProfile(profile.data) setDepartment(profile.data.department) // Load attendance history const history = await getStudentAttendanceHistory() if (history.success) { setAttendanceHistory(history.data) } } catch (error) { toast({ title: "Error", description: "Failed to load user data", variant: "destructive", }) } finally { setIsLoading(false) } } setIsLoading(true) loadUserData() }, [router, toast]) async function handleMarkAttendance() { if (!userProfile) return setIsSubmitting(true) try { const result = await markAttendance({ rollNumber: userProfile.rollNumber, department, }) if (result.success) { toast({ title: "Success", description: "Your attendance has been recorded", }) // Refresh attendance history const history = await getStudentAttendanceHistory() if (history.success) { setAttendanceHistory(history.data) } } else { toast({ title: "Error", description: result.error || "Failed to mark attendance", variant: "destructive", }) } } catch (error) { toast({ title: "Error", description: "An unexpected error occurred", variant: "destructive", }) } finally { setIsSubmitting(false) } } async function handleLogout() { await logout() router.push("/login") } if (isLoading) { return (

) } return (

Student Dashboard

{userProfile &&

Welcome, {userProfile.name}

}

Mark Attendance Record your attendance for today

Roll Number

{userProfile?.rollNumber}

Department

Attendance History Your recent attendance records {attendanceHistory.length > 0 ? (

{attendanceHistory.map((record, index) => ( ))}

Date	Department	Status
{new Date(record.date).toLocaleDateString()}	{record.department}	Present

) : (

No attendance records found

)}

) } [V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" 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 { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { format } from "date-fns" import { CalendarIcon, Download, Search } from "lucide-react" import { getAllAttendanceRecords, exportAttendanceData } from "@/app/actions/attendance-actions" import { getUserProfile, logout } from "@/app/actions/auth-actions" import { useToast } from "@/hooks/use-toast" import type { AttendanceRecord } from "@/app/types" export default function AdminDashboard() { const router = useRouter() const { toast } = useToast() const [isLoading, setIsLoading] = useState(true) const [attendanceRecords, setAttendanceRecords] = useState([]) const [filteredRecords, setFilteredRecords] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [selectedDate, setSelectedDate] = useState(new Date()) const [selectedDepartment, setSelectedDepartment] = useState("all") const [isExporting, setIsExporting] = useState(false) useEffect(() => { async function checkAdminAuth() { try { const profile = await getUserProfile() if (!profile.success || !profile.data.isAdmin) { toast({ title: "Access Denied", description: "You must be an admin to access this page", variant: "destructive", }) router.push("/login?role=admin") return } // Load attendance records const records = await getAllAttendanceRecords() if (records.success) { setAttendanceRecords(records.data) setFilteredRecords(records.data) } } catch (error) { toast({ title: "Error", description: "Failed to load admin data", variant: "destructive", }) } finally { setIsLoading(false) } } checkAdminAuth() }, [router, toast]) useEffect(() => { // Filter records based on search, date, and department let filtered = [...attendanceRecords] if (searchQuery) { filtered = filtered.filter( (record) => record.rollNumber.includes(searchQuery) || record.studentName.toLowerCase().includes(searchQuery.toLowerCase()), ) } if (selectedDate) { const dateString = format(selectedDate, "yyyy-MM-dd") filtered = filtered.filter((record) => record.date.startsWith(dateString)) } if (selectedDepartment !== "all") { filtered = filtered.filter((record) => record.department === selectedDepartment) } setFilteredRecords(filtered) }, [searchQuery, selectedDate, selectedDepartment, attendanceRecords]) async function handleExportData() { setIsExporting(true) try { const result = await exportAttendanceData({ date: selectedDate ? format(selectedDate, "yyyy-MM-dd") : undefined, department: selectedDepartment !== "all" ? selectedDepartment : undefined, }) if (result.success) { toast({ title: "Export Successful", description: "Attendance data has been exported", }) // In a real app, this would trigger a file download // For this demo, we'll just show a success message } else { toast({ title: "Export Failed", description: result.error || "Failed to export attendance data", variant: "destructive", }) } } catch (error) { toast({ title: "Export Failed", description: "An unexpected error occurred", variant: "destructive", }) } finally { setIsExporting(false) } } async function handleLogout() { await logout() router.push("/login?role=admin") } if (isLoading) { return (

) } return (

Admin Dashboard

Attendance Records Export Data Attendance Records View and filter student attendance records

setSearchQuery(e.target.value)} />

Date

Department

{filteredRecords.length > 0 ? ( filteredRecords.map((record, index) => ( )) ) : ( )}

Date	Roll Number	Name	Department	Status
{new Date(record.date).toLocaleDateString()}	{record.rollNumber}	{record.studentName}	{record.department}	Present
No records found

Export Attendance Data Download attendance records as files

Select Date

Department

Export Information

Exports are generated as CSV files
Files are secured with encryption
Data includes student details and attendance status
You can filter by date and department before exporting

) } [V0_FILE]typescriptreact:file="app/admin/dashboard/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/actions/auth-actions.ts" "use server" import { cookies } from "next/headers" import { redirect } from "next/navigation" // In a real app, this would be stored in a database const users: any[] = [ { id: 1, name: "Admin User", email: "admin@example.com", password: "admin123", // In a real app, this would be hashed isAdmin: true, }, ] // Register user export async function registerUser(userData: { name: string email: string rollNumber: string phone: string department: string password: string }) { try { // Check if user already exists const existingUser = users.find((user) => user.email === userData.email || user.rollNumber === userData.rollNumber) if (existingUser) { return { success: false, error: "User with this email or roll number already exists", } } // In a real app, you would hash the password before storing it const newUser = { id: users.length + 1, ...userData, isAdmin: false, } // Add user to our "database" users.push(newUser) return { success: true, } } catch (error) { console.error("Registration error:", error) return { success: false, error: "Failed to register user", } } } // Login user export async function loginUser({ email, password, isAdmin = false, }: { email: string password: string isAdmin?: boolean }) { try { // Find user const user = users.find((u) => u.email === email && u.password === password) if (!user) { return { success: false, error: "Invalid credentials", } } // Check if admin login but user is not admin if (isAdmin && !user.isAdmin) { return { success: false, error: "You do not have admin privileges", } } // Create session const session = { userId: user.id, name: user.name, email: user.email, rollNumber: user.rollNumber, department: user.department, isAdmin: user.isAdmin, expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 1 week } // In a real app, you would encrypt this session data const sessionStr = JSON.stringify(session) // Set cookie cookies().set("session", sessionStr, { httpOnly: true, secure: process.env.NODE_ENV === "production", maxAge: 60 * 60 * 24 * 7, // 1 week path: "/", }) return { success: true, } } catch (error) { console.error("Login error:", error) return { success: false, error: "Failed to login", } } } // Get user profile from session export async function getUserProfile() { try { const sessionCookie = cookies().get("session") if (!sessionCookie) { return { success: false, error: "Not authenticated", } } // In a real app, you would decrypt the session data const session = JSON.parse(sessionCookie.value) // Check if session is expired if (new Date(session.expiresAt) < new Date()) { cookies().delete("session") return { success: false, error: "Session expired", } } return { success: true, data: { name: session.name, email: session.email, rollNumber: session.rollNumber, department: session.department, isAdmin: session.isAdmin, }, } } catch (error) { console.error("Get user profile error:", error) return { success: false, error: "Failed to get user profile", } } } // Logout user export async function logout() { cookies().delete("session") } // Middleware to check if user is authenticated export async function requireAuth() { const profile = await getUserProfile() if (!profile.success) { redirect("/login") } return profile.data } // Middleware to check if user is admin export async function requireAdmin() { const profile = await getUserProfile() if (!profile.success || !profile.data.isAdmin) { redirect("/login?role=admin") } return profile.data } [V0_FILE]typescriptreact:file="app/actions/attendance-actions.ts" "use server" import { getUserProfile } from "./auth-actions" import type { AttendanceRecord } from "@/app/types" // In a real app, this would be stored in a database const attendanceRecords: AttendanceRecord[] = [ { id: 1, studentName: "John Doe", rollNumber: "12345678901", department: "Computer Science", date: "2025-03-11T08:00:00.000Z", status: "present", }, { id: 2, studentName: "Jane Smith", rollNumber: "23456789012", department: "Electrical Engineering", date: "2025-03-11T08:00:00.000Z", status: "present", }, ] // Mark attendance export async function markAttendance({ rollNumber, department, }: { rollNumber: string department: string }) { try { // Get user profile from session const profile = await getUserProfile() if (!profile.success) { return { success: false, error: "Not authenticated", } } // Check if attendance already marked for today const today = new Date().toISOString().split("T")[0] const alreadyMarked = attendanceRecords.some( (record) => record.rollNumber === rollNumber && record.date.startsWith(today), ) if (alreadyMarked) { return { success: false, error: "Attendance already marked for today", } } // Create new attendance record const newRecord: AttendanceRecord = { id: attendanceRecords.length + 1, studentName: profile.data.name, rollNumber, department, date: new Date().toISOString(), status: "present", } // Add to records attendanceRecords.push(newRecord) return { success: true, } } catch (error) { console.error("Mark attendance error:", error) return { success: false, error: "Failed to mark attendance", } } } // Get student attendance history export async function getStudentAttendanceHistory() { try { // Get user profile from session const profile = await getUserProfile() if (!profile.success) { return { success: false, error: "Not authenticated", } } // Filter records for this student const records = attendanceRecords.filter((record) => record.rollNumber === profile.data.rollNumber) // Sort by date (newest first) records.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) return { success: true, data: records, } } catch (error) { console.error("Get attendance history error:", error) return { success: false, error: "Failed to get attendance history", } } } // Get all attendance records (admin only) export async function getAllAttendanceRecords() { try { // Get user profile from session const profile = await getUserProfile() if (!profile.success || !profile.data.isAdmin) { return { success: false, error: "Not authorized", } } // Sort by date (newest first) const sortedRecords = [...attendanceRecords].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) return { success: true, data: sortedRecords, } } catch (error) { console.error("Get all attendance records error:", error) return { success: false, error: "Failed to get attendance records", } } } // Export attendance data (admin only) export async function exportAttendanceData({ date, department, }: { date?: string department?: string }) { try { // Get user profile from session const profile = await getUserProfile() if (!profile.success || !profile.data.isAdmin) { return { success: false, error: "Not authorized", } } // Filter records based on date and department let filteredRecords = [...attendanceRecords] if (date) { filteredRecords = filteredRecords.filter((record) => record.date.startsWith(date)) } if (department) { filteredRecords = filteredRecords.filter((record) => record.department === department) } // In a real app, this would generate a CSV file and return a download URL // For this demo, we'll just return success return { success: true, message: `Exported ${filteredRecords.length} records`, } } catch (error) { console.error("Export attendance data error:", error) return { success: false, error: "Failed to export attendance data", } } } [V0_FILE]typescriptreact:file="app/types.ts" export interface AttendanceRecord { id: number studentName: string rollNumber: string department: string date: string status: "present" | "absent" | "late" } export interface User { id: number name: string email: string rollNumber: string phone: string department: string isAdmin: boolean } [V0_FILE]typescriptreact:file="middleware.ts" import { NextResponse } from "next/server" import type { NextRequest } from "next/server" export function middleware(request: NextRequest) { const path = request.nextUrl.pathname // Define public paths that don't require authentication const isPublicPath = path === "/" || path === "/login" || path === "/register" // Get the session cookie const sessionCookie = request.cookies.get("session")?.value // If the path is not public and there's no session, redirect to login if (!isPublicPath && !sessionCookie) { return NextResponse.redirect(new URL("/login", request.url)) } // If the path is for admin and the user is not an admin, redirect to login if (path.startsWith("/admin") && sessionCookie) { try { const session = JSON.parse(sessionCookie) if (!session.isAdmin) { return NextResponse.redirect(new URL("/login?role=admin", request.url)) } } catch (error) { return NextResponse.redirect(new URL("/login?role=admin", request.url)) } } // If the user is logged in and tries to access login/register, redirect to dashboard if (isPublicPath && sessionCookie && path !== "/") { try { const session = JSON.parse(sessionCookie) const redirectPath = session.isAdmin ? "/admin/dashboard" : "/student/dashboard" return NextResponse.redirect(new URL(redirectPath, request.url)) } catch (error) { // If there's an error parsing the session, continue to the login page } } return NextResponse.next() } // Configure the middleware to run on specific paths export const config = { matcher: [ /* * Match all request paths except: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - public files (public directory) */ "/((?!_next/static|_next/image|favicon.ico|.*\\.png$).*)", ], }

About

About