Redesign/data entry page

[MapleSyrupy]

Added another page in between taking trials, and student benchmarks list etc.

[gemini-code-assist]

Summary of Changes

Hello @MapleSyrupy, 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 implements a significant redesign of the data entry workflow by introducing a new intermediary page. This page provides a comprehensive overview of a specific benchmark, including its details and setup instructions, before a user proceeds to record trial data. The changes encompass front-end component development, routing adjustments, backend data enhancements to support the new flow, and general UI/UX improvements for a more intuitive user experience.

Highlights

• New Data Entry Workflow: Introduced a dedicated 'Data Entry' page (src/pages/students/[student_id]/goals/[goal_id]/benchmarks/[benchmark_id]/dataEntry.tsx) to serve as an intermediate step between viewing student benchmarks and starting trials, providing detailed benchmark information.
• Enhanced Navigation and UI: Updated BenchmarkListElement and TaskCard to link directly to the new data entry page, and refactored GoalHeader for improved responsiveness and styling using new Chip variants.
• New GoalCard Component: Added src/components/data-entry/GoalCard.tsx and its associated CSS module (GoalCard.module.css) to display benchmark details like frequency, instructions, materials, and activity setup.
• Data Model and API Updates: Modified src/backend/routers/para.ts and src/types/global.ts to include student_id and goal_id in relevant data structures and API queries, supporting the new navigation and data flow.
• Dependency Addition: The mustache templating library has been added as a new dependency in package.json.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

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 introduces a new data entry page and refactors several related components to improve the user interface and experience. The changes are generally positive, but I've identified a few critical issues in the new code, including invalid CSS that could break styles and potential runtime errors due to improper handling of optional data. I've provided specific suggestions to address these problems. Additionally, there are several medium-severity recommendations to enhance code quality, consistency, and maintainability.

[gemini-code-assist]

The onClick handler can construct an invalid URL like /benchmarks/undefined if benchmarks is undefined. This could lead to unexpected behavior or errors. It's safer to disable the button or prevent navigation if benchmarks?.benchmark_id is not available.

            onClick={() => {
              if (benchmarks?.benchmark_id) {
                router.push(`/benchmarks/${benchmarks.benchmark_id}`);
              }
            }}

[gemini-code-assist]

The page component is named GoalPage, but its file path and content suggest it's for benchmark data entry. Renaming it to something more descriptive, like BenchmarkDataEntryPage, would improve code clarity.