NexGenStudioDev/ciitm-frontend
Build Full Student Dashboard with Chart.js, Announcements, and Payment Data
开放
#195 创建于 2025年7月17日
Ciitm FrontendONLY_FOR_NEW_CONTRIBUTORSReactResponsiveUi Updateatomic-designenhancementfeature-requestgood first issuehacktoberfesthelp wantedonlydust-wave
仓库指标
- 星标
- (9 个星标)
- PR 合并指标
- (PR 指标待抓取)
描述
Student Dashboard Feature
This project now includes a Student Dashboard that provides key academic and financial insights through interactive charts and informative sections.
Features
- 📢 Announcements: Display important student notifications.
- 💳 Payment Status: Doughnut chart showing paid vs pending fees.
- 📈 GPA Progress: Line chart visualizing GPA across semesters.
- 📅 Upcoming Deadlines: List of important academic deadlines.
- 🖥️ Responsive Layout: Optimized for desktops, tablets, and mobile devices.
Technologies Used
- React.js
- Chart.js with react-chartjs-2
- CSS Grid and Flexbox for layout
Getting Started
- Ensure you have installed the required packages:
npm install chart.js react-chartjs-2
- Import and use the dashboard components in your app.
- Customize the data inside the chart components or fetch it dynamically as needed.
Example Data
// PaymentChart Data
labels: ['Paid', 'Pending'];
data: [80, 20];
// GPAChart Data
labels: ['Semester 1', 'Semester 2', 'Semester 3', 'Semester 4'];
data: [3.2, 3.4, 3.6, 3.8];