[V0_FILE]typescript:file="scripts/setup-database.sql" isMerged="true" -- Create students table CREATE TABLE IF NOT EXISTS students ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL, email VARCHAR(255) UNIQUE NOT NULL, mobile VARCHAR(20) NOT NULL, roll_number VARCHAR(50) UNIQUE NOT NULL, branch VARCHAR(100) NOT NULL, year_of_passout INTEGER NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- Create fees table (4 years of fees) CREATE TABLE IF NOT EXISTS fees ( id SERIAL PRIMARY KEY, student_id INTEGER NOT NULL, year INTEGER NOT NULL CHECK (year BETWEEN 1 AND 4), amount DECIMAL(10, 2) NOT NULL, paid_amount DECIMAL(10, 2) DEFAULT 0, status VARCHAR(50) DEFAULT 'pending', payment_date TIMESTAMP, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (student_id) REFERENCES students(id) ON DELETE CASCADE, UNIQUE(student_id, year) ); -- Create indexes for better query performance CREATE INDEX IF NOT EXISTS idx_fees_student_id ON fees(student_id); CREATE INDEX IF NOT EXISTS idx_fees_status ON fees(status); CREATE INDEX IF NOT EXISTS idx_students_roll_number ON students(roll_number); -- Sample data INSERT INTO students (name, email, mobile, roll_number, branch, year_of_passout) VALUES ('Raj Kumar', 'raj.kumar@college.edu', '9876543210', 'CSE001', 'Computer Science', 2025), ('Priya Singh', 'priya.singh@college.edu', '9876543211', 'ECE001', 'Electronics', 2025), ('Amit Patel', 'amit.patel@college.edu', '9876543212', 'ME001', 'Mechanical', 2025) ON CONFLICT DO NOTHING; -- Add sample fees for students INSERT INTO fees (student_id, year, amount, paid_amount, status, payment_date) SELECT id, 1, 50000, 50000, 'paid', CURRENT_TIMESTAMP FROM students LIMIT 3 ON CONFLICT DO NOTHING; INSERT INTO fees (student_id, year, amount, paid_amount, status) SELECT id, 2, 50000, 25000, 'partial' FROM students LIMIT 3 ON CONFLICT DO NOTHING; INSERT INTO fees (student_id, year, amount, paid_amount, status) SELECT id, 3, 50000, 0, 'pending' FROM students LIMIT 3 ON CONFLICT DO NOTHING; INSERT INTO fees (student_id, year, amount, paid_amount, status) SELECT id, 4, 50000, 0, 'pending' FROM students LIMIT 3 ON CONFLICT DO NOTHING; [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" export default function Home() { redirect("/dashboard") } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { BarChart, Bar, PieChart, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import Link from "next/link" import { Button } from "@/components/ui/button" export default function DashboardPage() { const [stats, setStats] = useState({ totalStudents: 0, totalCollected: 0, totalPending: 0, paymentRate: 0, }) const [feeStatusData, setFeeStatusData] = useState([]) const [yearlyData, setYearlyData] = useState([]) useEffect(() => { fetchDashboardData() }, []) const fetchDashboardData = async () => { try { const response = await fetch("/api/dashboard/stats") const data = await response.json() setStats(data.stats) setFeeStatusData(data.feeStatusData) setYearlyData(data.yearlyData) } catch (error) { console.error("Failed to fetch dashboard data:", error) } } const COLORS = ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))"] return (

{/* Header */}

Fee Dashboard

Student fee payment tracking and analytics

{/* Stats Cards */}

Total Students

{stats.totalStudents}

Active students

Total Collected

₹{(stats.totalCollected / 100000).toFixed(1)}L

Fees collected

Pending Amount

₹{(stats.totalPending / 100000).toFixed(1)}L

Outstanding fees

Payment Rate

{stats.paymentRate.toFixed(1)}%

Collection rate

{/* Charts */}

{/* Fee Status Pie Chart */} Fee Status Overview Distribution of payment statuses `${name}: ${value}`} outerRadius={80} fill="#8884d8" dataKey="value" > {feeStatusData.map((entry, index) => ( ))} {/* Yearly Collection Chart */} Collection by Year Fee collection across academic years } />

) } [V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isMerged="true" import type React from "react" import { Sidebar } from "@/components/sidebar" export default function DashboardLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/students/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { StudentTable } from "@/components/student-table" import { SearchIcon, Upload, Download } from "lucide-react" export default function StudentsPage() { const [students, setStudents] = useState([]) const [filteredStudents, setFilteredStudents] = useState([]) const [searchTerm, setSearchTerm] = useState("") const [branchFilter, setBranchFilter] = useState("") const [yearFilter, setYearFilter] = useState("") const [feeStatusFilter, setFeeStatusFilter] = useState("") const [loading, setLoading] = useState(true) const [uploadLoading, setUploadLoading] = useState(false) const branches = [...new Set(students.map((s) => s.branch))].sort() const years = [...new Set(students.map((s) => s.year_of_passout))].sort().reverse() useEffect(() => { fetchStudents() }, []) useEffect(() => { let filtered = students if (searchTerm) { filtered = filtered.filter( (student) => student.name.toLowerCase().includes(searchTerm.toLowerCase()) || student.email.toLowerCase().includes(searchTerm.toLowerCase()) || student.roll_number.toLowerCase().includes(searchTerm.toLowerCase()) || student.mobile.includes(searchTerm), ) } if (branchFilter) { filtered = filtered.filter((s) => s.branch === branchFilter) } if (yearFilter) { filtered = filtered.filter((s) => s.year_of_passout.toString() === yearFilter) } if (feeStatusFilter) { filtered = filtered.filter((s) => { const statuses = [s.year_1_fee_status, s.year_2_fee_status, s.year_3_fee_status, s.year_4_fee_status] if (feeStatusFilter === "Paid") return statuses.every((status) => status === "Paid") if (feeStatusFilter === "Pending") return statuses.some((status) => status === "Pending") if (feeStatusFilter === "Partial") return statuses.some((status) => status === "Partial") return true }) } setFilteredStudents(filtered) }, [searchTerm, branchFilter, yearFilter, feeStatusFilter, students]) const fetchStudents = async () => { try { const response = await fetch("/api/students") const data = await response.json() setStudents(data) } catch (error) { console.error("Failed to fetch students:", error) } finally { setLoading(false) } } const downloadAllStudents = () => { const csv = [ [ "Name", "Roll Number", "Email", "Mobile", "Branch", "Year", "Fee Year 1", "Fee Year 2", "Fee Year 3", "Fee Year 4", ].join(","), ...filteredStudents.map((s) => [ s.name, s.roll_number, s.email, s.mobile, s.branch, s.year_of_passout, s.year_1_fee_status || "Pending", s.year_2_fee_status || "Pending", s.year_3_fee_status || "Pending", s.year_4_fee_status || "Pending", ] .map((v) => `"${v}"`) .join(","), ), ].join("\n") const blob = new Blob([csv], { type: "text/csv" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `all-students-${new Date().toISOString().split("T")[0]}.csv` a.click() } const handleFileUpload = async (e) => { const file = e.target.files?.[0] if (!file) return setUploadLoading(true) try { const text = await file.text() const lines = text.trim().split("\n") const headers = lines[0].split(",").map((h) => h.trim().toLowerCase()) const students = lines .slice(1) .map((line) => { const values = line.split(",").map((v) => v.trim().replace(/^"(.*)"$/, "$1")) return { name: values[headers.indexOf("name")] || "", email: values[headers.indexOf("email")] || "", mobile: values[headers.indexOf("mobile")] || "", roll_number: values[headers.indexOf("roll number")] || values[headers.indexOf("roll_number")] || "", branch: values[headers.indexOf("branch")] || "", year_of_passout: Number.parseInt( values[headers.indexOf("year")] || values[headers.indexOf("year_of_passout")] || new Date().getFullYear(), ), } }) .filter((s) => s.name && s.email && s.mobile && s.roll_number) if (students.length === 0) { alert("No valid student records found in the file") return } for (const student of students) { await fetch("/api/students", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(student), }) } alert(`Successfully imported ${students.length} students`) fetchStudents() } catch (error) { console.error("Upload failed:", error) alert("Failed to upload file") } finally { setUploadLoading(false) e.target.value = "" } } return (

Students

Manage student records and fee payments

{/* Filters */} Filters

setSearchTerm(e.target.value)} className="flex-1 py-2 bg-transparent text-foreground outline-none placeholder:text-muted-foreground" />

Branch

Year

Fee Status

{/* Student Records */}

Student Records ({filteredStudents.length})

) } [V0_FILE]typescriptreact:file="app/students/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/students/[id]/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { useParams, useRouter } from "next/navigation" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { StudentFeeTable } from "@/components/student-fee-table" import { PaymentForm } from "@/components/payment-form" import Link from "next/link" import { ChevronLeft } from "lucide-react" export default function StudentDetailPage() { const params = useParams() const router = useRouter() const [student, setStudent] = useState(null) const [fees, setFees] = useState([]) const [loading, setLoading] = useState(true) useEffect(() => { fetchStudentDetails() }, [params.id]) const fetchStudentDetails = async () => { try { const [studentRes, feesRes] = await Promise.all([ fetch(`/api/students/${params.id}`), fetch(`/api/fees/${params.id}`), ]) const studentData = await studentRes.json() const feesData = await feesRes.json() setStudent(studentData) setFees(feesData) } catch (error) { console.error("Failed to fetch student details:", error) } finally { setLoading(false) } } const handlePaymentUpdate = async () => { await fetchStudentDetails() } if (loading) { return (

) } if (!student) { return (

Student not found

) } return (

Back to Students {/* Student Info */} {student.name}

Roll Number

{student.roll_number}

Branch

{student.branch}

{student.email}

Mobile

{student.mobile}

Year of Passout

{student.year_of_passout}

{student.section && (

Section

{student.section}

)}

{/* Fee Details */} Fee Details {/* Payment Form */}

) } [V0_FILE]typescriptreact:file="app/students/new/page.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { StudentForm } from "@/components/student-form" import Link from "next/link" import { ChevronLeft } from "lucide-react" export default function NewStudentPage() { const router = useRouter() const handleSuccess = () => { router.push("/students") } return (

