[FE-21] Build StatusBadge component

[mftee]

Problem

Document statuses (PENDING, ANALYZING, VERIFIED, FLAGGED, REJECTED) and dispute statuses appear in multiple places across the app. Without a shared component each page styles these differently, creating an inconsistent UI.

Proposed Solution

Create a reusable StatusBadge component inside frontend/module/components/status-badge/ that applies consistent styling for all status values used across the platform.

Acceptance Criteria

• Accepts a status prop (string) and an optional size prop (sm, md)
• Renders a pill-shaped badge with a colored background and white or dark text
• Color mapping: PENDING=grey, ANALYZING=blue, VERIFIED=green, FLAGGED=orange, REJECTED=red, OPEN=blue, UNDER_REVIEW=amber, RESOLVED=green
• Converts status strings to title case for display (e.g. UNDER_REVIEW becomes Under Review)
• For unrecognised status values renders a neutral grey badge with the raw string
• Includes aria-label for screen readers
• All component files live inside frontend/module/components/status-badge/

[dotmantissa]

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

I can fix this.
ETA: 1 - 2 hours.

Kindly assign it to me.

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

[NteinPrecious]

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

https://www.drips.network/wave/stellar/issues/d3df4daa-0d29-4187-ae46-dea1a5c3a0da?filters=eyJyZXBvSWQiOiJjY2Y0YjMxNy0wYmMyLTQ5YmItYTA3Mi02NGE4YzZmMmZhNmMiLCJzdGF0ZSI6Im9wZW4ifQ%3D%3D&sortBy=createdAt

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

[drips-wave]

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

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

[drips-wave]

This issue has been completed by @NteinPrecious as part of the Stellar Wave Program's 5th Wave 🥳

😎 @NteinPrecious: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.