Implement Total Allocation Status Card (Figma)

[Baskarayelu]

Description

Implement the Total Allocation status card from the Figma design. Dark card with "Total Allocation" title, "Perfect! Your allocation is complete." message, 100% in red with checkmark, "of 100%", and full red progress bar.

Design reference (Figma): RemitWise Design

Design Requirements

Layout

• Left: "Total Allocation" (bold white). "Perfect! Your allocation is complete." (smaller grey).
• Right: "100%" (large bold red). Light red circle with white checkmark. "of 100%" (smaller grey below).
• Bottom: Horizontal progress bar — light grey track, solid red fill (100%), rounded ends. Optional subtle red glow on card.

Visual Design

• Dark grey rounded card; red for percentage and progress; success checkmark.

Technical Requirements

• Next.js App Router
• TypeScript
• Tailwind CSS
• Show when allocation total = 100%; message or styling can reflect incomplete state when ≠ 100%
• Responsive

Acceptance Criteria

• "Total Allocation" title and "Perfect! Your allocation is complete." text
• 100% in red with checkmark icon, "of 100%" below
• Full (100%) red progress bar at bottom
• Dark theme and optional glow match design
• Responsive layout

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[Tola-byte]

@Tola-byte has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would like to work on this.

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

[MerlinTheWhiz]

@MerlinTheWhiz has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Can I work on this please?

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

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I can build this allocation card with the progress bar and checkmark in 1 hour. I will make sure the 100% state displays correctly and the conditional styling works for incomplete allocations.

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

[anumukul]

@anumukul has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d like to take this issue and can deliver a fix within 24 hours.
I’ve worked on similar projects before and have relevant experience, so I should be able to handle this efficiently.

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

[drips-wave]

Congratulations, @Tola-byte! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @Tola-byte: 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 issued 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 🌊