Implement Agency tab with a dedicated agencies API endpoint

- Add /agencies endpoint to apiRoutes
- Add searchAgencies function to SearchProvider
- Update Agency tab to call agencies API when selected
- Encountered CORS error

Author: jamesg8025

frontend/app/search/SearchResults.tsx

@@ -1,7 +1,8 @@
 "use client"
 import { Tab, Tabs, Box, CardHeader, Typography } from "@mui/material"
 import React, { useState } from "react"
-import { SearchResponse } from "@/utils/api"
+import { useSearchParams } from "next/navigation"
+import { SearchResponse, AgencyResponse } from "@/utils/api"
 import { useSearch } from "@/providers/SearchProvider"
 
 type SearchResultsProps = {
@@ -11,10 +12,40 @@ type SearchResultsProps = {
 
 const SearchResults = ({ total, results }: SearchResultsProps) => {
   const [tab, setTab] = useState(0)
-  const { loading } = useSearch()
+  const { loading, searchAgencies } = useSearch()
+
+  const searchParams = useSearchParams()
+  const currentQuery = searchParams.get('query') || ''
+
+  const [agencyResults, setAgencyResults] = useState<AgencyResponse[]>([])
+  const [agencyLoading, setAgencyLoading] = useState(false)
+  const [agencyTotal, setAgencyTotal] = useState(0)
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setTab(newValue)
+
+     // When Agency tab is clicked
+    if (newValue === 3) {
+      handleAgencySearch()
+    }
+  }
+
+  const handleAgencySearch = async () => {
+    if (!currentQuery) return
+
+    setAgencyLoading(true)
+    try {
+      // search by name for now
+      const reponse = await searchAgencies({ name: currentQuery })
+      setAgencyResults(Response.results || [])
+      setAgencyTotal(Response.total || 0)
+    } catch (error) {
+      console.error('Agency search failed:', error)
+      setAgencyResults([])
+      setAgencyTotal(0)
+    } finally {
+      setAgencyLoading(false)
+    }
   }
 
   return (
@@ -83,9 +114,15 @@ const SearchResults = ({ total, results }: SearchResultsProps) => {
             ))}
           </CustomTabPanel>
           <CustomTabPanel value={tab} index={3}>
-            {results
-              .filter((result) => result.content_type === "Agency")
-              .map((result) => (
+            {agencyLoading ? (
+              <Typography>Searching agencies...</Typography>
+            ) : (
+              <>
+                <Typography sx={{ marginBottom: "1rem", fontWeight: "bold" }}>
+                  {agencyTotal} agency results
+                </Typography>
+                {agencyResults.map((result) => (
+            
                 <CardHeader
                 key={result.uid}
                 title={result.title}
@@ -121,7 +158,8 @@ const SearchResults = ({ total, results }: SearchResultsProps) => {
                 }}
                 />
               ))}
-
+            </>
+            )}
             <p>Agency tab - {results.length} total results</p>
           </CustomTabPanel>
         </Box>

frontend/providers/SearchProvider.tsx

@@ -112,7 +112,15 @@ function useHook(): SearchContext {
 
           const apiUrl = `${apiBaseUrl}${API_ROUTES.agencies}?${queryParams.toString()}`
 
-          const response = await apiFetch(apiBaseUrl, {
+        console.log('====== AGENCY SEARCH DEBUG ======')
+        console.log('apiBaseUrl:', apiBaseUrl)
+        console.log('API_ROUTES.agencies:', API_ROUTES.agencies)
+        console.log('queryParams:', queryParams.toString())
+        console.log('Full apiUrl:', apiUrl)
+        console.log('Has accessToken:', !!accessToken)
+        console.log('================================')
+
+          const response = await apiFetch(apiUrl, {
             method: "GET",
             headers: {
               "Content-Type": "application/json"
@@ -142,5 +150,5 @@ function useHook(): SearchContext {
     [accessToken]
   )
 
-  return useMemo(() => ({ searchAll, searchResults, loading }), [searchResults, searchAll, searchResults, loading])
+  return useMemo(() => ({ searchAll, searchAgencies, searchResults, loading }), [searchResults, searchAll, searchAgencies, searchResults, loading])
 }

frontend/utils/apiRoutes.ts

@@ -10,10 +10,13 @@ const API_ROUTES = {
     all: "/search/",
     incidents: "/incidents/search"
   },
+
   users: {
     self: "/users/self"
-  }
-  agencies: "/api/v1/agencies"
+  },
+
+  agencies: "/agencies"
+
 }
 
 export const apiBaseUrl: string =