CHAPTER 1

INTRODUCTION
In the era of digital education, e-learning platforms have become essential tools for
delivering structured and interactive learning experiences. The increasing demand for
accessible, efficient, and user-friendly educational platforms has driven the development of
comprehensive dashboard systems for administrators, tutors, and students. During my
internship, I contributed to the development of an E-Learning Platform comprising an Admin
Dashboard, Tutor Dashboard, and Student Dashboard, each designed to streamline
educational management and enhance user experience.
The Admin Dashboard serves as the central control hub for the platform, allowing
administrators to manage users, courses, and overall platform settings. It provides real-time
analytics, including student performance metrics, course engagement statistics, and resource
utilization. Administrators can monitor platform activity, approve tutor courses, generate
reports, and ensure smooth functioning of the e-learning environment.
The Tutor Dashboard was developed to empower instructors with an organized
interface for course management, student monitoring, and session scheduling. Tutors can
create or upload courses, track student progress using visual analytics such as heatmaps, pie
charts, and bar charts, and interact with students through dedicated communication modules.
The dashboard enables tutors to gain insights into learning patterns, identify weak areas, and
adjust teaching strategies effectively, ensuring a data-driven approach to education.
The Student Dashboard provides learners with a personalized interface to access
enrolled courses, view course progress, submit assignments, and participate in interactive
sessions. Students can track their performance, review learning materials, and receive real-
time updates from tutors. By presenting clear progress indicators and engaging content, the
dashboard encourages active learning and helps students manage their academic journey
efficiently.
The development process involved stages such as requirement analysis, UI/UX
design, coding, testing, and deployment. The focus was on creating modular, reusable
components using React and TypeScript, ensuring maintainability and scalability. Tailwind
CSS was 13 used to design a responsive and visually appealing interface that adapts
seamlessly across devices.
In recent years, e-learning has become an essential part of modern education due to
the rapid growth of digital technologies and internet accessibility. Traditional learning
methods are gradually being replaced or enhanced by online platforms that offer flexibility,
accessibility, and personalized learning experiences. However, managing online education
effectively requires a well-organized system that can handle users, courses, and performance
tracking efficiently.
1.1General Overview
The E-Learning Dashboard System is a web-based application
designed to enhance the management and delivery of online education. It
provides a centralized platform that connects administrators, students,
and tutors, enabling efficient communication and seamless learning
experiences.

The system is divided into three main components: Admin Dashboard, Student
Dashboard, and Tutor Dashboard. Each module is designed to perform specific functions.
The Admin Dashboard focuses on monitoring system performance through analytics and
reports. The Student Dashboard provides access to courses, progress tracking, and learning
resources. The Tutor Dashboard enables instructors to create, manage, and evaluate courses.
Additionally, the system incorporates data visualization techniques such as charts,
graphs, and heat maps to provide meaningful insights into user activity and performance.
This helps in making informed decisions and improving the overall learning process.
Overall, the E-Learning Dashboard System offers a scalable, user-friendly, and
efficient solution for managing digital learning environments, making it suitable for
educational institutions and online learning platforms.

1.2. Objectives
1. To Develop a Centralized Platform
Create a unified system for managing Admin, Student, and Tutor activities.
2. To Enhance Learning Experience
Provide an interactive and user-friendly environment for students to access courses
and track progress.
3. To Enable Efficient Course Management
Allow tutors to create, update, and manage courses easily.
4. To Provide Real-Time Analytics
Offer dashboards with charts and reports for monitoring users, enrollments, and
performance.
5. To Improve Decision-Making
Help administrators make informed decisions using data visualization and insights.
6. To Ensure Secure Access
Implement authentication and role-based access control for system security.
7. To Support Scalability
Design the system to handle a growing number of users and courses.
1.3. Overview of the Project

The E-Learning Dashboard System is a web-based application designed to simplify

and enhance the process of online education management. It provides a centralized platform
where administrators, students, and tutors can interact efficiently and perform their respective
tasks.
The system is divided into three main modules: Admin, Student, and Tutor. The
admin module focuses on monitoring system performance through analytics such as user
activity, enrolments, and satisfaction levels. The student module allows learners to browse
courses, enrol, access study materials, and track their progress. The Tutor module enables
instructors to create, manage, and update courses while monitoring student performance.
The project uses modern web technologies such as HTML, CSS, JavaScript, and
React for building a responsive and interactive user interface. Backend technologies and a
centralized database are used to handle data storage, processing, and communication between
modules.
The system also includes data visualization features like charts, graphs, and heat
maps, which help in understanding user behaviour and improving decision-making. It ensures
secure access through authentication and role-based authorization.
Overall, the project aims to provide an efficient, scalable, and user-friendly solution
for managing e-learning environments, improving both teaching and learning experiences.

1.4Module Description:
Admin Dashboard:
 Dashboard Overview:
Provides key analytics including total courses, total tutors, total students, platform
revenue, and average course ratings.
 User Management:
Allows administrators to manage tutor and student accounts, approve course content,
and monitor platform activity.
 Course Management:
Enables monitoring and moderation of all courses on the platform.
 Reports & Analytics:
Offers visual insights through charts, graphs, and tables for student performance,
course engagement, and financial statistics.
 Navigation Panel:
Quick access to Users, Courses, Reports, Payments, and Settings.
 User Interface:
Designed to be intuitive, responsive, and easy to navigate.

Tutor Dashboard:
 Dashboard Overview:
Displays analytics such as total courses created, enrolled students, average ratings,
and revenue generated by the tutor.
 Course Management:
Tutors can create, publish, edit, and manage multiple courses from a single interface.
 Student Tracking:
Enables monitoring of enrolled students, progress tracking, and communication
management.
 Session Management:
Facilitates scheduling and managing interactive sessions with learners.
 Communication Section:
Messaging options for smooth tutor-student interactions.
 Analytics Integration:
Visual representation of student performance and engagement using bar charts, pie
charts, and heatmaps.
 Navigation Panel:
Sidebar for quick access to Courses, Students, Sessions, Messages, Payments, and
Settings.
 User Interface:
Clean and responsive design for usability and smooth experience.

Student Dashboard:
 Dashboard Overview:
Shows enrolled courses, upcoming sessions, course progress, and overall
performance metrics.
 Course Access:
Students can view course content, complete lessons, and download study materials.
 Progress Tracking:
Provides detailed insights into completed modules, assessments, and grades.
 Session Schedule:
Displays upcoming live sessions and enables joining directly from the dashboard.
 Communication Section:
Messaging options to interact with tutors and receive updates.
 Notifications & Alerts:
Keeps students informed about deadlines, new courses, and announcements
 User Interface: Responsive, easy-to-use design for a seamless learning experience.

CHAPTER 2
 LITERATURE SURVEY
The growth of e-learning systems has significantly transformed the education
sector by enabling flexible and accessible learning environments. Various
researchers and platforms have contributed to the advancement of online
education technologies.
Traditional Learning Management Systems (LMS) such as Moodle and
Blackboard provided foundational features like course management, content
delivery, and online assessments. However, these systems lacked advanced
analytics and interactive dashboards for performance tracking [1].
Modern platforms such as Coursera, Udemy, and edX have enhanced the
learning experience by integrating multimedia content, certification programs,
and user-friendly interfaces. These systems improved accessibility and
engagement among learners [2], [3].
Recent studies highlight the importance of learning analytics in e-learning
systems. Dashboards and visualization tools help track student performance,
engagement, and course effectiveness, enabling data-driven decision-making
[4].
Furthermore, the integration of Artificial Intelligence (AI) and Machine
Learning (ML) has enabled personalized learning experiences. These
technologies support adaptive learning paths and recommendation systems
based on user behavior [5].
Despite these advancements, many systems still face limitations such as lack of
real-time insights, limited customization, and insufficient integration between
user roles. The proposed E-Learning Dashboard System addresses these issues
by incorporating analytics, interactive dashboards, and role-based
functionalities.
 CHAPTER 3
