Skip to content

Build invoice notification center #30

@Kingsman-99

Description

@Kingsman-99

Label: complexity: high
Points: 200

Description

There is no central place to see all recent invoice activity. This issue adds a notification bell icon in the header that opens a dropdown showing all recent events (payments received, invoices funded, invoices released) stored in localStorage, with unread count badge and mark-all-read functionality.

Technical Context

Involves a new src/components/NotificationCenter.tsx added to layout.tsx. Notifications are written to localStorage by the polling mechanism (Issue 1) when invoice state changes are detected. Each notification has id, type, invoiceId, message, timestamp, and read fields.

Acceptance Criteria

  • Bell icon in header shows unread count badge
  • Dropdown lists notifications in reverse chronological order
  • Unread notifications are visually distinct from read ones
  • "Mark all as read" button clears the unread badge
  • Clicking a notification navigates to the relevant invoice
  • Mobile responsive — works on 375px screens
  • No TypeScript errors

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions