feat: add admin payment records dashboard with safe transaction details

[Jidnyasa-P]

Description

LearnHub stores mock payment records when students enroll in paid courses, but administrators currently have no React interface for reviewing these transactions.

Add a secure admin payment dashboard that displays non-sensitive transaction information and provides filtering and summary metrics.

Proposed Features

• Add a Payments section to the admin dashboard.

• Display summary cards for:

  • Total mock transactions
  • Successful transactions
  • Failed or pending transactions
  • Total recorded mock revenue

• Display a transaction table containing:

  • Transaction ID
  • Student email
  • Course title
  • Amount
  • Payment status
  • Created date

• Add search by student email, transaction ID, or course title.

• Add filtering by payment status.

• Add date-range filtering.

• Add newest/oldest and amount sorting.

• Add pagination.

• Add loading, empty, and error states.

Security Requirements

• Never return or display:

  • Full card numbers
  • CVV values
  • Authentication tokens
  • Passwords

• If a card identifier must be displayed, show only a masked value such as:

•••• •••• •••• 1234

• Protect the payment endpoint with admin authorization.
• Remove sensitive payment fields from API responses.

Backend Work

• Add or verify an admin-only payment-list endpoint.
• Return sanitized transaction objects.
• Add search, filtering, sorting, and pagination.
• Add aggregate summary values.
• Validate all query parameters.

Frontend Work

• Add a PaymentRecords admin component.
• Add summary cards and a responsive transaction table.
• Add filter and search controls.
• Add a transaction-detail dialog containing only safe fields.
• Add proper loading and retry states.

Acceptance Criteria

• Only administrators can access payment records.
• The backend does not return full card numbers or CVV values.
• Summary metrics reflect the returned transaction data.
• Payments can be searched and filtered.
• Results support sorting and pagination.
• Transaction details are responsive and accessible.
• Empty, loading, and error states are included.
• Existing mock-payment enrollment continues to work.
• No sensitive payment information appears in browser logs.

@udaycodespace Kindly assign me this issue under ECSOC26

[udaycodespace]

@Jidnyasa-P Use the slash command "assign" to assign yourself.

[Jidnyasa-P]

/assign

[github-actions]

@Jidnyasa-P, you are already assigned to 2 open issues. Please complete those before taking on new ones (limit is 2).

[Jidnyasa-P]

/assign

[github-actions]

🎉 @Jidnyasa-P has been successfully assigned to this issue. Please submit a PR within 7 days. Happy coding!

[udaycodespace]

Hi @Jidnyasa-P, just following up on this issue. There hasn't been any update for the last 3 days. Could you please share your current progress and let me know when you expect to open the PR? Thanks!