Add unsaved changes warning when navigating away from forms

[pragmaticAweds]

Context

Users filling out the Distribution or Payment Stream forms can accidentally navigate away (clicking a sidebar link, pressing the browser back button) and lose all their entered data. The distribution form persists state to sessionStorage, but there is no warning before navigation that gives users a chance to stay and finish. This is especially painful for distribution forms with many manually-entered recipients.

What Success Looks Like

• Navigating away from a form with unsaved changes triggers a browser-native confirmation dialog ("You have unsaved changes. Are you sure you want to leave?")
• The warning only appears when there is actual user input (not on a fresh/empty form)
• Browser back button, sidebar navigation, and tab close are all covered
• The warning does not appear after a successful form submission

Implementation Guidance

• Use the beforeunload event for tab close/refresh: window.addEventListener('beforeunload', handler)
• Use Next.js App Router's useRouter or a custom hook to intercept client-side navigation
• apps/web/src/app/(overview)/distribution/page.tsx — add the hook here, check state.recipients.length > 0 or form dirty state
• apps/web/src/components/modules/payment-stream/CreatePaymentStream.tsx — add the hook here
• Create a reusable useUnsavedChanges(isDirty: boolean) hook in apps/web/src/hooks/
• The beforeunload event should be added when isDirty is true and removed when false or on cleanup
• For Next.js App Router navigation, consider using next/navigation's route events or a global navigation guard