Wire live health data to `SystemStatusBanner`

[Oluwaseyi89]

Problem Statement

The SystemStatusBanner component currently renders with hardcoded static status strings, rather than consuming live health data from the detailedStatus property in the health Zustand slice. This results in inaccurate or stale status information being shown to users, undermining trust in the system's observability features.

Social Media Link

Let's collaborate on Discord. And ensure to star our repo.

Context

• The health Zustand slice manages live system health data, including service status, uptime, and alerts.
• SystemStatusBanner is intended to display real-time system health, but is not wired to the global state.
• Accurate, live health status is critical for user awareness, operational transparency, and incident response.

Requirements

• Refactor SystemStatusBanner to consume the detailedStatus property from the health Zustand slice.
• Ensure the banner updates reactively as health data changes (e.g., via polling, WebSocket, or background refresh).
• Remove all hardcoded or static status strings from the component.
• Display key health indicators (e.g., overall status, affected services, last updated time) using live data.
• Add loading and error states for when health data is unavailable or fails to load.
• Add tests to verify correct data binding, reactivity, and UI rendering.
• Update documentation and code comments as needed.

Acceptance Criteria

• SystemStatusBanner displays live health data from the Zustand slice.
• The banner updates reactively as health data changes.
• No hardcoded or static status strings remain in the component.
• Loading and error states are handled gracefully.
• Tests verify correct data binding and UI updates.
• Documentation is updated if necessary.

Definition of Done

• All requirements and acceptance criteria are met.
• Code is reviewed, merged, and deployed to staging.
• No critical bugs or regressions are present.
• Stakeholders confirm that the banner reflects live system health accurately.

Directory to Work On

• project-portal/project-portal-web

[brodapeethar]

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

Hi maintainer, i have gone through the task description and will like to work on this please. ETA: 5hours. Thank you

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

[drips-wave]

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

🧑‍💻 @brodapeethar: 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 🌊

[dee-john]

@dee-john has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hi, I'd like to work on this issue! because I am very conversant with solving problems like this!

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

[Achievers-sketch]

@Achievers-sketch has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I’d like to work on this issue because real-time status visibility improves user trust. I have experience with React, Zustand, and testing.

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

[Babigdk]

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

Hello sir, I would love to work on this issue. Kindly assign it to me.

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

[khanavi272-spec]

@khanavi272-spec has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I would like to work on this issue

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

[drips-wave]

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

🧑‍💻 @Babigdk: 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 🌊