done

src/components/approval/ApprovalStatusWidget.tsx

@@ -121,9 +121,4 @@ export const ApprovalStatusWidget: React.FC<ApprovalStatusWidgetProps> = ({
       </div>
     </div>
   );
-};
-
-
-  // Issues Implemented
-
-
+};

src/hooks/__tests__/useDisputeHooks.test.tsx

@@ -0,0 +1,69 @@
+import { renderHook, act } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import React from "react";
+import { http, HttpResponse } from "msw";
+import { server } from "../../mocks/server";
+import toast from "react-hot-toast";
+import { useMutateRaiseDispute } from "../useMutateRaiseDispute";
+
+
+
+vi.mock("react-hot-toast", () => ({
+  default: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      mutations: { retry: false },
+      queries: { retry: false },
+    },
+  });
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+  return { queryClient, wrapper };
+}
+
+describe("Dispute Hooks", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("useMutateRaiseDispute", () => {
+    it("calls POST /disputes and triggers success toast", async () => {
+      const { wrapper } = createWrapper();
+
+      let requestedUrl = "";
+      let requestedMethod = "";
+      server.use(
+        http.post(/\/disputes/, ({ request }) => {
+          requestedUrl = request.url;
+          requestedMethod = request.method;
+          return HttpResponse.json({ adoptionId: "adoption-123" });
+        })
+      );
+
+      const { result } = renderHook(() => useMutateRaiseDispute(), { wrapper });
+
+      let responseData: any;
+      await act(async () => {
+        responseData = await result.current.mutateAsync({
+          adoptionId: "adoption-123",
+          raisedBy: "user-buyer-1",
+          reason: "delayed_handover",
+        });
+      });
+
+      expect(result.current.isError).toBe(false);
+      expect(toast.success).toHaveBeenCalled();
+      expect(responseData?.adoptionId).toBe("adoption-123");
+      expect(requestedMethod).toBe("POST");
+      expect(requestedUrl).toMatch(/\/disputes$/);
+    });
+  });
+});

src/hooks/useMutateRaiseDispute.ts

@@ -1,5 +1,7 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useApiMutation } from "./useApiMutation";
+import { useQueryClient } from "@tanstack/react-query";
 import { ApiError } from "../lib/api-errors";
+import toast from "react-hot-toast";
 
 const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:3000/api";
 
@@ -141,15 +143,22 @@ function getAuthHeader(): { Authorization?: string } {
   }
 }
 
-export const useMutateRaiseDispute = (options?: RaiseDisputeOptions) => {
+export function useMutateRaiseDispute(options?: RaiseDisputeOptions) {
   const queryClient = useQueryClient();
 
-  return useMutation({
-    mutationFn: (payload: RaiseDisputePayload) =>
-      uploadWithProgress(payload, options?.onProgress),
-    onSuccess: (_, variables) => {
-      queryClient.invalidateQueries({ queryKey: ["adoption", variables.adoptionId] });
-      queryClient.invalidateQueries({ queryKey: ["disputes"] });
-    },
-  });
-};
+  return useApiMutation<{ adoptionId: string }, RaiseDisputePayload>(
+    (payload) => uploadWithProgress(payload, options?.onProgress) as Promise<{ adoptionId: string }>,
+    {
+      invalidates: [["disputes"]],
+      onSuccess: (_data, variables) => {
+        toast.success("Dispute raised successfully");
+        queryClient.invalidateQueries({ queryKey: ["adoption", variables.adoptionId] });
+      },
+      onSettled: (_data, error) => {
+        if (error) {
+          toast.error(error.message || "Failed to raise dispute");
+        }
+      }
+    }
+  );
+}

src/pages/AdoptionTimelinePage.tsx

