Skip to content

feat(#185): Implement PendingApprovalBadge component for multi-party …#298

Open
Mitch5000 wants to merge 3 commits intoamina69:mainfrom
Mitch5000:feat/pending-approval-badge
Open

feat(#185): Implement PendingApprovalBadge component for multi-party …#298
Mitch5000 wants to merge 3 commits intoamina69:mainfrom
Mitch5000:feat/pending-approval-badge

Conversation

@Mitch5000
Copy link
Copy Markdown

Adds a pending approval badge to the navbar so admins and shelter staff can see how many approvals need attention at a glance.
What's new

  • Red badge showing pending approval count on the Approvals nav link
  • Dedicated Approvals page for reviewing pending items
  • Auto-checks for updates every 5 minutes
  • Only visible to admin/shelter users
  • Shows "9+" for 10+ pending approvals

Files changed

  • Created: 10 new files (components, hooks, services, tests, page)
  • Modified: Navbar.tsx

Why this matters
Admins and shelter staff will get real-time visibility into pending approvals without having to navigate to a separate page every time.

Closes #185

@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 29, 2026

@Mitch5000 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Mitch5000 Mitch5000 force-pushed the feat/pending-approval-badge branch from bd3fbc8 to ab553b9 Compare March 29, 2026 18:45
Mitch5000 added 2 commits March 29, 2026 19:49
…-party approval UI

- Create PendingApprovalBadge component showing pending approval count
- Integrate badge into Navbar on Approvals nav link
- Add approvalService with GET /shelter/approvals endpoint
- Implement usePendingApprovals hook with 5-minute polling
- Create ApprovalsPage for managing pending approvals
- Add comprehensive unit tests (32 total):
  * PendingApprovalBadge component tests (9)
  * usePendingApprovals hook tests (8)
  * approvalService tests (6)
  * Navbar integration tests (9)
  * ApprovalsPage tests (10)

Features:
- Red badge displaying pending approval count
- '9+' display cap for counts above 9
- Role-based visibility (SHELTER & ADMIN only)
- Badge auto-hides when count reaches 0
- Real-time polling every 5 minutes
- Loading, error, and forbidden states
- Type-safe API responses
- Full error handling
@amina69
Copy link
Copy Markdown
Owner

amina69 commented Mar 30, 2026

@Mitch5000 code failing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend · Multi-party approval UI] Create PendingApprovalBadge component

2 participants