[FE-19] Build Onboarding Checklist Widget for new member dashboard

[devwums]

Problem

New members land on the dashboard with no guided orientation. There is no checklist or indicator showing them what to do next to get started with the platform.

Proposed Solution

Create frontend/cntr/OnboardingChecklist/OnboardingChecklist.tsx. Props: steps: { key: string, label: string, isComplete: boolean, description: string }[], onStepClick?: (key: string) => void. Renders a card with a progress bar (e.g., "2 of 4 completed"), each step as a row with checkbox state, and hides (or shows a completion state) when all steps are done. All implementation must live inside frontend/cntr/.

Acceptance Criteria

• File at frontend/cntr/OnboardingChecklist/OnboardingChecklist.tsx
• Progress bar width reflects completedCount / totalCount
• Completed steps show a green checkmark and a strikethrough label
• Incomplete steps call onStepClick(key) when clicked
• Shows a "Onboarding complete! 🎉" state when all steps are done (without emoji if not wanted — plain text is fine)
• Test in frontend/cntr/OnboardingChecklist/OnboardingChecklist.test.tsx

[Rocket1960]

@Rocket1960 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 @Rocket1960 to this issue.

[SharifIbrahimDev]

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

Hi maintainer, I’d like to work on this issue.

I have experience building reusable React/TypeScript UI components and writing comprehensive component tests. I can implement the onboarding checklist widget with a clean, accessible, and reusable design that fits naturally into the new member dashboard experience.

My implementation will include:

• Creating frontend/cntr/OnboardingChecklist/OnboardingChecklist.tsx
• Rendering onboarding progress with a dynamic progress bar based on completed steps
• Displaying completed steps with clear visual indicators and strikethrough labels
• Supporting interactive incomplete steps through the optional onStepClick callback
• Showing a dedicated completion state when all onboarding tasks are finished
• Adding thorough tests in OnboardingChecklist.test.tsx covering rendering, progress calculation, click behavior, and completion states

I’ll ensure the component is fully contained within frontend/cntr/, reusable, well-tested, and aligned with the project's existing frontend patterns.

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

[datagerl]

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

Hi maintainer can I take this work please

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

[drips-wave]

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

🧑‍💻 @SharifIbrahimDev: 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 @SharifIbrahimDev as part of the Stellar Wave Program's 5th Wave 🥳

😎 @SharifIbrahimDev: 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.