[Frontend] Add Unsaved Changes Warning Before Navigation

[Abd-Standard]

Description

Prevent accidental data loss by warning users when they attempt to leave a page with unsaved notification edits.

Tasks
Detect unsaved form state.
Display confirmation dialog.
Ignore warning after successful save.
Support browser refresh events.

Acceptance Criteria
Users are warned before losing changes.
Saved forms do not trigger warnings.
Refresh and navigation scenarios are covered.

[nelly439]

Hi, I’d like to take this on.

I understand the goal is to prevent accidental data loss by detecting unsaved form state and warning users before navigation or refresh. I’ll implement a reliable dirty-state check, integrate a confirmation dialog for navigation events (including browser refresh), and ensure the warning is cleared after a successful save.

I’ll also cover edge cases and add tests to ensure consistent behavior across all navigation scenarios.

Let me know if I can proceed.

[Johnsource-hub]

Hello, I’m a full stack developer with hands-on experience building with variety of tools including Nextjs, nodejs, nestjs, React, Typescript and more

I focus on writing clear, maintainable code and making sure features work as expected end to end, not just in isolation. I communicate progress regularly and keep things transparent as I work. I’m confident I can complete this task within an ETA of 4 HOURS

[mxrtins04]

I've built unsaved-change guards before using beforeunload for browser refresh and a router-level navigation block for in-app transitions. The approach here is straightforward: track dirty state from the first form mutation, show a confirmation dialog on any exit attempt, and clear the flag on successful save. I'll cover both the browser refresh case via beforeunload and the client-side navigation case via the router guard, with tests for each scenario.

[Chigybillionz]

Hi, I'd like to work on this issue.

I'm a full-stack developer with experience handling unsaved state in React apps. My plan:

• Track dirty form state and compare it against the last saved snapshot to detect unsaved changes
• Show a confirmation dialog on in-app navigation attempts when unsaved changes exist, using the router's navigation guard
• Hook into the browser's beforeunload event to cover refresh and tab-close scenarios
• Clear the dirty flag immediately after a successful save so no false warning is triggered

Can I be assigned?

[grantfox-oss]

🦊 GrantFox — @Johnsource-hub has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

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

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Johnsource-hub's PR #43 was approved and merged by @Abd-Standard.

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

👏 Great work, @Johnsource-hub! Keep contributing to Core-Foundry.