Back to Students

Add New Student

Create a new student record

) } [V0_FILE]typescriptreact:file="components/sidebar.tsx" isMerged="true" "use client" import Link from "next/link" import { usePathname } from "next/navigation" import { cn } from "@/lib/utils" import { LayoutDashboard, Users, BarChart3 } from "lucide-react" export function Sidebar() { const pathname = usePathname() const navItems = [ { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard }, { href: "/students", label: "Students", icon: Users }, { href: "/reports", label: "Reports", icon: BarChart3 }, ] return ( ) } [V0_FILE]typescript:file="app/api/students/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { getAllStudents, createStudent, initializeDefaultData } from "@/lib/excel-storage" export async function GET() { await initializeDefaultData() const students = await getAllStudents() return NextResponse.json(students) } export async function POST(request: Request) { const body = await request.json() const newStudent = await createStudent({ name: body.name, email: body.email, mobile: body.mobile, roll_number: body.roll_number, branch: body.branch, section: body.section || "", year_of_passout: body.year_of_passout, year_1_fee_status: body.year_1_fee_status || "Pending", year_2_fee_status: body.year_2_fee_status || "Pending", year_3_fee_status: body.year_3_fee_status || "Pending", year_4_fee_status: body.year_4_fee_status || "Pending", year_1_receipt: body.year_1_receipt || "", year_2_receipt: body.year_2_receipt || "", year_3_receipt: body.year_3_receipt || "", year_4_receipt: body.year_4_receipt || "", }) return NextResponse.json(newStudent, { status: 201 }) } [V0_FILE]typescript:file="app/api/dashboard/stats/route.ts" isMerged="true" import { NextResponse } from "next/server" export async function GET() { // Mock data - replace with actual database queries const stats = { totalStudents: 2, totalCollected: 2250000, totalPending: 5750000, paymentRate: 28.1, } const feeStatusData = [ { name: "Paid", value: 4 }, { name: "Partial", value: 2 }, { name: "Pending", value: 6 }, ] const yearlyData = [ { year: "1st", collected: 100000, pending: 0 }, { year: "2nd", collected: 25000, pending: 75000 }, { year: "3rd", collected: 0, pending: 100000 }, { year: "4th", collected: 0, pending: 100000 }, ] return NextResponse.json({ stats, feeStatusData, yearlyData, }) } [V0_FILE]typescriptreact:file="app/reports/page.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { DownloadCloud } from "lucide-react" export default function ReportsPage() { return (

Reports

Generate and download fee collection reports

Fee Collection Report

Download a comprehensive report of all fee collections across students and years.

Pending Fees Report

Generate a report of all pending and partial fee payments.

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "xlsx": "0.18.5" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/students/[id]/edit/page.tsx" isMerged="true" "use client" import { useRouter, useParams } from "next/navigation" import { StudentForm } from "@/components/student-form" import Link from "next/link" import { ChevronLeft } from "lucide-react" import { useState, useEffect } from "react" export default function EditStudentPage() { const router = useRouter() const params = useParams() const [student, setStudent] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { const fetchStudent = async () => { try { const response = await fetch(`/api/students/${params.id}`) const data = await response.json() setStudent(data) } catch (error) { console.error("Failed to fetch student:", error) } finally { setLoading(false) } } fetchStudent() }, [params.id]) const handleSuccess = () => { router.push("/students") } if (loading) { return (

) } if (!student) { return (

Student not found

) } return (

Back to Students

Edit Student

Update student record

) } [V0_FILE]typescript:file="app/api/fees/[id]/payment/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { getAllFees, updateStudent, getStudentById, initializeDefaultData } from "@/lib/excel-storage" import XLSX from "xlsx" import fs from "fs" import path from "path" export async function POST(request: Request, { params }: { params: { id: string } }) { await initializeDefaultData() const { id } = params const { year, amount, receipt_number, payment_status } = await request.json() const allFees = await getAllFees() const fee = allFees.find((f) => f.student_id === Number.parseInt(id) && f.year === year) if (!fee) { return NextResponse.json({ error: "Fee record not found" }, { status: 404 }) } fee.paid_amount += amount fee.status = payment_status || (fee.paid_amount >= fee.amount ? "Paid" : fee.paid_amount > 0 ? "Partial" : "Pending") fee.receipt_number = receipt_number || fee.receipt_number const worksheet = XLSX.utils.json_to_sheet(allFees) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, "Fees") const buffer = XLSX.write(workbook, { type: "buffer", bookType: "xlsx" }) await fs.promises.writeFile(path.join(process.cwd(), "data", "fees.xlsx"), buffer) const student = await getStudentById(Number.parseInt(id)) if (student) { const statusKey = `year_${year}_fee_status` const receiptKey = `year_${year}_receipt` await updateStudent(Number.parseInt(id), { [statusKey]: fee.status, [receiptKey]: fee.receipt_number, }) } return NextResponse.json(fee) } [V0_FILE]typescript:file="app/api/students/[id]/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { getStudentById, updateStudent, deleteStudent } from "@/lib/excel-storage" export async function GET(request: Request, { params }: { params: { id: string } }) { const { id } = params const student = await getStudentById(Number.parseInt(id)) if (!student) { return NextResponse.json({ error: "Student not found" }, { status: 404 }) } return NextResponse.json(student) } export async function PUT(request: Request, { params }: { params: { id: string } }) { const { id } = params const body = await request.json() const updatedStudent = await updateStudent(Number.parseInt(id), body) if (!updatedStudent) { return NextResponse.json({ error: "Student not found" }, { status: 404 }) } return NextResponse.json(updatedStudent) } export async function DELETE(request: Request, { params }: { params: { id: string } }) { const { id } = params const deletedStudent = await deleteStudent(Number.parseInt(id)) if (!deletedStudent) { return NextResponse.json({ error: "Student not found" }, { status: 404 }) } return NextResponse.json({ message: "Student deleted successfully", student: deletedStudent }) } [V0_FILE]typescriptreact:file="components/student-form.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function StudentForm({ onSuccess, initialData = null, studentId = null, isEditing = false }) { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [formData, setFormData] = useState({ name: "", email: "", mobile: "", roll_number: "", branch: "", section: "", // Added section field year_of_passout: new Date().getFullYear(), }) useEffect(() => { if (initialData) { setFormData({ name: initialData.name || "", email: initialData.email || "", mobile: initialData.mobile || "", roll_number: initialData.roll_number || "", branch: initialData.branch || "", section: initialData.section || "", // Added section field year_of_passout: initialData.year_of_passout || new Date().getFullYear(), }) } }, [initialData]) const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: name === "year_of_passout" ? Number.parseInt(value) : value, })) } const handleSubmit = async (e) => { e.preventDefault() setLoading(true) setError(null) try { const url = isEditing ? `/api/students/${studentId}` : "/api/students" const method = isEditing ? "PUT" : "POST" const response = await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(formData), }) if (!response.ok) { throw new Error(isEditing ? "Failed to update student" : "Failed to add student") } onSuccess() } catch (err) { setError(err.message) } finally { setLoading(false) } } return ( Student Information ) } [V0_FILE]typescriptreact:file="components/student-table.tsx" isEdit="true" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { Edit, Trash2, Download } from "lucide-react" import { useState } from "react" export function StudentTable({ students, loading, onDelete, onRefresh }) { const [selectedStudents, setSelectedStudents] = useState(new Set()) const [deleteConfirm, setDeleteConfirm] = useState(null) if (loading) { return

} if (students.length === 0) { return

No students found

} const handleDelete = async (id) => { try { const response = await fetch(`/api/students/${id}`, { method: "DELETE" }) if (response.ok) { setDeleteConfirm(null) onRefresh() } } catch (error) { console.error("Failed to delete student:", error) } } const handleSelectAll = (e) => { if (e.target.checked) { setSelectedStudents(new Set(students.map((s) => s.id))) } else { setSelectedStudents(new Set()) } } const handleSelectStudent = (id) => { const newSelected = new Set(selectedStudents) if (newSelected.has(id)) { newSelected.delete(id) } else { newSelected.add(id) } setSelectedStudents(newSelected) } const downloadSelectedStudents = () => { const selectedData = students.filter((s) => selectedStudents.has(s.id)) const csv = [ [ "Name", "Roll Number", "Email", "Mobile", "Branch", "Section", "Year", "Fee Year 1", "Receipt 1", "Fee Year 2", "Receipt 2", "Fee Year 3", "Receipt 3", "Fee Year 4", "Receipt 4", ].join(","), ...selectedData.map((s) => [ s.name, s.roll_number, s.email, s.mobile, s.branch, s.section || "", s.year_of_passout, s.year_1_fee_status || "Pending", s.year_1_receipt || "", s.year_2_fee_status || "Pending", s.year_2_receipt || "", s.year_3_fee_status || "Pending", s.year_3_receipt || "", s.year_4_fee_status || "Pending", s.year_4_receipt || "", ] .map((v) => `"${v}"`) .join(","), ), ].join("\n") const blob = new Blob([csv], { type: "text/csv" }) const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `students-${new Date().toISOString().split("T")[0]}.csv` a.click() } return (

{selectedStudents.size > 0 && (

{selectedStudents.size} selected

)}

{students.map((student) => ( ))}

0} onChange={handleSelectAll} className="w-4 h-4" />	Name	Roll Number	Email	Mobile	Branch	Section	Year	Actions
handleSelectStudent(student.id)} className="w-4 h-4" />	{student.name}	{student.roll_number}	{student.email}	{student.mobile}	{student.branch}	{student.section \|\| "-"}	{student.year_of_passout}

