Skip to content

Comments

Enhance Admin Dashboard with Batch Management and API Integration (Bonus Included)#3

Open
Sarvajeet2003 wants to merge 5 commits intoLeadlly:mainfrom
Sarvajeet2003:main
Open

Enhance Admin Dashboard with Batch Management and API Integration (Bonus Included)#3
Sarvajeet2003 wants to merge 5 commits intoLeadlly:mainfrom
Sarvajeet2003:main

Conversation

@Sarvajeet2003
Copy link

I have completed the dashboard based on the Figma design. Additionally, I also created the Teacher's Section, as I felt it would contribute to the overall completeness of the project.


Name: Sarvajeeth U K
Email: Sarvajeeth21417@iiitd.ac.in
LinkedIn: https://www.linkedin.com/in/sarvajeeth-uk/

@shivang-16
Copy link
Member

Hi, can you please add a screen record video showing the proper flow of what you have built?

@Sarvajeet2003
Copy link
Author

Sarvajeet2003 commented Mar 2, 2025 via email

@shivang-16 shivang-16 closed this Feb 3, 2026
@shivang-16 shivang-16 reopened this Feb 3, 2026
@beetle-ai
Copy link

beetle-ai bot commented Feb 3, 2026

Summary by Beetle

This PR transforms the Leadlly Admin Web application from a basic template into a fully functional educational institution management platform. It implements three major sections: Dashboard, Student Management (Batches), and Teacher Management, complete with API routes, reusable components, and comprehensive documentation. The changes establish a solid foundation for managing students, teachers, courses, and institutional data with an intuitive, responsive interface.

📁 File Changes Summary (Consolidated across all commits):

File Status Changes Description
README.md Modified +203/-69 Completely overhauled documentation: replaced contribution guidelines with comprehensive project overview including features, technology stack, API implementation details with examples, project structure, and installation instructions. Added screenshots for dashboard, batches, student list, and teacher profile.
src/app/(root)/(dashboard)/_components/InstituteOverview.tsx
src/app/(root)/(dashboard)/_components/StudentsOverview.tsx
src/app/(root)/(dashboard)/_components/TeachersOverview.tsx
src/app/(root)/(dashboard)/_components/index.ts
Added +221/-0 Created dashboard component library: InstituteOverview displays institute details with contact info and logo; StudentsOverview shows student metrics (total, courses, attendance, performance); TeachersOverview displays teacher statistics (total, departments, classes, satisfaction); index.ts exports all components for easy imports.
src/app/(root)/(dashboard)/page.tsx Modified +62/-2 Transformed empty home page into comprehensive dashboard with mock data for institute, students, and teachers. Integrated all dashboard components with proper layout and "Generate Report" action button.
src/app/(root)/batches/page.tsx
src/app/(root)/batches/[batchId]/students/page.tsx
Added +444/-0 Implemented complete batch management system: main batches page with filtering by standard/subject/teacher, batch cards showing capacity and details; student list page with search, sorting, attendance/performance visualization, and pagination. Both pages fetch data from API routes.
src/app/(root)/teacher/[teacherId]/_components/TeacherHeader.tsx
src/app/(root)/teacher/[teacherId]/_components/TeacherStats.tsx
src/app/(root)/teacher/[teacherId]/_components/TeacherClasses.tsx
src/app/(root)/teacher/[teacherId]/_components/TeacherPerformance.tsx
src/app/(root)/teacher/[teacherId]/_components/index.ts
Added +324/-0 Built teacher profile component suite: TeacherHeader with contact details; TeacherStats showing 4 key metrics with icons; TeacherClasses table listing active classes; TeacherPerformance with progress bars for feedback, attendance, completion, and results; index.ts for centralized exports.
src/app/(root)/teacher/[teacherId]/page.tsx
src/app/(root)/teachers/page.tsx
Modified/Added +284/-7 Created teacher management pages: individual teacher profile page with comprehensive data display using all teacher components; teachers listing page with search functionality, subject filtering, and teacher cards showing email, contact, classes, and student counts.
src/app/api/batches/route.ts
src/app/api/batches/[batchId]/students/route.ts
Added +304/-0 Implemented RESTful API routes using Next.js App Router: batches endpoint with filtering by standard/subject/teacher; students endpoint with search, sorting (name/roll/attendance/performance), pagination, and validation. Both include comprehensive error handling and mock data structures.

Total Changes: 17 files changed, +1842 additions, -78 deletions

🗺️ Walkthrough:

