[Feature]: Milestone Creation Modal Component

[SudiptaPaul-31]

🔍 Problem Statement

📖 Description

Develop a reusable modal component that allows users to create milestones for projects. The modal should capture essential milestone details and validate inputs to ensure data integrity.

Expected Behavior

• Title: Input field for milestone title.
• Description: Text area for milestone description.
• Amount: Numeric input for milestone payment amount.
• Due Date: Date picker for milestone deadline.
• Validation: Use Zod schema validation to enforce required fields, correct formats, and logical constraints (e.g., positive amount, future due date).

🛠 Technical Notes

• Implement as a reusable modal component that can be triggered from both client and freelancer dashboards.
• Maintain dark/minimal UI styling consistent with platform design.
• Ensure accessibility (keyboard navigation, ARIA labels).
• Integrate with backend APIs for milestone creation.
• Provide error messages inline when validation fails.
• Optimize for responsiveness across devices.

✅ Acceptance Criteria

• Modal opens and closes correctly.
• Users can input title, description, amount, and due date.
• Zod validation prevents invalid submissions.
• Successful submission creates a milestone and closes the modal.
• Error messages are displayed for invalid inputs.
• npm run lint and npm run build succeed.
• No regression in existing dashboard or wallet functionality.

📈 Expected Impact

High — Would significantly improve user experience

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 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

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello. I am Emmanuel, a full-stack developer.
I will like to work on the Milestone Creation Modal Component issue.
From my understanding, this task involves creating a reusable modal component that allows users to create milestones with a clean and intuitive UI, integrated properly into the existing project structure.
Looking forward to contributing. Thanks

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

[chibokaxavier]

@chibokaxavier has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m Xavier, a full-stack developer with a focus on building high-fidelity UI components and secure transaction-based workflows. I’m applying to develop the Milestone Creation Modal Component for TaskChain.

Reusable & Robust Architecture: I’ll build a modular React modal that integrates seamlessly into both client and freelancer dashboards, ensuring the dark/minimal UI remains consistent across the platform.

Airtight Data Validation: Using Zod, I’ll implement strict schema validation for every field—ensuring positive payment amounts, future-dated deadlines, and descriptive titles—with clear, inline error messages to guide the user.

Smooth UX & Accessibility: My solution includes full keyboard navigation support, ARIA-compliant labeling, and a responsive layout that looks great on mobile, all while handling the state transitions between form submission and modal closure.

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

[emdevelopa]

@emdevelopa has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’d like to take this up and implement the reusable Milestone Creation Modal with Zod validation, inline error handling, backend integration, and responsive, accessible UI consistent with the platform design.

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

[drips-wave]

Congratulations, @emdevelopa! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

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