create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/settings/integrations/MetaLeadIntegration.tsx

@@ -0,0 +1,451 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { useConfirm } from '@/hooks/use-confirm';
+import { StatusSelect } from '@/components/ui/status-select';
+import { devToast } from '@/lib/utils';
+
+interface MetaLeadConfig {
+  id: string;
+  name: string;
+  pageId: string;
+  verifyToken: string;
+  active: boolean;
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+  defaultStatus: { id: string; name: string; color: string } | null;
+  defaultAssignedUser: { id: string; name: string; email: string } | null;
+}
+
+interface MetaLeadFormData {
+  name: string;
+  active: boolean;
+  pageId: string;
+  accessToken: string;
+  verifyToken: string;
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+}
+
+const EMPTY_FORM: MetaLeadFormData = {
+  name: '',
+  active: true,
+  pageId: '',
+  accessToken: '',
+  verifyToken: '',
+  defaultStatusId: null,
+  defaultAssignedUserId: null,
+};
+
+interface MetaLeadIntegrationProps {
+  readonly statuses: ReadonlyArray<{ id: string; name: string; color: string }>;
+  readonly users: ReadonlyArray<{ id: string; name: string; email: string }>;
+  readonly onOpenLogs: (configId: string, configName: string) => void;
+}
+
+export function MetaLeadIntegration({ statuses, users, onOpenLogs }: MetaLeadIntegrationProps) {
+  const toast = useAppToast();
+  const { confirm, ConfirmDialog } = useConfirm();
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [configs, setConfigs] = useState<MetaLeadConfig[]>([]);
+  const [showModal, setShowModal] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<string | null>(null);
+  const [formData, setFormData] = useState<MetaLeadFormData>(EMPTY_FORM);
+
+  const loadConfigs = useCallback(async () => {
+    try {
+      const res = await fetch('/api/settings/meta-leads');
+      if (res.ok) {
+        const data = await res.json();
+        setConfigs(Array.isArray(data) ? data : []);
+      }
+    } catch {
+      toast.error('Impossible de charger les configurations Meta. Veuillez rafraîchir la page.');
+    } finally {
+      setLoading(false);
+    }
+  }, [toast]);
+
+  useEffect(() => {
+    loadConfigs();
+  }, [loadConfigs]);
+
+  const resetForm = () => {
+    setShowModal(false);
+    setEditingConfig(null);
+    setFormData(EMPTY_FORM);
+  };
+
+  const handleOpenAdd = () => {
+    setEditingConfig(null);
+    setFormData(EMPTY_FORM);
+    setShowModal(true);
+  };
+
+  const handleEdit = (config: MetaLeadConfig) => {
+    setEditingConfig(config.id);
+    setFormData({
+      name: config.name,
+      active: config.active,
+      pageId: config.pageId,
+      accessToken: '',
+      verifyToken: config.verifyToken,
+      defaultStatusId: config.defaultStatusId,
+      defaultAssignedUserId: config.defaultAssignedUserId,
+    });
+    setShowModal(true);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const url = editingConfig
+        ? `/api/settings/meta-leads/${editingConfig}`
+        : '/api/settings/meta-leads';
+      const method = editingConfig ? 'PUT' : 'POST';
+
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la sauvegarde de la configuration Meta');
+      }
+
+      toast.success(
+        editingConfig
+          ? 'Configuration Meta Lead Ads mise à jour avec succès'
+          : 'Configuration Meta Lead Ads créée avec succès',
+      );
+      resetForm();
+      await loadConfigs();
+    } catch (error: any) {
+      toast.error(devToast('Impossible de sauvegarder la configuration Meta. Veuillez réessayer.', error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    const confirmed = await confirm({
+      title: 'Supprimer la configuration Meta Lead',
+      description: 'Êtes-vous sûr de vouloir supprimer cette configuration ?',
+      confirmText: 'Supprimer',
+      cancelText: 'Annuler',
+      variant: 'destructive',
+    });
+
+    if (!confirmed) return;
+
+    try {
+      const response = await fetch(`/api/settings/meta-leads/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Erreur lors de la suppression');
+      }
+
+      toast.success('Configuration supprimée avec succès');
+      await loadConfigs();
+    } catch (error: any) {
+      toast.error(devToast('Impossible de supprimer la configuration. Veuillez réessayer.', error));
+    }
+  };
+
+  const getWebhookUrl = () => {
+    const origin = globalThis.window?.location.origin ?? '';
+    return `${origin}/api/webhooks/meta-leads`;
+  };
+
+  const handleCopyWebhook = () => {
+    const url = getWebhookUrl();
+    navigator.clipboard?.writeText(url).then(() => toast.success('Lien webhook copié'));
+  };
+
+  return (
+    <>
+      <div className="rounded-lg bg-white p-6 shadow-sm">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Intégration Meta Lead Ads</h2>
+            <p className="mt-1 text-sm text-gray-600">
+              Recevez automatiquement les leads depuis Facebook Lead Ads.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={handleOpenAdd}
+            className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+          >
+            + Ajouter
+          </button>
+        </div>
+
+        {loading && (
+          <div className="mt-6 text-center text-gray-500">Chargement...</div>
+        )}
+
+        {!loading && configs.length === 0 && (
+          <div className="mt-6 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
+            <p className="text-sm text-gray-600">Aucune configuration Meta Lead Ads</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Cliquez sur &quot;+ Ajouter&quot; pour créer votre première configuration
+            </p>
+          </div>
+        )}
+
+        {!loading && configs.length > 0 && (
+          <div className="mt-6 space-y-3">
+            {configs.map((config) => (
+              <div
+                key={config.id}
+                className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-4"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-gray-900">{config.name}</h3>
+                    {config.active ? (
+                      <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                        Actif
+                      </span>
+                    ) : (
+                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">
+                        Inactif
+                      </span>
+                    )}
+                  </div>
+                  <p className="mt-1 text-xs text-gray-500">Page ID: {config.pageId}</p>
+                  <p className="mt-0.5 text-xs text-gray-400">Webhook : {getWebhookUrl()}</p>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => onOpenLogs(config.id, config.name)}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Voir les logs
+                  </button>
+                  <button
+                    type="button"
+                    onClick={handleCopyWebhook}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Copier le lien webhook
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleEdit(config)}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Modifier
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(config.id)}
+                    className="cursor-pointer rounded-lg border border-blue-300 px-3 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50"
+                  >
+                    Supprimer
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showModal && (
+        <div className="ui-fade-in fixed inset-0 z-50 flex min-h-dvh items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="ui-scale-in flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+            <div className="shrink-0 border-b border-gray-100 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
+                  {editingConfig ? 'Modifier' : 'Ajouter'} une configuration Meta Lead Ads
+                </h2>
+                <button
+                  type="button"
+                  onClick={resetForm}
+                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
+                >
+                  <svg
+                    className="h-6 w-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <form
+              id="meta-lead-form"
+              onSubmit={handleSubmit}
+              className="flex-1 space-y-4 overflow-y-auto pt-4"
+            >
+              <div>
+                <label htmlFor="meta-lead-name" className="block text-sm font-medium text-gray-700">
+                  Nom de la configuration *
+                </label>
+                <input
+                  id="meta-lead-name"
+                  type="text"
+                  required
+                  value={formData.name}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Ex: Facebook Lead Ads"
+                />
+              </div>
+
+              <div className="flex items-center">
+                <input
+                  id="meta-lead-active"
+                  type="checkbox"
+                  checked={formData.active}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, active: e.target.checked }))
+                  }
+                  className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-gray-400/30"
+                />
+                <label
+                  htmlFor="meta-lead-active"
+                  className="ml-2 text-sm font-medium text-gray-700"
+                >
+                  Activer l&apos;intégration Meta Lead Ads
+                </label>
+              </div>
+
+              <div>
+                <label htmlFor="meta-lead-page-id" className="block text-sm font-medium text-gray-700">Page ID *</label>
+                <input
+                  id="meta-lead-page-id"
+                  type="text"
+                  required
+                  value={formData.pageId}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, pageId: e.target.value }))}
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Page ID Facebook"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="meta-lead-access-token" className="block text-sm font-medium text-gray-700">Access Token *</label>
+                <input
+                  id="meta-lead-access-token"
+                  type="password"
+                  autoComplete="off"
+                  required
+                  value={formData.accessToken}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, accessToken: e.target.value }))
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Access Token"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="meta-lead-verify-token" className="block text-sm font-medium text-gray-700">Verify Token *</label>
+                <input
+                  id="meta-lead-verify-token"
+                  type="text"
+                  required
+                  value={formData.verifyToken}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, verifyToken: e.target.value }))
+                  }
+                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  placeholder="Verify Token"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                <div>
+                  <label htmlFor="meta-lead-assigned-user" className="block text-sm font-medium text-gray-700">
+                    Utilisateur assigné par défaut (optionnel)
+                  </label>
+                  <select
+                    id="meta-lead-assigned-user"
+                    value={formData.defaultAssignedUserId || ''}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        defaultAssignedUserId: e.target.value || null,
+                      }))
+                    }
+                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  >
+                    <option value="">Aucun utilisateur par défaut</option>
+                    {users.map((user) => (
+                      <option key={user.id} value={user.id}>
+                        {user.name} ({user.email})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="meta-lead-default-status" className="block text-sm font-medium text-gray-700">
+                    Statut par défaut
+                  </label>
+                  <StatusSelect
+                    id="meta-lead-default-status"
+                    statuses={[...statuses]}
+                    value={formData.defaultStatusId || ''}
+                    onChange={(v) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        defaultStatusId: v || null,
+                      }))
+                    }
+                    placeholder="Aucun statut par défaut"
+                    className="mt-1"
+                  />
+                </div>
+              </div>
+            </form>
+
+            <div className="shrink-0 border-t border-gray-100 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button
+                  type="button"
+                  onClick={resetForm}
+                  className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+                >
+                  Annuler
+                </button>
+                <button
+                  type="submit"
+                  form="meta-lead-form"
+                  disabled={saving}
+                  className="w-full 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 sm:w-auto"
+                >
+                  {saving ? 'Enregistrement...' : 'Enregistrer'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <ConfirmDialog />
+    </>
+  );
+}

package/template/src/components/sidebar.tsx

@@ -9,7 +9,7 @@ import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
 import { useSidebarContext } from '@/contexts/sidebar-context';
 import { useViewAs } from '@/contexts/view-as-context';
 import { ViewAsModal } from '@/components/view-as-modal';
-import { Eye, X, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Eye, X, PanelLeftClose, PanelLeftOpen, FlaskConical } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { NAV_PAGES } from '@/config/nav-pages';
 
@@ -56,7 +56,7 @@ export function Sidebar() {
       {/* Overlay for mobile */}
       {isMobileMenuOpen && (
         <div
-          className="fixed inset-0 z-40 bg-foreground/10 backdrop-blur-sm lg:hidden"
+          className="bg-foreground/10 ui-fade-in fixed inset-0 z-40 backdrop-blur-sm lg:hidden"
           onClick={() => setIsMobileMenuOpen(false)}
         />
       )}
@@ -64,12 +64,16 @@ export function Sidebar() {
       {/* Sidebar */}
       <div
         className={cn(
-          'group fixed top-0 left-0 z-40 flex h-screen flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-(--shadow-card) transition-all duration-300 ease-(--ease-standard) lg:relative lg:translate-x-0',
+          'group border-sidebar-border bg-sidebar text-sidebar-foreground fixed top-0 left-0 z-40 flex h-screen flex-col border-r shadow-(--shadow-card) transition-[width,transform] duration-300 ease-(--ease-standard) lg:relative lg:translate-x-0',
           isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
           !isSidebarExpanded ? 'w-64 lg:w-16' : 'w-64 lg:w-64',
         )}
         onMouseEnter={() => {
-          if (typeof globalThis.window !== 'undefined' && globalThis.window.innerWidth >= 1024 && !isPinned) {
+          if (
+            typeof globalThis.window !== 'undefined' &&
+            globalThis.window.innerWidth >= 1024 &&
+            !isPinned
+          ) {
             setExpandedByHover(true);
           }
         }}
@@ -86,7 +90,7 @@ export function Sidebar() {
             <div className="flex items-center justify-end">
               <button
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="cursor-pointer rounded-lg p-2 text-sidebar-foreground/70 transition-colors duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground lg:hidden"
+                className="text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer rounded-lg p-2 transition-colors duration-200 lg:hidden"
                 aria-label="Close menu"
               >
                 <X className="h-5 w-5" />
@@ -103,21 +107,36 @@ export function Sidebar() {
                     href={item.href}
                     onClick={handleLinkClick}
                     className={cn(
-                      'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors',
+                      'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-[color,background-color,box-shadow] duration-(--duration-normal) ease-(--ease-standard)',
                       !isSidebarExpanded ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
                       isActive
                         ? 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm'
-                        : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                        : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:scale-[0.97]',
                     )}
                     title={!isSidebarExpanded ? displayName : undefined}
                   >
-                    <Icon className="h-5 w-5 shrink-0" />
-                    {isSidebarExpanded && (
-                      <span className="whitespace-nowrap">{displayName}</span>
-                    )}
+                    <Icon aria-hidden="true" className="h-5 w-5 shrink-0" />
+                    {isSidebarExpanded && <span className="whitespace-nowrap">{displayName}</span>}
                   </Link>
                 );
               })}
+              {process.env.NODE_ENV === 'development' && (
+                <Link
+                  href="/dev"
+                  onClick={handleLinkClick}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg py-2 text-sm font-medium transition-[color,background-color,box-shadow] duration-(--duration-normal) ease-(--ease-standard)',
+                    !isSidebarExpanded ? 'px-3 lg:justify-center lg:px-2' : 'px-3',
+                    pathname === '/dev'
+                      ? 'bg-sidebar-primary text-sidebar-primary-foreground shadow-sm'
+                      : 'text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:scale-[0.97]',
+                  )}
+                  title={!isSidebarExpanded ? 'Dev' : undefined}
+                >
+                  <FlaskConical aria-hidden="true" className="h-5 w-5 shrink-0" />
+                  {isSidebarExpanded && <span className="whitespace-nowrap">Dev</span>}
+                </Link>
+              )}
             </div>
           </div>
         </nav>
@@ -126,7 +145,7 @@ export function Sidebar() {
         {isRealAdmin && (
           <div
             className={cn(
-              'border-t border-sidebar-border transition-all duration-300',
+              'border-sidebar-border border-t transition-[padding] duration-300',
               !isSidebarExpanded ? 'p-3 lg:p-2' : 'p-3',
             )}
           >
@@ -134,7 +153,7 @@ export function Sidebar() {
               <button
                 onClick={() => setShowViewAsModal(true)}
                 className={cn(
-                  'w-full cursor-pointer rounded-lg border-2 p-3 text-left transition-all',
+                  'w-full cursor-pointer rounded-lg border-2 p-3 text-left transition-colors',
                   isViewingAsOther
                     ? 'border-sidebar-primary bg-sidebar-primary text-sidebar-primary-foreground hover:opacity-95'
                     : 'border-sidebar-border bg-sidebar text-sidebar-foreground hover:border-sidebar-ring hover:bg-sidebar-accent',
@@ -175,7 +194,7 @@ export function Sidebar() {
                           : session?.user?.name || 'Utilisateur'}
                     </p>
                   </div>
-                  <Eye className="h-5 w-5 shrink-0" />
+                  <Eye aria-hidden="true" className="h-5 w-5 shrink-0" />
                 </div>
               </button>
             ) : (
@@ -191,7 +210,7 @@ export function Sidebar() {
                 aria-label="Changer de vue"
               >
                 <div className="flex items-center justify-center">
-                  <Eye className="h-5 w-5" />
+                  <Eye aria-hidden="true" className="h-5 w-5" />
                 </div>
               </button>
             )}
@@ -201,14 +220,14 @@ export function Sidebar() {
         {/* Bouton Réduire / Développer la navigation (desktop uniquement) */}
         <div
           className={cn(
-            'hidden border-t border-sidebar-border lg:block',
+            'border-sidebar-border hidden border-t lg:block',
             !isSidebarExpanded ? 'p-3 lg:p-2' : 'p-3',
           )}
         >
           <button
             onClick={togglePin}
             className={cn(
-              'flex w-full cursor-pointer items-center gap-3 rounded-lg py-2 text-sm font-medium text-sidebar-foreground/70 transition-colors duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+              'text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex w-full cursor-pointer items-center gap-3 rounded-lg py-2 text-sm font-medium transition-colors duration-200',
               !isSidebarExpanded ? 'justify-center px-2' : 'px-3',
             )}
             title={isPinned ? 'Réduire la navigation' : 'Développer la navigation'}
@@ -216,12 +235,12 @@ export function Sidebar() {
           >
             {isPinned ? (
               <>
-                <PanelLeftClose className="h-5 w-5 shrink-0" />
+                <PanelLeftClose aria-hidden="true" className="h-5 w-5 shrink-0" />
                 <span className="whitespace-nowrap">Réduire la navigation</span>
               </>
             ) : (
               <div className="flex gap-2">
-                <PanelLeftOpen className="h-5 w-5 shrink-0" />
+                <PanelLeftOpen aria-hidden="true" className="h-5 w-5 shrink-0" />
                 <span className="hidden whitespace-nowrap group-hover:block">
                   Développer la navigation
                 </span>
@@ -233,40 +252,40 @@ export function Sidebar() {
         {/* User Profile */}
         <div
           className={cn(
-            'border-t border-sidebar-border transition-all duration-300',
+            'border-sidebar-border border-t transition-[padding] duration-300',
             !isSidebarExpanded ? 'p-4 lg:p-2' : 'p-4',
           )}
         >
           {isSidebarExpanded ? (
             <>
               <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sidebar-accent text-sidebar-accent-foreground">
+                <div className="bg-sidebar-accent text-sidebar-accent-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                   {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-sidebar-foreground">
+                  <p className="text-sidebar-foreground truncate text-sm font-medium">
                     {!isMounted ? 'Utilisateur' : session?.user?.name || 'Utilisateur'}
                   </p>
-                  <p className="truncate text-xs text-sidebar-foreground/70">
+                  <p className="text-sidebar-foreground/70 truncate text-xs">
                     {!isMounted ? '' : session?.user?.email}
                   </p>
                 </div>
               </div>
               <button
                 onClick={handleSignOut}
-                className="mt-3 w-full cursor-pointer rounded-lg bg-sidebar-accent px-3 py-2 text-sm font-medium text-sidebar-accent-foreground transition-colors duration-200 hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"
+                className="bg-sidebar-accent text-sidebar-accent-foreground hover:bg-sidebar-primary hover:text-sidebar-primary-foreground mt-3 w-full cursor-pointer rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200"
               >
                 Déconnexion
               </button>
             </>
           ) : (
             <div className="flex flex-col items-center gap-2">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sidebar-accent text-sidebar-accent-foreground">
+              <div className="bg-sidebar-accent text-sidebar-accent-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                 {!isMounted ? 'U' : session?.user?.name?.[0]?.toUpperCase() || 'U'}
               </div>
               <button
                 onClick={handleSignOut}
-                className="cursor-pointer rounded-lg p-2 text-sidebar-foreground/70 transition-colors duration-200 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                className="text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer rounded-lg p-2 transition-colors duration-200"
                 title="Déconnexion"
                 aria-label="Déconnexion"
               >