Add an inline status code and severity Badge to the StatusDot variants

[mikewheeleer]

Let StatusDot accept a custom label and align with the Badge palette

Description

src/components/StatusDot.tsx hard-codes its three labels ("Operational", "Degraded", "Down") and offers no way to override the text, so the admin page cannot show, say, "Paused" using the same dot affordance — it would have to render a separate element. The component also re-declares colour values that overlap conceptually with Badge's variants. This issue adds an optional label override (defaulting to the existing text) so the dot is reusable beyond the three fixed states, keeping the colour-coded dot intact.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Add an optional label?: ReactNode prop that overrides the default per-variant text; keep the existing defaults when omitted.
• Keep the aria-hidden colour dot plus the visible text label so meaning is not conveyed by colour alone.
• Preserve the existing variant union (ok | warn | down) and the public shape for current callers (admin/stats).
• Do not change the rendered DOM structure for existing call sites that omit label.

Suggested execution

• Fork the repo and create a branch
• git checkout -b enhancement/components-statusdot-custom-label
• Implement changes
  • Write code in: src/components/StatusDot.tsx.
  • Write comprehensive tests in: create src/components/__tests__/StatusDot.test.tsx — assert default labels per variant, a custom label overrides, and the dot is aria-hidden.
  • Add documentation: add a JSDoc block documenting the variants and the label override.
  • Validate the text label is always present for screen readers.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: each variant default, a custom label, and an empty-string label fallback.
• Include the npm test output.

Example commit message

feat(components): add optional custom label to StatusDot

Guidelines

• Minimum 95 percent test coverage for the component.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[gloskull]

Hello, 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.
My PR will be submitted in under 10hours.

[real-venus]

Hey, I've read through the issue and I understand it.

Could you assign it to me? I can finish this within 24 hrs.

[grantfox-oss]

🦊 GrantFox — @real-venus has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #152)
2. Your PR will be reviewed by the Agentpay-Org maintainers

Good luck! Track your progress on GrantFox.