feature Implement Transactions View for Admin to Display All Payments

[maxCastro1]

Description

This PR introduces a new Transactions component that allows admins to view all payment transactions. The implementation includes fetching transaction data from the backend and displaying it in a user-friendly interface with detailed statistics and a list of transactions.

Changes Implemented

Transactions Component

• Added a new Transactions component that fetches payment data from the backend API.
• Displayed key statistics including total amount, total transactions, average payment amount, and captured amount.
• Provided a table listing individual transactions with details such as payment ID, amount, date, status, and payment method.

API Integration

• Implemented a useEffect hook to fetch payment data from the backend when the component mounts.
• Utilized Axios for making API requests with proper authorization headers.

Error Handling

• Added error handling to display appropriate messages if the data fetch fails.
• Included loading states to indicate data fetching progress.

Styling and Layout

• Applied CSS styles to ensure a clean and responsive design.
• Used Flexbox and Grid for layout management.
• Incorporated PropagateLoader for displaying a loading spinner during data fetch.

[netlify[bot]]

❌ Deploy Preview for knight-fe failed.

Name	Link
🔨 Latest commit	ebbbee412898d4b3c3a7eda08100b34c233bf52c
🔍 Latest deploy log	https://app.netlify.com/sites/knight-fe/deploys/66a15f1164da980008c389b6

[netlify[bot]]

❌ Deploy Preview for knights-fecommerce failed.

Name	Link
🔨 Latest commit	ebbbee412898d4b3c3a7eda08100b34c233bf52c
🔍 Latest deploy log	https://app.netlify.com/sites/knights-fecommerce/deploys/66a15f1120548a0008471c75

[faid-terence]

@maxCastro1 Rebase with develop to resolve errors in Router.tsx

[coveralls]

coverage: 90.809% (+0.008%) from 90.801% when pulling 4d10d23537ac75352e1116c489a9a2960b9f45d5 on ft-admin-view-all-payment into 7da197971600db7c72f2ff987ff39d8a8562ef8d on develop.