SYSTEM CONFIGURATION

System Configuration
The E-Learning Dashboard System requires both hardware and software components to
function efficiently. The configuration ensures smooth performance, scalability, and user
accessibility.

3.1. Hardware Requirements

Minimum Requirements
 Processor: Intel Core i3 or equivalent
 RAM: 4 GB
 Hard Disk: 500 GB
 System Type: 64-bit system
 Display: 1366 × 768 resolution
Recommended Requirements
 Processor: Intel Core i5 or higher
 RAM: 8 GB or more
 Storage: SSD (256 GB or higher)
 Display: Full HD (1920 × 1080)

3.2. Software Requirements

Operating System
 Windows 10 / 11
 macOS / Linux
Frontend Technologies
 HTML5
 CSS3
  JavaScript
 [Link]
Backend Technologies
 [Link] / [Link] (or any server-side technology)
Database
 MySQL / MongoDB
Development Tools
 Visual Studio Code
 Git & GitHub (version control)
 Web Browsers (Chrome, Edge, Firefox)

3.3. System Architecture Requirements

 Client-Server Architecture
 RESTful APIs for communication
 Centralized database system
 Internet connectivity for real-time access

3.4. Software Description

The E-Learning Dashboard System is developed using modern software technologies to
ensure efficiency, scalability, and a user-friendly interface. The software components used in
this project are described below:

1. Frontend Software
The frontend is responsible for the user interface and user experience.
 HTML5: Used to structure web pages
 CSS3: Used for styling and layout design
 JavaScript: Adds interactivity and dynamic behaviour
 [Link]: Used for building reusable UI components and managing application state
2. Backend Software
The backend handles business logic, data processing, and communication between frontend
and database.
 [Link]: Server-side runtime environment
 [Link]: Framework used to build APIs and handle requests

3. Database Software
The database is used to store and manage all application data.
 MySQL: Relational database for structured data
or
 MongoDB: NoSQL database for flexible and scalable data storage

4. Visualization Tools
Used to display data in graphical formats.
 [Link] / Recharts: For creating charts like line graphs, pie charts, and bar charts
 Used in Admin Dashboard for analytics

5. Development Tools
 Visual Studio Code: Code editor for development
 Git & GitHub: Version control and project management
 Web Browsers (Chrome, Edge): Testing and debugging

6. Supporting Technologies
 REST APIs: For communication between frontend and backend
 JSON: Data exchange format
 Responsive Design: Ensures compatibility across devices

3.5. Other Requirements

  Stable Internet connection
 Modern web browser support
 Basic security configurations (authentication & authorization)

3.6 Advantages
1. Centralized Management
 Combines Admin, Student, and Tutor functionalities in one platform
 Easy management of users, courses, and data

2. User-Friendly Interface
 Simple and interactive dashboards
 Easy navigation for all types of users

3. Real-Time Analytics
 Provides live data on users, enrolments, and performance
 Helps in better decision-making for administrators

4. Improved Learning Experience

 Students can track progress and access materials easily
 Interactive features enhance engagement

5. Efficient Course Management

 Tutors can create, update, and manage courses ‫بسهولة‬
 Easy monitoring of student performance

6. Data Visualization
 Use of charts, graphs, and heat maps
 Simplifies understanding of complex data
7. Scalability
  Can handle increasing number of users and courses
 Easily extendable with new features

8. Timesaving
 Reduces manual work for administrators and tutors
 Automates processes like enrolment and progress tracking

9. Accessibility
 Accessible anytime and anywhere through web browsers
 Supports remote learning

10. Modular Design

 Separate modules for Admin, Student, and Tutor
 Easy to maintain and upgrade

3.7. Disadvantages
1. Dependence on Internet
Requires a stable internet connection for proper functioning.
2. Initial Development Cost
Time and effort required to design and develop the system.
3. Security Risks
Sensitive user data may be vulnerable if not properly secured.
4. Technical Issues
Bugs or server downtime may affect system performance.
5. Learning Curve
New users may take time to understand the system features.
6. Limited Personal Interaction
Reduced face-to-face communication compared to traditional learning.

3.8. Existing System

 The existing system in e-learning mainly consists of traditional Learning Management
Systems (LMS) and basic online education platforms. These systems provide fundamental
features such as course delivery, content access, and simple assessments.
Most existing platforms allow students to enroll in courses and access study materials,
while tutors can upload content and manage basic course information. However, these
systems often lack advanced features required for effective learning management and
decision-making.

Features of Existing System

 Basic course management
 Content delivery (videos, documents)
 Simple user registration and login
 Online assessments and quizzes
 Limited communication between users

Limitations of Existing System

1. Lack of Real-Time Analytics:
Existing systems do not provide detailed insights into user activity and performance.
2. Poor Data Visualization:
Minimal use of charts and graphs to represent data.
3. Limited Interaction:
Less communication between students, tutors, and administrators.
4. Inefficient Progress Tracking:
Difficulty in tracking student progress effectively.
5. No Centralized Dashboard:
Absence of a unified interface for managing all activities.
6. Limited Personalization:
No customized learning paths based on student performance.
3.9. TECHNOLOGY
3.9.1 ReactJS

ReactJS is a powerful frontend library used to build dynamic and interactive web
applications. In the Tutor Dashboard project, ReactJS serves as the foundation of the
frontend, allowing the interface to be modular, responsive, and user- friendly. The dashboard
is structured using components, which are the building blocks of the application. Each
component is responsible for rendering a specific section of the dashboard. For example, one
component displays the tutor details, another handles the list of courses, and yet another
manages the sidebar and navigation menu. This component-based architecture ensures that
each part of the dashboard is independent, reusable, and easier to maintain.
ReactJS uses a state-driven approach to manage the information displayed on the
dashboard. The state represents the current status of the application, such as the selected tutor,
active courses, or student progress. When a user interacts with the dashboard—for instance,
by clicking on a tutor or marking a lesson complete—the state updates accordingly, and the
interface reflects the change immediately.
This real-time interactivity improves the user experience and allows tutors to manage
their classes efficiently without unnecessary page reloads. Data is passed between
components using props, which allow parent components to send information to their child
components. For instance, the dashboard can pass a list of tutors to individual components
that display their details.
This ensures a clear flow of information and maintains the modularity of the
application. ReactJS also follows an event-driven programming model, where user actions
trigger specific responses in the interface. Events such as selecting a course, submitting
grades, or navigating between dashboard sections are handled seamlessly, creating an
interactive and responsive user experience.
To enhance performance, ReactJS uses a Virtual DOM, which updates only the parts
of the interface that change, rather than reloading the entire page. This ensures that the Tutor
Dashboard is fast, efficient, and capable of handling multiple interactive components
simultaneously, such as displaying student progress, tutor schedules, and course content.
The dashboard communicates with the backend through API calls, allowing it to fetch
data such as tutor profiles, course lists, and student progress. ReactJS handles these
interactions efficiently, ensuring that the application always displays the most current
information. This approach allows the dashboard to be scalable, responsive, and highly
interactive, providing a smooth experience for tutors managing multiple courses and students.
3.9.2. TypeScript
TypeScript is a superset of JavaScript that adds static typing and other advanced
features to the language. In the Tutor Dashboard project, TypeScript is used alongside
ReactJS to ensure robust, maintainable, and error-free code. It helps developers catch
mistakes during development, rather than at runtime, improving the overall reliability of the
application.
In a Tutor Dashboard, data is constantly flowing between components. Tutors,
courses, and student information need to be displayed accurately and consistently across
multiple sections of the dashboard.
TypeScript allows developers to define types and interfaces for all the data structures
used in the application. For example, a tutor object may include properties such as name,
email, subject, and courses assigned.
Defining these structures ensures that all components receive and handle data
correctly, minimizing errors during updates or modifications. 18 TypeScript also provides
strong typing for component props and state in ReactJS.
This means that when data is passed from a parent component to a child component,
TypeScript verifies that the data is in the correct format, reducing potential bugs and
improving code clarity. For instance, when a tutor’s profile is passed to a component that
displays their details, TypeScript ensures that all required fields, such as name and subject,
are present and properly formatted.
Another important feature of TypeScript is type inference, which allows the system to
automatically detect the type of variables or function returns based on their values. This
feature reduces the need for repetitive code while still providing the benefits of strong typing.
Combined with strict type checking, it helps maintain a consistent data structure throughout
the Tutor Dashboard.
In addition, TypeScript supports object-oriented programming concepts, such as
classes, interfaces, and inheritance. These features allow the dashboard to implement reusable
components, manage complex data models, and extend functionality in a structured way. For
example, different user roles, such as tutors and administrators, can have shared properties
while also maintaining role-specific data and functionality.
TypeScript also improves the scalability of the Tutor Dashboard. As the project grows
and more features are added, such as reporting tools, student analytics, and notifications,
TypeScript helps manage the complexity of the code.
It provides developers with better documentation, autocomplete features, and
intelligent error detection in the development environment, making the project easier to
maintain over time.
3.9.3 JavaScript – Role in ReactJS and Tutor Dashboard

