[Frontend · Multi-party approval UI] Create PendingApprovalBadge componentfeat: add pending approvals badge

package.json

@@ -16,17 +16,20 @@
     "e2e": "playwright test"
   },
   "dependencies": {
+    "@mswjs/interceptors": "^0.41.9",
     "@tailwindcss/vite": "^4.2.0",
     "@tanstack/react-query": "^5.100.14",
     "axios": "^1.16.1",
     "date-fns": "^4.1.0",
+    "graphql": "^16.13.2",
     "lucide-react": "^0.575.0",
     "react": "^19.2.4",
     "react-copy-to-clipboard": "^5.1.1",
     "react-dom": "^19.2.4",
     "react-hot-toast": "^2.6.0",
     "react-router-dom": "^7.13.1",
     "tailwindcss": "^4.2.0",
+    "type-fest": "^5.6.0",
     "undici": "^8.1.0"
   },
   "devDependencies": {
@@ -47,7 +50,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "jsdom": "^29.0.1",
-    "msw": "^2.12.14",
+    "msw": "^2.14.6",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1",

public/mockServiceWorker.js

@@ -7,7 +7,7 @@
  * - Please do NOT modify this file.
  */
 
-const PACKAGE_VERSION = '2.13.6'
+const PACKAGE_VERSION = '2.14.6'
 const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

src/components/adoption/ApproveRejectButtons/ApproveRejectButtons.test.tsx

@@ -27,15 +27,17 @@ describe('ApproveRejectButtons', () => {
     vi.clearAllMocks();
 
     mockUseRoleGuard.mockReturnValue({
-      role: 'admin',
+      role: 'ADMIN',
       isAdmin: true,
+      isShelter: false,
       isUser: false,
+      canApprove: true,
       hasAccess: vi.fn().mockReturnValue(true),
     });
 
     mockUseAdoptionApprovals.mockReturnValue({
       hasDecided: false,
-      requiredRoles: ['admin'],
+      requiredRoles: ['ADMIN'],
       mutateApprovalDecision: mockMutateApprovalDecision,
       isPending: false,
     });
@@ -48,7 +50,7 @@ describe('ApproveRejectButtons', () => {
     it('does NOT render when user already decided', () => {
       mockUseAdoptionApprovals.mockReturnValue({
         hasDecided: true,
-        requiredRoles: ['admin'],
+        requiredRoles: ['ADMIN'],
         mutateApprovalDecision: mockMutateApprovalDecision,
         isPending: false,
       });
@@ -59,9 +61,11 @@ describe('ApproveRejectButtons', () => {
 
     it('does NOT render when user role not in requiredRoles', () => {
       mockUseRoleGuard.mockReturnValue({
-        role: 'user',
+        role: 'USER',
         isAdmin: false,
+        isShelter: false,
         isUser: true,
+        canApprove: false,
         hasAccess: vi.fn().mockReturnValue(false),
       });
 
@@ -118,7 +122,7 @@ describe('ApproveRejectButtons', () => {
     it('Buttons disabled during loading and Spinner visible when isPending === true', () => {
       mockUseAdoptionApprovals.mockReturnValue({
         hasDecided: false,
-        requiredRoles: ['admin'],
+        requiredRoles: ['ADMIN'],
         mutateApprovalDecision: mockMutateApprovalDecision,
         isPending: true,
       });

src/components/badges/PendingApprovalBadge.tsx

@@ -0,0 +1,25 @@
+import { usePendingApprovalsCount } from "../../hooks/usePendingApprovalsCount";
+import { useRoleGuard } from "../../hooks/useRoleGuard";
+
+interface PendingApprovalBadgeProps {
+  className?: string;
+}
+
+export function PendingApprovalBadge({ className = "" }: PendingApprovalBadgeProps) {
+  const { canApprove } = useRoleGuard();
+  const { count, displayCount } = usePendingApprovalsCount();
+
+  if (!canApprove || count === 0) {
+    return null;
+  }
+
+  return (
+    <span
+      data-testid="pending-approval-badge"
+      aria-label={`${count} pending approval${count === 1 ? "" : "s"}`}
+      className={`inline-flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold leading-none text-white ${className}`}
+    >
+      {displayCount}
+    </span>
+  );
+}

src/components/badges/__tests__/PendingApprovalBadge.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PendingApprovalBadge } from "../PendingApprovalBadge";
+
+const mockUsePendingApprovalsCount = vi.fn();
+const mockUseRoleGuard = vi.fn();
+
+vi.mock("../../../hooks/usePendingApprovalsCount", () => ({
+  usePendingApprovalsCount: () => mockUsePendingApprovalsCount(),
+}));
+
+vi.mock("../../../hooks/useRoleGuard", () => ({
+  useRoleGuard: () => mockUseRoleGuard(),
+}));
+
+describe("PendingApprovalBadge", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseRoleGuard.mockReturnValue({
+      role: "ADMIN",
+      isAdmin: true,
+      isShelter: false,
+      isUser: false,
+      canApprove: true,
+      hasAccess: vi.fn().mockReturnValue(true),
+    });
+  });
+
+  it("renders the exact count when it is below 10", () => {
+    mockUsePendingApprovalsCount.mockReturnValue({
+      count: 4,
+      displayCount: "4",
+      isLoading: false,
+      isError: false,
+    });
+
+    render(<PendingApprovalBadge />);
+
+    expect(screen.getByTestId("pending-approval-badge")).toHaveTextContent("4");
+  });
+
+  it('caps the visible label at "9+" above 9', () => {
+    mockUsePendingApprovalsCount.mockReturnValue({
+      count: 12,
+      displayCount: "9+",
+      isLoading: false,
+      isError: false,
+    });
+
+    render(<PendingApprovalBadge />);
+
+    expect(screen.getByTestId("pending-approval-badge")).toHaveTextContent("9+");
+  });
+
+  it("hides the badge for non-approval roles", () => {
+    mockUseRoleGuard.mockReturnValue({
+      role: "USER",
+      isAdmin: false,
+      isShelter: false,
+      isUser: true,
+      canApprove: false,
+      hasAccess: vi.fn().mockReturnValue(false),
+    });
+
+    mockUsePendingApprovalsCount.mockReturnValue({
+      count: 6,
+      displayCount: "6",
+      isLoading: false,
+      isError: false,
+    });
+
+    const { container } = render(<PendingApprovalBadge />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("hides the badge when the count is zero", () => {
+    mockUsePendingApprovalsCount.mockReturnValue({
+      count: 0,
+      displayCount: "0",
+      isLoading: false,
+      isError: false,
+    });
+
+    const { container } = render(<PendingApprovalBadge />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});

src/components/escrow/__tests__/CompleteAdoptionButton.test.tsx

@@ -23,9 +23,11 @@ beforeEach(() => {
 
   // must include all fields useRoleGuard returns: role, isAdmin, isUser
   vi.mocked(useRoleGuard).mockReturnValue({
-    role: "admin",
+    role: "ADMIN",
     isAdmin: true,
+    isShelter: false,
     isUser: false,
+    canApprove: true,
     hasAccess: vi.fn().mockReturnValue(true),
   });
 
@@ -47,9 +49,11 @@ const defaultProps = {
 describe("CompleteAdoptionButton", () => {
   it("is hidden for non-admins", () => {
     vi.mocked(useRoleGuard).mockReturnValue({
-      role: "user",
+      role: "USER",
       isAdmin: false,
+      isShelter: false,
       isUser: true,
+      canApprove: false,
       hasAccess: vi.fn().mockReturnValue(false),
     });
     const { container } = render(<CompleteAdoptionButton {...defaultProps} />);