graph TD
A[Dashboard Page] --> B[Institute Overview]
A --> C[Students Overview]
A --> D[Teachers Overview]
C --> E[View Students Button]
D --> F[View Teachers Button]
E --> G[Batches Page]
F --> H[Teachers List Page]
G --> I[Filter Controls]
I --> J[API: GET /api/batches]
J --> K[Display Batch Cards]
K --> L[View More Button]
L --> M[Students List Page]
M --> N[API: GET /api/batches/batchId/students]
N --> O[Display Student Table]
H --> P[Search & Filter]
P --> Q[Teacher Cards]
Q --> R[Click Teacher]
R --> S[Teacher Profile Page]
S --> T[Teacher Header]
S --> U[Teacher Stats]
S --> V[Teacher Classes]
S --> W[Teacher Performance]
style A fill:#e1d5e7
style G fill:#dae8fc
style H fill:#d5e8d4
style S fill:#fff2cc
Loading

🎯 Key Changes:

  • Dashboard Implementation: Created a comprehensive dashboard with three overview sections (Institute, Students, Teachers) displaying key metrics, statistics, and quick navigation links to detailed views.
  • Student Batch Management: Built a complete batch management system with filtering capabilities, batch capacity visualization, and detailed student lists with attendance/performance tracking and pagination.
  • Teacher Management System: Implemented teacher listing and detailed profile pages showing classes taught, performance metrics, student counts, and satisfaction ratings with visual progress indicators.
  • API Architecture: Established RESTful API routes using Next.js App Router with query parameter filtering, search functionality, sorting, pagination, validation, and standardized error handling.
  • Component Library: Developed reusable, modular components for dashboard sections, teacher profiles, and student displays, all following consistent design patterns with TypeScript interfaces.
  • Documentation Overhaul: Completely rewrote README.md with comprehensive API documentation including endpoint descriptions, request/response examples, implementation details, and future enhancement plans.
  • Responsive Design: All pages and components use Tailwind CSS with responsive grid layouts, mobile-friendly navigation, and consistent styling across the application.
  • Mock Data Infrastructure: Implemented structured mock data throughout API routes and pages to demonstrate functionality, ready for database integration in production.
⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

@beetle-ai-dev
Copy link

beetle-ai-dev bot commented Feb 3, 2026

Beetle is reviewing the changes — Let’s see what you’ve done!

🔍 Under Review

Commits (5)
  • 57818a3 — Dashboard, Student and Teacher Section (sarvajeethuk)
  • 6760ead — Added Readme (sarvajeethuk)
  • b9b590d — Updated Readme (sarvajeethuk)
  • 90abfda — Updated Readme (sarvajeethuk)
  • f5f53fd — Updated Readme (sarvajeethuk)
Files Changed (17)
  • README.md
  • src/app/(root)/(dashboard)/_components/InstituteOverview.tsx
  • src/app/(root)/(dashboard)/_components/StudentsOverview.tsx
  • src/app/(root)/(dashboard)/_components/TeachersOverview.tsx
  • src/app/(root)/(dashboard)/_components/index.ts
  • src/app/(root)/(dashboard)/page.tsx
  • src/app/(root)/batches/[batchId]/students/page.tsx
  • src/app/(root)/batches/page.tsx
  • src/app/(root)/teacher/[teacherId]/_components/TeacherClasses.tsx
  • src/app/(root)/teacher/[teacherId]/_components/TeacherHeader.tsx
  • src/app/(root)/teacher/[teacherId]/_components/TeacherPerformance.tsx
  • src/app/(root)/teacher/[teacherId]/_components/TeacherStats.tsx
  • src/app/(root)/teacher/[teacherId]/_components/index.ts
  • src/app/(root)/teacher/[teacherId]/page.tsx
  • src/app/(root)/teachers/page.tsx
  • src/app/api/batches/[batchId]/students/route.ts
  • src/app/api/batches/route.ts
Ignored Files (6)
  • Updated Images/ListStudents.png
  • Updated Images/Screenshot 2025-03-02 at 3.54.01 PM.png
  • Updated Images/batches.png
  • Updated Images/dashboard.png
  • Updated Images/List_students.png
  • Updated Images/teacher_profile.png

⚙️ Settings

Severity Threshold: Medium — Balanced feedback — medium and high severity issues only.Change in Settings
Custom Rules: Define your own review rules — Set Custom Rules
PR Summary: Configure PR summary — Change in Settings

📖 User Guide
  • Once repos are connected, PR analysis is automatically enabled. You can disable analysis for this repo from beetleai.dev/analysis
  • Comment @beetle on any PR to start analysis manually
  • Comment @beetle stop to stop any ongoing analysis

Follow us: Beetle · X · LinkedIn

<div className="w-full bg-gray-200 rounded-full h-2.5 mb-1">
<div
className="bg-purple-600 h-2.5 rounded-full"
style={{ width: `${(batch.totalStudents / batch.maxStudents) * 100}%` }}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Division by zero vulnerability: If batch.maxStudents is 0, this calculation will result in Infinity or NaN, causing the progress bar to render incorrectly. This could happen if the API returns invalid data or if a batch is created without a maximum student limit.

