Closes #185: Multi-party approval UI - Create PendingApprovalBadge component
This PR adds a pending approval badge to the navbar showing how many approvals need attention. Admins and shelter staff will see a red badge with the count on the "Approvals" link, and the system checks for updates every 5 minutes automatically.
Badge Component - Shows a red badge with pending approval count on the Approvals nav link
Approvals Page - A dedicated page where admins and shelter staff can see and review all pending approvals
Auto-Polling - Checks the backend every 5 minutes for new approvals
Secure Access - Badge and Approvals link only show up for admin and shelter users
Smart Display - Shows "9+" for high counts, hides when count is 0
32 comprehensive tests ensure the badge displays correctly, role-based access works, polling happens on schedule, and error states are handled properly.
Created: 10 new files (components, hooks, services, tests, and Approvals page)
Modified: Navbar.tsx (integrated badge and Approvals link)
Only admins and shelter staff can see the badge and access the Approvals page. Regular users are automatically redirected away.
Calls GET /shelter/approvals?status=PENDING&limit=0 every 5 minutes to get the latest pending approvals.
- Red circular badge showing count in top-right of Approvals link
- Shows "9+" for 10+ pending approvals
- Handles loading, errors, and empty states with clear messages
- Badge auto-hides when count reaches 0
- ✅ API polling every 5 minutes
- ✅ Red badge on Approvals nav item
- ✅ "9+" display cap
- ✅ Role-based visibility (SHELTER/ADMIN only)
- ✅ Badge hides at 0 count
- ✅ Full test coverage
- ✅ ApprovalsPage implementation
- ✅ Proper error handling
Once merged, we can add approval action buttons (approve/reject) and email notifications.
Type: Feature
Size: XS (~2-4 hours)
Epic: Multi-party approval UI
Labels: ui, phase-2, frontend