create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/dashboard/top-contacts-list.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import Link from 'next/link';
+import { Users } from 'lucide-react';
+
+interface Contact {
+  id: string;
+  name: string | null;
+  phone: string | null;
+  email: string | null;
+  status: string;
+  interactionsCount: number;
+  assignedCommercial?: string;
+  assignedTelepro?: string;
+}
+
+interface TopContactsListProps {
+  readonly contacts: Contact[];
+}
+
+export function TopContactsList({ contacts }: TopContactsListProps) {
+  if (contacts.length === 0) {
+    return (
+      <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-base font-semibold text-gray-900">Derniers Prospects</h3>
+            <p className="mt-0.5 text-xs text-gray-400">Contacts récemment ajoutés</p>
+          </div>
+          <Link href="/contacts" className="dash-link cursor-pointer text-xs font-medium">
+            Voir tout →
+          </Link>
+        </div>
+        <div className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <Users className="mx-auto h-10 w-10 text-gray-200" />
+            <p className="mt-2 text-sm text-gray-400">Aucun contact</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
+      <div className="mb-4 flex items-center justify-between">
+        <div>
+          <h3 className="text-base font-semibold text-gray-900">Derniers Prospects</h3>
+          <p className="mt-0.5 text-xs text-gray-400">Contacts récemment ajoutés</p>
+        </div>
+        <Link href="/contacts" className="dash-link cursor-pointer text-xs font-medium">
+          Voir tout →
+        </Link>
+      </div>
+      <div className="flex-1 overflow-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="border-b border-gray-100">
+              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
+                Prospect
+              </th>
+              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
+                Email
+              </th>
+              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
+                Télépro
+              </th>
+              <th className="pb-2.5 text-left text-[11px] font-medium tracking-wider text-gray-400 uppercase">
+                Statut
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {contacts.map((contact) => {
+              const nameParts = (contact.name ?? '').split(' ');
+              const firstName = nameParts[0] || '';
+              const lastName = nameParts.slice(1).join(' ') || '';
+              const initials = `${firstName[0] || ''}${lastName[0] || ''}`.toUpperCase();
+
+              return (
+                <tr
+                  key={contact.id}
+                  className="dash-hover-bg border-b border-gray-50 transition-colors"
+                >
+                  <td className="py-3">
+                    <div className="flex items-center gap-2.5">
+                      <div className="dash-avatar flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold">
+                        {initials || '?'}
+                      </div>
+                      <Link
+                        href={`/contacts/${contact.id}`}
+                        className="dash-hover-text cursor-pointer text-sm font-medium text-gray-900 transition-colors"
+                      >
+                        {contact.name || 'Sans nom'}
+                      </Link>
+                    </div>
+                  </td>
+                  <td className="py-3 text-xs text-gray-500">{contact.email || '-'}</td>
+                  <td className="py-3 text-xs text-gray-500">{contact.assignedTelepro || '-'}</td>
+                  <td className="py-3">
+                    <span className="inline-flex rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-700">
+                      {contact.status}
+                    </span>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/template/src/components/dashboard/upcoming-tasks-list.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import Link from 'next/link';
-import { Calendar, Phone, Video, Mail, CheckCircle2, Clock } from 'lucide-react';
+import { Calendar, Phone, Video, Mail, CheckCircle2, Clock, ListTodo } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
 interface Task {
   id: string;
@@ -13,25 +14,26 @@ interface Task {
 }
 
 interface UpcomingTasksListProps {
-  tasks: Task[];
+  readonly tasks: Task[];
 }
 
-const taskIcons = {
+const taskIcons: Record<string, typeof Phone> = {
   CALL: Phone,
   MEETING: Calendar,
   EMAIL: Mail,
   VIDEO_CONFERENCE: Video,
+  TASK: ListTodo,
   OTHER: CheckCircle2,
 };
 
-const priorityColors = {
-  LOW: 'text-gray-500 bg-gray-100',
-  MEDIUM: 'text-blue-600 bg-blue-100',
-  HIGH: 'text-orange-600 bg-orange-100',
-  URGENT: 'text-red-600 bg-red-100',
+const priorityStyles: Record<string, string> = {
+  LOW: 'bg-gray-100 text-gray-600',
+  MEDIUM: 'bg-blue-50 text-blue-600',
+  HIGH: 'bg-orange-50 text-orange-600',
+  URGENT: 'bg-red-50 text-red-600',
 };
 
-const priorityLabels = {
+const priorityLabels: Record<string, string> = {
   LOW: 'Basse',
   MEDIUM: 'Moyenne',
   HIGH: 'Haute',
@@ -39,87 +41,76 @@ const priorityLabels = {
 };
 
 export function UpcomingTasksList({ tasks }: UpcomingTasksListProps) {
-  if (tasks.length === 0) {
-    return (
-      <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold text-gray-900">Tâches à Venir</h3>
-          <Link
-            href="/agenda"
-            className="text-sm font-medium text-blue-600 hover:text-blue-700"
-          >
-            Voir tout
-          </Link>
-        </div>
-        <div className="mt-6 text-center text-sm text-gray-500">
-          <Clock className="mx-auto h-12 w-12 text-gray-400" />
-          <p className="mt-2">Aucune tâche à venir</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="rounded-xl border border-gray-200/50 bg-white p-6 shadow-lg transition-shadow duration-300 hover:shadow-xl">
+    <div className="flex h-full flex-col rounded-2xl border border-gray-100 bg-white p-5 shadow-sm">
       <div className="mb-4 flex items-center justify-between">
-        <h3 className="text-lg font-bold text-gray-900">Liste des Tâches</h3>
-        <Link
-          href="/agenda"
-          className="text-sm font-semibold text-blue-600 transition-colors hover:text-blue-700"
-        >
+        <div>
+          <h3 className="text-base font-semibold text-gray-900">Tâches à Venir</h3>
+          <p className="mt-0.5 text-xs text-gray-400">Prochains rendez-vous et tâches</p>
+        </div>
+        <Link href="/agenda" className="dash-link cursor-pointer text-xs font-medium">
           Voir tout →
         </Link>
       </div>
-      <div className="space-y-3">
-        {tasks.map((task) => {
-          const Icon = taskIcons[task.type as keyof typeof taskIcons] || CheckCircle2;
-          const scheduledDate = new Date(task.scheduledAt);
 
-          return (
-            <div
-              key={task.id}
-              className="group flex items-start gap-3 rounded-lg border border-gray-100 bg-gray-50/50 p-3 transition-all duration-200 hover:border-blue-200 hover:bg-blue-50/30"
-            >
-              <input
-                type="checkbox"
-                className="mt-1 h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30"
-              />
-              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-blue-100 to-purple-100">
-                <Icon className="h-4 w-4 text-blue-600" />
-              </div>
-              <div className="flex-1">
-                <div className="flex items-start justify-between">
-                  <div>
-                    <p className="font-semibold text-gray-900">{task.title}</p>
-                    {task.contact && (
-                      <Link
-                        href={`/contacts/${task.contact.id}`}
-                        className="text-sm text-gray-600 transition-colors hover:text-blue-600"
-                      >
-                        {task.contact.name}
-                      </Link>
-                    )}
+      {tasks.length === 0 ? (
+        <div className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <Clock className="mx-auto h-10 w-10 text-gray-200" />
+            <p className="mt-2 text-sm text-gray-400">Aucune tâche à venir</p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex-1 space-y-2 overflow-auto">
+          {tasks.map((task) => {
+            const Icon = taskIcons[task.type] || CheckCircle2;
+            const scheduledDate = new Date(task.scheduledAt);
+
+            return (
+              <div
+                key={task.id}
+                className="group dash-hover-border-light dash-hover-bg flex items-start gap-3 rounded-xl border border-gray-50 bg-gray-50/50 p-3 transition-colors duration-150"
+              >
+                <div className="dash-icon-box flex h-8 w-8 shrink-0 items-center justify-center rounded-lg">
+                  <Icon className="dash-icon-color h-3.5 w-3.5" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="truncate text-sm font-medium text-gray-900">{task.title}</p>
+                    <span
+                      className={cn(
+                        'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium',
+                        priorityStyles[task.priority] || 'bg-gray-100 text-gray-600',
+                      )}
+                    >
+                      {priorityLabels[task.priority] || task.priority}
+                    </span>
                   </div>
-                  <button className="cursor-pointer opacity-0 transition-opacity group-hover:opacity-100 hover:opacity-100">
-                    <span className="text-gray-400">⋯</span>
-                  </button>
+                  {task.contact && (
+                    <Link
+                      href={`/contacts/${task.contact.id}`}
+                      className="dash-hover-text cursor-pointer text-xs text-gray-500 transition-colors"
+                    >
+                      {task.contact.name}
+                    </Link>
+                  )}
+                  <p className="mt-1 text-[11px] text-gray-400">
+                    {scheduledDate.toLocaleDateString('fr-FR', {
+                      day: 'numeric',
+                      month: 'long',
+                    })}{' '}
+                    à{' '}
+                    {scheduledDate.toLocaleTimeString('fr-FR', {
+                      hour: '2-digit',
+                      minute: '2-digit',
+                    })}
+                  </p>
                 </div>
-                <p className="mt-1 text-xs text-gray-500">
-                  {scheduledDate.toLocaleDateString('fr-FR', {
-                    day: 'numeric',
-                    month: 'long',
-                  })}{' '}
-                  à{' '}
-                  {scheduledDate.toLocaleTimeString('fr-FR', {
-                    hour: '2-digit',
-                    minute: '2-digit',
-                  })}
-                </p>
               </div>
-            </div>
-          );
-        })}
-      </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }

package/template/src/components/dashboard/widget-wrapper.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { X, GripVertical } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WidgetWrapperProps {
+  readonly children: React.ReactNode;
+  readonly onRemove?: () => void;
+  readonly className?: string;
+}
+
+export function WidgetWrapper({ children, onRemove, className }: WidgetWrapperProps) {
+  return (
+    <div className={cn('group/widget relative h-full w-full', className)}>
+      {onRemove && (
+        <div className="absolute top-0 right-0 z-10 flex items-center gap-1 opacity-0 transition-[opacity,transform] duration-(--duration-normal) ease-(--ease-standard) group-hover/widget:opacity-100">
+          <div className="drag-handle flex h-7 w-7 cursor-grab items-center justify-center rounded-lg bg-white/90 shadow-sm ring-1 ring-gray-200/60 backdrop-blur-sm transition-colors hover:bg-gray-50 active:cursor-grabbing">
+            <GripVertical className="h-3.5 w-3.5 text-gray-400" />
+          </div>
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove();
+            }}
+            aria-label="Supprimer le widget"
+            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-lg bg-white/90 shadow-sm ring-1 ring-gray-200/60 backdrop-blur-sm transition-colors hover:bg-red-50 hover:text-red-600"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

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

@@ -235,7 +235,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
       <div
         ref={dropdownRef}
         className={cn(
-          'fixed z-[9999] transition-all duration-200',
+          'fixed z-[9999] transition-opacity duration-200',
           'left-1/2 -translate-x-1/2',
           isDesktopView && 'top-1/2 -translate-y-1/2',
         )}
@@ -272,9 +272,10 @@ export const DatePicker: React.FC<DatePickerProps> = ({
             </div>
             <button
               onClick={handleClose}
+              aria-label="Fermer"
               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" />
+              <X aria-hidden="true" className="h-4 w-4" />
             </button>
           </div>
 
@@ -283,24 +284,26 @@ export const DatePicker: React.FC<DatePickerProps> = ({
               <div className="mb-2 flex items-center justify-between">
                 <button
                   type="button"
+                  aria-label="Mois precedent"
                   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" />
+                  <ChevronLeft aria-hidden="true" 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"
+                  aria-label="Mois suivant"
                   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" />
+                  <ChevronRight aria-hidden="true" className="h-4 w-4" />
                 </button>
               </div>
 
@@ -329,7 +332,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
                       type="button"
                       onClick={() => handleDateClick(date)}
                       className={cn(
-                        'aspect-square cursor-pointer rounded-md text-[10px] font-medium transition-all sm:text-xs',
+                        'aspect-square cursor-pointer rounded-md text-[10px] font-medium transition-colors 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',
@@ -383,7 +386,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
         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"
+        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-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
       >
         <div className="flex items-center gap-2">
           <Calendar className="h-4 w-4 text-gray-400" />

package/template/src/components/editor/upload-editor-image.ts

@@ -0,0 +1,42 @@
+/**
+ * Upload une image vers Supabase Storage via l'API /api/editor/upload-image.
+ * Retourne l'URL publique persistante de l'image.
+ */
+export async function uploadEditorImage(file: File | Blob, fileName?: string): Promise<string> {
+  const name = fileName || (file instanceof File ? file.name : 'image.png');
+  const mimeType = file.type || 'image/png';
+
+  // 1. Obtenir une URL d'upload signée
+  const res = await fetch('/api/editor/upload-image', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      fileName: name,
+      fileSize: file.size,
+      mimeType,
+    }),
+  });
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: 'Erreur inconnue' }));
+    throw new Error(err.error || "Erreur lors de la préparation de l'upload");
+  }
+
+  const { signedUrl, token, publicUrl } = await res.json();
+
+  // 2. Upload direct vers Supabase Storage
+  const uploadRes = await fetch(signedUrl, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': mimeType,
+      Authorization: `Bearer ${token}`,
+    },
+    body: file,
+  });
+
+  if (!uploadRes.ok) {
+    throw new Error("Erreur lors de l'upload de l'image");
+  }
+
+  return publicUrl;
+}