Transaction Detail Page - Copy this React, Tailwind Component to your project

1. Overview of the Transaction Detail Page Header Title: Batch Transaction Details Search Bar: Allows users to search transactions by Batch ID or Transaction ID. Main Body Section 1: Batch Information Displays the key information about the selected batch: Batch ID: batchId Creation Date: createdAt Total Transactions: transactionCount Status: status (Pending, Processed, Failed, etc.) Created By: createdBy Section 2: Transaction List A data table displaying all transactions within the selected batch: Transaction ID: Unique identifier for each transaction. Transaction Date: Date and time of the transaction. Amount: The amount of the transaction. Channel: The channel used for the transaction (e.g., NAPAS, internal). Status: Indicates the transaction's current state (e.g., Success, Failed, In Progress). Action: A button/link to view detailed information about each transaction. Section 3: Transaction Details (Expanded View) When a transaction is selected, detailed information is shown: Transaction ID: transactionId Amount: amount Date: transactionDate Channel: channel Processing Details: Logs and updates related to transaction processing. NAPAS Validation Details: Additional validation info for NAPAS transactions (if applicable). Additional Features Search Functionality: A search input field to filter transactions by: Batch ID Transaction ID Date range Status Export Report: A button to export the transaction list or details to formats like CSV, Excel, or PDF.