Implement Data Fetching for Make Payment, Payment History, and Student Progress Components

[sangwani-coder]

The current implementation uses hard-coded placeholders to display data in the Make Payment, Payment History, and Student Progress components. Replace these placeholders by reading and displaying the data from a JSON file.

Subtasks

Login Component

*File: Login.js Goal: Fetch and login a user (either parent or admin) from sample-user-data.json.

• Fetch username and password for parent and log them in.
• Display data related to the parent in other components. Fetch data from sample-parent-data.json.

File: StudentProgress.js Goal: Fetch and display progress data for the students linked to the parent. sample-parent-data.json & sample-user-data.json

• Fetch data related to student performance, grades, and attendance.
• Display data in a clear and parent-friendly format.
• Add error handling for cases where no student progress data is available.

Make Payment Component

File: MakePayment.js Goal: Fetch and display the list of students for the logged-in parent, allow selection, and calculate the total amount dynamically.

• Fetch data related to the parent and their students from sample-parent-data.json & sample-user-data.json
• Display the list of students retrieved from the JSON.
• Update the total dynamically based on selected students and entered amounts.
• Add error handling if no students are linked to the parent or data fails to load.

Payment History Component

File: PaymentHistory.js Goal: Fetch and display payment history data for the logged-in parent. sample-parent-data.json & sample-user-data.json

• Fetch data related to the payment history of the parent.
• Display transaction details, including date, amount, and status.
• Add error handling for cases where no payment history is available.

Student Progress Component

File: StudentProgress.js Goal: Fetch and display progress data for the students linked to the parent. sample-parent-data.json & sample-user-data.json

• Fetch data related to student performance, grades, and attendance.
• Display data in a clear and parent-friendly format.
• Add error handling for cases where no student progress data is available.

Acceptance Criteria

1. Data for the components is fetched dynamically from the JSON files ( sample-parent-data.json & sample-user-data.json.
2. Components display data accurately and update as necessary.
3. Proper loading indicators and error messages are implemented.
4. Existing functionality is maintained.
5. Code follows best practices for React and state management.

[sangwani-coder]

git Fetch and Pull to download get the sample JSON files I added.