College Admin Dashboard

A professional, modern College Administration Dashboard designed for Principals and Administrators to manage all aspects of college operations from a single interface.

🎯 Features

Dashboard Overview

• Key Metrics: Total Students, Faculty, Departments, and Average GPA with growth indicators
• Student Distribution: Interactive donut chart showing department-wise student distribution
• Academic Performance: Line chart tracking GPA trends over months
• Department Heads: List of active department heads with status indicators
• Recent Activities: Real-time activity feed with timestamps
• Quick Actions: One-click access to common administrative tasks

Navigation

• Sidebar Navigation: Students, Faculty, Courses, Attendance, Fees, Reports, Events, Settings
• Top Navbar: Search functionality, notifications, and user profile
• Responsive Design: Fully responsive for desktop and mobile devices

Technical Features

• Modern UI: Built with Next.js 15, React 19, and Tailwind CSS
• Interactive Charts: Powered by Recharts for data visualization
• Component Library: Uses Radix UI components for consistent design
• TypeScript: Full TypeScript support for better development experience
• Mock Data: Ready-to-use demo data for presentation purposes

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository

   git clone <repository-url>
   cd userdashboardlatest

2. Install dependencies

   pnpm install

3. Run the development server

   pnpm dev

4. Open your browser Navigate to http://localhost:3000

📁 Project Structure

├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main dashboard page
│   └── globals.css         # Global styles
├── components/
│   ├── college-admin-dashboard.tsx    # Main dashboard component
│   ├── college-admin/
│   │   ├── sidebar.tsx               # Navigation sidebar
│   │   ├── top-navbar.tsx            # Top navigation bar
│   │   ├── dashboard-content.tsx     # Main content layout
│   │   ├── stats-cards.tsx            # Key metrics cards
│   │   ├── student-distribution-chart.tsx  # Student distribution chart
│   │   ├── academic-performance-chart.tsx  # Academic performance chart
│   │   ├── heads-of-departments.tsx   # Department heads list
│   │   ├── recent-activities.tsx      # Recent activities feed
│   │   ├── quick-actions.tsx          # Quick action buttons
│   │   ├── students-view.tsx          # Students management view
│   │   ├── faculty-view.tsx            # Faculty management view
│   │   ├── courses-view.tsx            # Courses management view
│   │   ├── attendance-view.tsx         # Attendance tracking view
│   │   ├── fees-view.tsx               # Fee management view
│   │   ├── reports-view.tsx            # Reports and analytics view
│   │   ├── events-view.tsx             # Events management view
│   │   └── settings-view.tsx           # System settings view
│   └── ui/                 # Reusable UI components (Radix UI)
├── lib/
│   └── utils.ts            # Utility functions
└── public/                 # Static assets

🎨 Design System

Color Palette

• Primary Blue: #3B82F6 (Navigation, buttons)
• Success Green: #10B981 (Positive metrics)
• Warning Orange: #F59E0B (Alerts, warnings)
• Error Red: #EF4444 (Errors, important notices)
• Purple: #8B5CF6 (Charts, accents)

Typography

• Font: Geist Sans (Modern, clean, professional)
• Headings: Bold weights for hierarchy
• Body: Regular weights for readability

Components

• Cards: White background with subtle shadows
• Buttons: Consistent styling with hover effects
• Charts: Interactive with tooltips and legends
• Tables: Clean, minimal design with proper spacing

🔧 Backend Integration

The dashboard is designed to be easily connected to a backend API. Here's what you need to do:

1. Replace Mock Data

Update the following components with real API calls:

• stats-cards.tsx - Connect to metrics API
• student-distribution-chart.tsx - Connect to student data API
• academic-performance-chart.tsx - Connect to performance API
• heads-of-departments.tsx - Connect to faculty API
• recent-activities.tsx - Connect to activity feed API

2. Add Authentication

Implement authentication using:

• NextAuth.js for session management
• JWT tokens for API authentication
• Role-based access control (RBAC)

3. Real-time Updates

Add real-time functionality:

• WebSocket connections for live notifications
• Server-Sent Events for activity updates
• Polling for data refresh

4. Form Handling

Connect quick actions to forms:

• Add form validation with react-hook-form
• Implement proper error handling
• Add loading states and success feedback

📱 Responsive Design

The dashboard is fully responsive and works on:

• Desktop: Full layout with sidebar and detailed charts
• Tablet: Collapsible sidebar with optimized spacing
• Mobile: Stacked layout with mobile-friendly navigation

🎯 Demo Features

Current Mock Data Includes:

• 2,487 Total Students (+5.2% growth)
• 143 Faculty Members (+3.1% growth)
• 8 Active Departments
• 3.42 Average GPA (+0.15 improvement)
• Student Distribution across 8 departments
• Academic Performance trend over 11 months
• 5 Department Heads with status indicators
• 5 Recent Activities with timestamps
• 6 Quick Actions for common tasks

Complete Navigation Views:

• Dashboard: Main overview with charts and metrics
• Students: Student management with searchable table
• Faculty: Faculty directory with profiles and status
• Courses: Course management with detailed information
• Attendance: Attendance tracking with statistics
• Fees: Fee management with payment status
• Reports: Report generation and analytics
• Events: Event management with upcoming events
• Settings: System settings and configuration

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Deploy automatically

Other Platforms

• Netlify: Build command: pnpm build
• Railway: Add build script to package.json
• Docker: Use the provided Dockerfile

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

For support and questions:

• Create an issue in the repository
• Contact the development team
• Check the documentation

---

Built with ❤️ using Next.js, React, and Tailwind CSS