JavaScript is a high-level, interpreted programming language that is widely used for

creating dynamic and interactive web applications. In the context of the Tutor Dashboard
project, JavaScript serves as the core language that powers all frontend 19 functionality.
ReactJS, while a library for building user interfaces, is itself written in JavaScript, which
makes understanding JavaScript essential for developing and maintaining the dashboard.
JavaScript allows the Tutor Dashboard to provide real-time interactivity.
For example, when a tutor selects a course, adds a student, or updates a lesson’s progress,
JavaScript ensures that the interface responds immediately to the user’s actions without
needing to reload the entire page.
This dynamic behaviour improves user experience and makes the dashboard more efficient
and user-friendly. ReactJS is built on top of JavaScript, meaning all React components, state
management, and event handling are written in JavaScript or its superset, TypeScript.

In the Tutor Dashboard, JavaScript enables:

1. Event Handling: JavaScript allows the dashboard to respond to user actions such as
clicks, form submissions, and menu selections. For instance, clicking a “Mark Complete”
button on a student’s course automatically updates the progress and reflects the change
immediately.
2. Dynamic Rendering: JavaScript, through ReactJS, controls what content is
displayed and how it is updated. The dashboard can dynamically show different tutors,
courses, and student information depending on the user’s selections.
3. Data Manipulation: The dashboard fetches data from backend APIs and
manipulates it using JavaScript. This includes filtering courses, sorting students by progress,
or calculating attendance statistics. JavaScript provides the necessary functions to handle
these operations efficiently.
4. Component Communication: In ReactJS, components communicate with each other
using props and state, both of which are JavaScript constructs. This ensures a smooth flow of
data between different parts of the dashboard, like passing student details from a Course List
component to individual Student Card components.
5. Integration with Backend APIs: JavaScript handles asynchronous operations using
promises or async/await. This allows the dashboard to fetch tutor, course, and student data
from the server, update the interface in real-time, and provide a seamless user experience.
20 In the Tutor Dashboard, JavaScript acts as the bridge between the user interface
and the data, enabling ReactJS to manage state, render components, handle events, and
communicate with the backend effectively.
 Without JavaScript, ReactJS would not function, as it relies on JavaScript for its core
logic, interactivity, and dynamic updates.

3.9.4 Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of predefined classes to
style web applications quickly and consistently. Unlike traditional CSS, where developers
write custom styles for each element, Tailwind allows the use of small, reusable utility classes
to control spacing, colors, typography, layout, and responsiveness.
In the Tutor Dashboard project, Tailwind CSS is used to create a clean, responsive, and
visually appealing interface. The dashboard includes various UI elements such as navigation
bars, tutor cards, course lists, progress indicators, and buttons. Tailwind makes it easy to
apply consistent styling across all these elements without writing repetitive CSS code.

1. Utility-First Approach:
Tailwind provides classes like p-4 for padding, bg-blue-500 for background color,
rounded-lg for border radius, and text-lg for font size. These classes allow developers to style
components directly in the markup, which speeds up development and ensures consistency
throughout the dashboard.

2. Responsive Design:
Tailwind makes it easy to build interfaces that work on different screen sizes. For
example, the dashboard sidebar can collapse on smaller screens, and the layout of tutor and
course cards can adjust automatically. Classes such as sm:, md:, and lg: help define how
elements behave on mobile, tablet, and desktop devices.

3. Rapid Prototyping:
With Tailwind, developers can quickly design the dashboard layout and apply visual
styling without switching between CSS files. This allows faster iteration during the internship
project, especially when testing the placement of components such as tutor lists, student
progress tables, or dashboard notifications. 21

4. Customization and Themes:

 Tailwind allows customization of colors, fonts, spacing, and other design elements
through configuration files. In the Tutor Dashboard, a consistent theme can be applied to
buttons, cards, and headers, creating a professional and cohesive appearance.

5. Integration with ReactJS: Tailwind integrates seamlessly with ReactJS

components. Each component in the Tutor Dashboard, such as a TutorCard or CourseList, can
use Tailwind classes directly in the JSX markup. This makes the UI modular, reusable, and
easy to maintain.

6. Improved Maintainability: By using predefined utility classes instead of writing

custom CSS for each element, Tailwind reduces the complexity of styling the dashboard. It
makes the project easier to maintain and scale, especially when adding new features such as
course analytics, student dashboards, or notifications.

Tailwind CSS ensures that the Tutor Dashboard is:

 Visually appealing:
Clean and modern interface for tutors.
 Responsive:
Works well on mobile, tablet, and desktop devices.
 Consistent:
Uniform styling for buttons, cards, tables, and forms.
 Efficient:
Speeds up development and reduces repetitive coding.
 Maintainable:
Easy to update or extend the design as new features are added.

In conclusion, Tailwind CSS complements ReactJS and TypeScript in the Tutor

Dashboard by providing rapid, consistent, and responsive styling. It allows developers to
focus on functionality and interactivity, while ensuring that the dashboard remains visually
professional, user-friendly, and scalable.

CHAPTER 4
 FEASIBILITY REPORT

Feasibility Report
The feasibility study evaluates the practicality and effectiveness of the proposed E-
Learning Dashboard System. It analyses whether the system can be successfully developed
and implemented within the given constraints.

4.1. Technical Feasibility

This determines whether the required technology and technical resources are available.
 The system is developed using widely used technologies such as HTML, CSS,
JavaScript, React, and [Link]
 These technologies are easy to implement and supported by modern browsers
 Developers have access to sufficient tools, libraries, and frameworks
 Integration of charts and dashboards is feasible using tools like [Link]
Conclusion: Technically feasible.

4.2. Economic Feasibility

This evaluates the cost-effectiveness of the project.
 Development tools like VS Code and libraries are mostly free or open-source
 No need for expensive hardware or software
 Maintenance cost is relatively low
 Provides high value by improving learning efficiency
Conclusion: Economically feasible.

4.3. Operational Feasibility

This checks whether the system will be accepted and used effectively by users.
 User-friendly interface for Admin, Student, and Tutor
 Easy navigation and interaction
 Reduces manual work and improves productivity
  Suitable for educational institutions and online learners
Conclusion: Operationally feasible.

4.4. Schedule Feasibility

This determines whether the project can be completed within the given time.
 Modular development approach allows parallel work
 Use of existing frameworks speeds up development
 Clear project planning ensures timely completion
Conclusion: Schedule is achievable.

4.5. Legal Feasibility

