Transaction Dashboard - Copy this React, Tailwind Component to your project
Transaction Approval Screen by Batch 1. Header Section Purpose: Display basic information about the batch and its transactions. Elements: Title: "Transaction Approval by Batch Code". Batch Details: Batch Code (e.g., "Batch ID: 12345"). Status: Pending / Approved / Rejected. Number of Transactions (e.g., "Total Transactions: 50"). Creation Date (e.g., "Created On: 2024 12 01"). Filters/Quick Actions: Buttons for filtering by status (e.g., Unverified, Pending Approval). 2. Transaction List Section Purpose: Display the list of transactions in the batch with key details and statuses. Layout: A data table or card list for better readability. Table Columns: Transaction ID: Unique identifier for the transaction. Amount: Amount of the transaction. Date: Transaction date. Status: Values: Pending, Approved, Rejected, or Unverified. Channel: Dropdown (for transactions without a defined channel). Pre filled value (for transactions with a defined channel). Channels include Default, NAPAS, or others. Features: Row Selection: Checkbox to select specific transactions for approval or rejection. Bulk Actions: Enable batch processing (e.g., approve or reject multiple transactions). 3. Action Area Reject Button: Behavior: When clicked: Reject all selected transactions without needing to select a channel. Confirmation modal: "Are you sure you want to reject the selected transactions?" Approve Button: Behavior: When clicked: If Channel = Default, proceed directly with approval. If Channel = NAPAS, validate transactions before approval. Display errors if validation fails for any transaction (e.g., "Transaction ID 12345 failed validation."). Confirmation modal: "Do you want to approve the selected transactions?" 4. Validation Rules for NAPAS Channel Purpose: Ensure transactions meet specific criteria before approval. Behavior: On selecting the NAPAS channel, the system performs: A real time validation request (e.g., API call). Highlight errors in rows with invalid transactions (e.g., "Transaction ID 56789 is not valid for NAPAS"). Prevent batch approval if any transaction fails validation. 5. UI Components Filters and Sorting: Dropdown Filters: Filter by transaction status: Pending, Unverified, Approved. Filter by channel: NAPAS, Default. Search Bar: Allow users to search for transactions by ID or amount. Sortable Columns: Enable sorting by amount, date, or status. Modals/Popups: Reject Confirmation: Title: "Confirm Rejection". Text: "Are you sure you want to reject these transactions?" Approval Confirmation: Title: "Confirm Approval". Text: "Are you sure you want to approve these transactions?" If NAPAS, display validation progress before approval. Error Handling: Inline Error Messages: Display next to invalid transactions (e.g., red highlighted row with error message). Global Notifications: Success: "Batch approved successfully." Error: "Validation failed for some transactions. Please review." Wireframe Layout Here’s a basic layout description for the mockup: Header Section: Positioned at the top of the screen with batch details and quick filters. Transaction List Section: Central area with a table layout. Includes scrollable rows for larger datasets. Action Area: Located at the bottom or side, with "Approve" and "Reject" buttons.
