Initial commit: Port Nimara CRM (Layers 0-4)
Full CRM rebuild with Next.js 15, TypeScript, Tailwind, Drizzle ORM, PostgreSQL, Redis, BullMQ, MinIO, and Socket.io. Includes 461 source files covering clients, berths, interests/pipeline, documents/EOI, expenses/invoices, email, notifications, dashboard, admin, and client portal. CI/CD via Gitea Actions with Docker builds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
222
src/components/search/command-search.tsx
Normal file
222
src/components/search/command-search.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Search, Clock, User, TrendingUp, Anchor } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useSearch } from '@/hooks/use-search';
|
||||
import { useUIStore } from '@/stores/ui-store';
|
||||
|
||||
export function CommandSearch() {
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [query, setQuery] = useState('');
|
||||
const router = useRouter();
|
||||
const portSlug = useUIStore((s) => s.currentPortSlug);
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { results, isLoading, recentSearches } = useSearch(query);
|
||||
|
||||
const showDropdown = focused && (query.length > 0 || recentSearches.length > 0);
|
||||
const hasQuery = query.length >= 2;
|
||||
const hasResults =
|
||||
results &&
|
||||
(results.clients.length > 0 || results.interests.length > 0 || results.berths.length > 0);
|
||||
|
||||
// Cmd/Ctrl+K focuses the input
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', onKeyDown);
|
||||
return () => document.removeEventListener('keydown', onKeyDown);
|
||||
}, []);
|
||||
|
||||
// Click outside closes dropdown
|
||||
useEffect(() => {
|
||||
if (!focused) return;
|
||||
function onClick(e: MouseEvent) {
|
||||
if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
|
||||
setFocused(false);
|
||||
}
|
||||
}
|
||||
document.addEventListener('mousedown', onClick);
|
||||
return () => document.removeEventListener('mousedown', onClick);
|
||||
}, [focused]);
|
||||
|
||||
const navigate = useCallback(
|
||||
(path: string) => {
|
||||
setFocused(false);
|
||||
setQuery('');
|
||||
inputRef.current?.blur();
|
||||
router.push(path as any);
|
||||
},
|
||||
[router],
|
||||
);
|
||||
|
||||
// Keyboard nav inside dropdown
|
||||
function onInputKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
setFocused(false);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
}
|
||||
|
||||
const iconMap = { client: User, interest: TrendingUp, berth: Anchor } as const;
|
||||
|
||||
return (
|
||||
<div ref={wrapperRef} className="relative">
|
||||
{/* ── Single persistent search bar ── */}
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center gap-2 rounded-md border bg-background px-2.5 transition-all duration-150',
|
||||
focused ? 'border-muted-foreground/40 w-64 lg:w-80' : 'w-44 lg:w-60',
|
||||
)}
|
||||
>
|
||||
<Search className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onFocus={() => setFocused(true)}
|
||||
onKeyDown={onInputKeyDown}
|
||||
placeholder="Search..."
|
||||
className="h-8 flex-1 min-w-0 bg-transparent text-sm outline-none ring-0 focus:outline-none focus:ring-0 placeholder:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* ── Results dropdown ── */}
|
||||
{showDropdown && (
|
||||
<div className="absolute top-[calc(100%+4px)] left-0 w-[min(420px,calc(100vw-2rem))] z-50 rounded-md border bg-popover shadow-lg overflow-hidden">
|
||||
<div className="max-h-[340px] overflow-y-auto py-1">
|
||||
{/* No query yet — show recent or hint */}
|
||||
{!hasQuery && recentSearches.length > 0 && (
|
||||
<div>
|
||||
<div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">Recent</div>
|
||||
{recentSearches.map((term) => (
|
||||
<button
|
||||
key={term}
|
||||
onClick={() => setQuery(term)}
|
||||
className="flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-accent cursor-pointer"
|
||||
>
|
||||
<Clock className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
{term}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasQuery && recentSearches.length === 0 && (
|
||||
<div className="px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
Type at least 2 characters to search
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading */}
|
||||
{hasQuery && isLoading && (
|
||||
<div className="px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
Searching...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No results */}
|
||||
{hasQuery && !isLoading && !hasResults && (
|
||||
<div className="px-3 py-6 text-center text-sm text-muted-foreground">
|
||||
No results for “{query}”
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Result groups */}
|
||||
{hasQuery && !isLoading && results && (
|
||||
<>
|
||||
{results.clients.length > 0 && (
|
||||
<ResultGroup
|
||||
heading="Clients"
|
||||
items={results.clients.map((c) => ({
|
||||
id: c.id,
|
||||
icon: 'client',
|
||||
label: c.fullName,
|
||||
sub: c.companyName,
|
||||
}))}
|
||||
iconMap={iconMap}
|
||||
onSelect={(id) => navigate(`/${portSlug}/clients/${id}`)}
|
||||
/>
|
||||
)}
|
||||
{results.interests.length > 0 && (
|
||||
<ResultGroup
|
||||
heading="Interests"
|
||||
items={results.interests.map((i) => ({
|
||||
id: i.id,
|
||||
icon: 'interest',
|
||||
label: i.clientName,
|
||||
sub: i.berthMooringNumber ?? i.pipelineStage,
|
||||
}))}
|
||||
iconMap={iconMap}
|
||||
onSelect={(id) => navigate(`/${portSlug}/interests/${id}`)}
|
||||
/>
|
||||
)}
|
||||
{results.berths.length > 0 && (
|
||||
<ResultGroup
|
||||
heading="Berths"
|
||||
items={results.berths.map((b) => ({
|
||||
id: b.id,
|
||||
icon: 'berth',
|
||||
label: b.mooringNumber,
|
||||
sub: [b.area, b.status].filter(Boolean).join(' · '),
|
||||
}))}
|
||||
iconMap={iconMap}
|
||||
onSelect={(id) => navigate(`/${portSlug}/berths/${id}`)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultGroup({
|
||||
heading,
|
||||
items,
|
||||
iconMap,
|
||||
onSelect,
|
||||
}: {
|
||||
heading: string;
|
||||
items: Array<{ id: string; icon: 'client' | 'interest' | 'berth'; label: string; sub?: string | null }>;
|
||||
iconMap: Record<string, React.ElementType>;
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div>
|
||||
<div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">{heading}</div>
|
||||
{items.map((item) => {
|
||||
const Icon = iconMap[item.icon];
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onSelect(item.id)}
|
||||
className="flex w-full items-center gap-2.5 px-3 py-2 text-sm hover:bg-accent cursor-pointer text-left"
|
||||
>
|
||||
<Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
|
||||
<span className="truncate font-medium">{item.label}</span>
|
||||
{item.sub && (
|
||||
<span className="ml-auto truncate text-xs text-muted-foreground">{item.sub}</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Keep export for backwards compat — it's a no-op
|
||||
export function SearchTrigger() {
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user