This ensures that the system complies with legal and ethical standards.
 No violation of copyright or licensing issues
 Ensures data privacy and user security
 Follows standard IT and cyber laws
Conclusion: Legally feasible.

4.6. Overall Conclusion

The feasibility analysis shows that the E-Learning Dashboard System is practical, cost-
effective, and achievable. It meets technical, economic, operational, and legal requirements,
making it a viable solution for modern e-learning environments.

CHAPTER 5
 SYSTEM ANALYSIS

System Analysis is the process of studying and understanding the requirements,

functionalities, and constraints of the proposed E-Learning Dashboard System. It helps in
identifying user needs and defining system specifications for efficient development.

5.1. Existing System Analysis

In the existing system, many e-learning platforms provide basic functionalities such as
course access and content delivery. However, they have several limitations:
 Limited analytics and reporting features
 Lack of real-time data visualization
 Poor interaction between users (Admin, Student, Tutor)
 Difficulty in tracking student progress effectively
 Limited customization and scalability

5.2. Proposed System Analysis

The proposed system overcomes the limitations of the existing system by introducing
an integrated dashboard with advanced features.

Key Improvements:
 Real-time analytics and visual dashboards
 Role-based access (Admin, Student, Tutor)
 Interactive and user-friendly interface
 Efficient course and user management
 Progress tracking and performance monitoring

5.3. Requirement Analysis

A. Functional Requirements
  User registration and login
 Role-based dashboards
 Course creation and management
 Enrolment and progress tracking
 Analytics and reporting
 Certificate generation

B. Non-Functional Requirements
 Performance: Fast loading and responsiveness
 Security: Authentication and data protection
 Scalability: Ability to handle more users and courses
 Usability: Easy-to-use interface
 Reliability: Consistent system performance

5.4. System Constraints

 Requires internet connectivity
 Limited to web-based access (initial version)
 Dependent on server performance
 Data privacy and security challenges

5.5. System Objectives

 To provide an efficient e-learning management system
 To enhance learning experience through dashboards
 To support decision-making using analytics
 To simplify course management for tutors

CHAPTER 6
SYSTEM DESIGN
System Design
System Design defines the architecture, components, interfaces, and data flow of the
E-Learning Dashboard System. It provides a blueprint for implementing the system
efficiently.

6.1. Architectural Design

The system follows a Client-Server Architecture:
 Client (Frontend):
Built using HTML, CSS, JavaScript, and React to provide an interactive user
interface.
 Server (Backend):
Handles business logic, authentication, and API requests using [Link]/Express.
 Database:
Stores user data, course details, enrolments, and analytics in MySQL/MongoDB.

1. Users Layer
 Includes Admin, Student, and Tutor
 Users interact with the system through the interface
 Each user has different roles and permissions

2. Presentation Layer (Frontend)

 Built using HTML, CSS, JavaScript, [Link]
 Provides features like:
o Login/Authentication

o Dashboard UI

o Course Management

o Assignment Submission

o Chat and Reports

👉 This layer collects user input and displays results.

3. Application Layer (Backend)
 Developed using [Link] / [Link]
 Contains:
o API Gateway

o Business Logic

o Authentication & Authorization

o Validation & Security

👉 It processes user requests and controls system operations.

4. Data Layer (Database)

 Uses MySQL / MongoDB
 Stores:
o User data

o Course details

o Assignments

o Messages

👉 Ensures data storage, retrieval, and integrity.

5. External Services
 Integrated with:
o Zoom / Google Meet → Live classes

o Cloud Storage → File storage

o Payment Gateway → Course payments

o Notification Service → Alerts

o AI Chatbot → Support

👉 Enhances system functionality.

6. System Flow
1. User logs in
 2. Access dashboard
3. Browse or manage courses
4. Attend classes / submit assignments

6.2. System Architecture

6.2. Module Design

A. Admin Module
  Dashboard with analytics (users, enrolments, activity)
 Visualization using charts and reports
 System monitoring and control

B. Student Module
 Course browsing and enrolment
 Progress tracking and learning path
 Access to materials, certificates, and live sessions

C. Tutor Module
 Course creation and management
 Upload content and assignments
 Monitor student performance

6.3. Database Design

Main Entities:
 Users (User ID, Name, Email, Role)
 Courses (Course ID, Title, Description, Price)
 Enrolments (User ID, Course ID, Progress)
 Certificates (User
 ID, Course ID, Completion Status)

Relationships:
 One user can enrol in multiple courses
 One course can have multiple students
 Tutors manage multiple courses 4. ER Model (Conceptual)
 Users ↔ Enrollments ↔ Courses
 Courses → Certificates
 Tutors (Users) → Courses
5. Database Operations
 Insert: Add new users, courses, enrollments
 Update: Modify course details, progress
 Delete: Remove users or courses
 Select: Retrieve data for dashboards and reports

6. Data Integrity and Security

 Use primary and foreign keys
 Apply constraints (NOT NULL, UNIQUE)
 Encrypt passwords
 Regular backups

6.4. User Interface Design

 Responsive dashboard layout
 Cards for statistics (users, enrolments, etc.)
 Navigation menus for easy access
 Charts and graphs for analytics
 Clean and user-friendly design

6.5. Data Flow Design

 User inputs (login, enrol, create course)
 Data sent to backend via APIs
 Backend processes and stores data
 Output displayed through dashboards and reports

6.6. Security Design

 User authentication (login system)
  Role-based access control
 Data validation and encryption
 Secure API communication

6.6.1. Authentication Mechanism

 Users must log in using username and password
 Secure authentication ensures only authorized users access the system
 Optional implementation of Two-Factor Authentication (2FA) for added security

6.6.2. Authorization (Access Control)

 Role-based access control (RBAC) is implemented
 Different access levels:
o Admin: Full system control

o Tutor: Manage courses and students

o Student: Access learning content only

 Prevents unauthorized access to sensitive data

6.6.3. Data Security

 Sensitive data (passwords) stored using encryption/hashing (e.g., bcrypt)
 Secure storage of user and course data in database
 Data validation to prevent malicious inputs

6.6.4. Secure Communication

 Use of HTTPS protocol to encrypt data transfer
 Protects data from interception during communication

6.6.5. Input Validation

 Validate all user inputs (forms, login fields, course data)
  Prevent attacks such as:
o SQL Injection

o Cross-Site Scripting (XSS)

6.6.6. Session Management

 Use secure session handling techniques
 Automatic session timeout after inactivity
 Logout functionality to prevent misuse

6.7 Flow Explanation

The flow of the E-Learning Dashboard System describes the sequence of operations
performed by different users and the interaction between system components. It ensures
smooth communication between the user interface, backend services, and database.
Initially, the user, who may be an administrator, student, or tutor, accesses the login
page and enters valid credentials. The authentication module verifies the login details and
grants access based on the assigned role. After successful authentication, the user is
redirected to the respective dashboard interface.
Once logged in, the user can perform role-specific operations. Students can browse
available courses, enroll in courses, attend live sessions, submit assignments, and monitor
their learning progress. Tutors can create and manage courses, upload learning materials,
assign tasks, evaluate submissions, and monitor student performance. Administrators can
manage users, supervise course activities, and analyze overall system performance.
All user requests are processed by the backend application layer, where business logic
and validation mechanisms are executed. The backend communicates with the database layer
to store and retrieve data such as user profiles, course information, enrollments, assignments,
grades, and messages.
The system also integrates external services such as video conferencing tools for live
classes, cloud storage for file management, and notification services for alerts and reminders.
After course completion, certificates are generated and provided to students.
Overall, the system flow ensures secure, reliable, and efficient operation of the E-
Learning Dashboard System while enhancing the learning and management experience for all
users.

Step 1: User Login

  Admin, Student, or Tutor enters username and password.
 System verifies credentials and grants access.

Step 2: Dashboard Access

 After login, the user is redirected to their respective dashboard.
 Dashboard displays options based on user role.

Step 3: Course Operations

 Student: Browse and enrol in courses.
 Tutor: Create, edit, and manage courses.
 Admin: Monitor all courses and users.

Step 4: Learning Activities

 Students access lessons, attend live classes, and complete assignments.
 Tutors upload materials, assignments, and conduct sessions.

Step 5: Data Processing

 Backend processes requests and communicates with the database.
 Data such as enrolments, marks, and progress are stored.

Step 6: Reports and Analytics

 Admin views charts, reports, and user statistics.
 Tutors monitor student performance.
 Students track their own progress.

CHAPTER 7
SYSTEM IMPLEMENTATION
 The implementation of the E-Learning Dashboard System is carried
out using modern web technologies to ensure efficiency, scalability, and
user-friendly interaction. The system is developed based on a client-server
architecture, where the frontend, backend, and database components
work together to provide seamless functionality.

The frontend of the system is developed using HTML, CSS, JavaScript, and [Link].
React enables the creation of reusable components and dynamic user interfaces for Admin,
Student, and Tutor dashboards. The interface is designed to be responsive and interactive,
providing features such as course browsing, progress tracking, and data visualization through
charts and graphs.
The backend is implemented using [Link] and [Link], which handle the business
logic, API requests, and communication between the frontend and the database. The backend
is responsible for user authentication, course management, enrolment processing, and
analytics generation.
A centralized database system, such as MySQL or MongoDB, is used to store and
manage data related to users, courses, enrolments, and certificates. Proper data structures and
relationships are maintained to ensure data integrity and efficient retrieval.
System Implementation refers to the process of converting the system design into a
working application. The E-Learning Dashboard System is implemented using modern web
technologies to ensure efficiency, scalability, and a user-friendly experience.

7.1. Development Environment

The system is developed using the following tools and technologies:
 Frontend: HTML, CSS, JavaScript, [Link]
 Backend: [Link] / [Link]
 Database: MySQL / MongoDB
 Tools: Visual Studio Code, GitHub
 Browser: Google Chrome / Edge

7.2. Frontend Implementation

The frontend is designed using [Link] with a component-based architecture.
Key Features:
 Interactive dashboards for Admin, Student, and Tutor
 Responsive UI using CSS and modern frameworks
 Dynamic routing and navigation
 Real-time data display using charts and graphs
Example:
if([Link]==='dashboard')return<Dashboard/>
if([Link]==='catalo')return<Coruscation/>
if([Link]==='course'){
costcourse=[Link](c=>[Link]===[Link])
costprogress=enrolments[[Link]]?.progress||0

return
<div>
<h1>{[Link]}</h1>
<p>Progress:{progress}%</p>
</div>
)
}

7.3. Backend Implementation

The backend handles application logic and data processing.

Key Functions:
 User authentication and authorization
 API development for communication
 Course and enrolment management
 Data processing for analytics

7.4. Database Implementation

A centralized database is used to store and manage data.
Tables/Collections:
 Users
 Courses
 Enrolments
 Certificates

Functions:
 Store user and course details
 Track progress and activities
 Retrieve data for dashboards

7.5. Integration
 Frontend communicates with backend using REST APIs
 Backend interacts with the database
 Data is dynamically updated and displayed in dashboards

7.6. Testing During Implementation

 Unit testing for individual components
 Integration testing for modules
 Debugging and error handling

7.7. Deployment
 Application is hosted on a web server
 Accessible through web browsers
 Supports multiple users simultaneously

CHAPTER 8
 SYSTEM TESTING

System testing is an essential phase in the software development life cycle used to
evaluate the E-Learning Dashboard System as a complete and integrated application. The
purpose of system testing is to verify that all modules operate correctly and satisfy both
functional and non-functional requirements.
Initially, unit testing is performed on individual modules such as user authentication,
course management, enrollment processing, and progress tracking. Each component is tested
separately to identify coding errors and ensure expected outputs.
Following unit testing, integration testing is conducted to verify the interaction
between connected modules. For instance, when a student enrolls in a course, the
corresponding data should be updated in the student dashboard, tutor records, and
administrative reports.
The complete application is then evaluated through system testing, where all modules
are tested together in a real-time environment. This includes validation of dashboard
functions, navigation, report generation, data updates, and overall workflow.
Performance testing is carried out to analyze system speed, responsiveness, and
stability under different workloads. The application must maintain efficiency when accessed
by multiple users simultaneously.
Security testing is also performed to verify authentication, authorization, and data
protection mechanisms. It ensures protection against unauthorized access, invalid inputs, and
common cyber threats.
Finally, User Acceptance Testing (UAT) is conducted by end-users such as
administrators, tutors, and students to confirm that the system fulfills user expectations and
project objectives.
The final testing results show that the E-Learning Dashboard System is reliable,
secure, efficient, and ready for deployment in a real-world educational environment.

8.1. Objectives of Testing

  Verify Complete System Functionality
Ensure that the entire system works as expected according to requirements.

 Identify and Fix Errors

Detect bugs, defects, and inconsistencies in the system.

 Ensure Integration of Modules

Confirm that all modules (Admin, Student, Tutor) work together smoothly.

 Validate System Performance

Check system speed, responsiveness, and stability under different conditions.

 Ensure Security
Verify authentication, authorization, and data protection mechanisms.

 Check User Interface and Usability

Ensure the system is user-friendly and easy to navigate.

 Confirm Requirement Compliance

Validate that the system meets both functional and non-functional
requirements.

8.2. Types of Testing

A. Unit Testing
 Tests individual components or modules
 Example: Login function, course creation, progress calculation

B. Integration Testing
 Tests interaction between modules
 Example: Student enrolment updating Admin analytics

C. System Testing
  Tests the complete system as a whole
 Ensures all features work together properly

D. User Acceptance Testing (UAT)

 Conducted by end-users (Admin, Students, Tutors)
 Ensures the system meets user requirements

E. Performance Testing
 Checks system speed and responsiveness
 Ensures smooth performance with multiple users

F. Security Testing
 Verifies authentication and authorization
 Ensures data privacy and protection

8.3. Test Cases

Test Case Input Expected Output Result

Login Valid credentials Dashboard displayed Pass

Login Invalid credentials Error message Pass

Course Enrolment Select course Enrolment success Pass

Progress Tracking Complete lessons Updated percentage Pass

Course Creation (Tutor) Enter course details Course added Pass

8.4. Functional Testing

 Functional testing is performed to verify that the E-Learning Dashboard
System operates according to the specified functional requirements. It focuses
on validating each feature of the system by providing inputs and comparing the
actual results with the expected outputs.
In the proposed system, functional testing begins with the login module,
where valid credentials should allow user access and invalid credentials should
display an error message. This ensures proper authentication behaviour.
The registration module is tested to confirm that new users can create
accounts successfully and that mandatory fields are properly validated.
Duplicate or incomplete entries should be rejected.
The course management module is tested to verify that tutors can create,
update, and delete courses correctly. Course details entered by tutors must be
stored accurately in the database and displayed to students.
The enrolment module ensures that students can browse available courses
and enrol successfully. After enrolment, the selected course should appear in the
student dashboard.
The progress tracking module is tested to confirm that course completion
percentages, quiz scores, and learning activities are updated correctly.
The analytics and reporting module is validated to ensure that
administrators can view user statistics, enrolments, charts, and performance
reports without errors.
Functional testing also covers certificate generation, where certificates
should be issued automatically after successful course completion.
The results of functional testing indicate that all major system features
perform as expected, confirming that the E-Learning Dashboard System
satisfies its functional requirements and provides a reliable user experience.

8.5Real-Time Data Acquisition

 Real-time data acquisition refers to the process of collecting,
