Web/portfolio page

[TheRealLowyer]

Enhance Portfolio Page with Asset Management and Visualization Features

Description

This PR introduces several enhancements and features to the Portfolio page, enabling users to better manage their assets and visualize their portfolio. Below is a summary of the key changes:

---

Key Features Added

1. Portfolio Visualization

   • Added a Doughnut Chart to visually represent the user's portfolio distribution based on asset values.
   • Integrated a diverse color palette for the chart to enhance readability.

2. Asset Management

   • Implemented a "Add Asset" modal:
     • Fetches all available assets from the /api/asset/all endpoint.
     • Users can select an asset from a dropdown, specify the amount, and add it to their portfolio.
   • Integrated the /api/portfolio/add-asset endpoint to handle asset addition with proper error handling and feedback.

3. Asset Details Modal

   • Clicking on an asset card opens a modal displaying a TradingView widget with real-time asset information.
   • Blurred the background for better modal focus.

4. Improved Styling

   • Enhanced the overall layout of the Portfolio page for a cleaner user interface:
     • Positioned the chart and asset list for better alignment.
     • Styled key data points (Amount, Last Price, Total Value) for better visual emphasis.
   • Improved styling for modals, forms, and buttons:
     • Add Asset modal now features distinct, themed styling for dropdowns, input fields, and buttons.

---

APIs Integrated

• Portfolio Data:
  • /api/portfolio/get-portfolio: Fetch user portfolio details.
• Asset Details:
  • /api/asset/details: Retrieve detailed information for each asset.
• All Assets:
  • /api/asset/all: Fetch a list of all available assets for dropdown selection.
• Add Asset:
  • /api/portfolio/add-asset: Add a new asset to the user's portfolio with proper payload handling.

---

Bug Fixes

• Resolved issues with retrieving and passing the correct assetId when adding an asset.
• Fixed errors with data handling for the Add Asset modal.

---

Screenshots

Portfolio Page with Chart and Asset List:

• Screenshot showcasing the new layout and styling.

Add Asset Modal:

• Screenshot demonstrating the dropdown, input fields, and updated styling.

Asset Details Modal:

• Screenshot showing the TradingView widget within a modal.

---

Testing Instructions

1. Login to the application and navigate to the Portfolio page.
2. Verify the portfolio visualization chart and asset list.
3. Click on an asset card to open the Asset Details modal.
4. Click "Add Asset," select an asset, specify the amount, and add it to the portfolio.
5. Ensure the new asset appears in the portfolio list and chart updates accordingly.

---

Future Enhancements

• Include additional asset metrics in the chart for more detailed analysis.