Implement the Add / Edit Savings Goal form and wire app/dashboard/goals/page.tsx to live state

[Baskarayelu]

📋 Description

app/dashboard/goals/page.tsx renders a grid of SavingsGoalCard from a static goalsData array (Children's Education, Emergency Medical Fund, Family Home...). There is no way to add or edit a goal, even though validation already exists in lib/validation/savings-goals.ts (with a test at tests/unit/validation/savings-goals.test.ts) and a contract layer at lib/contracts/savings-goals.ts.

This issue adds an Add/Edit Savings Goal modal form and lifts the goals list into state.

Why this matters: savings goals are where remitted money becomes a plan. A read-only sample grid can't let families actually create the goals the product is built around.

🎯 Requirements & Context

Functional requirements

• Add an "Add Goal" action to the PageHeader CTA that opens a modal form (title, description, target amount, target date, icon).
• Validate inputs using lib/validation/savings-goals.ts.
• Support editing an existing goal from each SavingsGoalCard.
• Lift goalsData into component state; new/edited goals update the grid and the stats in SavingsGoalsStatsCards.
• Recompute daysLeft/isOverdue from the target date rather than storing them statically.

Context & constraints

• Follow the modal/focus-trap conventions established across the app.
• Submit can stay client-side state for this issue; wiring to /api/goals may be a follow-up.

🛠️ Suggested Execution

git checkout -b feat/savings-goal-add-edit

• Build the modal, validate, manage state, recompute derived fields, add TSDoc.
• Extend the existing validation test for any new rules.

npm run lint
npx tsc --noEmit
npm run test:coverage
npm run build

• Edge cases: target date in the past (overdue), target less than current, decimal amounts, very long titles (truncation), reduced motion, mobile 320px.
• a11y: modal focus trap, ESC to close, labelled inputs.
• i18n: externalize labels.

Example commit message

feat(goals): add/edit savings goal modal wired to live state

Adds a validated Add/Edit form, lifts goalsData into state, and
recomputes daysLeft/isOverdue from the target date.

✅ Acceptance Criteria & Guidelines

Requirement	Target
Add + edit goal flows	Required
Validation via savings-goals validator	Required
Derived fields recomputed	Required
Validation test coverage	≥ 90%
Modal a11y (focus trap, ESC)	Required
Responsive + i18n	Required
Lint + typecheck + build clean	Required
Timeframe	96 hours from assignment

💬 Community & Support

Join the RemitWise contributor community on Discord: https://discord.gg/CtQuPZFMA

Comment to claim before starting. 🚀

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[ekwe7]

I would love to work on this issue. I have experience building production ready applications and collaborating through GitHub workflows. I'll carefully analyze the current implementation, propose a reliable solution, and submit a well-tested PR. My focus is on clean code, maintainability, and timely delivery

[grantfox-oss]

🦊 GrantFox — @ekwe7 has been assigned to this issue!

Next steps:

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

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox!

@ekwe7's PR #495 was approved and merged by @Baskarayelu.

🏆 @ekwe7: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (363 total points). Track your full progress on GrantFox.

👏 Great work, @ekwe7! Keep contributing to Remitwise-Org.