Financial Dashboard - Copy this React, Tailwind Component to your project
Generate a modern, responsive, and user friendly UI design for a financial transactions dashboard. The interface should prioritize clarity, aesthetics, and usability while displaying the following details: Key Features and Components: 1. Transaction List: Display a table with columns: + Time (e.g., "2025 01 17 14:35:00") (en) + Transaction ID (e.g., "TXN123456") + Account ID (e.g., "ACC098765") + Payment Method (e.g., "Credit Card") + Status (e.g., "Success", "Failed", "Refunded") + Bank (e.g., "Bank ABC") Paging 2.Filters on header table: Allow filtering by: + Time Range (Date picker) + Account ID (enable search by list id) + Transaction ID (Searchable input field) + Payment Method (Searchable dropdown list, selected) + Status (Dropdown: Success, Failed, Refunded, mutil selected) + Bank (Searchable dropdown list, selected) add clear filter button 3. Summaries and Metrics: Successful Transactions: + Total Orders + Total Amount + Total Fees + Total Amount Paid to App Failed Transactions: +Total Orders +Total Amount +Total Fees +Total Amount Paid to App Refunded Transactions: +Total Orders +Total Amount Total by Bank view on table: ngân hàng, số lệnh, tổng phí, tổng charge 5. Modern Aesthetic: Use modern design principles Material Design Employ a clean, responsive layout with a focus on readability. Interactive elements with hover effects and animations for better user experience.