@@ -92,7 +92,7 @@ export default function AdoptionTimelinePage() {
                   <div className="absolute top-0 bottom-0 left-8 w-px bg-gray-200" aria-hidden="true" />
 
                   {group.items.map((entry, index) => {
-                    const isFirstOverall = entries[0] === entry;
+                    const isFirstOverall = entries[0]?.id === entry.id;
 
                     return (
                       <div 
@@ -112,4 +112,4 @@ export default function AdoptionTimelinePage() {
       </div>
     </div>
   );
-}
+}

src/pages/__tests__/AdminApprovalQueuePage.test.tsx

@@ -1,9 +1,16 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { expect, it, describe, beforeEach } from "vitest";
+import { expect, it, describe, beforeEach, vi } from "vitest";
 import AdminApprovalQueuePage from "../AdminApprovalQueuePage";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React from "react";
+import { adoptionService } from "../../api/adoptionService";
+
+vi.mock("../../api/adoptionService", () => ({
+  adoptionService: {
+    getAdminApprovalQueue: vi.fn(),
+  },
+}));
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -22,9 +29,18 @@ const wrapper = ({ children }: { children: React.ReactNode }) => (
 describe("AdminApprovalQueuePage", () => {
   beforeEach(() => {
     queryClient.clear();
+    vi.clearAllMocks();
   });
 
   it("renders the approval queue with items", async () => {
+    vi.mocked(adoptionService.getAdminApprovalQueue).mockResolvedValue({
+      items: [
+        { id: "1", shelter: "Happy Paws", pet: "Buddy (Golden Retriever)", adopter: "John", submitted: "2026-04-23", shelterApproved: true, daysWaiting: 1, isOverdue: false },
+        { id: "2", shelter: "Rescue League", pet: "Luna (Siamese Cat)", adopter: "Jane", submitted: "2026-04-20", shelterApproved: false, daysWaiting: 4, isOverdue: true },
+      ],
+      nextCursor: undefined,
+    });
+
     render(<AdminApprovalQueuePage />, { wrapper });
 
     expect(screen.getByText(/Approval Queue/i)).toBeInTheDocument();
@@ -34,16 +50,33 @@ describe("AdminApprovalQueuePage", () => {
   });
 
   it("filters overdue items when toggle is clicked", async () => {
+    vi.mocked(adoptionService.getAdminApprovalQueue).mockResolvedValue({
+      items: [
+        { id: "1", shelter: "Happy Paws", pet: "Buddy (Golden Retriever)", adopter: "John", submitted: "2026-04-23", shelterApproved: true, daysWaiting: 1, isOverdue: false },
+        { id: "2", shelter: "Rescue League", pet: "Luna (Siamese Cat)", adopter: "Jane", submitted: "2026-04-20", shelterApproved: false, daysWaiting: 4, isOverdue: true },
+      ],
+      nextCursor: undefined,
+    });
+
     render(<AdminApprovalQueuePage />, { wrapper });
 
     expect(await screen.findByText("Luna (Siamese Cat)", {}, { timeout: 3000 })).toBeInTheDocument();
 
     const toggle = screen.getByText(/Show overdue only/i);
+
+    // When the toggle is clicked, the query re-runs specifically for overdue items.
+    vi.mocked(adoptionService.getAdminApprovalQueue).mockResolvedValue({
+      items: [
+        { id: "2", shelter: "Rescue League", pet: "Luna (Siamese Cat)", adopter: "Jane", submitted: "2026-04-20", shelterApproved: false, daysWaiting: 4, isOverdue: true },
+      ],
+      nextCursor: undefined,
+    });
+
     fireEvent.click(toggle);
 
     await waitFor(() => {
-      expect(screen.queryByText("Luna (Siamese Cat)")).not.toBeInTheDocument();
-      expect(screen.getByText("Buddy (Golden Retriever)")).toBeInTheDocument();
+      expect(screen.queryByText("Buddy (Golden Retriever)")).not.toBeInTheDocument();
+      expect(screen.getByText("Luna (Siamese Cat)")).toBeInTheDocument();
       expect(screen.getAllByText(/SLA Breached/i).length).toBeGreaterThan(0);
     }, { timeout: 3000 });
   });

src/pages/__tests__/AdminDisputeListPage.test.tsx

@@ -36,7 +36,7 @@ const mockDisputes = [
   }
 ];
 
-const disputesHandler = http.get("*/disputes", ({ request }) => {
+const disputesHandler = http.get(/\/disputes/, ({ request }) => {
     const url = new URL(request.url);
     const overdue = url.searchParams.get("overdue");
     const status = url.searchParams.get("status");