Skip to content

feat(ui): DisputeNavBadge component with role-based polling — closes #201#254

Open
spiffamani wants to merge 1 commit intoamina69:mainfrom
spiffamani:feat/dispute-nav-badge-issue-201
Open

feat(ui): DisputeNavBadge component with role-based polling — closes #201#254
spiffamani wants to merge 1 commit intoamina69:mainfrom
spiffamani:feat/dispute-nav-badge-issue-201

Conversation

@spiffamani
Copy link
Copy Markdown

Summary

Implements DisputeNavBadge — a count badge on the Disputes nav item,
closing issue #201.

What's New

  • useDisputeCount.ts — Polls GET /api/disputes every 5 minutes
    • ADMIN: counts all OPEN + UNDER_REVIEW disputes
    • USER/SHELTER: counts only disputes where raisedBy === currentUserId
    • Resets to 0 when user visits /disputes or /admin/disputes
    • Max display capped at 9+
  • DisputeNavBadge.tsx — Badge component with aria-label for accessibility
  • Navbar.tsx — Disputes nav link added with DisputeNavBadge integrated

Tasks Completed

  • ADMIN sees count of OPEN + UNDER_REVIEW disputes
  • USER/SHELTER sees count of their own open disputes
  • Polls every 5 minutes using usePolling
  • Resets count when user visits /disputes or /admin/disputes
  • Max display: 9+
  • Unit tests: admin sees total, user sees own, reset on visit

Test Results

✓ DisputeNavBadge (6 tests)
  ✓ renders nothing when count is 0
  ✓ admin sees total open dispute count
  ✓ user sees only their own dispute count
  ✓ displays "9+" when count exceeds 9
  ✓ resets to zero when on disputes page
  ✓ has accessible aria-label with count

Test Files  1 passed | Tests  6 passed

Checklist

  • npm test — 6/6 passing
  • tsc --noEmit — 0 errors
  • Follows usePolling pattern from existing hooks
  • Follows useRoleGuard for role detection
  • Accessible — aria-label with count

…amina69#201)

- Add useDisputeCount hook: polls GET /api/disputes every 5 min
  - ADMIN: counts all OPEN + UNDER_REVIEW disputes
  - USER/SHELTER: counts only disputes where raisedBy === currentUserId
  - Resets to 0 when user visits /disputes or /admin/disputes
  - Max display capped at 9+
- Add DisputeNavBadge component with aria-label for accessibility
- Integrate DisputeNavBadge into Navbar Disputes link
- Add 6 unit tests covering all acceptance criteria
@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 28, 2026

Hey @spiffamani! 👋 It looks like this PR isn't linked to any issue.

If this PR is for one of the issues assigned to you as part of a Wave, please link it to ensure your contribution is tracked properly. You can do this by adding a keyword to the PR description (e.g., Closes #123), or by clicking a button below:

Issue Title
#192 [Frontend · Dispute system UI] Create DisputeBanner component Link to this issue
#201 [Frontend · Dispute system UI] Create DisputeNavBadge component Link to this issue

ℹ️ Learn more about linking PRs to issues

@amina69
Copy link
Copy Markdown
Owner

amina69 commented Mar 28, 2026

@spiffamani you have lint error
Screenshot from 2026-03-28 13-21-30

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.

2 participants