create-crm-tmp 2.0.0 → 2.1.0

package/template/src/app/api/workflows/process/route.ts

@@ -6,6 +6,7 @@ import {
   assignContactImmediate,
   addNoteImmediate,
   notifyUserImmediate,
+  getContactVariables,
 } from '@/lib/workflow-executor';
 import { decrypt } from '@/lib/encryption';
 import nodemailer from 'nodemailer';
@@ -18,21 +19,22 @@ import { replaceTemplateVariables } from '@/lib/template-variables';
  */
 export async function GET(request: NextRequest) {
   try {
+    const isDevelopment = process.env.NODE_ENV === 'development';
     const cronSecret = process.env.CRON_SECRET;
+    const authHeader = request.headers.get('authorization');
 
-    if (cronSecret) {
-      const authHeader = request.headers.get('authorization');
-      const expectedAuth = `Bearer ${cronSecret}`;
+    if (!cronSecret && !isDevelopment) {
+      return NextResponse.json(
+        { error: 'Unauthorized - CRON_SECRET manquant en production' },
+        { status: 401 },
+      );
+    }
 
-      if (authHeader !== expectedAuth) {
-        const isDevelopment = process.env.NODE_ENV === 'development';
-        if (!isDevelopment) {
-          return NextResponse.json(
-            { error: 'Unauthorized - Secret manquant ou invalide' },
-            { status: 401 },
-          );
-        }
-      }
+    if (cronSecret && authHeader !== `Bearer ${cronSecret}` && !isDevelopment) {
+      return NextResponse.json(
+        { error: 'Unauthorized - Secret manquant ou invalide' },
+        { status: 401 },
+      );
     }
 
     const now = new Date();
@@ -72,7 +74,9 @@ async function processScheduledActions(now: Date) {
       contact: {
         include: {
           status: true,
-          company: { select: { name: true } },
+          company: { select: { name: true, address: true, city: true, postalCode: true } },
+          assignedCommercial: { select: { name: true } },
+          assignedTelepro: { select: { name: true } },
         },
       },
       workflow: {
@@ -139,18 +143,7 @@ async function processScheduledActions(now: Date) {
           break;
 
         case 'ADD_NOTE': {
-          const variables = {
-            firstName: contact.firstName || '',
-            lastName: contact.lastName || '',
-            civility: contact.civility || '',
-            email: contact.email || '',
-            phone: contact.phone || '',
-            secondaryPhone: contact.secondaryPhone || '',
-            address: contact.address || '',
-            city: contact.city || '',
-            postalCode: contact.postalCode || '',
-            companyName: contact.company?.name || '',
-          };
+          const variables = getContactVariables(contact);
           const noteContent = replaceTemplateVariables(actionData.noteContent || '', variables);
           await addNoteImmediate(
             contact.id,
@@ -352,18 +345,7 @@ async function getExecuteWorkflowActions() {
           (action.delayDays || 0) * 24 * 60 * 60 * 1000 + (action.delayHours || 0) * 60 * 60 * 1000;
         const executeAt = new Date(Date.now() + delayMs);
 
-        const variables = {
-          firstName: contact.firstName || '',
-          lastName: contact.lastName || '',
-          civility: contact.civility || '',
-          email: contact.email || '',
-          phone: contact.phone || '',
-          secondaryPhone: contact.secondaryPhone || '',
-          address: contact.address || '',
-          city: contact.city || '',
-          postalCode: contact.postalCode || '',
-          companyName: contact.company?.name || '',
-        };
+        const variables = getContactVariables(contact);
 
         switch (action.actionType) {
           case 'SEND_EMAIL':
@@ -527,7 +509,7 @@ async function getExecuteWorkflowActions() {
             if (action.smsMessage && contact.phone) {
               let message = action.smsMessage;
               for (const [key, value] of Object.entries(variables)) {
-                message = message.replace(new RegExp(`{${key}}`, 'g'), value as string);
+                message = message.replaceAll(`{${key}}`, value as string);
               }
               if (executeAt <= new Date()) {
                 await mod.sendSMSImmediate(workflow, contact, message);
@@ -571,18 +553,7 @@ async function executeScheduledEmail(
     throw new Error('Configuration SMTP non trouvée');
   }
 
-  const variables = {
-    firstName: contact.firstName || '',
-    lastName: contact.lastName || '',
-    civility: contact.civility || '',
-    email: contact.email || '',
-    phone: contact.phone || '',
-    secondaryPhone: contact.secondaryPhone || '',
-    address: contact.address || '',
-    city: contact.city || '',
-    postalCode: contact.postalCode || '',
-    companyName: contact.company?.name || '',
-  };
+  const variables = getContactVariables(contact);
 
   const subject = replaceTemplateVariables(actionData.templateSubject || '', variables);
   const content = replaceTemplateVariables(actionData.templateContent || '', variables);
@@ -638,7 +609,7 @@ async function executeScheduledSMS(
   };
 
   for (const [key, value] of Object.entries(variables)) {
-    message = message.replace(new RegExp(`{${key}}`, 'g'), value);
+    message = message.replaceAll(`{${key}}`, value);
   }
 
   console.log(`SMS à envoyer à ${contact.phone}: ${message}`);

package/template/src/app/api/workflows/route.ts

@@ -83,8 +83,6 @@ export async function POST(request: NextRequest) {
       triggerTimeHours,
       triggerTimeReference,
       triggerTaskType,
-      triggerTransactionFromStatus,
-      triggerTransactionToStatus,
       actions = [],
     } = body;
 
@@ -108,8 +106,6 @@ export async function POST(request: NextRequest) {
         triggerTimeHours: triggerTimeHours || null,
         triggerTimeReference: triggerTimeReference || null,
         triggerTaskType: triggerTaskType || null,
-        triggerTransactionFromStatus: triggerTransactionFromStatus || null,
-        triggerTransactionToStatus: triggerTransactionToStatus || null,
         actions: {
           create: actions.map((action: any, index: number) => ({
             actionType: action.actionType,

package/template/src/app/globals.css

@@ -1,4 +1,5 @@
 @import 'tailwindcss';
+@import 'react-grid-layout/css/styles.css';
 
 @custom-variant dark (&:is(.dark *));
 
@@ -48,7 +49,7 @@
   --radius-4xl: calc(var(--radius) + 16px);
 }
 
-h1,
+/* h1,
 h2,
 h3,
 h4,
@@ -56,7 +57,7 @@ h5,
 h6 {
   font-family: var(--font-display), serif;
   letter-spacing: -0.02em;
-}
+} */
 
 /* LexKit Editor - Clean Framework-Agnostic Styles */
 
@@ -1487,9 +1488,12 @@ table td[data-lexical-table-cell-selection] {
 
 :root {
   --radius: 0.625rem;
-  --duration-fast: 150ms;
-  --duration-normal: 250ms;
+  --duration-fast: 120ms;
+  --duration-normal: 200ms;
+  --duration-slow: 320ms;
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --shadow-card: 0 10px 30px -18px rgb(15 23 42 / 0.22);
   --shadow-dropdown: 0 18px 45px -24px rgb(15 23 42 / 0.3);
   --background: oklch(1 0 0);
@@ -1574,6 +1578,15 @@ table td[data-lexical-table-cell-selection] {
   body {
     @apply bg-background text-foreground;
   }
+  /* Eliminate 300ms tap-delay on all interactive elements */
+  button,
+  a,
+  [role='button'],
+  input,
+  select,
+  textarea {
+    touch-action: manipulation;
+  }
 }
 
 @layer utilities {
@@ -1619,3 +1632,328 @@ table td[data-lexical-table-cell-selection] {
     scroll-margin-top: 6rem;
   }
 }
+
+/* ===== DASHBOARD THEME UTILITIES ===== */
+
+.dash-link {
+  color: var(--dash-600);
+  transition: color 150ms;
+}
+.dash-link:hover {
+  color: var(--dash-700);
+}
+
+.dash-btn {
+  background-color: var(--dash-500);
+  color: white;
+  transition: background-color 150ms;
+}
+.dash-btn:hover {
+  background-color: var(--dash-600);
+}
+
+.dash-accent-bar {
+  background-color: var(--dash-500);
+}
+
+.dash-icon-box {
+  background-color: var(--dash-100);
+  transition: background-color 150ms;
+}
+.group:hover .dash-icon-box-gh {
+  background-color: var(--dash-200);
+}
+
+.dash-icon-color {
+  color: var(--dash-600);
+}
+
+.dash-avatar {
+  background-color: var(--dash-100);
+  color: var(--dash-700);
+}
+
+.dash-pill-active {
+  background-color: var(--dash-500);
+  color: white;
+}
+
+.dash-hover-bg:hover {
+  background-color: color-mix(in srgb, var(--dash-50) 30%, transparent);
+}
+.dash-hover-border:hover {
+  border-color: var(--dash-200);
+}
+.dash-hover-border-left:hover {
+  border-left-color: var(--dash-400);
+  background-color: color-mix(in srgb, var(--dash-50) 30%, transparent);
+}
+.dash-hover-border-light:hover {
+  border-color: var(--dash-100);
+}
+.dash-hover-text:hover {
+  color: var(--dash-600);
+}
+.group:hover .dash-hover-text-gh {
+  color: var(--dash-500);
+}
+
+.dash-legend-bg {
+  background-color: color-mix(in srgb, var(--dash-50) 80%, transparent);
+}
+.dash-legend-dot {
+  background-color: var(--dash-500);
+}
+
+/* ===== REACT GRID LAYOUT OVERRIDES ===== */
+
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top, width, height;
+}
+
+.react-grid-item.cssTransforms {
+  transition-property: transform, width, height;
+}
+
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+  opacity: 0.9;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+  opacity: 0.9;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
+  border-radius: 16px;
+}
+
+.react-grid-item > .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+
+.react-grid-item:hover > .react-resizable-handle {
+  opacity: 1;
+}
+
+.react-grid-item > .react-resizable-handle::after {
+  content: '';
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid color-mix(in srgb, var(--dash-500, #f97316) 50%, transparent);
+  border-bottom: 2px solid color-mix(in srgb, var(--dash-500, #f97316) 50%, transparent);
+  border-radius: 0 0 2px 0;
+}
+
+.react-grid-placeholder {
+  background: color-mix(in srgb, var(--dash-500, #f97316) 10%, transparent) !important;
+  border: 2px dashed color-mix(in srgb, var(--dash-500, #f97316) 30%, transparent) !important;
+  border-radius: 16px !important;
+  opacity: 1 !important;
+}
+
+@keyframes gs-field-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.995);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.gs-import-field {
+  opacity: 0;
+  animation: gs-field-in 340ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
+  animation-delay: 0ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gs-import-field {
+    opacity: 1;
+    animation: none;
+  }
+}
+
+/* ===== MOTION SYSTEM — minimal pro ===== */
+
+@keyframes ui-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes ui-slide-up-sm {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes ui-slide-down-sm {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes ui-scale-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes ui-slide-up-fade-out {
+  from { opacity: 1; transform: translateY(0); }
+  to   { opacity: 0; transform: translateY(-4px); }
+}
+
+@keyframes ui-count-pop {
+  0%   { transform: scale(1); }
+  40%  { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+/* Cloche notifications : léger balancement périodique pour attirer l’œil */
+@keyframes ui-bell-nudge {
+  0%,
+  12% {
+    transform: rotate(0deg);
+  }
+  16% {
+    transform: rotate(-9deg);
+  }
+  22% {
+    transform: rotate(9deg);
+  }
+  28% {
+    transform: rotate(-5deg);
+  }
+  34%,
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.ui-bell-notify {
+  display: inline-flex;
+  transform-origin: top center;
+  will-change: transform;
+  animation: ui-bell-nudge 4s ease-in-out infinite;
+}
+
+.ui-fade-in {
+  animation: ui-fade-in var(--duration-normal) var(--ease-standard) both;
+}
+
+.ui-slide-up {
+  animation: ui-slide-up-sm var(--duration-normal) var(--ease-emphasized) both;
+}
+
+.ui-slide-down {
+  animation: ui-slide-down-sm var(--duration-normal) var(--ease-emphasized) both;
+}
+
+.ui-scale-in {
+  animation: ui-scale-in var(--duration-normal) var(--ease-emphasized) both;
+}
+
+.ui-stagger-1 { animation-delay: 30ms; }
+.ui-stagger-2 { animation-delay: 60ms; }
+.ui-stagger-3 { animation-delay: 90ms; }
+.ui-stagger-4 { animation-delay: 120ms; }
+.ui-stagger-5 { animation-delay: 150ms; }
+.ui-stagger-6 { animation-delay: 180ms; }
+
+.ui-pressable {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.ui-pressable:active {
+  transform: scale(0.97);
+}
+
+.ui-lift-hover {
+  transition: box-shadow var(--duration-normal) var(--ease-standard),
+              transform var(--duration-normal) var(--ease-standard);
+}
+.ui-lift-hover:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px -6px rgb(0 0 0 / 0.12);
+}
+
+.ui-dropdown-enter {
+  animation: ui-slide-up-sm var(--duration-fast) var(--ease-decelerate) both;
+}
+.ui-dropdown-exit {
+  animation: ui-slide-up-fade-out var(--duration-fast) var(--ease-standard) both;
+}
+
+.ui-count-pop {
+  animation: ui-count-pop var(--duration-normal) var(--ease-emphasized);
+}
+
+.ui-row-hover {
+  transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-tab-indicator {
+  transition: color var(--duration-normal) var(--ease-standard),
+              border-color var(--duration-normal) var(--ease-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-fade-in,
+  .ui-slide-up,
+  .ui-slide-down,
+  .ui-scale-in,
+  .ui-dropdown-enter,
+  .ui-dropdown-exit,
+  .ui-count-pop,
+  .ui-bell-notify {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+
+  .ui-pressable:active {
+    transform: none;
+  }
+
+  .ui-lift-hover:hover {
+    transform: none;
+  }
+
+  .ui-stagger-1,
+  .ui-stagger-2,
+  .ui-stagger-3,
+  .ui-stagger-4,
+  .ui-stagger-5,
+  .ui-stagger-6 {
+    animation-delay: 0ms !important;
+  }
+}
+
+/* Respect user's reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/template/src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { DM_Sans, Playfair_Display, JetBrains_Mono } from 'next/font/google';
 import './globals.css';
 import { cn } from '@/lib/utils';
@@ -20,9 +20,17 @@ const monoFont = JetBrains_Mono({
 });
 
 export const metadata: Metadata = {
-  title: 'Gold Blessing',
+  title: 'CRM Template',
   description:
-    'Le CRM Gold Blessing : gérez vos campagnes, paiements et relations clients de manière efficace et intuitive.',
+    'Un CRM moderne pour gérer vos contacts et relations clients.',
+};
+
+export const viewport: Viewport = {
+  colorScheme: 'light',
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
+    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
+  ],
 };
 
 export default function RootLayout({

package/template/src/app/page.tsx

@@ -47,7 +47,7 @@ export default function HomePage() {
     } else if (has('tasks.view_all') || has('tasks.view_own')) {
       router.push('/agenda');
     } else {
-      router.push('/contacts');
+      router.push('/dashboard');
     }
   }, [permissionsLoaded, permissions, router]);
 

package/template/src/components/address-autocomplete.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import { MapPin, X } from 'lucide-react';
 import { Spinner } from '@/components/skeleton';
 import { searchAddress, type AddressFeature, extractAddressComponents } from '@/lib/address-api';
-import { cn } from '@/lib/utils';
+import { cn, devToast } from '@/lib/utils';
 import { useAppToast } from '@/contexts/app-toast-context';
 
 interface AddressAutocompleteProps {
@@ -95,8 +95,7 @@ export default function AddressAutocomplete({
         setSuggestions(result.features);
         setShowSuggestions(true);
       } catch (error) {
-        const message = error instanceof Error ? error.message : 'Erreur lors de la recherche.';
-        setSearchError(message);
+        setSearchError(devToast('Impossible de rechercher l\'adresse. Veuillez réessayer.', error));
         setSuggestions([]);
       } finally {
         setLoading(false);
@@ -160,7 +159,7 @@ export default function AddressAutocomplete({
   return (
     <div className="relative">
       <div className="relative">
-        <MapPin className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+        <MapPin aria-hidden="true" className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
         <input
           ref={inputRef}
           data-ui-skip-token="true"
@@ -176,9 +175,10 @@ export default function AddressAutocomplete({
           onBlur={handleBlur}
           placeholder={placeholder}
           disabled={disabled}
+          autoComplete="street-address"
           className={cn(
             'w-full rounded-lg border border-gray-300 py-2 pr-10 pl-10 text-sm transition-colors',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500',
+            'focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none',
             'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',
             className,
           )}
@@ -201,6 +201,7 @@ export default function AddressAutocomplete({
         <div
           ref={suggestionsRef}
           className="absolute z-50 mt-1 w-full rounded-lg border border-gray-200 bg-white shadow-lg"
+          aria-live="polite"
         >
           <ul className="max-h-60 overflow-y-auto py-1">
             {suggestions.map((suggestion, index) => (
@@ -214,7 +215,7 @@ export default function AddressAutocomplete({
                     selectedIndex === index && 'bg-blue-50',
                   )}
                 >
-                  <MapPin className="mt-1 h-4 w-4 shrink-0 text-gray-400" />
+                  <MapPin aria-hidden="true" className="mt-1 h-4 w-4 shrink-0 text-gray-400" />
                   <div className="flex-1">
                     <p className="text-sm font-medium text-gray-900">
                       {suggestion.properties.name}

package/template/src/components/config-error-alert.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import Link from 'next/link';
+import { AlertCircle } from 'lucide-react';
+
+interface ConfigErrorAlertProps {
+  /** Message d'erreur à afficher */
+  message: string;
+  /** Lien vers la section de configuration (ex: /settings?section=system) */
+  configLink?: string;
+  /** Texte du lien de redirection */
+  linkLabel?: string;
+  /** ClassName additionnel pour le conteneur */
+  className?: string;
+}
+
+/**
+ * Affiche un message d'erreur lorsqu'une action nécessite une configuration manquante.
+ * Inclut un lien cliquable vers la section de configuration appropriée.
+ */
+export function ConfigErrorAlert({
+  message,
+  configLink,
+  linkLabel = 'Configurer dans les paramètres',
+  className = '',
+}: ConfigErrorAlertProps) {
+  return (
+    <div
+      role="alert"
+      className={`flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800 ${className}`}
+    >
+      <AlertCircle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
+      <div className="min-w-0 flex-1">
+        <p className="font-medium">{message}</p>
+        {configLink && (
+          <Link
+            href={configLink}
+            className="mt-2 inline-flex items-center font-medium text-red-700 underline underline-offset-2 hover:text-red-900"
+          >
+            {linkLabel} →
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}