create-crm-tmp 1.1.2 → 2.0.0

package/template/src/components/date-picker.tsx

@@ -0,0 +1,396 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Calendar, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DatePickerProps {
+  startDate: string;
+  endDate?: string;
+  onDateChange: (startDate: string, endDate?: string) => void;
+  label?: string;
+  isPeriod?: boolean; // Si true, permet de sélectionner une période
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  startDate,
+  endDate = '',
+  onDateChange,
+  label = 'Sélectionner la date',
+  isPeriod = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+
+  // Helper pour parser les dates ISO en mode local
+  const parseISODate = (dateString: string): Date | null => {
+    if (!dateString) return null;
+    const [year, month, day] = dateString.split('-').map(Number);
+    return new Date(year, month - 1, day);
+  };
+
+  const [tempStartDate, setTempStartDate] = useState<Date | null>(
+    startDate ? parseISODate(startDate) : null,
+  );
+  const [tempEndDate, setTempEndDate] = useState<Date | null>(
+    endDate ? parseISODate(endDate) : null,
+  );
+
+  // Mettre à jour les dates temporaires quand les props changent
+  useEffect(() => {
+    setTempStartDate(startDate ? parseISODate(startDate) : null);
+    setTempEndDate(endDate ? parseISODate(endDate) : null);
+  }, [startDate, endDate]);
+  const [isSelectingStart, setIsSelectingStart] = useState(true);
+  const [modalPosition, setModalPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [isMounted, setIsMounted] = useState(false);
+  const [isDesktopView, setIsDesktopView] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    setIsMounted(true);
+    setIsDesktopView(window.innerWidth >= 640);
+  }, []);
+
+  // Gérer la touche Escape
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isOpen) {
+        handleClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  // Calculer la position de la modale
+  useEffect(() => {
+    if (isOpen && buttonRef.current) {
+      const buttonRect = buttonRef.current.getBoundingClientRect();
+      const modalHeight = 450;
+      const isDesktop = window.innerWidth >= 640;
+
+      setIsDesktopView(isDesktop);
+
+      if (!isDesktop) {
+        const spaceAbove = buttonRect.top;
+        const spaceBelow = window.innerHeight - buttonRect.bottom;
+
+        let top: number;
+        if (spaceAbove > modalHeight && spaceBelow < modalHeight) {
+          top = buttonRect.top + window.scrollY - modalHeight - 8;
+        } else {
+          top = buttonRect.bottom + window.scrollY + 8;
+        }
+
+        setModalPosition({
+          top,
+          left: 0,
+          width: 0,
+        });
+      }
+    }
+  }, [isOpen]);
+
+  const 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;
+  };
+
+  const handleDateClick = (date: Date) => {
+    const clickedDate = new Date(date);
+    clickedDate.setHours(0, 0, 0, 0);
+
+    if (!isPeriod) {
+      // Mode date unique
+      setTempStartDate(clickedDate);
+      setTempEndDate(null);
+    } else {
+      // Mode période
+      if (isSelectingStart || !tempStartDate) {
+        setTempStartDate(clickedDate);
+        setTempEndDate(null);
+        setIsSelectingStart(false);
+      } else {
+        if (clickedDate < tempStartDate) {
+          setTempStartDate(clickedDate);
+          setTempEndDate(null);
+        } else {
+          setTempEndDate(clickedDate);
+          setIsSelectingStart(true);
+        }
+      }
+    }
+  };
+
+  const handleApply = () => {
+    if (tempStartDate) {
+      const startISO = `${tempStartDate.getFullYear()}-${String(tempStartDate.getMonth() + 1).padStart(2, '0')}-${String(tempStartDate.getDate()).padStart(2, '0')}`;
+
+      if (isPeriod && tempEndDate) {
+        const endISO = `${tempEndDate.getFullYear()}-${String(tempEndDate.getMonth() + 1).padStart(2, '0')}-${String(tempEndDate.getDate()).padStart(2, '0')}`;
+        onDateChange(startISO, endISO);
+      } else {
+        onDateChange(startISO);
+      }
+      setIsOpen(false);
+    }
+  };
+
+  const handleClose = () => {
+    setTempStartDate(startDate ? parseISODate(startDate) : null);
+    setTempEndDate(endDate ? parseISODate(endDate) : null);
+    setIsOpen(false);
+    setIsSelectingStart(true);
+  };
+
+  const handleClear = () => {
+    setTempStartDate(null);
+    setTempEndDate(null);
+    setIsSelectingStart(true);
+  };
+
+  const isDateInRange = (date: Date): boolean => {
+    if (!isPeriod || !tempStartDate || !tempEndDate) return false;
+    const current = new Date(date);
+    current.setHours(0, 0, 0, 0);
+    return current >= tempStartDate && current <= tempEndDate;
+  };
+
+  const isDateSelected = (date: Date): boolean => {
+    const current = new Date(date);
+    current.setHours(0, 0, 0, 0);
+    return !!(
+      (tempStartDate && current.getTime() === tempStartDate.getTime()) ||
+      (tempEndDate && current.getTime() === tempEndDate.getTime())
+    );
+  };
+
+  const isToday = (date: Date): boolean => {
+    const today = new Date();
+    return (
+      date.getDate() === today.getDate() &&
+      date.getMonth() === today.getMonth() &&
+      date.getFullYear() === today.getFullYear()
+    );
+  };
+
+  const isWeekend = (date: Date): boolean => {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+  };
+
+  const formatDisplayDate = (): string => {
+    if (!tempStartDate && !startDate) return label;
+
+    const displayStart = tempStartDate || (startDate ? parseISODate(startDate) : null);
+    const displayEnd = tempEndDate || (endDate ? parseISODate(endDate) : null);
+
+    if (!displayStart) return label;
+
+    if (isPeriod && displayEnd) {
+      return `Du ${displayStart.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })} au ${displayEnd.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' })}`;
+    }
+
+    return displayStart.toLocaleDateString('fr-FR', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+    });
+  };
+
+  const days = getDaysInMonth(currentMonth);
+  const dayNames = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
+
+  const canApply = isPeriod ? tempStartDate && tempEndDate : tempStartDate;
+
+  const modalContent = isOpen && isMounted && (
+    <>
+      <div
+        className="fixed inset-0 z-[9998] cursor-pointer bg-black/20 backdrop-blur-sm transition-opacity duration-200"
+        onClick={handleClose}
+      />
+      <div
+        ref={dropdownRef}
+        className={cn(
+          'fixed z-[9999] transition-all duration-200',
+          'left-1/2 -translate-x-1/2',
+          isDesktopView && 'top-1/2 -translate-y-1/2',
+        )}
+        style={
+          !isDesktopView
+            ? {
+                top: `${modalPosition.top}px`,
+              }
+            : undefined
+        }
+      >
+        <div
+          className={cn(
+            'rounded-xl border border-gray-200 bg-white p-4 shadow-2xl',
+            'w-[320px] sm:w-[400px]',
+            'max-h-[90vh] overflow-y-auto',
+          )}
+          style={{
+            maxWidth: '95vw',
+          }}
+        >
+          <div className="mb-3 flex items-center justify-between border-b border-gray-100 pb-3">
+            <div className="min-w-0 flex-1">
+              <h3 className="truncate text-sm font-semibold text-gray-900">
+                {isPeriod ? 'Sélectionner une période' : 'Sélectionner une date'}
+              </h3>
+              {isPeriod && (
+                <p className="mt-0.5 text-xs text-gray-500">
+                  {isSelectingStart
+                    ? 'Cliquez pour sélectionner la date de début'
+                    : 'Cliquez pour sélectionner la date de fin'}
+                </p>
+              )}
+            </div>
+            <button
+              onClick={handleClose}
+              className="ml-2 shrink-0 cursor-pointer rounded-lg p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          <div className="space-y-3">
+            <div>
+              <div className="mb-2 flex items-center justify-between">
+                <button
+                  type="button"
+                  onClick={() =>
+                    setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() - 1)))
+                  }
+                  className="shrink-0 cursor-pointer rounded-lg p-1.5 text-gray-600 transition-colors hover:bg-gray-100"
+                >
+                  <ChevronLeft className="h-4 w-4" />
+                </button>
+                <h3 className="min-w-0 flex-1 truncate text-center text-xs font-semibold text-gray-900 sm:text-sm">
+                  {currentMonth.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
+                </h3>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setCurrentMonth(new Date(currentMonth.setMonth(currentMonth.getMonth() + 1)))
+                  }
+                  className="shrink-0 cursor-pointer rounded-lg p-1.5 text-gray-600 transition-colors hover:bg-gray-100"
+                >
+                  <ChevronRight className="h-4 w-4" />
+                </button>
+              </div>
+
+              <div className="grid grid-cols-7 gap-0.5 sm:gap-1">
+                {dayNames.map((day) => (
+                  <div
+                    key={day}
+                    className="py-1 text-center text-[9px] font-medium text-gray-500 sm:text-[10px]"
+                  >
+                    {day}
+                  </div>
+                ))}
+                {days.map((date, index) => {
+                  if (!date) {
+                    return <div key={`empty-${index}`} className="aspect-square" />;
+                  }
+
+                  const inRange = isDateInRange(date);
+                  const selected = isDateSelected(date);
+                  const today = isToday(date);
+                  const weekend = isWeekend(date);
+
+                  return (
+                    <button
+                      key={date.toISOString()}
+                      type="button"
+                      onClick={() => handleDateClick(date)}
+                      className={cn(
+                        'aspect-square cursor-pointer rounded-md text-[10px] font-medium transition-all sm:text-xs',
+                        selected &&
+                          'z-10 bg-blue-600 text-white shadow-md shadow-blue-500/30 hover:bg-blue-700',
+                        inRange && !selected && 'bg-blue-50 text-blue-700 hover:bg-blue-100',
+                        !inRange && !selected && 'text-gray-700 hover:bg-gray-100',
+                        weekend && !selected && !inRange && 'text-gray-400',
+                        today && !selected && !inRange && 'border border-blue-400',
+                      )}
+                    >
+                      {date.getDate()}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-3 flex flex-col gap-2 border-t border-gray-100 pt-3 sm:flex-row sm:items-center sm:justify-between">
+            <button
+              type="button"
+              onClick={handleClear}
+              className="cursor-pointer text-center text-xs font-medium text-gray-600 transition-colors hover:text-gray-900 sm:text-left"
+            >
+              Effacer
+            </button>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleClose}
+                className="flex-1 cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:flex-initial"
+              >
+                Annuler
+              </button>
+              <button
+                type="button"
+                onClick={handleApply}
+                disabled={!canApply}
+                className="flex-1 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-blue-700 enabled:cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 sm:flex-initial"
+              >
+                Appliquer
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full cursor-pointer items-center justify-between rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-left text-sm shadow-sm transition-colors hover:border-blue-400 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+      >
+        <div className="flex items-center gap-2">
+          <Calendar className="h-4 w-4 text-gray-400" />
+          <div className="font-medium text-gray-900">{formatDisplayDate()}</div>
+        </div>
+      </button>
+      {isMounted && modalContent && createPortal(modalContent, document.body)}
+    </>
+  );
+};

package/template/src/components/editor.tsx

@@ -84,7 +84,11 @@ type TableConfig = {
 };
 
 // Create markdown extension instance
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Lexical duplicate types between packages
 const markdownExt = new MarkdownExtension().configure({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore - Lexical duplicate types between packages
   customTransformers: ALL_MARKDOWN_TRANSFORMERS,
 });
 
@@ -160,7 +164,7 @@ function useImageHandlers(commands: EditorCommands, editor: LexicalEditor | null
           try {
             src = await imageExtension.config.uploadHandler(file);
           } catch (error) {
-            alert('Failed to upload image');
+            console.error('Failed to upload image:', error);
             return;
           }
         } else {
@@ -635,13 +639,18 @@ function Toolbar({
             <label htmlFor="table-rows">Rows:</label>
             <input
               id="table-rows"
-              type="number"
-              min="1"
-              max="20"
+              type="text"
+              inputMode="numeric"
               value={tableConfig.rows}
-              onChange={(e) =>
-                setTableConfig((prev) => ({ ...prev, rows: parseInt(e.target.value) || 1 }))
-              }
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === '' || /^\d+$/.test(value)) {
+                  const num = parseInt(value) || 1;
+                  if (num >= 1 && num <= 20) {
+                    setTableConfig((prev) => ({ ...prev, rows: num }));
+                  }
+                }
+              }}
               className="lexkit-input"
             />
           </div>
@@ -649,13 +658,18 @@ function Toolbar({
             <label htmlFor="table-columns">Columns:</label>
             <input
               id="table-columns"
-              type="number"
-              min="1"
-              max="20"
+              type="text"
+              inputMode="numeric"
               value={tableConfig.columns}
-              onChange={(e) =>
-                setTableConfig((prev) => ({ ...prev, columns: parseInt(e.target.value) || 1 }))
-              }
+              onChange={(e) => {
+                const value = e.target.value;
+                if (value === '' || /^\d+$/.test(value)) {
+                  const num = parseInt(value) || 1;
+                  if (num >= 1 && num <= 20) {
+                    setTableConfig((prev) => ({ ...prev, columns: num }));
+                  }
+                }
+              }}
               className="lexkit-input"
             />
           </div>

package/template/src/components/email-template.tsx

@@ -1,3 +1,5 @@
+import DOMPurify from 'isomorphic-dompurify';
+
 interface EmailTemplateProps {
   firstName: string;
   signature?: string | null;
@@ -7,7 +9,7 @@ export function EmailTemplate({ firstName, signature }: EmailTemplateProps) {
   return (
     <div
       style={{
-        fontFamily: 'Arial, sans-serif',
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
         padding: '20px',
         maxWidth: '600px',
         margin: '0 auto',
@@ -27,7 +29,7 @@ export function EmailTemplate({ firstName, signature }: EmailTemplateProps) {
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: signature }}
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
         />
       )}
     </div>