Code Challenge: Payment Transaction Dashboard

Estimated time for completion: 30 minutes

Problem Statement:

You are tasked with building a prototype of a payment transaction dashboard using React.js and TypeScript. Your goal is to create a web application that simulates displaying payment transaction data. The application should allow users to view a list of payment transactions and filter transactions by date range.

Requirements:

• Create a React.js application that displays a list of payment transactions.
• Implement a mock API to simulate fetching payment transaction data. You can use a JavaScript array to store mock data.
• Display the following information for each payment transaction: Transaction ID, Date, Description, Amount (in USD)
• Implement error handling for API requests. If the API request fails, display an error message to the user.
• Design the user interface to be clean and responsive using CSS and HTML. You can use any CSS framework or libraries of your choice..
• Add a date range filter to allow users to filter transactions by a specified date range.

Bonus Points (Optional):

• Implement pagination to show a limited number of transactions per page.
• Add sorting functionality to allow users to sort transactions by date or amount.
• Create a summary section that displays the total number of transactions and the total transaction amount within the selected date range.

Constraints:

• Third-party APIs are not allowed. You must use a mock API for data.
• You can use any libraries or packages you find suitable for this task.
• The application should be designed with best practices for performance, maintainability, and scalability in mind.

Evaluation Criteria:

• Code organization and structure.
• Correctness and functionality of the application.
• Proper error handling and user feedback.
• Code quality, adherence to TypeScript best practices, and readability.
• Responsive and visually appealing user interface.