import { router } from '@inertiajs/react'; import { ArrowRight, BriefcaseBusiness, Clock, HardHat, LifeBuoy, Loader2, Search, UserRound, X, } from 'lucide-react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { cn } from '@/lib/utils'; import { search as searchLookup } from '@/routes/lookups'; import type { GlobalSearchResponse, SearchGroup, SearchResult } from '@/types'; /** The icon a group is drawn with; unknown groups get the magnifying glass. */ const GROUP_ICONS: Record = { customers: UserRound, jobs: BriefcaseBusiness, tickets: LifeBuoy, staff: HardHat, }; const RECENT_KEY = 'crm.search.recent'; const RECENT_LIMIT = 5; type FlatResult = SearchResult & { groupLabel: string }; /** * One field that asks the whole system a question. * * The desk normally holds a fragment of something - a surname, a street, an * NMI, a phone number, a job number - and needs the record it belongs to, so * this searches customers (including their sites), jobs, tickets and staff in * one request and shows the answers grouped, each naming the field that * matched. Results open with the keyboard alone, recent searches are kept, and * the groups a person may not see are never sent. */ export function GlobalSearch() { const [term, setTerm] = useState(''); const [groups, setGroups] = useState([]); const [total, setTotal] = useState(0); const [open, setOpen] = useState(false); const [searching, setSearching] = useState(false); const [failure, setFailure] = useState(null); const [cursor, setCursor] = useState(0); const [recent, setRecent] = useState([]); const input = useRef(null); const wrapper = useRef(null); useEffect(() => { try { const stored = window.localStorage.getItem(RECENT_KEY); setRecent(stored === null ? [] : (JSON.parse(stored) as string[])); } catch { // A browser with storage turned off simply has no history. } }, []); const remember = useCallback((value: string) => { setRecent((current) => { const next = [ value, ...current.filter((item) => item !== value), ].slice(0, RECENT_LIMIT); try { window.localStorage.setItem(RECENT_KEY, JSON.stringify(next)); } catch { // Storage being unavailable is not worth interrupting anybody. } return next; }); }, []); const trimmed = term.trim(); // One request per pause in typing, cancelled as soon as the term changes // again, so a slow answer cannot land on top of a newer question. useEffect(() => { if (trimmed.length < 2) { setGroups([]); setTotal(0); setSearching(false); setFailure(null); return; } const controller = new AbortController(); setSearching(true); const timer = window.setTimeout(async () => { try { const url = new URL(searchLookup().url, window.location.origin); url.searchParams.set('search', trimmed); const response = await fetch(url, { headers: { Accept: 'application/json' }, signal: controller.signal, }); if (!response.ok) { throw new Error( `Search failed with status ${response.status}`, ); } const payload = (await response.json()) as GlobalSearchResponse; if (!controller.signal.aborted) { setGroups(payload.groups ?? []); setTotal(payload.total ?? 0); setFailure(null); setCursor(0); } } catch (error) { if (!controller.signal.aborted) { setGroups([]); setTotal(0); setFailure( error instanceof Error && error.message.startsWith('Search failed') ? 'Search is not available right now.' : 'Could not reach the server.', ); } } finally { if (!controller.signal.aborted) { setSearching(false); } } }, 200); return () => { window.clearTimeout(timer); controller.abort(); }; }, [trimmed]); const flat = useMemo( () => groups.flatMap((group) => group.results.map((result) => ({ ...result, groupLabel: group.label, })), ), [groups], ); const visit = useCallback( (result: FlatResult) => { remember(trimmed); setOpen(false); input.current?.blur(); router.visit(result.url); }, [remember, trimmed], ); // ⌘K / Ctrl+K from anywhere on the page, which is how people expect a // search box in the corner to behave. useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { if ( (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k' ) { event.preventDefault(); input.current?.focus(); input.current?.select(); setOpen(true); } }; window.addEventListener('keydown', onKeyDown); return () => window.removeEventListener('keydown', onKeyDown); }, []); // Clicking away is a dismissal, and leaving the field restores the bar to // its resting state. useEffect(() => { if (!open) { return; } const onPointerDown = (event: MouseEvent) => { if ( wrapper.current && !wrapper.current.contains(event.target as Node) ) { setOpen(false); } }; document.addEventListener('mousedown', onPointerDown); return () => document.removeEventListener('mousedown', onPointerDown); }, [open]); useEffect(() => { if (!open) { return; } document .getElementById(`global-search-result-${cursor}`) ?.scrollIntoView({ block: 'nearest' }); }, [open, cursor]); const onKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'ArrowDown') { event.preventDefault(); setOpen(true); setCursor((position) => Math.min(position + 1, Math.max(flat.length - 1, 0)), ); return; } if (event.key === 'ArrowUp') { event.preventDefault(); setCursor((position) => Math.max(position - 1, 0)); return; } if (event.key === 'Enter') { const result = flat[cursor]; if (result !== undefined) { event.preventDefault(); visit(result); } return; } if (event.key === 'Escape') { event.preventDefault(); setOpen(false); input.current?.blur(); } }; const showPanel = open && (trimmed.length > 0 || recent.length > 0); const showRecent = trimmed.length < 2; return ( ); }