💰 Build Student Wallet Page – Chart View + Fee Detail Form + Print Functionality

📋 Fee Detail Page (Per Fee Type)

• Displays all payment records related to the selected fee type.
• Payment records are shown in paginated batches (for example, 1–10, 11–20, etc.) rather than displaying all records at once.
• Includes navigation controls (left and right arrows) that allow students to:
  • Move between pages of fee records easily.
  • Browse through their payment history in manageable chunks for better usability and performance.
• Each page shows a fixed number of records (e.g., 10 payments per page).
• Payment details are displayed in a read-only form layout with fields such as:
  • Fee Type
  • Amount Paid
  • Payment Date
  • Payment Method
  • Status (Paid / Unpaid)
• A Print button is available to print the currently displayed page of fee records.

API Endpoint

GET /api/v1/student/wallets

• Fetch all the Payment Type

🔁 Navigation & Pagination Behavior

• Pagination controls help manage large sets of fee data by loading and displaying only a subset of records at a time.
• Users can navigate forward and backward through their fee payment history using the arrows.
• This approach improves page load times and overall user experience, especially for students with many payment records.

🖼️ Design Reference

Please refer to the Figma design for layout and UI details:

Figma Link: [Insert your Figma design link here]

🔌 API Endpoint

To fetch paginated fee data for the student wallet detail page, use:

GET /api/v1/student/wallet/:feeType?page=<pageNumber>&limit=<pageSize>

• feeType: The fee category (e.g., admission, farewell, exam, semester).
• page: Page number (default: 1).
• limit: Number of records per page (default: 10).

Example:

GET /api/v1/student/wallet/admission?page=2&limit=10

Start at the student wallet page and review the GET /api/v1/student/wallets endpoint, then inspect the paginated GET /api/v1/student/wallet/:feeType?page=&limit= behavior. Confirm how the missing Figma reference should map to the chart, read-only fee details, pagination controls, and print action; done means the page displays the selected fee records in pages of up to 10 and can print the current page.