create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/ui/datetime-picker.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Calendar, ChevronLeft, ChevronRight, Clock } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface DateTimePickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  required?: boolean;
+  id?: string;
+}
+
+const DAYS = ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'];
+const MONTHS = [
+  'Janvier',
+  'Février',
+  'Mars',
+  'Avril',
+  'Mai',
+  'Juin',
+  'Juillet',
+  'Août',
+  'Septembre',
+  'Octobre',
+  'Novembre',
+  'Décembre',
+];
+
+function pad(n: number) {
+  return String(n).padStart(2, '0');
+}
+
+function parseValue(value: string): { date: Date | null; hour: number; minute: number } {
+  if (!value) return { date: null, hour: 9, minute: 0 };
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return { date: null, hour: 9, minute: 0 };
+  return { date: d, hour: d.getHours(), minute: d.getMinutes() };
+}
+
+function formatDisplay(value: string): string {
+  if (!value) return '';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return '';
+  return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} à ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+function getDaysInMonth(date: Date): (Date | null)[] {
+  const year = date.getFullYear();
+  const month = date.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const firstDayOfWeek = firstDay.getDay();
+  const adjustedFirstDay = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1;
+
+  const days: (Date | null)[] = [];
+  for (let i = 0; i < adjustedFirstDay; i++) {
+    days.push(null);
+  }
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    days.push(new Date(year, month, i));
+  }
+  return days;
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function DateTimePicker({
+  value,
+  onChange,
+  placeholder = 'Sélectionner date et heure',
+  className,
+  required,
+  id,
+}: DateTimePickerProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const parsed = parseValue(value);
+  const [currentMonth, setCurrentMonth] = useState(parsed.date || new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(parsed.date);
+  const [hour, setHour] = useState(parsed.hour);
+  const [minute, setMinute] = useState(parsed.minute);
+  const [isMounted, setIsMounted] = useState(false);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const p = parseValue(value);
+    setSelectedDate(p.date);
+    setHour(p.hour);
+    setMinute(p.minute);
+    if (p.date) setCurrentMonth(p.date);
+  }, [value]);
+
+  useEffect(() => {
+    if (isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const panelH = 420;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const top =
+        spaceBelow < panelH && rect.top > panelH
+          ? rect.top + window.scrollY - panelH - 4
+          : rect.bottom + window.scrollY + 4;
+      setPosition({
+        top,
+        left: rect.left + window.scrollX,
+      });
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        panelRef.current &&
+        !panelRef.current.contains(e.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setIsOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [isOpen]);
+
+  const emitChange = useCallback(
+    (date: Date | null, h: number, m: number) => {
+      if (!date) return;
+      const d = new Date(date);
+      d.setHours(h, m, 0, 0);
+      const iso = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(h)}:${pad(m)}`;
+      onChange(iso);
+    },
+    [onChange],
+  );
+
+  const handleDateClick = (date: Date) => {
+    setSelectedDate(date);
+    emitChange(date, hour, minute);
+  };
+
+  const handleHourChange = (h: number) => {
+    setHour(h);
+    emitChange(selectedDate, h, minute);
+  };
+
+  const handleMinuteChange = (m: number) => {
+    setMinute(m);
+    emitChange(selectedDate, hour, m);
+  };
+
+  const handleSetNow = () => {
+    const now = new Date();
+    setSelectedDate(now);
+    setHour(now.getHours());
+    setMinute(now.getMinutes());
+    setCurrentMonth(now);
+    emitChange(now, now.getHours(), now.getMinutes());
+  };
+
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const days = getDaysInMonth(currentMonth);
+
+  const panel =
+    isOpen && isMounted
+      ? createPortal(
+          <div
+            ref={panelRef}
+            className="ui-scale-in fixed z-[100] w-[320px] rounded-xl border border-border bg-popover text-popover-foreground shadow-xl"
+            style={{ top: position.top, left: position.left }}
+          >
+            <div className="flex items-center justify-between border-b border-border px-4 py-3">
+              <button
+                type="button"
+                onClick={() =>
+                  setCurrentMonth(
+                    new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1),
+                  )
+                }
+                className="text-muted-foreground hover:bg-muted rounded-lg p-1.5 transition-colors"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </button>
+              <span className="text-sm font-semibold text-foreground">
+                {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+              </span>
+              <button
+                type="button"
+                onClick={() =>
+                  setCurrentMonth(
+                    new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1),
+                  )
+                }
+                className="text-muted-foreground hover:bg-muted rounded-lg p-1.5 transition-colors"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </button>
+            </div>
+
+            <div className="grid grid-cols-7 gap-0.5 px-3 pt-2">
+              {DAYS.map((d) => (
+                <div key={d} className="text-muted-foreground py-1 text-center text-xs font-medium">
+                  {d}
+                </div>
+              ))}
+            </div>
+
+            <div className="grid grid-cols-7 gap-0.5 px-3 pb-2">
+              {days.map((day, i) => {
+                if (!day) return <div key={`empty-${i}`} />;
+                const isTodayCell = isSameDay(day, today);
+                const isSelected = selectedDate && isSameDay(day, selectedDate);
+                return (
+                  <button
+                    key={day.toISOString()}
+                    type="button"
+                    onClick={() => handleDateClick(day)}
+                    className={cn(
+                      'flex h-8 w-full items-center justify-center rounded-lg text-sm transition-colors',
+                      isSelected
+                        ? 'bg-primary text-primary-foreground font-semibold shadow-sm'
+                        : isTodayCell
+                          ? 'border-primary/40 text-primary hover:bg-primary/10 border font-medium'
+                          : 'text-foreground hover:bg-muted',
+                    )}
+                  >
+                    {day.getDate()}
+                  </button>
+                );
+              })}
+            </div>
+
+            <div className="border-border border-t px-4 py-3">
+              <div className="flex items-center gap-3">
+                <Clock className="text-muted-foreground h-4 w-4 shrink-0" />
+                <div className="flex items-center gap-1">
+                  <select
+                    value={hour}
+                    onChange={(e) => handleHourChange(Number(e.target.value))}
+                    aria-label="Heure"
+                    className="border-border bg-muted text-foreground focus-visible:border-ring focus-visible:ring-ring/20 rounded-lg border px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none"
+                  >
+                    {Array.from({ length: 24 }, (_, i) => (
+                      <option key={i} value={i}>
+                        {pad(i)}
+                      </option>
+                    ))}
+                  </select>
+                  <span className="text-muted-foreground text-sm font-bold">:</span>
+                  <select
+                    value={minute}
+                    onChange={(e) => handleMinuteChange(Number(e.target.value))}
+                    aria-label="Minute"
+                    className="border-border bg-muted text-foreground focus-visible:border-ring focus-visible:ring-ring/20 rounded-lg border px-2 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none"
+                  >
+                    {Array.from({ length: 12 }, (_, i) => i * 5).map((m) => (
+                      <option key={m} value={m}>
+                        {pad(m)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <button
+                  type="button"
+                  onClick={handleSetNow}
+                  className="text-primary ml-auto rounded-lg px-2.5 py-1 text-xs font-medium transition-colors hover:bg-primary/10"
+                >
+                  Maintenant
+                </button>
+              </div>
+            </div>
+
+            <div className="border-border border-t px-4 py-2.5">
+              <button
+                type="button"
+                onClick={() => setIsOpen(false)}
+                disabled={!selectedDate}
+                className="bg-primary text-primary-foreground hover:bg-primary/90 w-full rounded-lg px-3 py-2 text-sm font-medium shadow-sm transition-colors disabled:opacity-50"
+              >
+                Confirmer
+              </button>
+            </div>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        id={id}
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'border-input bg-background text-foreground flex w-full items-center gap-2 rounded-xl border px-3 py-2 text-sm shadow-sm',
+          'transition-[border-color,box-shadow] duration-200',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:outline-none',
+          isOpen && 'border-ring ring-ring/50 ring-[3px]',
+          !value && 'text-muted-foreground',
+          className,
+        )}
+      >
+        <Calendar className="text-muted-foreground h-4 w-4 shrink-0" />
+        <span className="flex-1 truncate text-left">
+          {value ? formatDisplay(value) : placeholder}
+        </span>
+        {required && !value && <span className="text-xs text-red-500">*</span>}
+      </button>
+      {panel}
+    </>
+  );
+}

package/template/src/components/ui/status-select.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { ChevronDown } from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { cn } from '@/lib/utils';
+
+export interface StatusOption {
+  id: string;
+  name: string;
+  color: string;
+}
+
+const DROPDOWN_MAX_HEIGHT = 240; // max-h-60
+const DROPDOWN_GAP = 4;
+
+interface StatusSelectProps {
+  value: string;
+  onChange: (statusId: string) => void;
+  statuses: StatusOption[];
+  placeholder?: string;
+  className?: string;
+  size?: 'sm' | 'md';
+  disabled?: boolean;
+  id?: string;
+  /** Optionnel : callback appelé au changement (ex. pour gérer motif de fermeture) */
+  onStatusChange?: (statusId: string) => void;
+}
+
+export function StatusSelect({
+  value,
+  onChange,
+  statuses,
+  placeholder = 'Aucun statut',
+  className,
+  size = 'md',
+  disabled = false,
+  id,
+  onStatusChange,
+}: StatusSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [dropdownStyle, setDropdownStyle] = useState<{ top?: number; bottom?: number; left: number; width: number } | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selectedStatus = statuses.find((s) => s.id === value);
+  const options = [{ id: '', name: placeholder }, ...statuses];
+
+  const updateDropdownPosition = useCallback(() => {
+    if (!triggerRef.current || typeof document === 'undefined') return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom - DROPDOWN_GAP;
+    const spaceAbove = rect.top - DROPDOWN_GAP;
+    const openAbove = spaceBelow < DROPDOWN_MAX_HEIGHT && spaceAbove > spaceBelow;
+
+    setDropdownStyle({
+      left: rect.left,
+      width: rect.width,
+      ...(openAbove
+        ? { bottom: window.innerHeight - rect.top + DROPDOWN_GAP }
+        : { top: rect.bottom + DROPDOWN_GAP }),
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (open) {
+      updateDropdownPosition();
+    } else {
+      setDropdownStyle(null);
+    }
+  }, [open, updateDropdownPosition]);
+
+  const handleSelect = useCallback(
+    (statusId: string) => {
+      onChange(statusId);
+      onStatusChange?.(statusId);
+      setOpen(false);
+      setFocusedIndex(-1);
+    },
+    [onChange, onStatusChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!open) {
+        if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+          e.preventDefault();
+          setOpen(true);
+          setFocusedIndex(value ? options.findIndex((o) => o.id === value) : 0);
+        }
+        return;
+      }
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          setOpen(false);
+          setFocusedIndex(-1);
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          setFocusedIndex((i) => (i < options.length - 1 ? i + 1 : 0));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setFocusedIndex((i) => (i > 0 ? i - 1 : options.length - 1));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (focusedIndex >= 0 && options[focusedIndex]) {
+            handleSelect(options[focusedIndex].id);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [open, value, options, focusedIndex, handleSelect],
+  );
+
+  useLayoutEffect(() => {
+    if (open) {
+      updateDropdownPosition();
+    } else {
+      setDropdownStyle(null);
+    }
+  }, [open, updateDropdownPosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleScrollOrResize = () => {
+      setOpen(false);
+      setFocusedIndex(-1);
+    };
+    // window.addEventListener('scroll', handleScrollOrResize, true);
+    window.addEventListener('resize', handleScrollOrResize, { passive: true });
+    return () => {
+      // window.removeEventListener('scroll', handleScrollOrResize, true);
+      window.removeEventListener('resize', handleScrollOrResize);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (containerRef.current?.contains(target)) return;
+      if (dropdownRef.current?.contains(target)) return;
+      setOpen(false);
+      setFocusedIndex(-1);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const sizeClasses = size === 'sm' ? 'px-2 py-1.5 text-sm' : 'px-4 py-2 text-sm';
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-label="Sélectionner un statut"
+        disabled={disabled}
+        onClick={() => !disabled && setOpen(!open)}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border text-left transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          sizeClasses,
+          selectedStatus
+            ? ''
+            : 'border-gray-300 bg-white text-gray-900 hover:bg-gray-50',
+        )}
+        style={
+          selectedStatus
+            ? {
+                backgroundColor: `${selectedStatus.color}20`,
+                color: selectedStatus.color,
+                borderColor: selectedStatus.color,
+              }
+            : undefined
+        }
+      >
+        <span className="flex min-w-0 items-center gap-2 truncate">
+          {selectedStatus ? (
+            <>
+              <span
+                className="h-2.5 w-2.5 shrink-0 rounded-full"
+                style={{ backgroundColor: selectedStatus.color }}
+                aria-hidden
+              />
+              <span className="truncate">{selectedStatus.name}</span>
+            </>
+          ) : (
+            <span className="text-gray-500">{placeholder}</span>
+          )}
+        </span>
+        <ChevronDown
+          aria-hidden="true"
+          className={cn('h-4 w-4 shrink-0 text-gray-400 transition-transform', open && 'rotate-180')}
+        />
+      </button>
+
+      {open &&
+        dropdownStyle &&
+        typeof document !== 'undefined' &&
+        createPortal(
+          <AnimatePresence>
+            <motion.div
+              ref={dropdownRef}
+              role="listbox"
+              initial={{ opacity: 0, scale: 0.96, y: -4 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.96, y: -4 }}
+              transition={{ duration: 0.15, ease: [0.25, 0.4, 0.25, 1] }}
+              className="fixed z-[9999] max-h-60 min-w-[160px] overflow-auto rounded-lg border border-gray-200 bg-white py-1 shadow-lg"
+              style={{
+                left: dropdownStyle.left,
+                width: dropdownStyle.width,
+                transformOrigin: dropdownStyle.top !== undefined ? 'top' : 'bottom',
+                ...(dropdownStyle.top !== undefined
+                  ? { top: dropdownStyle.top }
+                  : { bottom: dropdownStyle.bottom }),
+              }}
+            >
+              {options.map((opt, idx) => (
+                <motion.button
+                  key={opt.id || '__empty__'}
+                  initial={{ opacity: 0, x: -4 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: idx * 0.02, duration: 0.12 }}
+                type="button"
+                role="option"
+                aria-selected={opt.id === value}
+                className={cn(
+                  'flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm transition-colors',
+                  idx === focusedIndex ? 'bg-gray-100' : 'hover:bg-gray-50',
+                  opt.id === value ? 'bg-blue-50 font-medium text-blue-700' : 'text-gray-900',
+                )}
+                onClick={() => handleSelect(opt.id)}
+                onMouseEnter={() => setFocusedIndex(idx)}
+              >
+                {opt.id ? (
+                  <>
+                    <span
+                      className="h-2.5 w-2.5 shrink-0 rounded-full"
+                      style={{
+                        backgroundColor:
+                          statuses.find((s) => s.id === opt.id)?.color ?? '#999',
+                      }}
+                      aria-hidden
+                    />
+                    <span className="truncate">{opt.name}</span>
+                  </>
+                ) : (
+                  <span className="text-gray-500">{opt.name}</span>
+                )}
+              </motion.button>
+            ))}
+          </motion.div>
+          </AnimatePresence>,
+          document.body,
+        )}
+    </div>
+  );
+}

package/template/src/components/ui/tooltip.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+function TooltipProvider({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider {...props} />;
+}
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.TooltipTrigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground border-border z-[200] max-w-[min(280px,calc(100vw-16px))] rounded-md border px-3 py-2 text-xs shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/template/src/components/view-as-modal.tsx

@@ -76,13 +76,21 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center rounded-lg bg-gray-500/20 p-4 shadow-xl backdrop-blur-sm">
-      <div ref={contentRef} className="w-full max-w-2xl rounded-lg bg-white shadow-xl" role="dialog" aria-modal="true" aria-labelledby="view-as-title">
+      <div
+        ref={contentRef}
+        className="w-full max-w-2xl rounded-lg bg-white shadow-xl overscroll-contain"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="view-as-title"
+      >
         {/* En-tête */}
         <div className="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-blue-600 px-6 py-4">
           <div className="flex items-center gap-3 text-white">
             <UserIcon className="h-6 w-6" />
             <div>
-              <h2 id="view-as-title" className="text-xl font-bold">Changer de vue</h2>
+              <h2 id="view-as-title" className="text-xl font-bold">
+                Changer de vue
+              </h2>
               <p className="text-sm text-white/90">
                 Voir l'application avec les permissions d'un profil
               </p>
@@ -114,7 +122,7 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                     router.refresh();
                   }}
                   className={cn(
-                    'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-all',
+                    'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-colors',
                     !viewAsUser
                       ? 'border-blue-500 bg-blue-50'
                       : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/50',
@@ -125,9 +133,7 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                       <div
                         className={cn(
                           'flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold',
-                          !viewAsUser
-                            ? 'bg-blue-600 text-white'
-                            : 'bg-blue-100 text-blue-800',
+                          !viewAsUser ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-800',
                         )}
                       >
                         {getInitials(session.user.name || session.user.email)}
@@ -153,7 +159,7 @@ export function ViewAsModal({ isOpen, onClose }: ViewAsModalProps) {
                     key={user.id}
                     onClick={() => handleSelectUser(user)}
                     className={cn(
-                      'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-all',
+                      'w-full cursor-pointer rounded-lg border-2 p-4 text-left transition-colors',
                       viewAsUser?.id === user.id
                         ? 'border-blue-500 bg-blue-50'
                         : 'border-gray-200 bg-white hover:border-blue-300 hover:bg-blue-50/50',