create-crm-tmp 1.1.3 → 2.0.0

package/template/src/components/contacts/save-view-dialog.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { X, Globe, Lock } from 'lucide-react';
+import { useFocusTrap } from '@/hooks/use-focus-trap';
+
+interface SaveViewDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSave: (name: string, isPublic: boolean) => void;
+  mode: 'create' | 'save_as' | 'rename';
+  initialName?: string;
+  initialPublic?: boolean;
+  loading?: boolean;
+}
+
+export function SaveViewDialog({
+  open,
+  onClose,
+  onSave,
+  mode,
+  initialName = '',
+  initialPublic = false,
+  loading = false,
+}: SaveViewDialogProps) {
+  const [name, setName] = useState(initialName);
+  const [isPublic, setIsPublic] = useState(initialPublic);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setName(initialName);
+      setIsPublic(initialPublic);
+    }
+  }, [open, initialName, initialPublic]);
+
+  useFocusTrap(open, panelRef, { onClose, initialFocusRef: inputRef });
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    if (open) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [open, onClose]);
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    onSave(name.trim(), isPublic);
+  }
+
+  if (!open) return null;
+
+  const titles = {
+    create: 'Créer une vue',
+    save_as: 'Enregistrer sous',
+    rename: 'Renommer la vue',
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
+      <div
+        ref={panelRef}
+        className="w-full max-w-sm rounded-xl border border-gray-200 bg-white shadow-xl"
+      >
+        <div className="flex items-center justify-between border-b border-gray-100 px-5 py-4">
+          <h3 className="text-base font-semibold text-gray-900">{titles[mode]}</h3>
+          <button
+            onClick={onClose}
+            className="cursor-pointer rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 p-5">
+          <div>
+            <label htmlFor="view-name" className="mb-1.5 block text-sm font-medium text-gray-700">
+              Nom de la vue
+            </label>
+            <input
+              ref={inputRef}
+              id="view-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Ex: Nouveaux contacts cette semaine"
+              className="w-full rounded-lg border border-gray-200 px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+            />
+          </div>
+
+          {mode !== 'rename' && (
+            <div>
+              <label className="mb-2 block text-sm font-medium text-gray-700">Visibilité</label>
+              <div className="space-y-2">
+                <label className="flex cursor-pointer items-start gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 has-[:checked]:border-blue-200 has-[:checked]:bg-blue-50">
+                  <input
+                    type="radio"
+                    name="visibility"
+                    checked={!isPublic}
+                    onChange={() => setIsPublic(false)}
+                    className="mt-0.5 accent-blue-600"
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center gap-1.5 text-sm font-medium text-gray-900">
+                      <Lock className="h-3.5 w-3.5" />
+                      Privée
+                    </div>
+                    <p className="mt-0.5 text-xs text-gray-500">Visible uniquement par vous</p>
+                  </div>
+                </label>
+                <label className="flex cursor-pointer items-start gap-3 rounded-lg border border-gray-200 p-3 transition-colors hover:bg-gray-50 has-[:checked]:border-blue-200 has-[:checked]:bg-blue-50">
+                  <input
+                    type="radio"
+                    name="visibility"
+                    checked={isPublic}
+                    onChange={() => setIsPublic(true)}
+                    className="mt-0.5 accent-blue-600"
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center gap-1.5 text-sm font-medium text-gray-900">
+                      <Globe className="h-3.5 w-3.5" />
+                      Publique
+                    </div>
+                    <p className="mt-0.5 text-xs text-gray-500">
+                      Visible par tous les utilisateurs du CRM
+                    </p>
+                  </div>
+                </label>
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-end gap-3 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-100"
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={!name.trim() || loading}
+              className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? 'Enregistrement...' : mode === 'rename' ? 'Renommer' : 'Enregistrer'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/template/src/components/contacts/views-tab-bar.tsx

@@ -0,0 +1,440 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import {
+  Plus,
+  ChevronDown,
+  MoreHorizontal,
+  Pencil,
+  Copy,
+  Trash2,
+  Globe,
+  Lock,
+  Pin,
+  PinOff,
+  Users,
+  Building2,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ContactViewData, ViewFilter } from '@/types/contact-views';
+
+interface ViewPermissions {
+  canCreate: boolean;
+  canEditOwn: boolean;
+  canEditAll: boolean;
+  canDeleteOwn: boolean;
+  canDeleteAll: boolean;
+  canShare: boolean;
+}
+
+interface ViewsTabBarProps {
+  views: ContactViewData[];
+  activeViewId: string | null;
+  currentUserId: string;
+  permissions: ViewPermissions;
+  onSelectView: (viewId: string | null) => void;
+  onCreateView: () => void;
+  onRenameView: (view: ContactViewData) => void;
+  onCloneView: (view: ContactViewData) => void;
+  onDeleteView: (view: ContactViewData) => void;
+  onTogglePublic: (view: ContactViewData) => void;
+  onTogglePin: (view: ContactViewData) => void;
+  onDropdownOpenChange?: (open: boolean) => void;
+  onContextMenuOpenChange?: (open: boolean) => void;
+  hasUnsavedChanges?: boolean;
+  activeFilters?: ViewFilter[];
+  entityType?: 'contacts' | 'companies';
+}
+
+export type { ViewPermissions };
+
+export function ViewsTabBar({
+  views,
+  activeViewId,
+  currentUserId,
+  permissions,
+  onSelectView,
+  onCreateView,
+  onRenameView,
+  onCloneView,
+  onDeleteView,
+  onTogglePublic,
+  onTogglePin,
+  onDropdownOpenChange,
+  onContextMenuOpenChange,
+  hasUnsavedChanges,
+  activeFilters,
+  entityType = 'contacts',
+}: ViewsTabBarProps) {
+  const [showAllViews, setShowAllViews] = useState(false);
+  const [contextMenu, setContextMenu] = useState<string | null>(null);
+  const allViewsRef = useRef<HTMLDivElement>(null);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    onDropdownOpenChange?.(showAllViews);
+  }, [showAllViews, onDropdownOpenChange]);
+
+  useEffect(() => {
+    onContextMenuOpenChange?.(contextMenu !== null);
+  }, [contextMenu, onContextMenuOpenChange]);
+
+  const pinnedViews = views
+    .filter((v) => v.pinOrder != null)
+    .sort((a, b) => (a.pinOrder ?? 0) - (b.pinOrder ?? 0));
+  const unpinnedViews = views
+    .filter((v) => v.pinOrder == null)
+    .sort((a, b) => {
+      const byCreated = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
+      if (byCreated !== 0) return byCreated;
+      return (a.name || '').localeCompare(b.name || '', 'fr');
+    });
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (allViewsRef.current && !allViewsRef.current.contains(e.target as Node)) {
+        setShowAllViews(false);
+      }
+      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+        setContextMenu(null);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const getFilterCount = (view: ContactViewData) => {
+    const filters = view.filters as ViewFilter[];
+    return Array.isArray(filters) ? filters.length : 0;
+  };
+
+  const isOwner = (view: ContactViewData) => view.userId === currentUserId;
+
+  const canEdit = (view: ContactViewData) =>
+    isOwner(view) ? permissions.canEditOwn : permissions.canEditAll;
+
+  const canDelete = (view: ContactViewData) =>
+    isOwner(view) ? permissions.canDeleteOwn : permissions.canDeleteAll;
+
+  const hasContextActions = (view: ContactViewData) =>
+    canEdit(view) || canDelete(view) || permissions.canCreate;
+
+  return (
+    <div className="flex items-center gap-1 border-b border-gray-200 bg-white px-4 sm:px-6 lg:px-8">
+      {/* Vue "Tous les contacts" (défaut) */}
+      <button
+        onClick={() => onSelectView(null)}
+        className={cn(
+          'relative flex shrink-0 cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
+          activeViewId === null
+            ? 'border-blue-600 text-blue-600'
+            : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+        )}
+      >
+        {entityType === 'companies' ? (
+          <Building2 className="h-3.5 w-3.5" />
+        ) : (
+          <Users className="h-3.5 w-3.5" />
+        )}
+        {entityType === 'companies' ? 'Toutes les entreprises' : 'Tous les contacts'}
+        {activeViewId === null && activeFilters && activeFilters.length > 0 && (
+          <span className="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-blue-100 px-1 text-[10px] font-semibold text-blue-700">
+            {activeFilters.length}
+          </span>
+        )}
+      </button>
+
+      {/* Vues épinglées */}
+      {pinnedViews.map((view) => (
+        <div key={view.id} className="group relative flex shrink-0 items-center">
+          <button
+            onClick={() => onSelectView(view.id)}
+            className={cn(
+              'relative flex cursor-pointer items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
+              activeViewId === view.id
+                ? 'border-blue-600 text-blue-600'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+            )}
+          >
+            {view.isPublic && !isOwner(view) && <Lock className="h-3 w-3 text-gray-400" />}
+            {view.isPublic && isOwner(view) && <Globe className="h-3 w-3 text-gray-400" />}
+            {view.name}
+            {getFilterCount(view) > 0 && (
+              <span className="ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-600">
+                {getFilterCount(view)}
+              </span>
+            )}
+            {activeViewId === view.id && hasUnsavedChanges && (
+              <span className="ml-1 h-1.5 w-1.5 rounded-full bg-orange-400" />
+            )}
+          </button>
+
+          {/* Menu contextuel par vue épinglée */}
+          {hasContextActions(view) && (
+            <div className="relative">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setContextMenu(contextMenu === view.id ? null : view.id);
+                }}
+                className={cn(
+                  'cursor-pointer rounded p-0.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                  activeViewId === view.id ? 'visible' : 'invisible group-hover:visible',
+                )}
+              >
+                <MoreHorizontal className="h-3.5 w-3.5" />
+              </button>
+
+              {contextMenu === view.id && (
+                <div
+                  ref={contextMenuRef}
+                  className="absolute top-full right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
+                >
+                  {canEdit(view) && (
+                    <button
+                      onClick={() => {
+                        onRenameView(view);
+                        setContextMenu(null);
+                      }}
+                      className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                    >
+                      <Pencil className="h-3.5 w-3.5" />
+                      Renommer
+                    </button>
+                  )}
+                  {permissions.canCreate && (
+                    <button
+                      onClick={() => {
+                        onCloneView(view);
+                        setContextMenu(null);
+                      }}
+                      className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                    >
+                      <Copy className="h-3.5 w-3.5" />
+                      Dupliquer
+                    </button>
+                  )}
+                  {canEdit(view) && permissions.canShare && (
+                    <button
+                      onClick={() => {
+                        onTogglePublic(view);
+                        setContextMenu(null);
+                      }}
+                      className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                    >
+                      {view.isPublic ? (
+                        <>
+                          <Lock className="h-3.5 w-3.5" />
+                          Rendre privée
+                        </>
+                      ) : (
+                        <>
+                          <Globe className="h-3.5 w-3.5" />
+                          Rendre publique
+                        </>
+                      )}
+                    </button>
+                  )}
+                  <button
+                    onClick={() => {
+                      onTogglePin(view);
+                      setContextMenu(null);
+                    }}
+                    className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                  >
+                    <PinOff className="h-3.5 w-3.5" />
+                    Désépingler
+                  </button>
+                  {canDelete(view) && (
+                    <>
+                      <hr className="my-1 border-gray-100" />
+                      <button
+                        onClick={() => {
+                          onDeleteView(view);
+                          setContextMenu(null);
+                        }}
+                        className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        Supprimer
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+
+      {/* Dropdown "Toutes les vues" */}
+      {unpinnedViews.length > 0 && (
+        <div className="relative" ref={allViewsRef}>
+          <button
+            onClick={() => setShowAllViews(!showAllViews)}
+            className={cn(
+              'flex shrink-0 cursor-pointer items-center gap-1 border-b-2 px-3 py-2.5 text-sm font-medium whitespace-nowrap transition-colors',
+              unpinnedViews.some((v) => v.id === activeViewId)
+                ? 'border-blue-600 text-blue-600'
+                : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+            )}
+          >
+            {unpinnedViews.find((v) => v.id === activeViewId)?.name || 'Toutes les vues'}
+            <ChevronDown className="h-3.5 w-3.5" />
+            {unpinnedViews.length > 0 && (
+              <span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-500">
+                {unpinnedViews.length}
+              </span>
+            )}
+          </button>
+
+          {showAllViews && (
+            <div className="absolute top-full left-0 z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white py-1 shadow-lg">
+              <div className="px-3 py-2 text-xs font-semibold tracking-wide text-gray-400 uppercase">
+                Vues enregistrées
+              </div>
+              {unpinnedViews.map((view) => (
+                <div
+                  key={view.id}
+                  className="group flex items-center justify-between px-3 py-2 hover:bg-gray-50"
+                >
+                  <button
+                    onClick={() => {
+                      onSelectView(view.id);
+                      setShowAllViews(false);
+                    }}
+                    className={cn(
+                      'flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-left text-sm transition-colors hover:text-gray-900',
+                      activeViewId === view.id ? 'font-medium text-blue-600' : 'text-gray-700',
+                    )}
+                  >
+                    {view.isPublic ? (
+                      <Globe className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+                    ) : (
+                      <Lock className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+                    )}
+                    <span className="truncate">{view.name}</span>
+                    {getFilterCount(view) > 0 && (
+                      <span className="ml-1 inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-gray-100 px-1 text-[10px] font-semibold text-gray-500">
+                        {getFilterCount(view)}
+                      </span>
+                    )}
+                    {!isOwner(view) && (
+                      <span className="shrink-0 text-xs text-gray-400">par {view.user?.name}</span>
+                    )}
+                  </button>
+                  {hasContextActions(view) && (
+                    <div className="relative shrink-0">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setContextMenu(contextMenu === view.id ? null : view.id);
+                        }}
+                        className="cursor-pointer rounded p-1 text-gray-400 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-gray-200 hover:text-gray-600"
+                        title="Actions"
+                      >
+                        <MoreHorizontal className="h-3.5 w-3.5" />
+                      </button>
+                      {contextMenu === view.id && (
+                        <div
+                          ref={contextMenuRef}
+                          className="absolute top-full right-0 z-50 mt-1 w-48 rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
+                        >
+                          {canEdit(view) && (
+                            <button
+                              onClick={() => {
+                                onRenameView(view);
+                                setContextMenu(null);
+                                setShowAllViews(false);
+                              }}
+                              className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                            >
+                              <Pencil className="h-3.5 w-3.5" />
+                              Renommer
+                            </button>
+                          )}
+                          {permissions.canCreate && (
+                            <button
+                              onClick={() => {
+                                onCloneView(view);
+                                setContextMenu(null);
+                                setShowAllViews(false);
+                              }}
+                              className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                            >
+                              <Copy className="h-3.5 w-3.5" />
+                              Dupliquer
+                            </button>
+                          )}
+                          {canEdit(view) && permissions.canShare && (
+                            <button
+                              onClick={() => {
+                                onTogglePublic(view);
+                                setContextMenu(null);
+                                setShowAllViews(false);
+                              }}
+                              className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                            >
+                              {view.isPublic ? (
+                                <>
+                                  <Lock className="h-3.5 w-3.5" />
+                                  Rendre privée
+                                </>
+                              ) : (
+                                <>
+                                  <Globe className="h-3.5 w-3.5" />
+                                  Rendre publique
+                                </>
+                              )}
+                            </button>
+                          )}
+                          <button
+                            onClick={() => {
+                              onTogglePin(view);
+                              setContextMenu(null);
+                              setShowAllViews(false);
+                            }}
+                            className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                          >
+                            <Pin className="h-3.5 w-3.5" />
+                            Épingler
+                          </button>
+                          {canDelete(view) && (
+                            <>
+                              <hr className="my-1 border-gray-100" />
+                              <button
+                                onClick={() => {
+                                  onDeleteView(view);
+                                  setContextMenu(null);
+                                  setShowAllViews(false);
+                                }}
+                                className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50"
+                              >
+                                <Trash2 className="h-3.5 w-3.5" />
+                                Supprimer
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Bouton "+" pour créer */}
+      {permissions.canCreate && (
+        <button
+          onClick={onCreateView}
+          className="ml-1 flex shrink-0 cursor-pointer items-center gap-1 rounded-md border border-dashed border-gray-300 px-2.5 py-1.5 text-sm text-gray-500 transition-colors hover:border-gray-400 hover:bg-gray-50 hover:text-gray-700"
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+}