Teacher Dashboard Revenue - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { Bar, Line } from "react-chartjs-2"; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend, } from "chart.js"; // Đảm bảo chỉ đăng ký ChartJS một lần ChartJS.register( CategoryScale, LinearScale, BarElement, PointElement, LineElement, Title, Tooltip, Legend ); const DashboardTeacher = () => { const [viewType, setViewType] = useState("monthly"); // Data for bar chart const barChartData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "New Students", data: [12, 19, 3, 5, 2, 3], backgroundColor: "rgba(255, 0, 0, 0.8)", // primary color with opacity rgba(59, 130, 246, 0.6) }, ], }; // Data for line chart const lineChartData = { labels: ["Week 1", "Week 2", "Week 3", "Week 4"], datasets: [ { label: "Course Completion Rate", data: [65, 59, 80, 81], fill: false, borderColor: "red", // primary color rgb(59, 130, 246) tension: 0.1, }, ], }; const monthlyData = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [ { label: "Monthly Revenue", data: [69000000, 80500000, 96600000, 110400000, 117300000, 128800000, 142600000, 156400000, 163300000, 172500000, 184000000, 195500000], borderColor: "#E11D48", backgroundColor: "rgba(225, 29, 72, 0.1)", tension: 0.4 } ] }; const weeklyData = { labels: ["Week 1 (Jan)", "Week 2 (Jan)", "Week 3 (Jan)", "Week 4 (Jan)"], datasets: [ { label: "Weekly Revenue", data: [27600000, 41400000, 48300000, 55200000], borderColor: "#03A9F4", backgroundColor: "rgba(3, 169, 244, 0.1)", tension: 0.4 } ] }; // Tooltip configuration const options = { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: "top", align: "end" }, tooltip: { backgroundColor: "#FFFFFF", titleColor: "#020817", bodyColor: "#020817", borderColor: "#E0E0E0", borderWidth: 1, padding: 12, displayColors: false, callbacks: { label: (context) => `Revenue: ${context.parsed.y.toLocaleString("vi-VN")} VND` } } }, scales: { y: { beginAtZero: true, grid: { color: "#F0F1F3" }, ticks: { callback: (value) => `${value.toLocaleString("vi-VN")} VND` } }, x: { grid: { color: "#F0F1F3" } } } }; return ( <div className="max-w-7xl mx-auto py-10 px-4 sm:px-6 lg:px-8"> <h1 className="text-3xl font-semibold text-gray-800 mb-6"> Teacher Dashboard </h1> {/* Overview Cards */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10"> <div className="bg-white rounded-lg shadow-md p-6 border-t-4 border-red-500"> <h2 className="text-xl font-semibold text-gray-700 mb-4"> Courses Overview </h2> <p className="text-3xl font-bold text-red-500">5</p> <p className="text-gray-600">Total Courses</p> </div> <div className="bg-white rounded-lg shadow-md p-6 border-t-4 border-red-500"> <h2 className="text-xl font-semibold text-gray-700 mb-4">Students</h2> <p className="text-3xl font-bold text-red-500">120</p> <p className="text-gray-600">Active Students</p> </div> <div className="bg-white rounded-lg shadow-md p-6 border-t-4 border-red-500"> <h2 className="text-xl font-semibold text-gray-700 mb-4">Revenue</h2> <p className="text-3xl font-bold text-red-500">$1,234</p> <p className="text-gray-600">This Month</p> </div> </div> {/* Statistics */} <h1 className="text-3xl font-semibold text-gray-800 mb-6"> Course Statistics </h1> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="bg-white p-4 rounded-lg shadow-md"> <h2 className="text-xl font-semibold text-gray-700 mb-4"> New Students </h2> <Bar data={barChartData} options={options} /> </div> <div className="bg-white p-4 rounded-lg shadow-md"> <h2 className="text-xl font-semibold text-gray-700 mb-4"> Course Completion Rate </h2> <Line data={lineChartData} options={options} /> </div> </div> {/* Additional Stats */} <div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-red-500"> <h2 className="text-lg font-semibold text-gray-700 mb-2"> Total Students </h2> <p className="text-3xl font-bold text-red-500">1,234</p> </div> <div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-red-500"> <h2 className="text-lg font-semibold text-gray-700 mb-2"> Average Rating </h2> <p className="text-3xl font-bold text-red-500">4.7</p> </div> <div className="bg-white p-6 rounded-lg shadow-md border-t-4 border-red-500"> <h2 className="text-lg font-semibold text-gray-700 mb-2"> Total Courses </h2> <p className="text-3xl font-bold text-red-500">15</p> </div> </div> {/* Charts for Monthly and Weekly Revenue */} <h1 className="text-3xl font-semibold text-gray-800 mb-6 mt-10"> Revenue Stats </h1> <div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="bg-white p-4 rounded-lg shadow-md"> <h2 className="text-xl font-semibold text-gray-700 mb-4"> Monthly Revenue </h2> <Line data={monthlyData} options={options} /> </div> <div className="bg-white p-4 rounded-lg shadow-md"> <h2 className="text-xl font-semibold text-gray-700 mb-4"> Weekly Revenue </h2> <Line data={weeklyData} options={options} /> </div> </div> </div> ); }; export default DashboardTeacher;