[FE-40] PWA manifest and push notification opt-in

[yusuftomilola]

Overview

ManageHub has no PWA setup — members cannot install it to their home screen and receive no push notifications when the tab is closed. A PWA manifest and service worker turn the web app into an installable, push-capable experience.

Context

• frontend/app/layout.tsx — root layout for adding manifest link and SW registration
• frontend/public/ — location for manifest.json and sw.js
• Depends on BE-50 for the push subscription endpoints and VAPID public key
• Next.js 15 App Router — use next/metadata for manifest linking

Tasks

• Create frontend/public/manifest.json:
  • name, short_name, start_url, display: "standalone", theme_color, background_color
  • Icon entries: 192×192 and 512×512 PNG icons in frontend/public/icons/
• Register service worker in frontend/app/layout.tsx client component via navigator.serviceWorker.register('/sw.js')
• Create frontend/public/sw.js — handles push events and shows self.registration.showNotification(title, { body, icon, data: { url } }); clicking the notification navigates to data.url
• Create frontend/components/notifications/PushPermissionBanner.tsx:
  • Shown once after login if Notification.permission === 'default'
  • "Enable Notifications" button calls Notification.requestPermission(), then fetches VAPID public key from GET /notifications/push/vapid-public-key, subscribes via PushManager.subscribe(), and posts the subscription to POST /notifications/push/subscribe
  • "Not now" dismisses and stores push_dismissed = true in localStorage (do not show again for 7 days)
• Add the banner to frontend/components/dashboard/DashboardLayout.tsx
• Handle the case where the browser does not support push notifications gracefully (feature detection, no error thrown)

Files to Modify / Create

• New: frontend/public/manifest.json
• New: frontend/public/sw.js
• New: frontend/public/icons/icon-192.png, icon-512.png
• New: frontend/components/notifications/PushPermissionBanner.tsx
• frontend/app/layout.tsx
• frontend/components/dashboard/DashboardLayout.tsx

[Chigybillionz]

please assign