measuring, and processing data instantly as events occur. It enables
systems to capture live information from various sources such as sensors,
user activities, devices, and databases, and use that information for
immediate analysis and decision-making.

In the E-Learning Dashboard System, real-time data acquisition plays an important

role in monitoring user activities and system performance. Data such as student logins, course
enrollments, quiz scores, attendance, and progress updates are captured instantly and
displayed on dashboards.
The process begins when users interact with the system through actions such as
enrolling in a course, attending live sessions, or submitting assignments. These activities are
sent to the backend server through APIs, where the data is validated and stored in the
database.
The collected data is then processed and visualized using charts, graphs, and reports
in real time. For example, the admin dashboard can show the number of active learners, new
enrollments, and user engagement levels instantly. Tutors can monitor student progress, while
students can track their own achievements.
Real-time data acquisition improves decision-making, enhances responsiveness, and
provides accurate system insights. It also helps in identifying trends, detecting issues quickly,
and improving the overall user experience.
In conclusion, real-time data acquisition is an essential feature of modern web
applications, enabling efficient monitoring, faster updates, and better management of the E-
Learning Dashboard System.

8.6Web Dashboard Update

Web dashboard update refers to the continuous refreshing and
synchronization of dashboard data on a web application. It ensures that
users can view the latest information, statistics, and reports without
manual page refresh.

In the E-Learning Dashboard System, dashboard updates are important for displaying
current data related to users, enrollments, course progress, and system performance.
Whenever a student enrolls in a course, completes a lesson, or submits an assignment, the
dashboard reflects these changes immediately.
The update process begins when user actions generate new data. This data is sent to
the backend server through APIs, where it is processed and stored in the database. After
processing, the latest information is returned to the frontend interface.
 Modern techniques such as AJAX, REST APIs, WebSockets, and React state
management are used to update dashboard components dynamically. These technologies
allow charts, cards, tables, and notifications to refresh automatically without reloading the
entire webpage.
For example, the Admin Dashboard can instantly show updated active learners, new
enrollments, and satisfaction ratings. The Student Dashboard can display recent progress,
completed courses, and notifications. The Tutor Dashboard can update student submissions,
attendance, and course statistics.
Web dashboard updates improve user experience by providing accurate and timely
information. They also support better monitoring, faster decision-making, and efficient
system management.
In conclusion, web dashboard updates are essential for maintaining an interactive,
responsive, and real-time E-Learning Dashboard System.

8.7. Testing Tools

 Browser Developer Tools (Chrome DevTools)
 Manual testing
 Debugging tools in VS Code

8.8. Result of Testing

 All modules function correctly
 System is stable and user-friendly
 No critical errors found
 CHAPTER 9
CONCLUSION
The E-Learning Dashboard System has been successfully designed and implemented
as a comprehensive platform for managing online education. By integrating Admin, Student,
and Tutor modules, the system provides an efficient and centralized solution for handling
courses, users, and performance analytics.
The Admin Dashboard enables effective monitoring through real-time data visualization,
helping in better decision-making. The Student Dashboard enhances the learning experience
by offering easy access to courses, progress tracking, and interactive features. The Tutor
Dashboard simplifies course creation and management while providing valuable insights into
student engagement and course performance.
The system is developed using modern web technologies, ensuring responsiveness,
scalability, and ease of use. Its modular architecture allows for future enhancements and
smooth integration of advanced features.
Using React, TypeScript, and Tailwind CSS, the platform was developed with a responsive,
user-friendly, and modern interface. This project improved my skills in frontend
development, UI design, and project management, and gave me a better understanding of
how technology can improve online education.
Overall, the project meets its objectives by improving the efficiency of e-learning systems,
enhancing user interaction, and supporting data-driven decision-making. It serves as a strong
foundation for developing more advanced and intelligent online learning platforms in the
future
 CHAPTER 10
FUTURE ENHANCEMENT

The E-Learning Dashboard System provides a robust foundation for online education;
however, several enhancements can be incorporated in the future to improve system
functionality, scalability, and user experience.
One of the major enhancements includes the integration of Artificial Intelligence
(AI) and Machine Learning (ML) techniques to provide personalized course
recommendations and adaptive learning paths based on user behaviour and performance. This
will enhance the overall learning experience.
The development of mobile applications for Android and iOS platforms can further
improve accessibility, allowing users to access the system anytime and anywhere.
Additionally, implementing offline learning capabilities will enable users to download
course materials and access them without an internet connection.
Advanced data analytics and predictive modelling can be incorporated to forecast
student performance and identify learning patterns. This will assist administrators and tutors
in making data-driven decisions.
The system can also be enhanced by adding real-time communication features such
as chat systems, discussion forums, and live interactive sessions to improve collaboration
between students and tutors.
From a security perspective, implementing advanced authentication mechanisms
such as two-factor authentication (2FA) and improving data encryption techniques will
strengthen system security.
Furthermore, integrating the system with cloud platforms like AWS, Azure, or
Google Cloud can improve scalability, reliability, and storage capabilities. Support for multi-
language interfaces can also be added to make the system accessible to a wider audience.
In conclusion, these future enhancements will transform the system into a more
intelligent, secure, and scalable e-learning platform, capable of meeting the evolving needs of
modern education.
.
10.1. AI-Based Personalization
 Implement Artificial Intelligence to recommend courses based on user interests and
learning history
 Provide adaptive learning paths tailored to individual performance

10.2. Mobile Application Development

 Develop Android and iOS mobile apps
 Enable learning to on-the-go with better accessibility

10.3. Advanced Analytics

 Introduce predictive analytics to forecast student performance
 Provide detailed reports and insights using machine learning

10.4. Live Interactive Features

 Add real-time chat and discussion forums
 Enhance live classes with interactive tools like polls and Q&A sessions

10.5. Gamification
 Introduce badges, leaderboards, and rewards
 Increase student engagement and motivation

10.6. Enhanced Security

 Implement advanced security features like two-factor authentication (2FA)
 Improve data encryption and privacy protection

10.7. Multi-language Support

 Support multiple languages for wider accessibility
 Help users from different regions learn easily
10.8. Cloud Integration
 Deploy the system on cloud platforms (AWS, Azure, Google Cloud)
 Improve scalability, performance, and data storage

10.9. Offline Learning Mode

 Allow users to download course content
 Enable access without internet connectivity
10.10. Integration with External Tools
 Integrate with third-party tools like Zoom, Google Meet, and payment gateways
 Enhance functionality and user convenience
 CHAPTER 11
APPENDIX
The appendix contains supplementary information that supports the development and
understanding of the E-Learning Dashboard System. It includes sample code snippets,
additional details, and supporting materials used in the project.
A. Sample Code Snippets
11.1. React Navigation Logic
if ([Link] === 'dashboard') return <Dashboard/>
if ([Link] === 'catalo') return <Coruscation/>

if ([Link] === 'course') {

cost course = courses. Find (c => [Link] === view. courseId)
cost progress = enrolments[[Link]]?. progress || 0

return (
<div>
<h1>{course. Title}</h1>
<p>Progress: {progress}%</p>
</div>
)
}
11.2. Course Data Structure
cost courses = [
{
id: "html-CSS-essentials",
title: "HTML & CSS Essentials",
students: 156,
duration: "8 hours",
rating: 4.8
}
]
11.3. Basic Login Pseudocode
BEGIN
INPUT username, password
IF valid THEN
REDIRECT to dashboard
ELSE
 SHOW error message
END
B. Tools and Technologies Used
 HTML, CSS, JavaScript
 [Link]
 [Link] / [Link]
 MySQL / MongoDB
 [Link]
C. Screenshots (Reference)
 Admin Dashboard with analytics
 Student Dashboard with course progress
 Tutor Dashboard with course management
D. Abbreviations
 UI – User Interface
 API – Application Programming Interface
 DB – Database
 UAT – User Acceptance Testing
