create-crm-tmp 1.0.2 → 1.1.0

package/template/src/app/(dashboard)/automatisation/[id]/page.tsx

@@ -14,11 +14,7 @@ export default function EditWorkflowPage() {
         title="Modifier une automatisation"
         description="Ajustez le déclencheur et les actions de votre workflow."
       />
-      <div className="p-4 sm:p-6 lg:p-8">
-        {id ? <WorkflowEditor workflowId={id} /> : null}
-      </div>
+      <div className="p-4 sm:p-6 lg:p-8">{id ? <WorkflowEditor workflowId={id} /> : null}</div>
     </div>
   );
 }
-
-

package/template/src/app/(dashboard)/automatisation/_components/workflow-editor.tsx

@@ -2,15 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import {
-  Plus,
-  Trash2,
-  Mail,
-  MessageSquare,
-  Tag,
-  CheckSquare,
-  Clock,
-} from 'lucide-react';
+import { Plus, Trash2, Mail, MessageSquare, Tag, CheckSquare, Clock } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
 interface Status {
@@ -131,10 +123,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
   // Fermer le menu d'actions en cliquant en dehors
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (
-        actionMenuRef.current &&
-        !actionMenuRef.current.contains(event.target as Node)
-      ) {
+      if (actionMenuRef.current && !actionMenuRef.current.contains(event.target as Node)) {
         setShowActionMenu(false);
       }
     };
@@ -308,15 +297,15 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
 
           <div className="relative space-y-4">
             {/* Ligne verticale */}
-            <div className="pointer-events-none absolute left-6 top-0 h-full w-px bg-linear-to-b from-indigo-300 via-gray-200 to-gray-200" />
+            <div className="pointer-events-none absolute top-0 left-6 h-full w-px bg-linear-to-b from-indigo-300 via-gray-200 to-gray-200" />
 
             {/* Déclencheur */}
             <div className="relative pl-10">
-              <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-500 shadow-sm" />
+              <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-500 shadow-sm" />
               <div className="rounded-xl border border-indigo-100 bg-white px-4 py-3 shadow-sm">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-xs font-semibold uppercase tracking-wide text-indigo-600">
+                    <p className="text-xs font-semibold tracking-wide text-indigo-600 uppercase">
                       Déclencheur
                     </p>
                     <p className="mt-1 text-sm font-medium text-gray-900">
@@ -330,7 +319,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             {/* Actions */}
             {actions.length === 0 ? (
               <div className="relative pl-10">
-                <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-gray-300 bg-white" />
+                <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-gray-300 bg-white" />
                 <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center">
                   <Clock className="mb-2 h-8 w-8 text-gray-300" />
                   <p className="text-sm font-medium text-gray-900">Aucune action définie</p>
@@ -342,7 +331,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             ) : (
               actions.map((action, index) => (
                 <div key={index} className="relative pl-10">
-                  <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-500 shadow-sm" />
+                  <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-500 shadow-sm" />
                   <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md">
                     <div className="mb-3 flex items-center justify-between">
                       <div className="flex items-center gap-3">
@@ -410,9 +399,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                           />
                         </div>
                         <div>
-                          <label className="block text-xs font-medium text-gray-700">
-                            Heures
-                          </label>
+                          <label className="block text-xs font-medium text-gray-700">Heures</label>
                           <input
                             type="number"
                             min="0"
@@ -580,7 +567,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
 
             {/* Bouton ajouter une action */}
             <div className="relative pl-10">
-              <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-indigo-300 bg-white" />
+              <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-indigo-300 bg-white" />
               <div className="flex items-center justify-center">
                 <div className="relative inline-flex items-center" ref={actionMenuRef}>
                   <button
@@ -592,8 +579,8 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                     Ajouter une action
                   </button>
                   {showActionMenu && (
-                    <div className="absolute left-1/2 top-full z-10 mt-2 w-60 -translate-x-1/2 rounded-xl border border-gray-200 bg-white p-2 text-xs shadow-lg">
-                      <p className="px-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-gray-500">
+                    <div className="absolute top-full left-1/2 z-10 mt-2 w-60 -translate-x-1/2 rounded-xl border border-gray-200 bg-white p-2 text-xs shadow-lg">
+                      <p className="px-2 pb-1 text-[11px] font-medium tracking-wide text-gray-500 uppercase">
                         Types d’actions
                       </p>
                       <button
@@ -664,7 +651,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
           <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
             <div className="mb-4 flex items-center justify-between">
               <div>
-                <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                <p className="text-xs font-semibold tracking-wide text-gray-500 uppercase">
                   Paramètres du workflow
                 </p>
                 <p className="mt-1 text-sm font-medium text-gray-900">
@@ -674,9 +661,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
               <span
                 className={cn(
                   'inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-medium',
-                  formData.active
-                    ? 'bg-green-50 text-green-700'
-                    : 'bg-gray-100 text-gray-600',
+                  formData.active ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-600',
                 )}
               >
                 {formData.active ? 'Actif' : 'Brouillon'}
@@ -685,9 +670,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
 
             <div className="space-y-4">
               <div>
-                <label className="block text-xs font-medium text-gray-700">
-                  Nom du workflow *
-                </label>
+                <label className="block text-xs font-medium text-gray-700">Nom du workflow *</label>
                 <input
                   type="text"
                   required
@@ -704,9 +687,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
               </div>
 
               <div>
-                <label className="block text-xs font-medium text-gray-700">
-                  Description
-                </label>
+                <label className="block text-xs font-medium text-gray-700">Description</label>
                 <textarea
                   value={formData.description ?? ''}
                   onChange={(e) =>
@@ -754,7 +735,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             </div>
           </div>
 
-          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm space-y-4">
+          <div className="space-y-4 rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
             <div>
               <label className="block text-xs font-medium text-gray-700">
                 Type de déclencheur *
@@ -801,9 +782,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                   </select>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-700">
-                    Vers le statut
-                  </label>
+                  <label className="block text-xs font-medium text-gray-700">Vers le statut</label>
                   <select
                     value={formData.triggerToStatusId ?? ''}
                     onChange={(e) =>
@@ -828,9 +807,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             {formData.triggerType === 'TIME_BASED' && (
               <div className="grid gap-3 md:grid-cols-2">
                 <div>
-                  <label className="block text-xs font-medium text-gray-700">
-                    Délai (jours)
-                  </label>
+                  <label className="block text-xs font-medium text-gray-700">Délai (jours)</label>
                   <input
                     type="number"
                     min="0"
@@ -845,9 +822,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                   />
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-700">
-                    Délai (heures)
-                  </label>
+                  <label className="block text-xs font-medium text-gray-700">Délai (heures)</label>
                   <input
                     type="number"
                     min="0"
@@ -891,7 +866,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             <button
               type="submit"
               disabled={saving || loading}
-              className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-indigo-400 sm:w-auto"
+              className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-indigo-400 sm:w-auto"
             >
               {saving ? 'Enregistrement...' : 'Enregistrer le workflow'}
             </button>
@@ -901,5 +876,3 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
     </form>
   );
 }
-
-

package/template/src/app/(dashboard)/automatisation/new/page.tsx

@@ -16,5 +16,3 @@ export default function NewWorkflowPage() {
     </div>
   );
 }
-
-

package/template/src/app/(dashboard)/closing/page.tsx

@@ -15,7 +15,6 @@ import {
   Eye,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
 
 interface Status {
   id: string;
@@ -225,7 +224,6 @@ function createDefaultColumns(statuses: Status[]): ClosingColumn[] {
 }
 
 export default function ClosingPage() {
-  const { toggle: toggleMobileMenu, isOpen: isMobileMenuOpen } = useMobileMenuContext();
   const [statuses, setStatuses] = useState<Status[]>([]);
   const [contacts, setContacts] = useState<Contact[]>([]);
   const [loading, setLoading] = useState(true);
@@ -571,37 +569,11 @@ export default function ClosingPage() {
     return (
       <div className="h-full">
         <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
-          <div className="flex items-start gap-3">
-            {/* Mobile menu button */}
-            <button
-              onClick={toggleMobileMenu}
-              className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
-              aria-label="Toggle menu"
-            >
-              <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                {isMobileMenuOpen ? (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                ) : (
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M4 6h16M4 12h16M4 18h16"
-                  />
-                )}
-              </svg>
-            </button>
-            <div className="min-w-0 flex-1">
-              <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Pipeline de Closing</h1>
-              <p className="mt-1 text-sm text-gray-600">
-                Visualisez et gérez vos opportunités commerciales
-              </p>
-            </div>
+          <div>
+            <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Pipeline de Closing</h1>
+            <p className="mt-1 text-sm text-gray-600">
+              Visualisez et gérez vos opportunités commerciales
+            </p>
           </div>
         </div>
         <div className="p-4 sm:p-6 lg:p-8">
@@ -620,30 +592,6 @@ export default function ClosingPage() {
       {/* En-tête personnalisé avec filtres intégrés */}
       <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
         <div className="flex items-start gap-3">
-          {/* Mobile menu button */}
-          <button
-            onClick={toggleMobileMenu}
-            className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
-            aria-label="Toggle menu"
-          >
-            <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              {isMobileMenuOpen ? (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              ) : (
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              )}
-            </svg>
-          </button>
           <div className="flex min-w-0 flex-1 items-start justify-between gap-4">
             <div className="min-w-0 flex-1">
               <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">Pipeline de Closing</h1>

package/template/src/app/(dashboard)/contacts/[id]/page.tsx

@@ -22,6 +22,7 @@ import {
   Upload,
   File,
   Target,
+  ChevronDown,
 } from 'lucide-react';
 import Link from 'next/link';
 import { Editor, type DefaultTemplateRef } from '@/components/editor';
@@ -42,6 +43,25 @@ interface User {
   role?: string;
 }
 
+function getNewsFeedCardColor(type: string): string {
+  switch (type) {
+    case 'STATUS_CHANGE':
+      return 'bg-purple-50 border-purple-200';
+    case 'CONTACT_UPDATE':
+      return 'bg-indigo-50 border-indigo-200';
+    case 'ASSIGNMENT_CHANGE':
+      return 'bg-teal-50 border-teal-200';
+    case 'FILE_UPLOADED':
+      return 'bg-green-50 border-green-200';
+    case 'FILE_REPLACED':
+      return 'bg-orange-50 border-orange-200';
+    case 'FILE_DELETED':
+      return 'bg-red-50 border-red-200';
+    default:
+      return 'bg-gray-50 border-gray-200';
+  }
+}
+
 interface Interaction {
   id: string;
   type:
@@ -132,6 +152,7 @@ export default function ContactDetailPage() {
   const [tasks, setTasks] = useState<any[]>([]);
   const [sendingEmail, setSendingEmail] = useState(false);
   const [creatingTask, setCreatingTask] = useState(false);
+  const [showNewsFeed, setShowNewsFeed] = useState(false);
   const [emailTemplates, setEmailTemplates] = useState<any[]>([]);
   const [noteTemplates, setNoteTemplates] = useState<any[]>([]);
   const emailEditorRef = useRef<DefaultTemplateRef | null>(null);
@@ -207,6 +228,7 @@ export default function ContactDetailPage() {
   });
   const meetEditorRef = useRef<DefaultTemplateRef | null>(null);
   const [googleAccountConnected, setGoogleAccountConnected] = useState(false);
+  const [googleDriveConnected, setGoogleDriveConnected] = useState(false);
   const [smtpConfigured, setSmtpConfigured] = useState<boolean | null>(null);
 
   // Modal d'édition Google Meet
@@ -509,13 +531,15 @@ export default function ContactDetailPage() {
   useEffect(() => {
     const checkIntegrations = async () => {
       try {
-        // Statut Google
+        // Statut Google (Drive admin + Calendar personnel)
         const googleResponse = await fetch('/api/auth/google/status');
         if (googleResponse.ok) {
           const data = await googleResponse.json();
-          setGoogleAccountConnected(!!data.connected);
+          setGoogleAccountConnected(!!data.calendar?.connected);
+          setGoogleDriveConnected(!!data.drive?.connected);
         } else {
           setGoogleAccountConnected(false);
+          setGoogleDriveConnected(false);
         }
 
         // Configuration SMTP
@@ -652,9 +676,9 @@ export default function ContactDetailPage() {
     setError('');
 
     try {
-      if (!googleAccountConnected) {
+      if (!googleDriveConnected) {
         setError(
-          'Vous devez connecter votre compte Google dans les paramètres avant de pouvoir uploader un fichier.',
+          'Aucun compte Google Drive configuré. Veuillez demander à un administrateur de connecter son compte Google Drive dans les paramètres.',
         );
         setUploadingFile(false);
         setUploadProgress(0);
@@ -2591,44 +2615,36 @@ export default function ContactDetailPage() {
 
                     {/* Section Fil d'actualités */}
                     <div>
-                      <div className="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-                        <h2 className="text-lg font-semibold text-gray-900">Fil d'actualités</h2>
-                      </div>
-                      <div className="space-y-4">
-                        {Object.keys(groupedNewsFeed).length === 0 ? (
-                          <p className="py-6 text-center text-sm text-gray-500">
-                            Aucune modification
-                          </p>
-                        ) : (
-                          Object.entries(groupedNewsFeed).map(([date, interactions]) => (
-                            <div key={date}>
-                              <h3 className="mb-3 text-sm font-semibold text-gray-700">{date}</h3>
-                              <div className="space-y-2">
-                                {interactions.map((interaction) => {
-                                  const getCardColor = (type: string) => {
-                                    switch (type) {
-                                      case 'STATUS_CHANGE':
-                                        return 'bg-purple-50 border-purple-200';
-                                      case 'CONTACT_UPDATE':
-                                        return 'bg-indigo-50 border-indigo-200';
-                                      case 'ASSIGNMENT_CHANGE':
-                                        return 'bg-teal-50 border-teal-200';
-                                      case 'FILE_UPLOADED':
-                                        return 'bg-green-50 border-green-200';
-                                      case 'FILE_REPLACED':
-                                        return 'bg-orange-50 border-orange-200';
-                                      case 'FILE_DELETED':
-                                        return 'bg-red-50 border-red-200';
-                                      default:
-                                        return 'bg-gray-50 border-gray-200';
-                                    }
-                                  };
-                                  return (
+                      <button
+                        type="button"
+                        onClick={() => setShowNewsFeed((prev) => !prev)}
+                        className="mb-4 flex w-full cursor-pointer items-center justify-between rounded-xl border border-transparent px-3 py-2 text-left transition-colors hover:border-gray-200 hover:bg-gray-50"
+                      >
+                        <span className="text-lg font-semibold text-gray-900">Fil d'actualités</span>
+                        <ChevronDown
+                          className={cn(
+                            'h-4 w-4 text-gray-500 transition-transform',
+                            showNewsFeed ? 'rotate-180' : 'rotate-0',
+                          )}
+                        />
+                      </button>
+                      {showNewsFeed && (
+                        <div className="space-y-4">
+                          {Object.keys(groupedNewsFeed).length === 0 ? (
+                            <p className="py-6 text-center text-sm text-gray-500">
+                              Aucune modification
+                            </p>
+                          ) : (
+                            Object.entries(groupedNewsFeed).map(([date, interactions]) => (
+                              <div key={date}>
+                                <h3 className="mb-3 text-sm font-semibold text-gray-700">{date}</h3>
+                                <div className="space-y-2">
+                                  {interactions.map((interaction) => (
                                     <div
                                       key={interaction.id}
                                       className={cn(
                                         'relative rounded-lg border p-3 sm:p-4',
-                                        getCardColor(interaction.type),
+                                        getNewsFeedCardColor(interaction.type),
                                       )}
                                     >
                                       <div className="flex items-start gap-2 sm:gap-3">
@@ -2664,13 +2680,13 @@ export default function ContactDetailPage() {
                                         </div>
                                       </div>
                                     </div>
-                                  );
-                                })}
+                                  ))}
+                                </div>
                               </div>
-                            </div>
-                          ))
-                        )}
-                      </div>
+                            ))
+                          )}
+                        </div>
+                      )}
                     </div>
                   </div>
                 )}