create-crm-tmp 1.1.3 → 2.0.0

package/template/src/components/address-autocomplete.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { MapPin, X } from 'lucide-react';
+import { Spinner } from '@/components/skeleton';
+import { searchAddress, type AddressFeature, extractAddressComponents } from '@/lib/address-api';
+import { cn } from '@/lib/utils';
+import { useAppToast } from '@/contexts/app-toast-context';
+
+interface AddressAutocompleteProps {
+  value: string;
+  onChange: (
+    address: string,
+    components?: {
+      street: string;
+      city: string;
+      postalCode: string;
+      fullAddress: string;
+      citycode: string;
+    },
+  ) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function AddressAutocomplete({
+  value,
+  onChange,
+  placeholder = 'Rechercher une adresse...',
+  disabled = false,
+  className,
+}: Readonly<AddressAutocompleteProps>) {
+  const toast = useAppToast();
+  const [inputValue, setInputValue] = useState(value);
+  const [suggestions, setSuggestions] = useState<AddressFeature[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const suggestionsRef = useRef<HTMLDivElement>(null);
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const lastSearchErrorRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    // Nettoyer le timer au démontage
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!searchError) {
+      lastSearchErrorRef.current = null;
+      return;
+    }
+    if (lastSearchErrorRef.current === searchError) {
+      return;
+    }
+    toast.error(searchError);
+    lastSearchErrorRef.current = searchError;
+  }, [searchError, toast]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setSelectedIndex(-1);
+
+    // Annuler le timer précédent
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    if (newValue.trim().length < 3) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      setSearchError(null);
+      onChange(newValue);
+      return;
+    }
+
+    // Débouncer la recherche (300ms)
+    debounceTimerRef.current = setTimeout(async () => {
+      setLoading(true);
+      setSearchError(null);
+      try {
+        const result = await searchAddress(newValue, 5);
+        setSuggestions(result.features);
+        setShowSuggestions(true);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Erreur lors de la recherche.';
+        setSearchError(message);
+        setSuggestions([]);
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+  };
+
+  const handleSelectSuggestion = (feature: AddressFeature) => {
+    const components = extractAddressComponents(feature);
+    setInputValue(components.fullAddress);
+    onChange(components.fullAddress, components);
+    setSuggestions([]);
+    setShowSuggestions(false);
+    setSelectedIndex(-1);
+    setSearchError(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showSuggestions || suggestions.length === 0) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : prev));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (selectedIndex >= 0 && selectedIndex < suggestions.length) {
+          handleSelectSuggestion(suggestions[selectedIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setShowSuggestions(false);
+        setSelectedIndex(-1);
+        break;
+    }
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    onChange('');
+    setSuggestions([]);
+    setShowSuggestions(false);
+    setSelectedIndex(-1);
+    inputRef.current?.focus();
+  };
+
+  const handleBlur = () => {
+    // Délai pour permettre le clic sur une suggestion
+    setTimeout(() => {
+      setShowSuggestions(false);
+      setSelectedIndex(-1);
+    }, 200);
+  };
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <MapPin className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <input
+          ref={inputRef}
+          data-ui-skip-token="true"
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={() => {
+            if (suggestions.length > 0) {
+              setShowSuggestions(true);
+            }
+          }}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={cn(
+            'w-full rounded-lg border border-gray-300 py-2 pr-10 pl-10 text-sm transition-colors',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500',
+            'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',
+            className,
+          )}
+        />
+        <div className="absolute top-1/2 right-3 flex -translate-y-1/2 items-center gap-2">
+          {loading && <Spinner size="sm" className="text-gray-400" />}
+          {inputValue && !loading && !disabled && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="cursor-pointer text-gray-400 transition-colors hover:text-gray-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+      {/* Suggestions */}
+      {showSuggestions && suggestions.length > 0 && (
+        <div
+          ref={suggestionsRef}
+          className="absolute z-50 mt-1 w-full rounded-lg border border-gray-200 bg-white shadow-lg"
+        >
+          <ul className="max-h-60 overflow-y-auto py-1">
+            {suggestions.map((suggestion, index) => (
+              <li key={suggestion.properties.id}>
+                <button
+                  type="button"
+                  onClick={() => handleSelectSuggestion(suggestion)}
+                  className={cn(
+                    'flex w-full cursor-pointer items-start gap-3 px-4 py-2 text-left transition-colors',
+                    'hover:bg-blue-50',
+                    selectedIndex === index && 'bg-blue-50',
+                  )}
+                >
+                  <MapPin className="mt-1 h-4 w-4 shrink-0 text-gray-400" />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-gray-900">
+                      {suggestion.properties.name}
+                    </p>
+                    <p className="text-xs text-gray-500">{suggestion.properties.context}</p>
+                  </div>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/components/contacts/filter-bar.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { X, Plus, Filter, Save, RotateCcw } from 'lucide-react';
+import {
+  FILTER_FIELD_DEFINITIONS,
+  OPERATOR_LABELS,
+  DATE_PRESET_LABELS,
+  type ViewFilter,
+  type DatePreset,
+} from '@/types/contact-views';
+
+interface FilterBarProps {
+  filters: ViewFilter[];
+  onRemoveFilter: (index: number) => void;
+  onClearFilters: () => void;
+  onAddFilter: () => void;
+  onSaveView?: () => void;
+  onResetFilters?: () => void;
+  hasUnsavedChanges?: boolean;
+  isViewOwner?: boolean;
+  statusOptions?: { id: string; name: string; color: string }[];
+  userOptions?: { id: string; name: string }[];
+}
+
+function getFieldLabel(field: string): string {
+  const def = FILTER_FIELD_DEFINITIONS.find((d) => d.field === field);
+  return def?.label || field;
+}
+
+function formatFilterValue(
+  filter: ViewFilter,
+  statusOptions?: { id: string; name: string; color: string }[],
+  userOptions?: { id: string; name: string }[],
+): string {
+  const { field, operator, value, preset } = filter;
+
+  if (operator === 'is_known') return 'est connu';
+  if (operator === 'is_unknown') return 'est inconnu';
+
+  if (operator === 'date_preset' && preset) {
+    return DATE_PRESET_LABELS[preset as DatePreset] || preset;
+  }
+
+  if ((operator === 'is_any_of' || operator === 'is_none_of') && Array.isArray(value)) {
+    const labels = value.map((v) => {
+      if (v === 'UNASSIGNED') return 'Non assigné';
+      if (field === 'statusId' && statusOptions) {
+        return statusOptions.find((s) => s.id === v)?.name || v;
+      }
+      if (
+        (field === 'assignedCommercialId' ||
+          field === 'assignedTeleproId' ||
+          field === 'createdById') &&
+        userOptions
+      ) {
+        return userOptions.find((u) => u.id === v)?.name || v;
+      }
+      if (field === 'civility') {
+        const map: Record<string, string> = {
+          M: 'M.',
+          MME: 'Mme',
+          MLLE: 'Mlle',
+        };
+        return map[v] || v;
+      }
+      return v;
+    });
+
+    if (labels.length <= 2) return labels.join(', ');
+    return `${labels[0]} +${labels.length - 1}`;
+  }
+
+  if (operator === 'between' && Array.isArray(value) && value.length === 2) {
+    return `${value[0]} - ${value[1]}`;
+  }
+
+  if (typeof value === 'string') return value;
+  return '';
+}
+
+export function FilterBar({
+  filters,
+  onRemoveFilter,
+  onClearFilters,
+  onAddFilter,
+  onSaveView,
+  onResetFilters,
+  hasUnsavedChanges,
+  isViewOwner,
+  statusOptions,
+  userOptions,
+}: FilterBarProps) {
+  if (filters.length === 0 && !hasUnsavedChanges) {
+    return (
+      <div className="flex items-center gap-2 px-4 py-2 sm:px-6 lg:px-8">
+        <button
+          onClick={onAddFilter}
+          className="flex cursor-pointer items-center gap-1.5 rounded-md border border-gray-200 px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-50"
+        >
+          <Filter className="h-3.5 w-3.5" />
+          Filtres avancés
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 px-4 py-2 sm:px-6 lg:px-8">
+      <Filter className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+
+      {filters.map((filter, index) => (
+        <div
+          key={`${filter.field}-${index}`}
+          className="flex items-center gap-1 rounded-md border border-blue-200 bg-blue-50 px-2 py-1 text-sm"
+        >
+          <span className="font-medium text-blue-700">{getFieldLabel(filter.field)}</span>
+          <span className="text-blue-500">{OPERATOR_LABELS[filter.operator]}</span>
+          <span className="max-w-40 truncate text-blue-700">
+            {formatFilterValue(filter, statusOptions, userOptions)}
+          </span>
+          <button
+            onClick={() => onRemoveFilter(index)}
+              className="ml-0.5 cursor-pointer rounded p-0.5 text-blue-400 hover:bg-blue-100 hover:text-blue-600"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+
+      <button
+        onClick={onAddFilter}
+        className="flex cursor-pointer items-center gap-1 rounded-md border border-dashed border-gray-300 px-2 py-1 text-sm text-gray-500 transition-colors hover:border-gray-400 hover:bg-gray-50"
+      >
+        <Plus className="h-3 w-3" />
+        Ajouter un filtre
+      </button>
+
+      {filters.length > 0 && (
+        <button
+          onClick={onClearFilters}
+          className="flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-sm text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
+        >
+          <X className="h-3 w-3" />
+          Tout effacer
+        </button>
+      )}
+
+      {hasUnsavedChanges && (
+        <div className="ml-auto flex items-center gap-2">
+          {onResetFilters && (
+            <button
+              onClick={onResetFilters}
+              className="flex cursor-pointer items-center gap-1 rounded-md px-2.5 py-1 text-sm text-gray-500 transition-colors hover:bg-gray-100"
+            >
+              <RotateCcw className="h-3.5 w-3.5" />
+              Annuler
+            </button>
+          )}
+          {onSaveView && isViewOwner && (
+            <button
+              onClick={onSaveView}
+              className="flex cursor-pointer items-center gap-1 rounded-md bg-blue-600 px-2.5 py-1 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            >
+              <Save className="h-3.5 w-3.5" />
+              Enregistrer
+            </button>
+          )}
+          {onSaveView && !isViewOwner && (
+            <button
+              onClick={onSaveView}
+              className="flex cursor-pointer items-center gap-1 rounded-md bg-blue-600 px-2.5 py-1 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            >
+              <Save className="h-3.5 w-3.5" />
+              Enregistrer sous
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}