Implement Actionable Insights UI Engine

[hcaballero2]

Description

---

Lets put it all togther!!
Develop the frontend logic and UI components to display targeted feedback and resources on the dashboard, driven by the calculated health score and the formalized tech lead mapping matrix.

User Story

---

As a dashboard user, I want to see specific, actionable suggestions and resources when my project's health score drops, so that I can quickly find the documentation or people needed to fix the underlying issues.

Acceptance Criteria

---

• The frontend evaluates the dynamic health score data payload from the backend.
• If a metric falls below a healthy threshold, an "Actionable Insights" panel dynamically renders on the dashboard.
• The panel displays the exact text, resources, and links defined in the tech lead mapping matrix.
• If the health score is perfect, the panel displays a success state or remains hidden.

Implementation Notes

---

• Create a new React component for the Insights panel.
• Import the mapping matrix from Sub-Issue Analyze Tech Lead Feedback and Map Resources #176 as a configuration file or constant in the frontend code.
• Ensure the UI clearly connects the suggested resource to the specific metric that triggered it.

Testing Notes

---

• Use mock backend data to intentionally trigger a low health score for various metrics, verifying that the correct actionable resources render in the UI.
• Click all generated links to ensure they route to the correct internal or external documentation.

Dependencies

---

Relies on #173 and #176

DUE NO LATER THAN 04/17/26