E. Additional Notes
 The system is designed using a modular approach
 Data is stored in a centralized database
 Dashboards provide real-time insights
11.4. SOURCE CODE
Admin Main:
!-- Main Content -->
<main class="flex-1 overflow-y-auto p-4 md:p-8">
<div id="dashboard-content" class="space-y-8">
<!-- Data Loading Spinner -->
<div id="loading-spinner" class="flex justify-centre items-centre py-20">
<div class="spinner"></div>
</div>
<!-- 1. User & Enrolment Analytics Section -->
<section id="analytics" class="dashboard-section hidden">
<h1 class="text-3xl font-bold mb-6">User & Enrolment Analytics</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Total Users Card -->
<a her="[Link]" class="block w-full h-full">
<div class="card bg-white p-6 rounded-2xl shadow-md border bordergray-200">
<p class="text-sm font-semibold text-gray-500 mb-1">Total
Users</p>
<h2 id="total-users" class="text-3xl font-bold text-gray-900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">+1.2%
this month</span>
</div>
</a>
<!-- Active Users Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Active
Learners</p>
<h2 id="active-learners" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-gray-500 font-medium text-sm mt-2 block">vs 15,500
last month</span>
</div>
<!-- Course Enrolments Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Total
Enrolments</p>
<h2 id="total-enrolments" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">+8.5%
this month</span>
</div>
<!-- Avg Completion Rate Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Learner
Satisfaction</p>
<h2 id="satisfaction-rating" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">Based
on 12k reviews</span>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Enrolment Trend Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<h2 class="text-xl font-semibold mb-4">New User Enrolments (Last 6
Months )</h2>
<div class="chart-container" style="height: 300px;">
<canvas id="enrolment Chart"></canvas>
</div>
</div>
<!-- User Role Distribution Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<h2 class="text-xl font-semibold mb-4">User Role Distribution</h2>
<div class="chart-container" style="height: 300px;">
<canvas id="roles Chart"></canvas>
</div>
</div>
<!-- User Journey Funnel Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200 lg:col-span-
2">
<h2 class="text-xl font-semibold mb-4">User Acquisition Funnel</h2>
<div class="chart-container" style="height: 400px;">
<div class="controls">
<select id="time Range">
<option value="This Week" selected>This Week</option>
<option value="This Month">This Month</option>
<option value="This year">This year</option>
</select>
</div>
<canvas id="funnel Chart"></canvas>
</div>
</div>
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200 lg:col-span-
2">
<h2 class="text-xl font-semibold mb-4">Activity Heat Map</h2>
<!-- 1. User & Enrolment Analytics Section -->
<section id="analytics" class="dashboard-section hidden">
<h1 class="text-3xl font-bold mb-6">User & Enrolment Analytics</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Total Users Card -->
<a her="[Link]" class="block w-full h-full">
<div class="card bg-white p-6 rounded-2xl shadow-md border bordergray-200">
<p class="text-sm font-semibold text-gray-500 mb-1">Total
Users</p>
<h2 id="total-users" class="text-3xl font-bold text-gray-900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">+1.2%
this month</span>
</div>
</a>
<!-- Active Users Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Active
Learners</p>
<h2 id="active-learners" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-gray-500 font-medium text-sm mt-2 block">vs 15,500
last month</span>
</div>
<!-- Course Enrolments Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Total
Enrolments</p>
<h2 id="total-enrolments" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">+8.5%
this month</span>
</div>
<!-- Avg Completion Rate Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Learner
Satisfaction</p>
<h2 id="satisfaction-rating" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">Based
on 12k reviews</span>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Enrolment Trend Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<h2 class="text-xl font-semibold mb-4">New User Enrolments (Last 6
Months )</h2>
<div class="chart-container" style="height: 300px;">
<canvas id="enrolment Chart"></canvas>
</div>
</div>
<!-- User Role Distribution Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<h2 class="text-xl font-semibold mb-4">User Role Distribution</h2>
<div class="chart-container" style="height: 300px;">
<canvas id="roles Chart"></canvas>
</div>
</div>
<!-- User Journey Funnel Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200 lg:col-span-
2">
<h2 class="text-xl font-semibold mb-4">User Acquisition Funnel</h2>
<div class="chart-container" style="height: 400px;">
<div class="controls">
<select id="time Range">
<option value="This Week" selected>This Week</option>
<option value="This Month">This Month</option>
<option value="This year">This year</option>
</select>
</div>
<canvas id="funnel Chart"></canvas>
</div>
</div>

<p class="subtitle">Visual representation of when students are most

active this week</p>
<div class="controls">
<select id="time Range">
<option value="This Week" selected>This Week</option>
<option value="This Month">This Month</option>
<option value="This year">This year</option>
Student Dashboard:
import React from 'react'
import App Provider, { use App } from './context/App Context'
import Header from './components/Header'
import Dashboard from './components/Dashboard'
import Course Cata log from './components/Course Cata log'
import Course Chain from './components/Course Chain'
import Theme Swatches from './components/Theme Swatches'
import Practice Hub from './components/Practice Hub'
import Profile Page from './components/Profile'
import Course Page from './components/course page'
import Course Watcher from './components/Course Watcher'
import Settings from './components/Settings'
import Certificates from './components/Certificates'
import Live Session from './components/Live'
import Internship List from './components/Internship List'
import Internship Details from './components/Internship Details'
import Applications from './components/Applications'
function Screen(){
<!-- 1. User & Enrolment Analytics Section -->
<section id="analytics" class="dashboard-section hidden">
<h1 class="text-3xl font-bold mb-6">User & Enrolment Analytics</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Total Users Card -->
<a her="[Link]" class="block w-full h-full">
<div class="card bg-white p-6 rounded-2xl shadow-md border bordergray-200">
<p class="text-sm font-semibold text-gray-500 mb-1">Total
Users</p>
<h2 id="total-users" class="text-3xl font-bold text-gray-900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">+1.2%
this month</span>
</div>
</a>
<!-- Active Users Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Active
Learners</p>
<h2 id="active-learners" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-gray-500 font-medium text-sm mt-2 block">vs 15,500
last month</span>
</div>
<!-- Course Enrolments Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Total
Enrolments</p>
<h2 id="total-enrolments" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">+8.5%
this month</span>
</div>
id: "modern-JavaScript",
title: "Modern JavaScript Mastery",
description:
"Deep dive into ES6+ features, async programming, and modern JavaScript patterns.
Build dynamic web applications.",
thumbnail: "/[Link]",
students: 203,
total Lessons: 32,
completed Lessons: 28,
duration: "12 hours",
rating: 4.9,
reviews: 124,
status: "published",
category: "Programming",
price: 99,
last Updated: "2024-01-20",
},
{
id: "react-beginners",
title: "React for Beginners",
description:
"Learn React from the ground up. Build interactive user interfaces with components,
hooks, and state management.",
thumbnail: "/[Link]",
students: 89,
total Lessons: 20,
completed Lessons: 15,
duration: "10 hours",
rating: 4.7,
reviews: 67,
status: "draft",
category: "Frontend",
price: 89,
last Updated: "2024-01-25",
},
{
id: "python-data-science",
title: "Python for Data Science",
description:
"Explore data analysis, visualization, and machine learning with Python. Use pandas,
matplotlib, and scikit-learn.",
thumbnail: "/[Link]",
students: 134,
total Lessons: 28,
completed Lessons: 28,
duration: "15 hours",
rating: 4.6,
reviews: 98,
status: "published",
category: "Data Science",
price: 129,
last Updated: "2024-01-10",
},
{/*
🔹 Create New Course Dropdown with JS redirect */}

