Payment Batch Details - Copy this React, Tailwind Component to your project

. Header Displays the title: "Payment Batch Details". Navigation bar to return to the Batch list or overview page. 2. Batch Overview A table that displays the main information of the Batch: Batch Code: The identification code of the payment Batch. Created Date: The date and time the Batch was created. Total Transactions: The total number of transactions in the Batch. Total Amount: The total amount of transactions in the Batch. Successful Transactions: The number of transactions that have been successfully processed. Error Transactions: The number of transactions that have errors during processing. 3. Transaction Details Statistics Displays summary data on transaction status: Number of records with matching data: The total number of transactions whose information matches the system data. Number of records with mismatches: The total number of transactions that do not match the system data. Number of Error Records: Total number of transactions with errors (such as invalid format, missing data, etc.). 4. Transaction Details List A detailed table, including: Information Columns: Transaction Code Recipient Name Recipient Bank/Account Amount Transaction Status (Success, Mismatch, Error) Error Description (if any) Search Feature: Search bar above the table to filter transactions by transaction code, recipient name, status, etc. Status Filter: Users can filter by Success, Mismatch, or Error. 5. Overview Chart (optional) A pie or bar chart to visually illustrate the percentage of Successful, Mismatch, and Error transactions. 6. Action Bar Action buttons located at the bottom of the page: Download Report: Download detailed data of the Batch to a file (CSV/Excel). Export Test Results: Export a file containing only the transaction test results. Back: Button to return to the Batch list.