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

README.md

@@ -1,76 +1,210 @@
-# Contribution Guidelines
 
-We are thrilled to welcome contributors to **Leadlly**! Below are the guidelines to help you contribute efficiently.
-
-## 📚 Getting Started
-
-### Prerequisites:
-
-- **Node.js** (>= 14.x.x)
-- **npm** or **yarn** (package manager)
-
-### Installation:
-
-1. **Fork the Repository:**
-   - Click the "Fork" button in the top-right corner of the page to create your own copy of the repository.
-
-2. **Clone the Forked Repository:**
-   ```bash
-   git clone https://github.com/{your-username}/leadlly.admin.web.git
-   cd leadlly.admin.web
-   ```
-
-3. **Install dependencies**:
-    ```bash
-    npm install
-    ```
-
-4. **Run the application**:
-    ```bash
-    npm run dev
-    ```
-
-5. **Access the application**:
-    Open [http://localhost:3000](http://localhost:3000) in your browser.
-
-## 🎯 How to Contribute
-
-We welcome contributions! If you'd like to help improve the Leadlly Mentor Platform, follow these steps:
-
-1. Fork the repository.
-2. Create a new branch for your feature or bugfix.
-3. Make your changes.
-4. Open a pull request and describe your changes.
-
-## 🐛 Reporting Issues
-
-If you encounter any issues while using the platform, please feel free to open an issue on the repository. Provide as much detail as possible to help us address the problem quickly.
-
-## 🛡️ Security
-
-If you find any security vulnerabilities, please report them privately to [business@leadlly.in](mailto:business@leadlly.in). We take security issues seriously and will address them promptly.
-
-## 📄 License
-
-This project is licensed under the MIT License. See the [`LICENSE`](./LICENSE) file for more details.
-
-## 🎉 Hacktoberfest Participation:
-
-- Contributions should be meaningful and address an issue or feature request.
-- Avoid creating spam or low-quality pull requests, as these will not be accepted.
-- Tag your pull requests with "Hacktoberfest" to ensure they count toward Hacktoberfest.
-
-## 📝 Code Of Conduct:
-
-- **Be Respectful**: Always be courteous and respectful when interacting with other contributors and maintainers.
-- **Collaborate**: Help others by reviewing code, suggesting improvements, or answering questions.
-- **Keep Learning**: Open source is a great way to learn and improve your skills, so ask questions and engage with the community.
-- **Contribution Process**: 
-  - To indicate you're working on an issue, comment "I am working on this issue." Our team will verify your activity. If there is no response, the issue may be reassigned.
-  - Please do not claim an issue that is already assigned to someone else.
-
-## 📞 Contact
-
-For any further questions or support, reach out to us at:
-- **Email**: [support@leadlly.in](mailto:support@leadlly.in)
-- **Website**: [Leadlly.in](https://leadlly.in)
+# Leadlly Admin Web
+
+## Overview
+Leadlly Admin Web is a comprehensive administration platform for educational institutions. It provides tools for managing students, teachers, batches, and courses with an intuitive interface designed for educational administrators.
+
+## Features
+
+### Dashboard
+Get a quick overview of your institution's key metrics:
+- Total students and teachers
+- Active courses and classes
+- Performance metrics and attendance rates
+
+![Dashboard](/Updated%20Images/dashboard.png)
+
+### Course Management
+- Create, edit, and delete courses
+- Assign teachers to each course
+- View course schedules and attendance
+
+![Student Batches](/Updated%20Images/batches.png)
+
+### Student Management
+- View and manage all student batches
+- Filter students by standard, subject, and teacher
+- Track student attendance and performance
+- Detailed student profiles
+
+![Student List](/Updated%20Images/List_students.png)
+
+### Teacher Management
+- Comprehensive teacher profiles
+- Track teacher performance and satisfaction rates
+- View classes taught by each teacher
+- Monitor student attendance in teacher's classes
+
+![Teacher Profile](/Updated%20Images/teacher_profile.png)
+
+## Technology Stack
+- **Frontend**: Next.js, React, TypeScript, Tailwind CSS
+- **State Management**: React Hooks
+- **API**: Next.js API Routes
+- **Styling**: Tailwind CSS for responsive design
+
+## API Implementation
+The application uses Next.js API Routes to create serverless API endpoints that handle data operations. These API routes are located in the `src/app/api` directory and follow RESTful principles.
+
+### API Architecture
+Leadlly Admin Web implements a modern API architecture using Next.js App Router's route handlers, which provide:
+- **Serverless Functions**: Each API endpoint runs as a serverless function
+- **TypeScript Integration**: Full type safety for request and response handling
+- **Route Parameters**: Dynamic routing with path and query parameter support
+- **Error Handling**: Standardized error responses
+
+### Available API Endpoints
+
+#### Batches API
+- **GET /api/batches**  
+  - Description: Retrieves a list of all batches grouped by standard  
+  - Query Parameters:  
+    - `standard`: Filter batches by standard name (e.g., "11th standard")  
+    - `subject`: Filter batches by subject name (e.g., "Physics")  
+    - `teacher`: Filter batches by teacher name (e.g., "Dr. Sarah Wilson")  
+  - Response: JSON object containing filtered batches grouped by standard
+
+**Example request:**
+```
+GET /api/batches?standard=11th&subject=Physics
+```
+
+**Example response:**
+```json
+{
+  "standards": [
+    {
+      "name": "11th standard",
+      "batches": [
+        {
+          "id": "11-omega-1",
+          "name": "Omega",
+          "standard": "11th Class",
+          "subjects": ["Chemistry", "Physics", "Biology"],
+          "totalStudents": 120,
+          "maxStudents": 180,
+          "teacher": "Dr. Sarah Wilson"
+        }
+        // More batches...
+      ]
+    }
+  ]
+}
+```
+
+### Implementation Details
+The API routes are implemented using Next.js App Router's route handlers. Each API endpoint is defined in a route.ts file within the corresponding directory structure.
+
+**Request Handling (Example from `src/app/api/batches/route.ts`):**
+```typescript
+export async function GET(request: NextRequest) {
+  try {
+    // Get query parameters for filtering
+    const searchParams = request.nextUrl.searchParams;
+    const standard = searchParams.get('standard');
+    const subject = searchParams.get('subject');
+    const teacher = searchParams.get('teacher');
+
+    // Process and filter data
+    // ...
+
+    return NextResponse.json(filteredData, { status: 200 });
+  } catch (error) {
+    console.error('Error fetching batches:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch batches' },
+      { status: 500 }
+    );
+  }
+}
+```
+
+### Data Handling
+Currently, the application uses mock data for demonstration purposes. In a production environment, these API routes would connect to a database or external API service.
+
+**Mock data example:**
+```typescript
+const batchesData = {
+  standards: [
+    {
+      name: "11th standard",
+      batches: [
+        // Batch data...
+      ]
+    }
+  ]
+};
+```
+
+### Error Handling
+All API routes implement consistent error handling to ensure robust operation:
+
+```typescript
+try {
+  // API logic
+} catch (error) {
+  console.error('Error:', error);
+  return NextResponse.json(
+    { error: 'Error message' },
+    { status: 500 }
+  );
+}
+```
+
+### Future API Enhancements
+Planned API enhancements include:
+- Authentication and authorization
+- CRUD operations for all resources (students, teachers, courses)
+- Pagination for large data sets
+- Advanced filtering and search capabilities
+- Real-time updates using webhooks or WebSockets
+
+## Getting Started
+
+### Prerequisites
+- Node.js (v14 or later)
+- npm or yarn
+
+### Installation
+Clone the repository:
+```bash
+git clone https://github.com/your-username/leadlly.admin.web.git
+cd leadlly.admin.web
+```
+
+Install dependencies:
+```bash
+npm install
+```
+
+Run the development server:
+```bash
+npm run dev
+```
+
+Open `URL_ADDRESS:3000` in your browser
+
+## Project Structure
+```
+leadlly.admin.web/
+├── public/              # Static assets
+├── src/
+│   ├── app/             # Next.js App Router
+│   │   ├── (root)/      # Main application routes
+│   │   │   ├── (dashboard)/  # Dashboard components
+│   │   │   ├── batches/      # Batch management
+│   │   │   └── teacher/      # Teacher management
+│   │   └── api/         # API routes
+│   ├── components/      # Shared components
+│   └── styles/          # Global styles
+├── Updated Images/      # Project screenshots
+└── README.md            # Project documentation
+```
+
+This update adds a comprehensive API section to your README.md that explains:
+1. The API architecture using Next.js API Routes
+2. Available endpoints with examples
+3. Implementation details including request handling, data handling, and error handling
+4. Future API enhancement plans
+
+The documentation is based on the existing implementation in your `src/app/api/batches/route.ts` file, which demonstrates how the API routes are structured in your project.

src/app/(root)/(dashboard)/_components/InstituteOverview.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface InstituteOverviewProps {
+  name: string;
+  establishedYear: number;
+  instituteCode: string;
+  address: string;
+  contact: string;
+  email: string;
+}
+
+const InstituteOverview = ({
+  name,
+  establishedYear,
+  instituteCode,
+  address,
+  contact,
+  email,
+}: InstituteOverviewProps) => {
+  return (
+    <div className="bg-purple-50 p-6 rounded-lg mb-6">
+      <div className="flex flex-col md:flex-row items-start md:items-center gap-6">
+        <div className="w-40 h-40 bg-white p-4 rounded-lg flex items-center justify-center">
+          <Image 
+            src="/placeholder-institute.png" 
+            alt={name} 
+            width={120} 
+            height={120}
+            className="rounded-md"
+          />
+        </div>
+
+        <div className="flex-1">
+          <p className="text-gray-600">Established in {establishedYear}</p>
+          <h1 className="text-3xl font-bold mt-1">{name}</h1>
+          <p className="text-gray-600 mt-1">Institute Code: {instituteCode}</p>
+        </div>
+
+        <div className="flex flex-col gap-4 mt-4 md:mt-0">
+          <div className="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
+            </svg>
+            <span className="text-gray-700">{address}</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
+            </svg>
+            <span className="text-gray-700">{contact}</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
+            </svg>
+            <span className="text-gray-700">{email}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InstituteOverview;