<Dropdown Menu>
<Dropdown Menu Trigger as Child>
<Button class Name="bg-teal-600 hover:bg-teal-700 text-white">
<Plus class Name="h-4 w-4 mr-2" />
Create New
</Button>
</Dropdown Menu Trigger>
<Dropdown Menu Content align="end" class Name="w-44">
{/* ✅ Go to static HTML file inside /public */}
<Dropdown Menu Item on Click={() => router. Push("/new course/[Link]")}>
Course
</Dropdown Menu Item>3
{/* ✅ Go to [Link] page (e.g., /ihtomassignments/teacher) */}

<Dropdown Menu Item on Click={() => router. Push("/teacher")}>

Assignments
</Dropdown Menu Item>
</Dropdown Menu Content>
</Dropdown Menu>
</div>
<!-- Avg Completion Rate Card -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<p class="text-sm font-semibold text-gray-500 mb-1">Learner
Satisfaction</p>
<h2 id="satisfaction-rating" class="text-3xl font-bold text-gray900">...</h2>
<span class="text-green-500 font-medium text-sm mt-2 block">Based
on 12k reviews</span>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Enrolment Trend Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<h2 class="text-xl font-semibold mb-4">New User Enrolments (Last 6
Months )</h2>
<div class="chart-container" style="height: 300px;">
<canvas id="enrolment Chart"></canvas>
</div>
</div>
<!-- User Role Distribution Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200">
<h2 class="text-xl font-semibold mb-4">User Role Distribution</h2>
<div class="chart-container" style="height: 300px;">
<canvas id="roles Chart"></canvas>
</div>
</div>
<!-- User Journey Funnel Chart -->
<div class="card bg-white p-6 rounded-2xl shadow-md border border-gray200 lg:col-span-
2">
<h2 class="text-xl font-semibold mb-4">User Acquisition Funnel</h2>
<div class="chart-container" style="height: 400px;">
<div class="controls">
<select id="time Range">
<option value="This Week" selected>This Week</option>
<option value="This Month">This Month</option>
<option value="This year">This year</option>
</select>
</div>
<canvas id="funnel Chart"></canvas>
</div>
</div>
cost { view, navigate, courses, enrolments, profile, set Profile, certificates
} = use App()
if ([Link]==='dashboard') return <Dashboard/>
if ([Link]==='Cata log') return <Course Cata log focus={view. Focus}/>
if ([Link]==='course'){
cost course = courses. Find(c=>[Link]===view. Course Id)
cost e = enrolments[[Link]] || { progress:0 }
cost pct = Math. Round((progress/([Link]-1))*100)
return (
<div class Name="container">
<div class Name="row" style={{justify Content:'Space between',align Items:'centre'}}>
<div class Name="h1">{course. Title}</div>
<button class Name="btn" on Click={()=>navigate('catalo')}>Back to
Catalo</button>
</div>
<div class Name="spacer"/>
<div class Name="card">
<div class Name="card-header">
<div class Name="row" style={{gap:12,alignItems:'center'}}>
<img src={course. Image} alt=""
style={{width:56,height:56,borderRadius:12,objectFit:'cover'}}/>
<div class Name="col">
<div class Name="h2">Interactive Path</div>
<div class Name="small muted">Progress:
{is Nan(pct)?0:pct}%</div>
</div>
</div>
<div class Name="row" style={{gap:8}}>
<span class Name="tag">Reward:
{course .coin Reward||50}�</span>
<a class Name="btn ghost"
href={[Link] target="_blank"
rel="no referrer">Course Details</a>
</div>
</div>
<div class Name="card-body">
<Course course={course}/>
</div>
</div>
</div>
)
}
Tutor Dashboard:
cost courses = [
{
id: "html-CSS-essentials",
title: "HTML & CSS Essentials",
description:
"Master the fundamentals of web development with HTML and CSS. Learn to create
beautiful, responsive websites from scratch.",
thumbnail: "/[Link]",
students: 156,
total Lessons: 24,
completed Lessons: 24,
duration: "8 hours",
rating: 4.8,
reviews: 89,
status: "published",
category: "Web Development",
price: 79,
last Updated: "2024-01-15",
},
{
id: "modern-JavaScript",
title: "Modern JavaScript Mastery",
description:
"Deep dive into ES6+ features, async programming, and modern JavaScript patterns.
Build dynamic web applications.",
thumbnail: "/[Link]",
students: 203,
total Lessons: 32,
completed Lessons: 28,
duration: "12 hours",
rating: 4.9,
reviews: 124,
status: "published",
category: "Programming",
price: 99,
last Updated: "2024-01-20",
},
{
id: "react-beginners",
title: "React for Beginners",
description:
"Learn React from the ground up. Build interactive user interfaces with components,
hooks, and state management.",
thumbnail: "/[Link]",
students: 89,
total Lessons: 20,
completed Lessons: 15,
duration: "10 hours",
rating: 4.7,
reviews: 67,
status: "draft",
category: "Frontend",
price: 89,
last Updated: "2024-01-25",
},
{
id: "python-data-science",
title: "Python for Data Science",
description:
"Explore data analysis, visualization, and machine learning with Python. Use pandas,
matplotlib, and scikit-learn.",
thumbnail: "/[Link]",
students: 134,
total Lessons: 28,
completed Lessons: 28,
duration: "15 hours",
rating: 4.6,
reviews: 98,
status: "published",
category: "Data Science",
price: 129,
last Updated: "2024-01-10",
},
{/*
🔹 Create New Course Dropdown with JS redirect */}

<Dropdown Menu>
<Dropdown Menu Trigger as Child>
<Button class Name="bg-teal-600 hover:bg-teal-700 text-white">
<Plus class Name="h-4 w-4 mr-2" />
Create New
</Button>
</Dropdown Menu Trigger>
<Dropdown Menu Content align="end" class Name="w-44">
{/* ✅ Go to static HTML file inside /public */}

<Dropdown Menu Item on Click={() => router. Push("/new course/[Link]")}>

Course
</Dropdown Menu Item>3
{/* ✅ Go to [Link] page (e.g., /ihtomassignments/teacher) */}

<Dropdown Menu Item on Click={() => router. Push("/teacher")}>

Assignments
</Dropdown Menu Item>
</Dropdown Menu Content>
</Dropdown Menu>
</div>
{/* Stats Cards */}
<div class Name="grid grid-cols-1 md:grid-cols-4 gap-6">
<Card>
<Card Header class Name="flex flex-row items-centre justify-between space-y-0pb-2">
<Card Title class Name="text-sm font-medium">Total Courses</Card Title>
<Book Open class Name="h-4 w-4 text-muted-foreground" />
</Card Header>
<Card Content>
<div class Name="text-2xl font-bold">{courses. Length}</div>
<p class Name="text-xs text-muted-foreground">{published Courses. Length}
published</p>
</Card Content>

Screenshot
 References

[1] Moodle, “Moodle Learning Platform,” [Online]. Available: [Link]

[2] Coursera Inc., “Coursera Online Courses,” [Online]. Available: [Link]
[3] Udemy Inc., “Udemy Learning Platform,” [Online]. Available: [Link]
[4] edX, “edX Online Learning,” [Online]. Available: [Link]
[5] G. Siemens, “Learning Analytics: The Emergence of a Discipline,” American Behavioral
Scientist, vol. 57, no. 10, pp. 1380–1400, 2013.
[6] R. S. J. d. Baker and K. Yacef, “The State of Educational Data Mining in 2009,” Journal
of Educational Data Mining, vol. 1, no. 1, pp. 3–17, 2009.
[7] A. Al-Fraihat et al., “Evaluating E-learning systems success,” Computers in Human
Behavior, vol. 102, pp. 67–86, 2020.
[8] S. K. D’Mello and A. Graesser, “AutoTutor and Intelligent Tutoring Systems,” ACM
Transactions on Interactive Intelligent Systems, vol. 2, no. 4, pp. 1–39, 2012.
[9] React Documentation, “React Official Docs,” [Online]. Available: [Link]
[10] [Link] Foundation, “[Link] Documentation,” [Online]. Available: [Link]