[FEATURE] Frontend: Risk Management and Leverage Dashboard (#55)

[KevinMB0220]

📋 Feature Description

Clear and concise description of the feature:
Create the UI panel RiskDashboardPanel to display wallet risk profiling, collateral leverage indices, active alerts, and potential liquidation prices.

🎯 Motivation

Why is this feature needed? What problem does it solve?
Roadmap item #55. Visual representation of risk score factors so users can manage assets efficiently.

💡 Proposed Solution

How should this feature work? Include technical details:
HTML component panel integrated into the dashboard showing gauge charts and color-coded risk alerts.

🔧 Technical Implementation

Implementation details for AI/developers:

Files to Create/Modify

• packages/frontend/src/panels/risk-dashboard.ts

Dependencies

• None

API Changes

// N/A

✅ Acceptance Criteria

• Renders portfolio risk scores.
• Shows warnings for critical thresholds.
• Responsive layout.

📚 Additional Context

None.

🔗 Related Issues

• Relates to [FEATURE] Frontend: Responsive mobile layout and accessibility #237

🏷️ Labels

Phase: phase-3
Component: frontend
Priority: medium

---

[EmannuellaO]

@EmannuellaO has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi! I've carefully reviewed the entire task description and fully understand the requirements and expected outcome.
I have experience working on similar tasks and I'm confident I can complete this within about an hour. I'd be happy to take ownership of this issue and submit a clean, well-tested solution promptly.
If it's available, please assign it to me. Thank you!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @EmannuellaO to this issue.

[mariocodecr]

@mariocodecr has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi! I’m a frontend/full-stack engineer with experience building React/TypeScript dashboards, financial interfaces, and data-visualization components focused on usability and responsive design. I’ve worked on trading, analytics, and portfolio-style UIs where risk indicators, alerts, and visual hierarchy are critical for user decision-making.

For this issue, I’d implement the RiskDashboardPanel as a modular and responsive dashboard component focused on clear visualization of portfolio exposure and leverage-related metrics.

My approach would include:

• Creating packages/frontend/src/panels/risk-dashboard.ts
• Building reusable UI sections for:
  • portfolio risk scores
  • leverage/collateral indicators
  • liquidation price summaries
  • active risk alerts
• Implementing:
  • gauge/progress-style visual indicators
  • color-coded severity states
  • threshold-based warning banners
  • responsive layouts for desktop and smaller screens
• Structuring the panel so future metrics and integrations can be added without major refactors.

I’d also pay close attention to:

• visual clarity
• accessibility
• loading/empty states
• maintainable styling patterns
• consistent dashboard spacing and hierarchy

Why I’m a good fit:

• Experience building financial and analytics dashboards
• Strong React and TypeScript frontend skills
• Familiarity with responsive UI architecture
• Experience with state-driven visual components
• Focus on UX and information hierarchy in data-heavy interfaces

I also care about making complex financial/risk information understandable at a glance, so I’d aim to create a dashboard that is both visually clean and operationally useful for end users.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mariocodecr to this issue.

[Gezziy]

@Gezziy has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi I would like to contribute to this issue. I have solid experience with React, Next.js, TypeScript, and Tailwind CSS, and I enjoy building fast, responsive, and maintainable frontend applications. I pay close attention to UI quality, performance, and clean integrations, and I’m confident I can deliver a smooth and reliable solution for this task.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Gezziy to this issue.

[SaviourBosan]

@SaviourBosan has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Good day I would love to work on this issue. I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process. Please consider my application.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SaviourBosan to this issue.

[drips-wave]

Congratulations, @EmannuellaO! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @EmannuellaO: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