create-crm-tmp 1.1.3 → 2.1.0

package/template/src/components/global-search.tsx

@@ -0,0 +1,360 @@
+'use client';
+
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import useSWR from 'swr';
+import { Search, Users, Building2, FileText, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { NAV_PAGES } from '@/config/nav-pages';
+import { useUserRole } from '@/hooks/use-user-role';
+
+interface ContactResult {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  email: string | null;
+  phone: string | null;
+}
+
+interface CompanyResult {
+  id: string;
+  name: string;
+  email: string | null;
+  phone: string | null;
+}
+
+interface SearchResults {
+  contacts: ContactResult[];
+  companies: CompanyResult[];
+}
+
+const fetcher = async (url: string): Promise<SearchResults> => {
+  const params = new URL(url, globalThis.location?.origin);
+  const q = params.searchParams.get('q') || '';
+  const searchParam = encodeURIComponent(q);
+
+  const [contactsRes, companiesRes] = await Promise.all([
+    fetch(`/api/contacts?search=${searchParam}&limit=5`),
+    fetch(`/api/companies?search=${searchParam}&limit=5`),
+  ]);
+
+  const [contactsData, companiesData] = await Promise.all([
+    contactsRes.ok ? contactsRes.json() : { contacts: [] },
+    companiesRes.ok ? companiesRes.json() : { companies: [] },
+  ]);
+
+  return {
+    contacts: contactsData.contacts ?? [],
+    companies: companiesData.companies ?? companiesData ?? [],
+  };
+};
+
+function useDebounce(value: string, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export function GlobalSearch() {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
+  const { hasPermission } = useUserRole();
+
+  const debouncedQuery = useDebounce(query.trim(), 300);
+  const shouldFetchCRM = debouncedQuery.length >= 2;
+
+  const { data: crmResults, isLoading: crmLoading } = useSWR(
+    shouldFetchCRM ? `/api/_search?q=${debouncedQuery}` : null,
+    fetcher,
+    { keepPreviousData: true, revalidateOnFocus: false },
+  );
+
+  const filteredPages = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (q.length === 0) return [];
+    return NAV_PAGES.filter(
+      (page) =>
+        page.permissions.some((p) => hasPermission(p)) &&
+        `${page.parentLabel ?? ''} ${page.name}`.toLowerCase().includes(q),
+    );
+  }, [query, hasPermission]);
+
+  const flatOptions = useMemo(() => {
+    const opts: { href: string }[] = [];
+    filteredPages.forEach((p) => opts.push({ href: p.href }));
+    if (crmResults) {
+      crmResults.contacts.forEach((c) => opts.push({ href: `/contacts/${c.id}` }));
+      crmResults.companies.forEach((c) => opts.push({ href: `/contacts/companies/${c.id}` }));
+    }
+    return opts;
+  }, [filteredPages, crmResults]);
+
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const optionRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const showDropdown = isOpen && query.trim().length > 0;
+
+  useEffect(() => {
+    setFocusedIndex(0);
+  }, [flatOptions.length]);
+
+  useEffect(() => {
+    if (!showDropdown || focusedIndex < 0 || focusedIndex >= flatOptions.length) return;
+    optionRefs.current[focusedIndex]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+  }, [showDropdown, focusedIndex, flatOptions.length]);
+
+  const hasResults =
+    filteredPages.length > 0 ||
+    (crmResults && (crmResults.contacts.length > 0 || crmResults.companies.length > 0));
+
+  const navigate = useCallback(
+    (href: string) => {
+      setIsOpen(false);
+      setQuery('');
+      router.push(href);
+    },
+    [router],
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!showDropdown || flatOptions.length === 0) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setFocusedIndex((i) => Math.min(i + 1, flatOptions.length - 1));
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setFocusedIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        navigate(flatOptions[focusedIndex].href);
+      }
+    },
+    [showDropdown, flatOptions, focusedIndex, navigate],
+  );
+
+  let optionIndex = 0;
+
+  return (
+    <div ref={containerRef} className="relative hidden w-full max-w-xl sm:block">
+      <div className="relative">
+        <Search aria-hidden="true" className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            if (!isOpen) setIsOpen(true);
+          }}
+          onFocus={() => {
+            if (query.trim().length > 0) setIsOpen(true);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Rechercher..."
+          className="border-border bg-muted text-foreground placeholder:text-muted-foreground focus-visible:border-primary/40 focus-visible:bg-background focus-visible:ring-primary/40 w-full rounded-lg border py-2 pr-4 pl-9 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          role="combobox"
+          aria-expanded={showDropdown}
+          aria-controls="global-search-results"
+          aria-activedescendant={
+            showDropdown && flatOptions.length > 0
+              ? `global-search-option-${focusedIndex}`
+              : undefined
+          }
+          autoComplete="off"
+        />
+      </div>
+
+      {showDropdown && (
+        <div
+          id="global-search-results"
+          role="listbox"
+          className="border-border bg-popover ui-dropdown-enter absolute top-full left-0 z-50 mt-1 max-h-112 w-full overflow-y-auto rounded-xl border shadow-(--shadow-dropdown)"
+        >
+          {/* Pages */}
+          {filteredPages.length > 0 && (
+            <div>
+              <div className="px-3 pt-3 pb-1">
+                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+                  Pages
+                </span>
+              </div>
+              {filteredPages.map((page) => {
+                const Icon = page.icon;
+                const idx = optionIndex++;
+                return (
+                  <button
+                    key={page.href}
+                    ref={(el) => {
+                      optionRefs.current[idx] = el;
+                    }}
+                    id={`global-search-option-${idx}`}
+                    onClick={() => navigate(page.href)}
+                    className={cn(
+                      'text-popover-foreground hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200',
+                      focusedIndex === idx && 'bg-accent',
+                    )}
+                    role="option"
+                    aria-selected={focusedIndex === idx}
+                  >
+                    <Icon aria-hidden="true" className="text-muted-foreground h-4 w-4 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <span className="text-popover-foreground block truncate font-medium">
+                        {page.name}
+                      </span>
+                      {page.parentLabel && (
+                        <span className="text-muted-foreground block truncate text-xs">
+                          {page.parentLabel} {'>'} {page.name}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* CRM loading */}
+          {shouldFetchCRM && crmLoading && !crmResults && (
+            <div className="text-muted-foreground flex items-center justify-center gap-2 px-3 py-6 text-sm">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              Recherche...
+            </div>
+          )}
+
+          {/* Contacts */}
+          {crmResults && crmResults.contacts.length > 0 && (
+            <div>
+              <div
+                className={cn(
+                  'px-3 pt-3 pb-1',
+                  filteredPages.length > 0 && 'border-border border-t',
+                )}
+              >
+                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+                  Contacts
+                </span>
+              </div>
+              {crmResults.contacts.map((contact) => {
+                const name =
+                  [contact.firstName, contact.lastName].filter(Boolean).join(' ') ||
+                  'Contact sans nom';
+                const idx = optionIndex++;
+                return (
+                  <button
+                    key={contact.id}
+                    ref={(el) => {
+                      optionRefs.current[idx] = el;
+                    }}
+                    id={`global-search-option-${idx}`}
+                    onClick={() => navigate(`/contacts/${contact.id}`)}
+                    className={cn(
+                      'hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200',
+                      focusedIndex === idx && 'bg-accent',
+                    )}
+                    role="option"
+                    aria-selected={focusedIndex === idx}
+                  >
+                    <Users aria-hidden="true" className="text-muted-foreground h-4 w-4 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <span className="text-popover-foreground font-medium">{name}</span>
+                      {(contact.email || contact.phone) && (
+                        <span className="text-muted-foreground ml-2 truncate text-xs">
+                          {contact.email || contact.phone}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Entreprises */}
+          {crmResults && crmResults.companies.length > 0 && (
+            <div>
+              <div className="border-border border-t px-3 pt-3 pb-1">
+                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
+                  Entreprises
+                </span>
+              </div>
+              {crmResults.companies.map((company) => {
+                const idx = optionIndex++;
+                return (
+                  <button
+                    key={company.id}
+                    ref={(el) => {
+                      optionRefs.current[idx] = el;
+                    }}
+                    id={`global-search-option-${idx}`}
+                    onClick={() => navigate(`/contacts/companies/${company.id}`)}
+                    className={cn(
+                      'hover:bg-accent flex w-full cursor-pointer items-center gap-3 px-3 py-2 text-left text-sm transition-colors duration-200',
+                      focusedIndex === idx && 'bg-accent',
+                    )}
+                    role="option"
+                    aria-selected={focusedIndex === idx}
+                  >
+                    <Building2 aria-hidden="true" className="text-muted-foreground h-4 w-4 shrink-0" />
+                    <div className="min-w-0 flex-1">
+                      <span className="text-popover-foreground font-medium">{company.name}</span>
+                      {company.email && (
+                        <span className="text-muted-foreground ml-2 truncate text-xs">
+                          {company.email}
+                        </span>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Aucun résultat */}
+          {!crmLoading && !hasResults && query.trim().length > 0 && (
+            <div className="text-muted-foreground px-3 py-6 text-center text-sm">
+              Aucun résultat pour &quot;{query.trim()}&quot;
+            </div>
+          )}
+
+          {/* Recherche trop courte pour le CRM */}
+          {query.trim().length === 1 && filteredPages.length === 0 && (
+            <div className="text-muted-foreground px-3 py-6 text-center text-sm">
+              <FileText aria-hidden="true" className="text-muted-foreground/70 mx-auto mb-1 h-5 w-5" />
+              Tapez au moins 2 caractères pour rechercher dans le CRM
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}