Left-Side Navigation: The navigation panel includes a search bar and three core links: Dashboard, Accounts, and Transactions. The panel remains fixed for easy access, allowing users to navigate efficiently.
Right-Side Content Area: Dynamic content displays, including charts for balance, cash flow, and spending activity. The layout is responsive, ensuring users can access all information on a single screen without scrolling.
Key Features
Search Functionality: Describe how the search bar can be used to quickly locate relevant accounts or transactions.
Charts and Data Visualization: o Balance Chart: A bar chart illustrating the user’s balance over a period.
Cash Flow Chart: A funnel chart representing the flow of cash and gains.
Spending Activity: An area chart showing monthly expenditures.
Technical Implementation
Flex Layout Design: (oj-flex) for achieving responsive behavior.
Data Sources: The data is dynamically pulled from $variables (e.g., balanceListSDP, cashFlowListSDP, etc.) for chart generation.
User Interactivity
Navigation: Users can interact with the fixed navigation panel, providing seamless access to various sections of the dashboard.
Data Insights: The charts are interactive, allowing users to view detailed financial insights.