UX Improvement: Implement Advanced Filtering and Search on Dashboard Table

[khdxsohee]

🖥️ Current Limitation

The current dashboard displays data based only on a single Month selection (using monthSelectEntry). While this is useful, it limits the analytical capabilities of the dashboard, especially as the student body grows.

Users cannot easily find specific subsets of data without manually searching the HTML table.

✨ Proposed UX Enhancements

We propose implementing advanced filtering and search features to significantly improve the user experience and reporting flexibility:

1. Search Bar: Add a simple, global search input field above the main dashboard table. This should filter the table rows dynamically based on text matches in the Student Name or Class columns (or any visible column).
2. Status Filter: Add a dedicated dropdown filter to quickly show only:
   • Paid Students (Status: Paid)
   • Not Paid Students (Status: Not Paid)
   • All Students
3. Class Filter: Add a filter dropdown allowing users to view transactions/statuses for students belonging to a specific class (e.g., "Class 7", "Class 8").

🤝 Why This Is Important

• Faster Analysis: School administrators can quickly isolate which classes have the most unpaid fees.
• User Engagement: Simple, intuitive controls make the dashboard more accessible and encourage daily use.
• Data Export Quality: Ensures that when a user exports data to PDF/CSV, they can export only the filtered, relevant subset of the transactions.

This is an excellent task for someone familiar with JavaScript (DOM manipulation) and can be marked as a 'good first issue' for new contributors.