Confidence: 5/5

Suggested Fix
Suggested change
style={{ width: `${(batch.totalStudents / batch.maxStudents) * 100}%` }}
style={{ width: `${batch.maxStudents > 0 ? (batch.totalStudents / batch.maxStudents) * 100 : 0}%` }}

Add a guard to check if maxStudents is greater than 0 before performing the division. This ensures the progress bar always renders with a valid percentage value.

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In src/app/(root)/batches/page.tsx around line 189, the progress bar width
calculation divides totalStudents by maxStudents without checking if maxStudents
is zero, which could result in Infinity or NaN; add a ternary check to ensure
maxStudents is greater than 0 before performing the division, returning 0% if
maxStudents is 0 or invalid.

</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{classes.map((cls) => (
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The classes.map() call lacks validation and will throw a runtime error if the classes prop is undefined, null, or not an array. This can crash the component and break the teacher profile page when invalid data is passed from the parent component or API.

Confidence: 5/5

Suggested Fix
Suggested change
{classes.map((cls) => (
{classes?.map((cls) => (

Use optional chaining (?.) to safely handle cases where classes might be undefined or null. Alternatively, add validation at the component level or provide a default empty array in the props destructuring: const TeacherClasses = ({ classes = [] }: TeacherClassesProps) => {

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In src/app/(root)/teacher/[teacherId]/_components/TeacherClasses.tsx around line 40,
the classes.map() call will throw a runtime error if classes is undefined, null, or
not an array; add optional chaining by changing classes.map to classes?.map, and
consider adding a default empty array in the props destructuring on line 15 by
changing ({ classes }: TeacherClassesProps) to ({ classes = [] }: TeacherClassesProps)
to ensure the component always has a valid array to work with.

<div className="w-full bg-gray-200 rounded-full h-2.5">
<div
className="bg-purple-600 h-2.5 rounded-full"
style={{ width: `${(item.score / item.maxScore) * 100}%` }}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Division by zero vulnerability: If item.maxScore is 0, this calculation will result in Infinity or NaN, causing the progress bar to render incorrectly with invalid width values. This could happen if the API returns invalid performance data or if a metric hasn't been scored yet. This is the same issue identified in Comment #13 for the batches page.

Confidence: 5/5

Suggested Fix
Suggested change
style={{ width: `${(item.score / item.maxScore) * 100}%` }}
style={{ width: `${item.maxScore > 0 ? (item.score / item.maxScore) * 100 : 0}%` }}

Add a guard to check if maxScore is greater than 0 before performing the division. This ensures the progress bar always renders with a valid percentage value (0% if maxScore is invalid).

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In src/app/(root)/teacher/[teacherId]/_components/TeacherPerformance.tsx around line 26,
the progress bar width calculation divides score by maxScore without checking if
maxScore is zero, which could result in Infinity or NaN; add a ternary check to
ensure maxScore is greater than 0 before performing the division, returning 0% if
maxScore is 0 or invalid, to prevent rendering issues with the progress bar.

Comment on lines +114 to +115
const page = parseInt(searchParams.get('page') || '1');
const limit = parseInt(searchParams.get('limit') || '10');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing input validation for pagination parameters: parseInt() can return NaN if the query parameters contain non-numeric values, which would cause the pagination logic to fail. Additionally, negative values or extremely large values could cause performance issues or incorrect behavior in array slicing operations (lines 148-150).

Confidence: 5/5

Suggested Fix
Suggested change
const page = parseInt(searchParams.get('page') || '1');
const limit = parseInt(searchParams.get('limit') || '10');
const page = Math.max(1, parseInt(searchParams.get('page') || '1') || 1);
const limit = Math.min(100, Math.max(1, parseInt(searchParams.get('limit') || '10') || 10));

Add validation to ensure page is at least 1 and limit is between 1 and 100 (or your preferred maximum). This prevents NaN values, negative numbers, and excessively large limit values that could cause performance issues.

Prompt for AI

Copy this prompt to your AI IDE to fix this issue locally:

In src/app/api/batches/[batchId]/students/route.ts around lines 114-115, the page
and limit parameters are parsed with parseInt without validation for NaN, negative
values, or excessively large numbers; wrap both parseInt calls with Math.max to
ensure minimum values (page >= 1, limit >= 1), add Math.min to limit to enforce
a maximum value (e.g., 100), and use the || operator to provide fallback values
if parseInt returns NaN, ensuring robust pagination that can't be exploited or
cause performance issues.

📍 This suggestion applies to lines 114-115

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants