Track earnings | Mobile bar chart

by Dara Sobaloju

This payment screen is designed with a clean and organized layout, making it easy for users to navigate and understand their earnings at a glance. The primary focus is on the "Earnings" tab, which is immediately visible upon entry, ensuring users can quickly access the information they need. Clear Navigation: The screen is divided into clear sections - "Wallet" and "Earning"—with the currently active tab, "Earning," highlighted with an accent color, ensuring users know exactly where they are in the app. Intuitive Overview: Key metrics such as "Total Earnings," "Total Booked," and "Total Riders" are presented at the top, each with color-coded indicators for quick visual interpretation. This enables users to assess their performance instantly. Data Visualization: The earnings are represented with a bar chart, providing a visual summary of daily earnings over the week. The use of color differentiation and tooltips (e.g., the orange bar and data point on Friday) enhances the clarity of data presentation, making it easier for users to identify patterns or anomalies. Accessible Controls: Below the chart, users can filter their transactions by "Date" and "Transaction" type using drop-down menus. This adds a layer of personalization and control, allowing users to manage and view their earnings data according to their preferences. Transaction Details: The detailed transaction history is displayed in a list format, showing the date, time, and amount earned, accompanied by a clear visual icon and payment method. This helps users track their income efficiently. Bottom Navigation Bar: The bottom navigation includes icons for "Home," "Payment," "Trips," and "Account," with the active tab, "Payment," highlighted. This provides easy access to other sections of the app without overwhelming the user.