Clean up and consolidate data table implementation across pages

[francisli]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @francisli, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a significant refactoring effort to clean up and consolidate the data table implementations across various pages. It introduces a new set of generic, reusable components for displaying, searching, and sorting data, which are then applied to the Admin, Staff, and Students listing pages. Additionally, the student data model is updated to make the email field optional, and backend queries are enhanced to support the new table functionalities. This change aims to improve code maintainability, reduce duplication, and provide a more consistent user experience.

Highlights

• New Generic Data Table Components: Introduced DataTable, DataTableHeader, and withDataTablePage components to provide a centralized, reusable solution for displaying, searching, and sorting tabular data across different application pages.
• Refactored Page Implementations: The Admin, Staff, and Students listing pages (/admin, /staff, /students) have been refactored to utilize the new generic data table components, significantly reducing code duplication and improving UI consistency.
• Student Email Field Update: The email field for students has been made optional in the database schema, corresponding API endpoints, and UI components, allowing for students to be created and managed without an email address.
• Enhanced Data Fetching and Sorting: Backend TRPC queries for users, students, and paras (getUsers, getMyStudentsAndIepInfo, getMyParas) have been updated to support search and dynamic sorting parameters, which are now leveraged by the new data table components.
• Improved Form Error Handling: The global TRPC error handling in _app.tsx has been updated to allow specific mutations (like form submissions for adding new records) to handle their own errors, preventing generic alerts for validation issues.
• Standardized UI Styling: New Material-UI theme overrides have been added to ensure consistent styling for input fields and table bodies across the application.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request significantly refactors the data table implementations across the Admin, Staff, and Students pages by introducing a reusable DataTablePage Higher-Order Component and associated DataTable and DataTableHeader components. This is a great step towards reducing code duplication and improving maintainability.

The backend changes include making the student's email optional, updating tRPC router inputs to support new search/sort capabilities, and modifying mutation logic for adding/editing students and staff to align with the new UI patterns and schema changes.

Key areas requiring attention include:

• Critical: The removal of previous duplicate student checks in addStudent needs a robust replacement strategy now that email is optional.
• Medium: Email validation for optional email fields, test coverage for new student creation logic, and minor UI behavior adjustments in the new data table components.

The global error handling in _app.tsx has also been enhanced to allow per-mutation opt-out, which is a useful feature for inline form error display.