feat/Create ShelterApprovalQueuePage component

package.json

@@ -11,40 +11,38 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.0",
-    "@tanstack/react-query": "^5.95.2",
-    "lucide-react": "^0.575.0",
-    "react": "^19.2.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "@tanstack/react-query": "^5.62.0",
+    "lucide-react": "^0.468.0",
+    "react": "^19.0.0",
     "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"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
+    "@eslint/js": "^9.16.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.1",
+    "@types/react": "^19.0.1",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "eslint": "^9.39.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.24",
-    "globals": "^16.5.0",
-    "jsdom": "^29.0.1",
-    "msw": "^2.12.14",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.48.0",
-    "vite": "^7.3.1",
-    "vitest": "^4.1.1"
+    "@types/react-dom": "^19.0.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.16.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.12.0",
+    "jsdom": "^25.0.1",
+    "msw": "^2.6.8",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.17.0",
+    "vite": "^6.0.3",
+    "vitest": "^4.1.2"
   },
   "msw": {
-    "workerDirectory": [
-      "public"
-    ]
+    "workerDirectory": "public"
   }
 }

src/App.tsx

@@ -46,6 +46,8 @@ function App() {
 
         <Route path="/custody/:custodyId/timeline" element={<CustodyTimelinePage />} />
 
+
+        {/* Preview Routes */}
         <Route path="/preview-modal" element={<ModalPreview />} />
         <Route path="/adoption-completion-demo" element={<AdoptionCompletionDemo />} />
         <Route path="/status-polling-demo" element={<StatusPollingDemo />} />

src/api/shelterService.ts

@@ -0,0 +1,14 @@
+import { apiClient } from "../lib/api-client";
+import type { ShelterApprovalsResponse } from "../types/shelter";
+
+export const shelterService = {
+  async getApprovals(
+    status: string = "PENDING",
+    page: number = 1,
+    limit: number = 10
+  ): Promise<ShelterApprovalsResponse> {
+    return apiClient.get(
+      `/shelter/approvals?status=${status}&page=${page}&limit=${limit}`
+    );
+  },
+};

src/components/escrow/__tests__/__snapshots__/EscrowSettlementCard.test.tsx.snap

@@ -12,7 +12,6 @@ exports[`EscrowSettlementCard > matches snapshot in error state 1`] = `
         class="rounded-full bg-red-50 p-3 text-red-500 ring-8 ring-red-50/50"
       >
         <svg
-          aria-hidden="true"
           class="lucide lucide-circle-alert h-8 w-8"
           fill="none"
           height="24"
@@ -59,7 +58,6 @@ exports[`EscrowSettlementCard > matches snapshot in error state 1`] = `
         class="flex items-center gap-2 rounded-2xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white transition-all hover:bg-slate-800 hover:scale-[1.02] active:scale-[0.98]"
       >
         <svg
-          aria-hidden="true"
           class="lucide lucide-refresh-cw h-4 w-4"
           fill="none"
           height="24"
@@ -147,7 +145,6 @@ exports[`EscrowSettlementCard > matches snapshot in funded state 1`] = `
           class="flex items-center gap-2 text-slate-400"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-refresh-cw h-3 w-3"
             fill="none"
             height="24"
@@ -294,7 +291,6 @@ exports[`EscrowSettlementCard > matches snapshot in settled state 1`] = `
           class="flex items-center gap-2 text-slate-400"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-refresh-cw h-3 w-3"
             fill="none"
             height="24"

src/components/escrow/__tests__/__snapshots__/EscrowTimelinePanel.test.tsx.snap

@@ -23,7 +23,6 @@ exports[`EscrowTimelinePanel > matches snapshot for disputed state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-sky-200 bg-white text-sky-700"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-pause"
             fill="none"
             height="16"
@@ -36,18 +35,18 @@ exports[`EscrowTimelinePanel > matches snapshot for disputed state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
-              height="18"
+              height="16"
               rx="1"
-              width="5"
+              width="4"
               x="14"
-              y="3"
+              y="4"
             />
             <rect
-              height="18"
+              height="16"
               rx="1"
-              width="5"
-              x="5"
-              y="3"
+              width="4"
+              x="6"
+              y="4"
             />
           </svg>
         </div>
@@ -80,7 +79,6 @@ exports[`EscrowTimelinePanel > matches snapshot for disputed state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-500"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-wallet"
             fill="none"
             height="16"
@@ -152,7 +150,6 @@ exports[`EscrowTimelinePanel > matches snapshot for disputed state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-500"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-plus"
             fill="none"
             height="16"
@@ -220,7 +217,6 @@ exports[`EscrowTimelinePanel > matches snapshot for funded state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-sky-200 bg-white text-sky-700"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-wallet"
             fill="none"
             height="16"
@@ -292,7 +288,6 @@ exports[`EscrowTimelinePanel > matches snapshot for funded state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-500"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-plus"
             fill="none"
             height="16"
@@ -360,7 +355,6 @@ exports[`EscrowTimelinePanel > matches snapshot for settled state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-sky-200 bg-white text-sky-700"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-check"
             fill="none"
             height="16"
@@ -429,7 +423,6 @@ exports[`EscrowTimelinePanel > matches snapshot for settled state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-500"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-pause"
             fill="none"
             height="16"
@@ -442,18 +435,18 @@ exports[`EscrowTimelinePanel > matches snapshot for settled state 1`] = `
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
-              height="18"
+              height="16"
               rx="1"
-              width="5"
+              width="4"
               x="14"
-              y="3"
+              y="4"
             />
             <rect
-              height="18"
+              height="16"
               rx="1"
-              width="5"
-              x="5"
-              y="3"
+              width="4"
+              x="6"
+              y="4"
             />
           </svg>
         </div>
@@ -486,7 +479,6 @@ exports[`EscrowTimelinePanel > matches snapshot for settled state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-500"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-wallet"
             fill="none"
             height="16"
@@ -535,7 +527,6 @@ exports[`EscrowTimelinePanel > matches snapshot for settled state 1`] = `
           class="absolute -left-4 top-0 flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-slate-500"
         >
           <svg
-            aria-hidden="true"
             class="lucide lucide-plus"
             fill="none"
             height="16"

src/components/ui/__tests__/__snapshots__/TimelineEntry.test.tsx.snap

@@ -61,7 +61,6 @@ exports[`TimelineEntry > renders SDK-driven entry with transaction link 1`] = `
         </div>
       </div>
       <svg
-        aria-hidden="true"
         class="lucide lucide-arrow-right h-4 w-4 text-gray-400 flex-shrink-0"
         fill="none"
         height="24"
@@ -151,7 +150,6 @@ exports[`TimelineEntry > renders SDK-driven entry with transaction link 1`] = `
             type="button"
           >
             <svg
-              aria-hidden="true"
               class="lucide lucide-copy"
               fill="none"
               height="14"
@@ -222,7 +220,6 @@ exports[`TimelineEntry > renders admin override entry correctly 1`] = `
         </div>
       </div>
       <svg
-        aria-hidden="true"
         class="lucide lucide-arrow-right h-4 w-4 text-gray-400 flex-shrink-0"
         fill="none"
         height="24"

src/lib/api-client.ts

@@ -208,7 +208,9 @@ export function getApiClient(): ApiClient {
 }
 
 // Vite environment variable
-const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:3000/api";
+const API_URL = (import.meta.env.VITE_MSW === 'true') 
+	? "/api" 
+	: (import.meta.env.VITE_API_URL ?? "http://localhost:3000/api");
 
 export const apiClient = createApiClient({
 	baseURL: API_URL,

src/mocks/handlers/index.ts

@@ -5,6 +5,7 @@ import { disputeHandlers } from "./dispute";
 import { notifyHandlers } from "./notify";
 import { filesHandlers } from "./files";
 import { adoptionHandlers } from "./adoption";
+import { shelterHandlers } from "./shelter";
 
 /**
  * All MSW request handlers, combined from every domain module.
@@ -18,4 +19,5 @@ export const handlers = [
 	...notifyHandlers,
 	...filesHandlers,
 	...adoptionHandlers,
+	...shelterHandlers,
 ];

src/mocks/handlers/shelter.ts

@@ -0,0 +1,74 @@
+import { http, HttpResponse, delay } from "msw";
+import type { ShelterApprovalsResponse, ShelterApprovalQueueItem } from "../../types/shelter";
+
+const MOCK_SHELTER_APPROVALS: ShelterApprovalQueueItem[] = [
+  {
+    id: "adoption-001",
+    petId: "pet-001",
+    petName: "Buddy",
+    petPhotoUrl: "https://images.dog.ceo/breeds/retriever-golden/n02099601_3004.jpg",
+    adopterName: "John Doe",
+    submissionDate: "2026-03-20T10:00:00Z",
+    status: "PENDING",
+  },
+  {
+    id: "adoption-002",
+    petId: "pet-002",
+    petName: "Luna",
+    adopterName: "Jane Smith",
+    submissionDate: "2026-03-21T14:30:00Z",
+    status: "PENDING",
+  },
+  {
+    id: "adoption-003",
+    petId: "pet-003",
+    petName: "Max",
+    petPhotoUrl: "https://images.dog.ceo/breeds/germanshepherd/n02106662_16149.jpg",
+    adopterName: "Alice Johnson",
+    submissionDate: "2026-03-22T09:00:00Z",
+    status: "PENDING",
+  },
+  {
+      id: "adoption-004",
+      petId: "pet-004",
+      petName: "Rex",
+      adopterName: "Bob Brown",
+      submissionDate: "2026-03-24T11:00:00Z",
+      status: "PENDING",
+  },
+  {
+      id: "adoption-005",
+      petId: "pet-005",
+      petName: "Bella",
+      adopterName: "Charlie Green",
+      submissionDate: "2026-03-25T15:00:00Z",
+      status: "PENDING",
+  }
+];
+
+export const shelterHandlers = [
+  http.get("/api/shelter/approvals", async ({ request }) => {
+    const url = new URL(request.url);
+    const status = url.searchParams.get("status");
+    const page = parseInt(url.searchParams.get("page") || "1");
+    const limit = parseInt(url.searchParams.get("limit") || "10");
+
+    await delay(300);
+
+    let filtered = MOCK_SHELTER_APPROVALS;
+    if (status) {
+      filtered = MOCK_SHELTER_APPROVALS.filter(item => item.status === status);
+    }
+
+    const startIndex = (page - 1) * limit;
+    const endIndex = startIndex + limit;
+    const items = filtered.slice(startIndex, endIndex);
+
+    return HttpResponse.json<ShelterApprovalsResponse>({
+      items,
+      total: filtered.length,
+      page,
+      hasMore: endIndex < filtered.length,
+    });
+  }),
+];