-
-
{
- set("location", e.target.value)
- setLocationIds({ cityId: null, regionId: null })
- }}
- onFocus={() => {
- if (locationResults.length > 0) setShowLocationDropdown(true)
- }}
- />
- {locationSearching && (
-
- )}
- {showLocationDropdown && locationResults.length > 0 && (
-
- {locationResults.map((result) => (
-
- ))}
-
- )}
-
+
{
+ set("location", label)
+ setLocationIds({ cityId, regionId })
+ }}
+ placeholder={t("admin.jobs.create.placeholders.locationSearch")}
+ />
diff --git a/frontend/src/components/home-search.tsx b/frontend/src/components/home-search.tsx
index 28c00e7..dccdddf 100644
--- a/frontend/src/components/home-search.tsx
+++ b/frontend/src/components/home-search.tsx
@@ -7,6 +7,7 @@ import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useRouter } from "next/navigation"
import { useTranslation } from "@/lib/i18n"
+import { LocationAutocomplete } from "@/components/location-autocomplete"
export function HomeSearch() {
const router = useRouter()
@@ -84,14 +85,12 @@ export function HomeSearch() {
{/* Location */}
-
- setLocation(e.target.value)}
- />
-
+
setLocation(label)}
+ className="h-12 bg-gray-50 border-gray-200"
+ placeholder={t("home.search.location")}
+ />
{/* Salary */}
diff --git a/frontend/src/components/location-autocomplete.tsx b/frontend/src/components/location-autocomplete.tsx
new file mode 100644
index 0000000..8c456c2
--- /dev/null
+++ b/frontend/src/components/location-autocomplete.tsx
@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, Loader2, MapPin } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import { useTranslation } from "@/lib/i18n"
+
+export type LocationResult = {
+ id: number
+ name: string
+ type: "city" | "state"
+ country_id: number
+ state_id?: number
+ region_name?: string
+}
+
+interface LocationAutocompleteProps {
+ value: string
+ onSelect: (location: string, cityId: number | null, stateId: number | null) => void
+ placeholder?: string
+ disabled?: boolean
+ className?: string
+ countryIso?: string
+}
+
+export function LocationAutocomplete({
+ value,
+ onSelect,
+ placeholder,
+ disabled = false,
+ className,
+ countryIso = "BR"
+}: LocationAutocompleteProps) {
+ const { t } = useTranslation()
+ const [open, setOpen] = React.useState(false)
+ const [loading, setLoading] = React.useState(false)
+ const [results, setResults] = React.useState
([])
+ const [search, setSearch] = React.useState("")
+
+ const fetchLocations = React.useCallback(async (query: string) => {
+ if (query.length < 2) return
+
+ setLoading(true)
+ try {
+ const apiBase = process.env.NEXT_PUBLIC_API_URL || ""
+ const response = await fetch(`${apiBase}/api/v1/locations/search?q=${encodeURIComponent(query)}&country_iso=${countryIso}`)
+ const data = await response.json()
+ setResults(Array.isArray(data) ? data : [])
+ } catch (error) {
+ console.error("Error fetching locations:", error)
+ setResults([])
+ } finally {
+ setLoading(false)
+ }
+ }, [countryIso])
+
+ React.useEffect(() => {
+ const timer = setTimeout(() => {
+ if (search) fetchLocations(search)
+ }, 300)
+ return () => clearTimeout(timer)
+ }, [search, fetchLocations])
+
+ return (
+
+
+
+
+
+
+
+
+ {loading && (
+
+
+
+ )}
+ {!loading && results.length === 0 && search.length >= 2 && (
+ {t("common.location.empty", { defaultValue: "Nenhuma localização encontrada." })}
+ )}
+ {!loading && search.length < 2 && (
+
+ Digite pelo menos 2 caracteres para buscar
+
+ )}
+
+ {results.map((result) => {
+ const label = result.region_name
+ ? `${result.name}, ${result.region_name}`
+ : result.name
+
+ return (
+ {
+ onSelect(
+ label,
+ result.type === "city" ? result.id : null,
+ result.type === "state" ? result.id : (result.state_id || null)
+ )
+ setOpen(false)
+ }}
+ >
+
+
+ {result.name}
+ {result.region_name && (
+ {result.region_name}
+ )}
+
+
+ {result.type}
+
+
+ )
+ })}
+
+
+
+
+
+ )
+}
+
+function Badge({ className, variant, ...props }: any) {
+ return (
+
+ )
+}
diff --git a/frontend/src/lib/i18n/pt.json b/frontend/src/lib/i18n/pt.json
new file mode 100644
index 0000000..39bd495
--- /dev/null
+++ b/frontend/src/lib/i18n/pt.json
@@ -0,0 +1,13 @@
+{
+ "admin.notifications.push.success": "Notificação push enviada com sucesso",
+ "admin.notifications.push.error": "Falha ao enviar notificação push",
+ "admin.notifications.messaging.connected": "Conectado ao serviço de mensageria",
+ "admin.notifications.messaging.error": "Falha ao conectar ao serviço de mensageria",
+ "common": {
+ "location": {
+ "select": "Selecionar localização...",
+ "search": "Buscar cidade ou estado...",
+ "empty": "Nenhuma localização encontrada."
+ }
+ }
+}