Implement the Buyer Dashboard and Trade Preferences screens for the Open Spark application based on the provided wireframes. The Buyer Dashboard serves as the landing page after a buyer-side user logs in and displays energy consumption data, current trade details, and a date selection option. The Trade Preferences screen allows users to edit their trade settings, including energy units and pricing preferences.
Goals
[ ] Implement the Buyer Dashboard as per the provided wireframe:
Display "Total Energy Consumption" with options to select a date range.
Display "Total Energy Units" showing Previous Month, Current Month, and Average (per day).
Display "Current Trade" section with options to edit trade preferences.
[ ] Create screens for date selection:
Month selection (screen 2) to allow users to choose specific time ranges such as today, yesterday, last week, etc.
Date picker (screen 3) to enable users to select custom start and end dates.
[ ] Implement Trade Preferences screen (screen 4) when the user clicks on the "Current Trade" edit icon:
Allow users to specify energy units and price per unit.
Provide options to select preferences such as Solar Energy, Biomass Energy, Wind Power, and more.
Expected Outcome
A functional Buyer Dashboard and Trade Preferences UI that allows users to view their energy consumption, adjust trade settings, and select date ranges using a date picker or predefined ranges.
Acceptance Criteria
[ ] The Buyer Dashboard displays Total Energy Consumption, Total Energy Units, and Current Trade details as per the design.
[ ] Month selection screen and date picker screen allow users to select time ranges for data filtering.
[ ] Trade Preferences screen allows users to edit their trade preferences, including energy units, price per unit, and type of energy.
[ ] The UI is responsive and follows the design specifications provided in the wireframes.
Description
Implement the Buyer Dashboard and Trade Preferences screens for the Open Spark application based on the provided wireframes. The Buyer Dashboard serves as the landing page after a buyer-side user logs in and displays energy consumption data, current trade details, and a date selection option. The Trade Preferences screen allows users to edit their trade settings, including energy units and pricing preferences.
Goals
Expected Outcome
A functional Buyer Dashboard and Trade Preferences UI that allows users to view their energy consumption, adjust trade settings, and select date ranges using a date picker or predefined ranges.
Acceptance Criteria
Mockups / Wireframes
Figma here.
Product Name
Beckn - Open Spark
Domain
P2P Energy Trading
Tech Skills Needed
Complexity
Medium
Category
Frontend Development
Sub Category
Dashboard and Preferences Implementation