{/* Delete Confirmation Modal */} {deleteConfirm && (

Delete Student?

This action cannot be undone. All student records and fee data will be permanently deleted.

)}

) } [V0_FILE]typescriptreact:file="components/payment-form.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export function PaymentForm({ studentId, onPaymentUpdate }) { const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [success, setSuccess] = useState(false) const [formData, setFormData] = useState({ year: "1", amount: "", receipt_number: "", // Added receipt number field payment_status: "Paid", // Added payment status field }) const handleChange = (e) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value, })) } const handleSubmit = async (e) => { e.preventDefault() setLoading(true) setError(null) setSuccess(false) try { const response = await fetch(`/api/fees/${studentId}/payment`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ year: Number.parseInt(formData.year), amount: Number.parseFloat(formData.amount), receipt_number: formData.receipt_number, // Send receipt number payment_status: formData.payment_status, // Send payment status }), }) if (!response.ok) { throw new Error("Failed to record payment") } setSuccess(true) setFormData({ year: "1", amount: "", receipt_number: "", payment_status: "Paid" }) setTimeout(() => { onPaymentUpdate() }, 1000) } catch (err) { setError(err.message) } finally { setLoading(false) } } return ( Record Payment ) } [V0_FILE]typescriptreact:file="components/student-fee-table.tsx" isEdit="true" isMerged="true" "use client" import { Badge } from "@/components/ui/badge" export function StudentFeeTable({ fees, studentData }) { const getStatusColor = (status) => { switch (status?.toLowerCase()) { case "paid": return "bg-green-600 text-white" case "partial": return "bg-yellow-600 text-white" case "pending": return "bg-red-600 text-white" default: return "bg-gray-600 text-white" } } return (

