-
Overall Course Rating
-
-
-
-
-
- {stats.courseRating?.averageRating.toFixed(1) || "N/A"}
-
-
Overall Rating
-
-
-
-
+
+
+
+
+
+
+
+ {/* NEW: Two Column Charts Grid */}
+
+ {/* Category Distribution */}
+
+
+
+
Category Distribution
+
+
+
+ {stats?.categoryDistribution?.length > 0 ? (
+
+
-
- {stats.courseRating?.breakdown.map((rating) => (
-
-
- {[...Array(5)].map((_, i) => (
-
- ))}
-
-
-
- {rating.percentage}%
-
-
- ))}
+ ) : (
+
+ No category data available
+ )}
+
+
+
+ {/* Course Rating Distribution */}
+
+
+
+
Course Rating Distribution
+
+ Avg: {stats?.courseRating?.averageRating || '0.00'} ⭐
+
+
+
+
+ {stats?.courseRating?.distribution?.length > 0 ? (
+
+
+
+ ) : (
+
+ No rating data available
+
+ )}
+
+
+
+
+ {/* NEW: Two Column Charts Grid - Course Status & Top Courses */}
+
+ {/* Course Status */}
+
+
+ {/* Top Selling Courses */}
+
+
+
+
Top 5 Selling Courses
+
+
+
-
);
};
diff --git a/FrontEnd/src/components/InstructorDashboard/InstructorDashboard.jsx b/FrontEnd/src/components/InstructorDashboard/InstructorDashboard.jsx
index 572b20b..41af9d3 100644
--- a/FrontEnd/src/components/InstructorDashboard/InstructorDashboard.jsx
+++ b/FrontEnd/src/components/InstructorDashboard/InstructorDashboard.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
import { Line, Doughnut } from "react-chartjs-2";
import {
Chart as ChartJS,
@@ -14,6 +14,9 @@ import {
} from "chart.js";
import { getInstructorDashboardStats } from "../../services/dashboardService";
import { formatVND, formatVNDCompact } from "../../utils/formatCurrency";
+import jsPDF from "jspdf";
+import html2canvas from "html2canvas";
+import * as XLSX from "xlsx";
import {
FaDollarSign,
FaUsers,
@@ -42,6 +45,8 @@ const InstructorDashboard = () => {
const [stats, setStats] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
+ const [exporting, setExporting] = useState(false);
+ const dashboardRef = useRef(null);
// Revenue Chart specific state
const [revenueData, setRevenueData] = useState(null);
@@ -94,6 +99,161 @@ const InstructorDashboard = () => {
fetchRevenueData();
}, [fetchRevenueData]);
+ // Export Functions
+ const exportToPDF = async () => {
+ if (!dashboardRef.current) return;
+
+ setExporting(true);
+ try {
+ const canvas = await html2canvas(dashboardRef.current, {
+ scale: 2,
+ useCORS: true,
+ logging: false,
+ });
+
+ const imgData = canvas.toDataURL('image/png');
+ const pdf = new jsPDF({
+ orientation: 'portrait',
+ unit: 'mm',
+ format: 'a4',
+ });
+
+ const imgWidth = 210;
+ const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+ pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+ pdf.save(`Instructor_Dashboard_${selectedYear}_${new Date().toISOString().split('T')[0]}.pdf`);
+ } catch (error) {
+ console.error('Error exporting PDF:', error);
+ alert('Failed to export PDF. Please try again.');
+ } finally {
+ setExporting(false);
+ }
+ };
+
+ const exportToExcel = () => {
+ if (!stats) return;
+
+ setExporting(true);
+ try {
+ const wb = XLSX.utils.book_new();
+ const worksheetData = [];
+
+ // Title Section
+ worksheetData.push(['INSTRUCTOR DASHBOARD REPORT']);
+ worksheetData.push(['Generated:', new Date().toLocaleString('vi-VN')]);
+ worksheetData.push(['Year:', selectedYear]);
+ worksheetData.push([]);
+
+ // Overview Statistics Section
+ worksheetData.push(['📊 OVERVIEW STATISTICS']);
+ worksheetData.push(['Metric', 'Value', 'Unit']);
+ worksheetData.push(['Total Revenue', stats.overview?.totalRevenue || 0, 'VND']);
+ worksheetData.push(['Period Revenue', stats.overview?.periodRevenue || 0, 'VND']);
+ worksheetData.push(['Total Students', stats.overview?.totalStudents || 0, 'students']);
+ worksheetData.push(['New Students This Month', stats.overview?.newStudentsThisMonth || 0, 'students']);
+ worksheetData.push(['Active Courses', stats.overview?.activeCourses || 0, 'courses']);
+ worksheetData.push(['Total Courses', stats.overview?.totalCourses || 0, 'courses']);
+ worksheetData.push(['Average Rating', (stats.overview?.averageRating || 0).toFixed(2), '⭐']);
+ worksheetData.push(['Total Reviews', stats.overview?.totalReviews || 0, 'reviews']);
+ worksheetData.push([]);
+
+ // Monthly Revenue Section
+ if (revenueData?.monthlySales) {
+ worksheetData.push(['💰 MONTHLY REVENUE BREAKDOWN']);
+ worksheetData.push(['Month', 'Revenue (VND)', 'Transactions', 'Avg per Transaction']);
+ const totalRevenue = revenueData.monthlySales.reduce((sum, item) => sum + item.revenue, 0);
+ const totalTransactions = revenueData.monthlySales.reduce((sum, item) => sum + item.transactions, 0);
+
+ revenueData.monthlySales.forEach((item) => {
+ const monthName = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][item.month - 1];
+ const avgPerTransaction = item.transactions > 0 ? (item.revenue / item.transactions).toFixed(0) : 0;
+ worksheetData.push([monthName, item.revenue, item.transactions, avgPerTransaction]);
+ });
+ worksheetData.push(['TOTAL', totalRevenue, totalTransactions, totalTransactions > 0 ? (totalRevenue / totalTransactions).toFixed(0) : 0]);
+ worksheetData.push([]);
+ }
+
+ // Enrollment Status Section
+ if (stats.pieCharts?.enrollmentStatus) {
+ worksheetData.push(['📚 ENROLLMENT STATUS']);
+ worksheetData.push(['Status', 'Count', 'Percentage']);
+ const totalEnrollments = stats.pieCharts.enrollmentStatus.reduce((sum, item) => sum + item.count, 0);
+ stats.pieCharts.enrollmentStatus.forEach((item) => {
+ const percentage = totalEnrollments > 0 ? ((item.count / totalEnrollments) * 100).toFixed(2) + '%' : '0%';
+ worksheetData.push([item.status, item.count, percentage]);
+ });
+ worksheetData.push(['TOTAL', totalEnrollments, '100%']);
+ worksheetData.push([]);
+ }
+
+ // Revenue by Category Section
+ if (stats.pieCharts?.revenueByCategory) {
+ worksheetData.push(['💼 REVENUE BY CATEGORY']);
+ worksheetData.push(['Category', 'Revenue (VND)', 'Enrollments', 'Avg Revenue per Enrollment']);
+ const totalCategoryRevenue = stats.pieCharts.revenueByCategory.reduce((sum, item) => sum + item.revenue, 0);
+ const totalCategoryEnrollments = stats.pieCharts.revenueByCategory.reduce((sum, item) => sum + item.enrollments, 0);
+
+ stats.pieCharts.revenueByCategory.forEach((item) => {
+ const avgPerEnrollment = item.enrollments > 0 ? (item.revenue / item.enrollments).toFixed(0) : 0;
+ worksheetData.push([item.categoryName, item.revenue, item.enrollments, avgPerEnrollment]);
+ });
+ worksheetData.push(['TOTAL', totalCategoryRevenue, totalCategoryEnrollments, totalCategoryEnrollments > 0 ? (totalCategoryRevenue / totalCategoryEnrollments).toFixed(0) : 0]);
+ worksheetData.push([]);
+ }
+
+ // Course Completion Section
+ if (stats.pieCharts?.courseCompletion) {
+ worksheetData.push(['🎓 COURSE COMPLETION']);
+ worksheetData.push(['Course Title', 'Completion Rate', 'Completed', 'In Progress', 'Total Enrollments']);
+ stats.pieCharts.courseCompletion.forEach((item) => {
+ const completed = Math.round((item.completionRate / 100) * item.totalEnrollments);
+ const inProgress = item.totalEnrollments - completed;
+ worksheetData.push([
+ item.title,
+ item.completionRate + '%',
+ completed,
+ inProgress,
+ item.totalEnrollments
+ ]);
+ });
+ worksheetData.push([]);
+ }
+
+ // Rating Distribution Section
+ if (stats.pieCharts?.courseRatingDistribution) {
+ worksheetData.push(['⭐ RATING DISTRIBUTION']);
+ worksheetData.push(['Rating', 'Count', 'Percentage']);
+ const totalRatings = stats.pieCharts.courseRatingDistribution.reduce((sum, item) => sum + item.count, 0);
+ stats.pieCharts.courseRatingDistribution.forEach((item) => {
+ const percentage = totalRatings > 0 ? ((item.count / totalRatings) * 100).toFixed(2) + '%' : '0%';
+ worksheetData.push([`${item.stars} Stars`, item.count, percentage]);
+ });
+ worksheetData.push(['TOTAL', totalRatings, '100%']);
+ }
+
+ // Create worksheet
+ const ws = XLSX.utils.aoa_to_sheet(worksheetData);
+
+ // Set column widths
+ ws['!cols'] = [
+ { wch: 35 }, // Column A
+ { wch: 22 }, // Column B
+ { wch: 18 }, // Column C
+ { wch: 22 }, // Column D
+ { wch: 20 }, // Column E
+ ];
+
+ XLSX.utils.book_append_sheet(wb, ws, 'Dashboard Report');
+ XLSX.writeFile(wb, `Instructor_Dashboard_${selectedYear}_${new Date().toISOString().split('T')[0]}.xlsx`);
+ } catch (error) {
+ console.error('Error exporting Excel:', error);
+ alert('Failed to export Excel. Please try again.');
+ } finally {
+ setExporting(false);
+ }
+ };
+
// Generate year options (current year and 5 years back)
const getYearOptions = () => {
const currentYear = new Date().getFullYear();
@@ -294,12 +454,60 @@ const InstructorDashboard = () => {
}
return (
-
+
{/* Header */}
Instructor Dashboard
+
+
+
+
{/* 4 Key Metrics Cards */}
diff --git a/FrontEnd/src/components/StudentDashboard/StudentDashboard.jsx b/FrontEnd/src/components/StudentDashboard/StudentDashboard.jsx
index c5ce0ba..476a626 100644
--- a/FrontEnd/src/components/StudentDashboard/StudentDashboard.jsx
+++ b/FrontEnd/src/components/StudentDashboard/StudentDashboard.jsx
@@ -1,6 +1,18 @@
-import React, { useState, useEffect } from "react";
-import { FaPlay, FaBook, FaTrophy, FaUsers } from "react-icons/fa";
+import React, { useState, useEffect, useRef } from "react";
+import { FaPlay, FaBook, FaTrophy, FaUsers, FaClock, FaFire } from "react-icons/fa";
import { useLocation, useNavigate } from "react-router-dom";
+import {
+ Chart as ChartJS,
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ LineElement,
+ PointElement,
+ Title,
+ Tooltip,
+ Legend
+} from 'chart.js';
+import { Line, Bar } from 'react-chartjs-2';
import ProfileSection from "../CourseList/ProfileSection";
import {
getEnrolledCourses,
@@ -12,7 +24,9 @@ import {
updateCourseFeedback,
getCourseAverageRating,
} from "../../services/feedbackService";
+import { getStudentAnalytics } from "../../services/analyticsService";
import "../../assets/StudentDashboard/StudentDashboard.css";
+import "../../assets/StudentDashboard/ModernStudentDashboard.css";
import { useSelector, useDispatch } from "react-redux";
import ReviewModal from "../WatchCourse/ReviewModal";
import SurveyModal from "../LearningPath/SurveyModal";
@@ -23,6 +37,18 @@ import {
openSurveyModal,
} from "../../store/learningPathSlice";
+// Register Chart.js components
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ LineElement,
+ PointElement,
+ Title,
+ Tooltip,
+ Legend
+);
+
const StatCard = ({ icon, count, label, color }) => (
{
const { surveyCompleted } = useSelector((state) => state.learningPath);
const [enrolledCourses, setEnrolledCourses] = useState([]);
const [coursesProgress, setCoursesProgress] = useState([]);
+ const [analytics, setAnalytics] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
+ const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+ const [availableYears, setAvailableYears] = useState([]);
const coursesPerPage = 4;
const [isReviewOpen, setIsReviewOpen] = useState(false);
const [selectedCourseId, setSelectedCourseId] = useState(null);
const [feedbackByCourseId, setFeedbackByCourseId] = useState({});
+ const dashboardRef = useRef(null);
useEffect(() => {
fetchDashboardData();
// Check survey completion status
dispatch(checkSurveyCompletion());
+
+ // Initialize available years (last 5 years)
+ const currentYear = new Date().getFullYear();
+ const years = [];
+ for (let i = 0; i < 5; i++) {
+ years.push(currentYear - i);
+ }
+ setAvailableYears(years);
}, [dispatch]);
+ useEffect(() => {
+ if (selectedYear) {
+ fetchDashboardData();
+ }
+ }, [selectedYear]);
+
useEffect(() => {
// Khi đã có danh sách courses, fetch feedback cho từng course
if (enrolledCourses.length > 0 && currentUser) {
@@ -158,14 +202,20 @@ const StudentDashboard = () => {
try {
setLoading(true);
- // Fetch both enrolled courses and their progress data
- const [enrolledResponse, progressResponse] = await Promise.all([
+ console.log('Fetching analytics with:', { year: selectedYear });
+
+ // Fetch enrolled courses, progress, and analytics data
+ const [enrolledResponse, progressResponse, analyticsResponse] = await Promise.all([
getEnrolledCourses(),
getAllCoursesProgress(),
+ getStudentAnalytics(selectedYear),
]);
+ console.log('Analytics API response:', analyticsResponse);
+
setEnrolledCourses(enrolledResponse.data.data);
setCoursesProgress(progressResponse.data.data);
+ setAnalytics(analyticsResponse.data);
} catch (err) {
setError(err.response?.data?.message || "Failed to fetch dashboard data");
} finally {
@@ -217,8 +267,93 @@ const StudentDashboard = () => {
label: "Completed Courses",
color: "#22c55e",
},
+ {
+ id: 4,
+ icon:
,
+ count: analytics?.learningTime?.total || 0,
+ label: "Learning Hours",
+ color: "#f59e0b",
+ },
+ {
+ id: 5,
+ icon:
,
+ count: analytics?.streak?.current || 0,
+ label: "Day Streak",
+ color: "#ef4444",
+ },
];
+ // Debug: Log analytics data
+ console.log('Analytics data:', analytics);
+ console.log('Weekly activity:', analytics?.weeklyActivity);
+ if (analytics?.weeklyActivity) {
+ console.log('First activity item:', analytics.weeklyActivity[0]);
+ console.log('Activity array length:', analytics.weeklyActivity.length);
+ console.log('All activity data:', JSON.stringify(analytics.weeklyActivity, null, 2));
+ }
+
+ // Weekly activity chart data
+ const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+ const weeklyChartData = {
+ labels: analytics?.weeklyActivity?.map(d => monthNames[d.month - 1]) || [],
+ datasets: [{
+ label: 'Courses Completed',
+ data: analytics?.weeklyActivity?.map(d => d.courses) || [],
+ backgroundColor: 'rgba(102, 126, 234, 0.5)',
+ borderColor: 'rgb(102, 126, 234)',
+ borderWidth: 2,
+ borderRadius: 6,
+ }]
+ };
+
+ const weeklyChartOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top',
+ },
+ tooltip: {
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
+ padding: 12,
+ titleFont: { size: 14, weight: 'bold' },
+ bodyFont: { size: 13 },
+ callbacks: {
+ title: (context) => `Day ${context[0].label}`,
+ label: (context) => `Courses: ${context.parsed.y}`
+ }
+ },
+ },
+ scales: {
+ x: {
+ title: {
+ display: true,
+ text: 'Day of Month',
+ font: { size: 14, weight: 'bold' }
+ },
+ ticks: {
+ maxRotation: 0,
+ minRotation: 0,
+ autoSkip: true,
+ maxTicksLimit: 15
+ }
+ },
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Courses Completed',
+ font: { size: 14, weight: 'bold' }
+ },
+ ticks: {
+ stepSize: 1,
+ precision: 0
+ },
+ },
+ },
+ };
+
const handlePrevPage = () => {
setCurrentPage((prev) => Math.max(0, prev - 1));
};
@@ -283,7 +418,7 @@ const StudentDashboard = () => {
>
-
Dashboard
+
Learning Progress Dashboard
+ {/* Weekly Activity Chart */}
+ {analytics?.weeklyActivity && (
+
+
+
📅 Monthly Learning Activity
+
+
+
+
+
+ {analytics.weeklyActivity.length > 0 ? (
+
+ ) : (
+
+ No learning activity data for this period
+
+ )}
+
+
+ )}
+
{`Let's start learning, ${displayName}`}
diff --git a/FrontEnd/src/services/analyticsService.js b/FrontEnd/src/services/analyticsService.js
new file mode 100644
index 0000000..993775d
--- /dev/null
+++ b/FrontEnd/src/services/analyticsService.js
@@ -0,0 +1,18 @@
+import apiClient from "./authService";
+
+/**
+ * Get student learning analytics
+ * @param {number} year - Year to filter analytics (optional, defaults to current year)
+ */
+export const getStudentAnalytics = async (year) => {
+ try {
+ const params = [];
+ if (year) params.push(`year=${year}`);
+ const queryString = params.length > 0 ? `?${params.join('&')}` : '';
+ const response = await apiClient.get(`/progress/analytics${queryString}`);
+ return response.data;
+ } catch (error) {
+ console.error("Error fetching student analytics:", error);
+ throw error;
+ }
+};
diff --git a/FrontEnd/src/services/dashboardService.js b/FrontEnd/src/services/dashboardService.js
index 9dfd0c2..abf230c 100644
--- a/FrontEnd/src/services/dashboardService.js
+++ b/FrontEnd/src/services/dashboardService.js
@@ -2,11 +2,12 @@ import apiClient from './authService';
/**
* @desc Lấy dữ liệu thống kê cho dashboard (Admin)
+ * @param {number} year - Năm cần lấy dữ liệu
* @returns {Promise}
*/
-export const getDashboardStats = () => {
+export const getDashboardStats = (year) => {
// apiClient sẽ tự động thêm token và gọi đến /api/admin/stats
- return apiClient.get('/admin/stats');
+ return apiClient.get('/admin/stats', { params: { year } });
};
/**