+
+
Approval Queue
+
+ {items.length} Pending
+
+
+
+ {items.length === 0 ? (
+
+ ) : (
+
+
+
+
+
+ | Pet |
+ Adopter |
+ Submission Date |
+ Waiting For |
+
+
+
+ {sortedItems.map((item) => (
+ handleRowClick(item.id)}
+ className="hover:bg-gray-50 cursor-pointer transition-colors group"
+ >
+
+
+
+ {item.petPhotoUrl ? (
+ 
+ ) : (
+
+
+ {item.petName.charAt(0)}
+
+
+ )}
+
+ {item.petName}
+
+ |
+
+ {item.adopterName}
+ |
+
+
+ {new Date(item.submissionDate).toLocaleDateString(undefined, {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric'
+ })}
+
+ |
+
+
+
+ {calculateDaysWaiting(item.submissionDate)} days waiting
+
+ |
+
+ ))}
+
+
+
+
+ )}
+
+ {data?.hasMore && (
+
+
+
+ )}
+
+ );
+};
+
+export default ShelterApprovalQueuePage;
diff --git a/src/test/ShelterApprovalQueuePage.test.tsx b/src/test/ShelterApprovalQueuePage.test.tsx
new file mode 100644
index 0000000..814d38f
--- /dev/null
+++ b/src/test/ShelterApprovalQueuePage.test.tsx
@@ -0,0 +1,94 @@
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { describe, it, expect, vi } from "vitest";
+import ShelterApprovalQueuePage from "../pages/ShelterApprovalQueuePage";
+
+// Mock useNavigate
+const mockedUsedNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+ const actual = await vi.importActual("react-router-dom");
+ return {
+ ...actual,
+ useNavigate: () => mockedUsedNavigate,
+ };
+});
+
+const createTestQueryClient = () => new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
+
+const renderWithProviders = (ui: React.ReactElement) => {
+ const queryClient = createTestQueryClient();
+ return render(
+