{fees.map((fee) => { const receiptKey = `year_${fee.year}_receipt` const receipt = studentData ? studentData[receiptKey] : "" return ( ) })}

Year	Amount	Paid	Pending	Status	Receipt Number
Year {fee.year}	₹{fee.amount?.toLocaleString()}	₹{fee.paid_amount?.toLocaleString()}	₹{(fee.amount - fee.paid_amount)?.toLocaleString()}	{fee.status \|\| "Pending"}	{receipt \|\| "-"}

) } [V0_FILE]typescript:file="app/api/fees/[id]/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" import { getFeesByStudentId, initializeDefaultData } from "@/lib/excel-storage" export async function GET(request: Request, { params }: { params: { id: string } }) { await initializeDefaultData() const { id } = params const studentFees = await getFeesByStudentId(Number.parseInt(id)) return NextResponse.json(studentFees) } [V0_FILE]typescript:file="lib/excel-storage.ts" isMerged="true" import { promises as fs } from "fs" import path from "path" import * as XLSX from "xlsx" // Define types export interface Student { id: number name: string email: string mobile: string roll_number: string branch: string section: string year_of_passout: number year_1_fee_status: string year_2_fee_status: string year_3_fee_status: string year_4_fee_status: string year_1_receipt: string year_2_receipt: string year_3_receipt: string year_4_receipt: string } export interface Fee { id: number student_id: number year: number amount: number paid_amount: number status: string receipt_number: string } const DATA_DIR = path.join(process.cwd(), "data") const STUDENTS_FILE = path.join(DATA_DIR, "students.xlsx") const FEES_FILE = path.join(DATA_DIR, "fees.xlsx") // Ensure data directory exists async function ensureDataDir() { try { await fs.access(DATA_DIR) } catch { await fs.mkdir(DATA_DIR, { recursive: true }) } } // Get all students from Excel export async function getAllStudents(): Promise { await ensureDataDir() try { const buffer = await fs.readFile(STUDENTS_FILE) const workbook = XLSX.read(buffer, { type: "buffer" }) const sheet = workbook.Sheets[workbook.SheetNames[0]] const data = XLSX.utils.sheet_to_json(sheet) return data || [] } catch { return [] } } // Get student by ID export async function getStudentById(id: number): Promise { const students = await getAllStudents() return students.find((s) => s.id === id) || null } // Create new student export async function createStudent(student: Omit): Promise { await ensureDataDir() const students = await getAllStudents() const newId = students.length > 0 ? Math.max(...students.map((s) => s.id)) + 1 : 1 const newStudent: Student = { ...student, id: newId, } students.push(newStudent) await saveStudents(students) return newStudent } // Update student export async function updateStudent(id: number, updates: Partial): Promise { const students = await getAllStudents() const index = students.findIndex((s) => s.id === id) if (index === -1) return null students[index] = { ...students[index], ...updates, id } await saveStudents(students) return students[index] } // Delete student export async function deleteStudent(id: number): Promise { const students = await getAllStudents() const index = students.findIndex((s) => s.id === id) if (index === -1) return null const [deletedStudent] = students.splice(index, 1) await saveStudents(students) // Also delete associated fees await deleteStudentFees(id) return deletedStudent } // Save students to Excel async function saveStudents(students: Student[]) { await ensureDataDir() const worksheet = XLSX.utils.json_to_sheet(students) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, "Students") await fs.writeFile(STUDENTS_FILE, XLSX.write(workbook, { type: "buffer", bookType: "xlsx" })) } // Get all fees export async function getAllFees(): Promise { await ensureDataDir() try { const buffer = await fs.readFile(FEES_FILE) const workbook = XLSX.read(buffer, { type: "buffer" }) const sheet = workbook.Sheets[workbook.SheetNames[0]] const data = XLSX.utils.sheet_to_json(sheet) return data || [] } catch { return [] } } // Get fees by student ID export async function getFeesByStudentId(studentId: number): Promise { const fees = await getAllFees() return fees.filter((f) => f.student_id === studentId) } // Update fee export async function updateFee(id: number, updates: Partial): Promise { const fees = await getAllFees() const index = fees.findIndex((f) => f.id === id) if (index === -1) return null fees[index] = { ...fees[index], ...updates, id } await saveFees(fees) return fees[index] } // Delete fees by student ID async function deleteStudentFees(studentId: number) { const fees = await getAllFees() const filtered = fees.filter((f) => f.student_id !== studentId) await saveFees(filtered) } // Save fees to Excel async function saveFees(fees: Fee[]) { await ensureDataDir() const worksheet = XLSX.utils.json_to_sheet(fees) const workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook, worksheet, "Fees") await fs.writeFile(FEES_FILE, XLSX.write(workbook, { type: "buffer", bookType: "xlsx" })) } // Initialize default data if files don't exist export async function initializeDefaultData() { await ensureDataDir() try { await fs.access(STUDENTS_FILE) } catch { // Create default students const defaultStudents: Student[] = [ { id: 1, name: "Raj Kumar", email: "raj.kumar@college.edu", mobile: "9876543210", roll_number: "CSE001", branch: "Computer Science", section: "A", year_of_passout: 2025, year_1_fee_status: "Paid", year_2_fee_status: "Partial", year_3_fee_status: "Pending", year_4_fee_status: "Pending", year_1_receipt: "REC001", year_2_receipt: "REC002", year_3_receipt: "", year_4_receipt: "", }, { id: 2, name: "Priya Singh", email: "priya.singh@college.edu", mobile: "9876543211", roll_number: "ECE001", branch: "Electronics", section: "B", year_of_passout: 2025, year_1_fee_status: "Paid", year_2_fee_status: "Pending", year_3_fee_status: "Pending", year_4_fee_status: "Pending", year_1_receipt: "REC003", year_2_receipt: "", year_3_receipt: "", year_4_receipt: "", }, ] await saveStudents(defaultStudents) } try { await fs.access(FEES_FILE) } catch { // Create default fees const defaultFees: Fee[] = [ { id: 1, student_id: 1, year: 1, amount: 50000, paid_amount: 50000, status: "Paid", receipt_number: "REC001" }, { id: 2, student_id: 1, year: 2, amount: 50000, paid_amount: 25000, status: "Partial", receipt_number: "" }, { id: 3, student_id: 1, year: 3, amount: 50000, paid_amount: 0, status: "Pending", receipt_number: "" }, { id: 4, student_id: 1, year: 4, amount: 50000, paid_amount: 0, status: "Pending", receipt_number: "" }, { id: 5, student_id: 2, year: 1, amount: 50000, paid_amount: 50000, status: "Paid", receipt_number: "REC002" }, { id: 6, student_id: 2, year: 2, amount: 50000, paid_amount: 0, status: "Pending", receipt_number: "" }, { id: 7, student_id: 2, year: 3, amount: 50000, paid_amount: 0, status: "Pending", receipt_number: "" }, { id: 8, student_id: 2, year: 4, amount: 50000, paid_amount: 0, status: "Pending", receipt_number: "" }, ] await saveFees(defaultFees) } } [V0_FILE]markdown:file="SETUP_LOCAL.md" isEdit="true" isMerged="true" # Local Development Setup Guide This is a Next.js 16 application for managing student fee payments. Follow these instructions to run it locally on your system. ## Prerequisites You need to have the following installed on your system: - **Node.js** (v18 or higher) - Download from https://nodejs.org/ - **npm** or **yarn** (comes with Node.js) - A code editor (VS Code recommended) ## Why NOT XAMPP? XAMPP is for PHP/Apache/MySQL applications. This is a **Next.js application** (JavaScript/React running on Node.js), so XAMPP won't work. You need Node.js instead, which is much simpler to set up. ## Data Storage - Excel Files This dashboard uses **local Excel files** to store all student and fee data: - Student records are saved in `data/students.xlsx` - Fee payment data is saved in `data/fees.xlsx` - The `data/` folder is created automatically on first run - No database setup needed - works completely offline ## Step-by-Step Local Setup ### 1. Install Node.js - Go to https://nodejs.org/ - Download the **LTS (Long Term Support)** version - Install it (just click next through the installer) - Verify installation by opening terminal/command prompt and typing: ```bash node --version npm --version ``` ### 2. Download the Project Code There are two ways: **Option A: Using shadcn CLI (Recommended)** ```bash npx create-next-app@latest student-fee-dashboard --use-npm cd student-fee-dashboard # When prompted, select: # - TypeScript: Yes # - ESLint: Yes # - Tailwind CSS: Yes # - shadcn/ui: Yes ``` **Option B: Download as ZIP** - Download the ZIP file from v0 - Extract it to a folder on your computer - Open terminal/command prompt - Navigate to the extracted folder: ```bash cd path/to/student-fee-dashboard ``` ### 3. Install Dependencies Once you're in the project folder, run: ```bash npm install ``` This downloads all required packages (takes 2-3 minutes on first run). The `xlsx` package for Excel handling is included. ### 4. Run the Development Server ```bash npm run dev ``` You should see output like: ``` > ready - started server on 0.0.0.0:3000, url: http://localhost:3000 ``` The first time you run the app, it automatically creates: - `data/` folder - `data/students.xlsx` with sample student records - `data/fees.xlsx` with sample fee records ### 5. Open in Browser Open your browser and go to: ``` http://localhost:3000 ``` You should see the dashboard home page! ## Available Routes - **Dashboard**: http://localhost:3000/dashboard - **Students**: http://localhost:3000/students - **Analytics**: http://localhost:3000/dashboard/analytics ## Working with Excel Files ### View/Edit Files The Excel files in the `data/` folder can be opened with: - Microsoft Excel - Google Sheets - LibreOffice Calc - Any spreadsheet application ### Features Available in Dashboard - Add new students (saved to `students.xlsx`) - Edit student records (updates `students.xlsx`) - Delete students (removed from `students.xlsx`) - Record fee payments (saved to `fees.xlsx`) - Download student data as CSV - Upload CSV to add multiple students - All changes are automatically saved to Excel files ## Making Changes 1. Edit any file in the project 2. Save the file (Ctrl+S) 3. The browser automatically refreshes with your changes 4. Excel files update in real-time as you use the dashboard ## Stopping the Server Press `Ctrl+C` in the terminal where you ran `npm run dev` ## Building for Production To create an optimized production build: ```bash npm run build npm run start ``` ## Troubleshooting ### Port 3000 Already in Use If port 3000 is already being used: ```bash npm run dev -- -p 3001 ``` Then open http://localhost:3001 ### npm install fails Try clearing cache: ```bash npm cache clean --force npm install ``` ### Module not found errors Make sure all dependencies are installed: ```bash rm -rf node_modules npm install ``` ### "data" folder not created The folder is created automatically when you first access the dashboard. If it doesn't appear: 1. Make sure the app is running 2. Open http://localhost:3000 in your browser 3. The `data/` folder should now be created in your project root ### Excel files not updating - Make sure you're not viewing the files in Excel while the app is running - Close any open Excel files and try again - Refresh the browser page to see updated data ## Project Structure ``` student-fee-dashboard/ ├── app/ # Next.js app router │ ├── api/ # API routes │ ├── dashboard/ # Dashboard pages │ ├── students/ # Student management │ ├── layout.tsx # Main layout │ ├── page.tsx # Home page │ └── globals.css # Global styles ├── components/ # Reusable React components ├── lib/ │ └── excel-storage.ts # Excel file operations ├── data/ # Excel files (auto-created) │ ├── students.xlsx # Student records │ └── fees.xlsx # Fee payments ├── public/ # Static files ├── package.json # Dependencies └── tsconfig.json # TypeScript config ``` ## Key Features - View, Add, Edit, Delete student records - Track fee payments across 4 years - Download/Upload student data as CSV - Advanced filtering by branch, year, and fee status - Payment status tracking with receipt numbers - Section field for classroom organization - All data stored in Excel files - no database needed - Dashboard analytics and reports ## Need Help? - Check the console in browser (F12) for error messages - Check terminal where `npm run dev` is running for backend errors - Make sure you're in the correct project folder before running commands - Verify Node.js is installed: `node --version` [V0_FILE]markdown:file="EXECUTE_STEP_BY_STEP.md" # Step-by-Step Guide to Execute Student Fee Dashboard with Excel Storage ## Prerequisites - Windows, Mac, or Linux computer - Internet connection (for initial setup only) ## STEP 1: Install Node.js (One-Time Setup) ### For Windows: 1. Go to https://nodejs.org 2. Download "LTS" version (Long Term Support) 3. Run the installer and click "Next" for all options 4. Restart your computer 5. Open Command Prompt and type: `node --version` (should show a version number) ### For Mac: 1. Go to https://nodejs.org 2. Download "LTS" version for Mac 3. Run the installer and follow the steps 4. Open Terminal and type: `node --version` (should show a version number) ### For Linux: ```bash sudo apt update sudo apt install nodejs npm node --version ``` --- ## STEP 2: Download and Set Up the Project 1. Download the project files from v0 by clicking "Download ZIP" 2. Extract (unzip) the folder to a location like `C:\Users\YourName\Desktop\student-fee-dashboard` 3. Open Command Prompt (Windows) or Terminal (Mac/Linux) 4. Navigate to the project folder: ``` cd C:\Users\YourName\Desktop\student-fee-dashboard ``` Or on Mac: ``` cd ~/Desktop/student-fee-dashboard ``` --- ## STEP 3: Install Project Dependencies In the Command Prompt/Terminal, run: ```bash npm install ``` **What this does:** Downloads all required packages (takes 2-3 minutes on first run) --- ## STEP 4: Start the Project Run: ```bash npm run dev ``` **You should see:** ``` > next dev ▲ Next.js 15.0.1 - Local: http://localhost:3000 ``` --- ## STEP 5: Open the Dashboard 1. Open your web browser (Chrome, Firefox, Safari, Edge) 2. Go to: `http://localhost:3000` 3. You should see the Student Fee Dashboard --- ## STEP 6: Understand the Excel Storage The dashboard automatically creates and saves data to Excel files: ### Excel Files Location: - **Students Data:** `project-folder/data/students.xlsx` - **Fees Data:** `project-folder/data/fees.xlsx` These files are created automatically on first run! --- ## STEP 7: View and Edit Excel Files ### Option 1: Using Microsoft Excel 1. Open Excel 2. Go to File → Open 3. Navigate to the `data` folder 4. Open `students.xlsx` or `fees.xlsx` ### Option 2: Using Google Sheets (Free, Online) 1. Go to https://sheets.google.com 2. Click "Open" → "Upload" tab 3. Select the Excel file from `data` folder 4. Edit and download back ### Option 3: Using LibreOffice Calc (Free, Offline) 1. Download from https://www.libreoffice.org 2. Open the Excel files directly --- ## STEP 8: How the Data Flow Works ``` ┌─────────────────────────────────────────┐ │ Dashboard Web Interface │ │ (http://localhost:3000) │ └────────────┬────────────────────────────┘ │ ↓ (Save/Update/Delete) ┌─────────────────────────────────────────┐ │ Node.js Backend API │ │ (processes requests) │ └────────────┬────────────────────────────┘ │ ↓ (Read/Write) ┌─────────────────────────────────────────┐ │ Excel Files (data/ folder) │ │ - students.xlsx │ │ - fees.xlsx │ └─────────────────────────────────────────┘ ``` --- ## STEP 9: Testing the System ### Add a New Student: 1. Click "Students" → "Add New Student" 2. Fill in: Name, Email, Mobile, Roll Number, Branch, Section, Year 3. Click "Save" 4. **Check the Excel file:** `data/students.xlsx` should now have the new student! ### Record a Payment: 1. Click on a student's name 2. Click "Add Payment" or edit fee status 3. Enter amount, receipt number, and status 4. Click "Save" 5. **Check the Excel file:** `data/fees.xlsx` should be updated! ### Download Data: 1. Click "Download" button 2. Students data is exported as CSV (compatible with Excel) ### Upload Data: 1. Prepare a CSV file with columns: name, email, mobile, roll_number, branch, section, year_of_passout 2. Click "Upload" button 3. Select your CSV file 4. Data is imported into the Excel sheets --- ## STEP 10: Stop the Dashboard To stop the project, in Command Prompt/Terminal press: ``` Ctrl + C ``` --- ## STEP 11: Restart Anytime To run the dashboard again: 1. Open Command Prompt/Terminal 2. Navigate to the project folder 3. Run: `npm run dev` 4. Open: `http://localhost:3000` --- ## Troubleshooting ### Issue: "npm is not recognized" - **Solution:** Node.js not installed. Reinstall from https://nodejs.org ### Issue: "Port 3000 already in use" - **Solution:** Kill the process or use a different port: ```bash npm run dev -- -p 3001 ``` Then open `http://localhost:3001` ### Issue: Excel files not created - **Solution:** Make sure the `data` folder exists in your project. If not, create it manually. ### Issue: Cannot upload CSV - **Solution:** Ensure CSV has columns: name, email, mobile, roll_number, branch, section, year_of_passout ### Issue: Data not saving to Excel - **Solution:** 1. Check that Excel files aren't open in Excel (close them first) 2. Make sure you have write permissions to the `data` folder 3. Restart the dashboard: Stop (Ctrl+C) and run `npm run dev` again --- ## Project File Structure ``` student-fee-dashboard/ ├── app/ │ ├── api/ # API routes for data processing │ │ ├── students/ │ │ └── fees/ │ ├── students/ # Student pages │ │ ├── page.tsx # Student list │ │ ├── [id]/ # Student detail │ │ └── new/ # Add new student │ ├── dashboard/ # Dashboard analytics │ └── page.tsx # Home page ├── components/ # Reusable components │ ├── student-table.tsx │ ├── student-form.tsx │ ├── payment-form.tsx │ └── student-fee-table.tsx ├── lib/ │ └── excel-storage.ts # Excel file operations (IMPORTANT!) ├── data/ # Excel files (auto-created) │ ├── students.xlsx │ └── fees.xlsx ├── package.json # Project dependencies └── next.config.mjs # Next.js configuration ``` --- ## Key Excel Storage Features ✅ **Automatic Initialization:** Creates default sample data on first run ✅ **Real-Time Sync:** All dashboard changes are immediately saved to Excel ✅ **Easy Backup:** Just copy the `data` folder to back up everything ✅ **No Database Needed:** Everything is local, offline, and portable ✅ **Excel Compatibility:** Open files with Excel, Google Sheets, or LibreOffice ✅ **Safe Operations:** New student records automatically sync to fees --- ## Common Tasks ### Task 1: Backup Your Data 1. Copy the entire `data` folder 2. Save it to a USB drive or cloud storage ### Task 2: Move Project to Another Computer 1. Copy entire project folder (including `data` folder) 2. On new computer, open Command Prompt in the folder 3. Run: `npm install` (downloads packages) 4. Run: `npm run dev` ### Task 3: Share Data with Others 1. Go to `data` folder 2. Open `students.xlsx` and `fees.xlsx` with Excel 3. Share these files via email or cloud drive 4. They can view and edit the data directly! ### Task 4: Delete a Student 1. Click "Students" 2. Find the student and click "Delete" 3. Confirm deletion 4. Student is removed from both Excel files automatically --- ## Frequently Asked Questions **Q: Do I need internet to run the dashboard?** A: No! Once Node.js is installed and project is set up, everything works offline. Internet is only needed for initial setup. **Q: Can multiple people use this at the same time?** A: Not simultaneously editing the same Excel file. One person should edit at a time. For collaboration, consider upgrading to a database like Supabase (contact support for help). **Q: Where is my data stored?** A: In the `data/students.xlsx` and `data/fees.xlsx` files in your project folder. Keep these safe! **Q: Can I edit Excel files directly?** A: Yes! You can open and edit them with Excel. Just make sure the dashboard isn't running when editing directly. **Q: How do I add more students at once?** A: Use the "Upload" feature with a CSV file containing all student data. --- ## Need Help? If you encounter issues: 1. Check the troubleshooting section above 2. Make sure Node.js is properly installed 3. Verify the `data` folder exists with Excel files 4. Try restarting the dashboard (Ctrl+C, then npm run dev) 5. Check Command Prompt for error messages --- **You're all set! Start managing student fees with your local Excel-based dashboard!**

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This