Balvihar Management System

A comprehensive Next.js application for managing Balvihar classes, students, attendance, fees, and expenditures. The system supports two user roles: Admin (full access) and Guru (teacher access).

Features

Admin Features

• Student Management: Add, edit, and manage all students across different groups
• Attendance Tracking: Mark and view attendance for all students with calendar view
• Fee Payment Tracking: Record and track annual fee payments for all students
• Group Management: Create and manage student groups/categories
• Guru Management: Add, edit, and manage gurus (teachers)
• Comprehensive Dashboard: Overview statistics and quick actions

Guru Features

• My Students: View and manage students assigned to the guru
• Attendance Tracking: Mark attendance for assigned students
• Fee Payments: Track fee payments from assigned students
• Expenditure Management: Record and track expenditures with balance calculation
• Personal Dashboard: View statistics for assigned students and financial balance

General Features

• Role-Based Access: Separate interfaces for Admin and Guru roles
• Mobile-First Design: Optimized for mobile devices with responsive UI
• Firebase Integration: Real-time data storage using Firestore
• Calendar View: Visual attendance calendar for easy tracking
• Search & Filter: Filter students, attendance, and fees by group, date, and year

Tech Stack

• Next.js 16 (App Router)
• TypeScript
• Tailwind CSS
• Shadcn UI Components
• Firebase Firestore & Firebase Auth
• Firebase Analytics
• date-fns for date handling
• Lucide React for icons

Getting Started

Prerequisites

• Node.js 18+ and npm
• Firebase project with Firestore enabled

Installation

1. Clone the repository and install dependencies:

npm install

2. Set up Firebase:

   • Create a Firebase project at Firebase Console
   • Enable Firestore Database
   • Get your Firebase configuration from Project Settings

3. Configure environment variables:

   Create a .env.local file in the root directory with your Firebase configuration:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id  # Optional, for Analytics

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

Initial Setup

1. Select Role: On the home page, choose between Admin or Guru role.

2. Create Gurus (Admin only): Navigate to the Gurus page and add guru/teacher profiles.

3. Create Student Groups (Admin only): Navigate to the Groups page and create student groups/categories.

4. Add Students (Admin only): Go to the Students page and add students, assigning them to a guru and group.

5. Mark Attendance: Use the Attendance page to mark attendance for classes (calendar view available for admins).

6. Record Fee Payments: Use the Fees page to record annual fee payments.

7. Track Expenditures (Guru only): Gurus can record their expenditures to track balance.

Project Structure

balvihar/
├── app/                           # Next.js app directory
│   ├── page.tsx                  # Home page (role selection)
│   ├── admin/                    # Admin routes
│   │   ├── page.tsx             # Admin dashboard
│   │   ├── students/            # Student management
│   │   ├── attendance/          # Attendance tracking (with calendar)
│   │   ├── fees/                # Fee payment tracking
│   │   ├── groups/              # Group management
│   │   └── gurus/               # Guru management
│   ├── guru/                     # Guru routes
│   │   ├── page.tsx             # Guru dashboard
│   │   ├── students/            # My students
│   │   ├── attendance/          # Attendance for my students
│   │   ├── fees/                # Fee payments from my students
│   │   └── expenditures/        # Expenditure tracking
│   └── layout.tsx                # Root layout
├── components/
│   ├── AdminBottomNav.tsx        # Admin navigation
│   ├── GuruBottomNav.tsx         # Guru navigation
│   └── ui/                       # Shadcn UI components
├── lib/
│   ├── firebase.ts               # Firebase configuration
│   ├── services/                 # Data service layer
│   │   ├── students.ts
│   │   ├── attendance.ts
│   │   ├── fees.ts
│   │   ├── groups.ts
│   │   ├── gurus.ts
│   │   ├── expenditures.ts
│   │   └── users.ts
│   └── utils.ts                  # Utility functions
└── types/
    └── index.ts                  # TypeScript type definitions

Firebase Collections

The app uses the following Firestore collections:

• students - Student information (linked to guru and group)
• groups - Student group/category definitions
• attendance - Attendance records (linked to students)
• feePayments - Fee payment records (linked to students)
• gurus - Guru/teacher profiles
• expenditures - Expenditure records (linked to gurus)
• users - User accounts with role-based access

Features in Detail

Admin Dashboard

• Overview statistics (total students, today's attendance, fees paid, groups)
• Quick action buttons to all management pages
• Recent fee payments list

Guru Dashboard

• Statistics for assigned students only
• Today's attendance for assigned students
• Fee payments from assigned students
• Remaining balance calculation (fees collected - expenditures)
• Quick actions to student, attendance, fees, and expenditures pages

Students

• Admin: Add, edit, delete all students
• Guru: View and manage only assigned students
• Search and filter by group
• View student details including school, class, contact information
• Link students to gurus and groups

Attendance

• Admin: Mark attendance for all students with calendar view
• Guru: Mark attendance for assigned students only
• Filter by group and date
• View attendance summary and statistics
• Calendar view (Admin) for visual attendance tracking

Fees

• Admin: Record and view all fee payments
• Guru: Record and view fees from assigned students only
• Filter by year and group
• View payment statistics
• Track paid and unpaid students

Groups (Admin only)

• Create and manage student groups/categories
• View student count per group
• Edit and delete groups (with validation to prevent deletion if students exist)

Gurus (Admin only)

• Create and manage guru/teacher profiles
• Link students to gurus
• View guru details including contact information
• Activate/deactivate gurus

Expenditures (Guru only)

• Record expenditures with description, amount, date, and category
• View expenditure history
• Calculate remaining balance (fees collected - expenditures)
• Track spending by category

User Roles

Admin Role

• Full access to all features
• Manage all students, gurus, and groups
• View and manage all attendance and fees
• Access to calendar view for attendance
• Comprehensive dashboard with all statistics

Guru Role

• Access limited to assigned students
• Mark attendance for assigned students
• Record fee payments from assigned students
• Manage personal expenditures
• View balance (fees collected - expenditures)
• Personal dashboard with relevant statistics

Mobile-First Design

The app is designed with mobile devices in mind:

• Responsive layouts that work on all screen sizes
• Touch-friendly buttons and interactions
• Bottom navigation for easy access (role-specific)
• Optimized forms and dialogs for mobile
• Calendar view optimized for mobile devices

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Environment Variables

All Firebase configuration should be stored in .env.local (never commit this file). See SETUP.md for detailed configuration instructions.

License

This project is private and intended for Balvihar use only.