feat: push notifications, CRM analytics, Fastify v5 upgrades, schema updates

- Add web push notification service and admin endpoints
- Add CRM analytics component and conversational dashboard
- Extend Contacts page with campaign management
- Update AI and whatsapp routes (Fastify v5 compat, webhook fixes)
- Extend Prisma schema with new models and indexes
- Add CRM campaign prompt template

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/admin/public/sw.js

@@ -0,0 +1,39 @@
+/*
+ * Service Worker for Push Notifications
+ */
+
+self.addEventListener('push', function(event) {
+    if (event.data) {
+        const data = event.data.json();
+        
+        const options = {
+            body: data.body,
+            icon: data.icon || '/logo.png',
+            badge: '/badge.png',
+            vibrate: [100, 50, 100],
+            data: {
+                dateOfArrival: Date.now(),
+                primaryKey: '1'
+            },
+            actions: [
+                { action: 'explore', title: 'Ouvrir le Dashboard', icon: '/check-mark.png' },
+                { action: 'close', title: 'Fermer', icon: '/x-mark.png' },
+            ]
+        };
+
+        event.waitUntil(
+            self.registration.showNotification(data.title, options)
+        );
+    }
+});
+
+self.addEventListener('notificationclick', function(event) {
+    event.notification.close();
+    
+    if (event.action === 'explore' || !event.action) {
+        // Open the dashboard
+        event.waitUntil(
+            clients.openWindow('/')
+        );
+    }
+});

apps/admin/src/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom';
-import { Users, BookOpen, Lightbulb, BarChart2, Mic, Activity, Building2, TrendingUp } from 'lucide-react';
+import { Users, BookOpen, Lightbulb, BarChart2, Mic, Activity, Building2, TrendingUp, Sparkles } from 'lucide-react';
 
 import { AuthProvider, useAuth } from './lib/auth';
 import { TenantProvider } from './lib/tenant';
@@ -18,7 +18,8 @@ import TrainingLab from './pages/TrainingLab';
 import ClientsManagementView from './pages/ClientsManagementView';
 import OnboardingWizard from './pages/OnboardingWizard';
 import AnalyticsPage from './pages/AnalyticsPage';
-import ContactsPage from '@/pages/ContactsPage'; // CRM Module
+import ContactsPage from '@/pages/ContactsPage'; // Traditional CRM Module
+import ConversationalDashboard from './pages/ConversationalDashboard'; // New AI-First Module
 import { useTenant } from './lib/tenant';
 import { api } from './lib/api';
 
@@ -54,7 +55,8 @@ function AppShell() {
     const allNavItems = [
         { to: '/', label: 'Dashboard', icon: <BarChart2 className="w-4 h-4" /> },
         { to: '/analytics', label: 'Statistiques', icon: <TrendingUp className="w-4 h-4 text-amber-500" /> },
-        { to: '/contacts', label: 'Contacts', icon: <Users className="w-4 h-4 text-blue-400" />, show: isCrmMode },
+        { to: '/crm', label: 'Assistant CRM', icon: <Sparkles className="w-4 h-4 text-indigo-400" />, show: isCrmMode },
+        { to: '/contacts', label: 'Base Contacts', icon: <Users className="w-4 h-4 text-blue-400" />, show: isCrmMode },
         { to: '/content', label: 'Parcours', icon: <BookOpen className="w-4 h-4" />, show: !isCrmMode },
         { to: '/live-feed', label: 'Modération', icon: <Mic className="w-4 h-4 text-emerald-500" /> },
         { to: '/clients', label: 'Clients B2B', icon: <Building2 className="w-4 h-4 text-indigo-400" />, superOnly: true },
@@ -128,6 +130,7 @@ function AppShell() {
                 <Routes>
                     <Route path="/" element={<DashboardPage />} />
                     <Route path="/analytics" element={<AnalyticsPage />} />
+                    <Route path="/crm" element={<ConversationalDashboard />} />
                     <Route path="/contacts" element={<ContactsPage />} />
                     <Route path="/content" element={<TrackListPage />} />
                     <Route path="/content/new" element={<TrackFormPage />} />

apps/admin/src/components/CRMAnalytics.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';
+import { TrendingUp, Users, CheckCircle2, Eye, AlertCircle } from 'lucide-react';
+import { useAuth } from '../lib/auth';
+import { useTenant } from '../lib/tenant';
+
+interface AnalyticsData {
+    summary: {
+        total: number;
+        sent: number;
+        delivered: number;
+        read: number;
+        failed: number;
+        deliveryRate: number;
+        readRate: number;
+    };
+    funnel: Array<{ name: string; value: number; fill: string }>;
+}
+
+export const CRMAnalytics = () => {
+    const { token } = useAuth();
+    const { selectedOrgId } = useTenant();
+    const [data, setData] = useState<AnalyticsData | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchAnalytics = async () => {
+            if (!token || !selectedOrgId) return;
+            try {
+                const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/analytics/campaigns`, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'x-organization-id': selectedOrgId
+                    }
+                });
+                if (res.ok) {
+                    const result = await res.json();
+                    setData(result);
+                }
+            } catch (err) {
+                console.error("Failed to fetch analytics:", err);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchAnalytics();
+    }, [token, selectedOrgId]);
+
+    if (loading) return (
+        <div className="flex items-center justify-center p-12 bg-white rounded-[2rem] border border-slate-100 shadow-sm animate-pulse">
+            <div className="text-slate-400 font-medium">Chargement des données...</div>
+        </div>
+    );
+
+    if (!data) return null;
+
+    return (
+        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            {/* KPI Cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div className="p-5 bg-white border border-slate-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-indigo-50 rounded-xl flex items-center justify-center mb-3 text-indigo-600">
+                        <Users className="w-5 h-5" />
+                    </div>
+                    <p className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Total</p>
+                    <p className="text-2xl font-black text-slate-900">{data.summary.total}</p>
+                </div>
+                
+                <div className="p-5 bg-white border border-slate-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center mb-3 text-emerald-600">
+                        <CheckCircle2 className="w-5 h-5" />
+                    </div>
+                    <p className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Délivré</p>
+                    <p className="text-2xl font-black text-slate-900">{data.summary.deliveryRate.toFixed(1)}%</p>
+                </div>
+
+                <div className="p-5 bg-white border border-slate-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-pink-50 rounded-xl flex items-center justify-center mb-3 text-pink-600">
+                        <Eye className="w-5 h-5" />
+                    </div>
+                    <p className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Lecture</p>
+                    <p className="text-2xl font-black text-slate-900">{data.summary.readRate.toFixed(1)}%</p>
+                </div>
+
+                <div className="p-5 bg-white border border-slate-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow">
+                    <div className="w-10 h-10 bg-amber-50 rounded-xl flex items-center justify-center mb-3 text-amber-600">
+                        <TrendingUp className="w-5 h-5" />
+                    </div>
+                    <p className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Engagement</p>
+                    <p className="text-2xl font-black text-slate-900">Elevé</p>
+                </div>
+            </div>
+
+            {/* Funnel Chart */}
+            <div className="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm">
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <h4 className="font-black text-slate-900 text-lg">Entonnoir de Campagne</h4>
+                        <p className="text-xs text-slate-500 font-medium">Répartition des statuts de distribution</p>
+                    </div>
+                    {data.summary.failed > 0 && (
+                        <div className="flex items-center gap-2 px-3 py-1 bg-red-50 text-red-600 rounded-full text-[10px] font-bold">
+                            <AlertCircle className="w-3 h-3" />
+                            {data.summary.failed} ÉCHECS
+                        </div>
+                    )}
+                </div>
+
+                <div style={{ width: '100%', minHeight: '300px' }}>
+                    <ResponsiveContainer width="100%" height={300}>
+                        <BarChart data={data.funnel} margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
+                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f1f5f9" />
+                            <XAxis 
+                                dataKey="name" 
+                                axisLine={false} 
+                                tickLine={false} 
+                                tick={{ fill: '#94a3b8', fontSize: 12, fontWeight: 700 }}
+                                dy={10}
+                            />
+                            <YAxis hide />
+                            <Tooltip 
+                                cursor={{ fill: 'transparent' }}
+                                content={({ active, payload }) => {
+                                    if (active && payload && payload.length) {
+                                        return (
+                                            <div className="bg-slate-900 text-white p-3 rounded-2xl shadow-xl border border-slate-800 animate-in zoom-in-95 duration-200">
+                                                <p className="text-[10px] font-black uppercase mb-1 opacity-60">{payload[0].payload.name}</p>
+                                                <p className="text-sm font-black">{payload[0].value} Messages</p>
+                                            </div>
+                                        );
+                                    }
+                                    return null;
+                                }}
+                            />
+                            <Bar 
+                                dataKey="value" 
+                                radius={[12, 12, 12, 12]} 
+                                barSize={60}
+                                animationDuration={1500}
+                            >
+                                {data.funnel.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={entry.fill} />
+                                ))}
+                            </Bar>
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+        </div>
+    );
+};

apps/admin/src/lib/notifications.ts

@@ -0,0 +1,66 @@
+/**
+ * Push Notification Helper
+ */
+
+function urlBase64ToUint8Array(base64String: string) {
+    const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+export const setupNotifications = async (token: string, orgId: string) => {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+        console.warn('Push notifications are not supported in this browser.');
+        return;
+    }
+
+    try {
+        // 1. Register Service Worker
+        const registration = await navigator.serviceWorker.register('/sw.js');
+        console.log('Service Worker registered');
+
+        // 2. Request Permission
+        const permission = await Notification.requestPermission();
+        if (permission !== 'granted') {
+            console.warn('Notification permission denied');
+            return;
+        }
+
+        // 3. Get VAPID public key from server
+        const keyRes = await fetch(`${import.meta.env.VITE_API_URL}/v1/notifications/vapid-key`, {
+            headers: { 'Authorization': `Bearer ${token}`, 'x-organization-id': orgId }
+        });
+        const { publicKey } = await keyRes.json();
+
+        if (!publicKey) {
+            console.warn('VAPID public key missing from server');
+            return;
+        }
+
+        // 4. Subscribe to Push
+        const subscription = await registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: urlBase64ToUint8Array(publicKey)
+        });
+
+        // 5. Send subscription to server
+        await fetch(`${import.meta.env.VITE_API_URL}/v1/notifications/subscribe`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`,
+                'x-organization-id': orgId
+            },
+            body: JSON.stringify({ subscription })
+        });
+
+        console.log('Successfully subscribed to push notifications');
+    } catch (err) {
+        console.error('Failed to setup push notifications:', err);
+    }
+};

apps/admin/src/pages/ContactsPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Users, Upload, Search, Download, Trash2, Filter, Loader2, FileSpreadsheet, CheckCircle2 } from 'lucide-react';
+import { Users, Upload, Search, Download, Trash2, Filter, Loader2, FileSpreadsheet, CheckCircle2, Sparkles, BrainCircuit, Send, Copy, RefreshCw } from 'lucide-react';
 import { api } from '../lib/api';
 import { useAuth } from '../lib/auth';
 import { useTenant } from '../lib/tenant';
@@ -22,6 +22,18 @@ export default function ContactsPage() {
     const [uploading, setUploading] = useState(false);
     const [importStats, setImportStats] = useState<any>(null);
 
+    // AI Campaign State
+    const [selectedContactForAI, setSelectedContactForAI] = useState<Contact | null>(null);
+    const [generatingAI, setGeneratingAI] = useState(false);
+    const [aiResult, setAiResult] = useState<{ personalizedMessage: string; reasoning: string; aiSource: string } | null>(null);
+    const [campaignObjective, setCampaignObjective] = useState("Proposer nos nouveaux services de formation IA");
+
+    // Bulk Selection & Generation State
+    const [selectedContactIds, setSelectedContactIds] = useState<string[]>([]);
+    const [showBulkModal, setShowBulkModal] = useState(false);
+    const [bulkProgress, setBulkProgress] = useState({ current: 0, total: 0, status: 'idle' });
+    const [bulkResults, setBulkResults] = useState<any[]>([]);
+
     const fetchContacts = async () => {
         if (!token || !selectedOrgId) return;
         setLoading(true);
@@ -72,10 +84,149 @@ export default function ContactsPage() {
         }
     };
 
-    const filteredContacts = contacts.filter(c => 
-        c.name?.toLowerCase().includes(searchQuery.toLowerCase()) || 
-        c.phoneNumber.includes(searchQuery)
-    );
+    const handleGenerateAI = async (contact: Contact) => {
+        if (!token || !selectedOrgId) return;
+        setSelectedContactForAI(contact);
+        setGeneratingAI(true);
+        setAiResult(null);
+
+        try {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/ai/crm/generate-campaign`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`,
+                    'x-organization-id': selectedOrgId
+                },
+                body: JSON.stringify({
+                    contact,
+                    objective: campaignObjective
+                })
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                setAiResult(data);
+            } else {
+                alert("Échec de la génération IA.");
+            }
+        } catch (error) {
+            console.error("AI Generation failed:", error);
+        } finally {
+            setGeneratingAI(false);
+        }
+    };
+
+    const handleBulkGenerate = async () => {
+        if (!token || !selectedOrgId || selectedContactIds.length === 0) return;
+        
+        setShowBulkModal(true);
+        setBulkProgress({ current: 0, total: selectedContactIds.length, status: 'processing' });
+        setBulkResults([]);
+        
+        const results = [];
+        const selectedContacts = contacts.filter(c => selectedContactIds.includes(c.id));
+
+        for (let i = 0; i < selectedContacts.length; i++) {
+            const contact = selectedContacts[i];
+            setBulkProgress(prev => ({ ...prev, current: i + 1 }));
+            
+            try {
+                const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/ai/crm/generate-campaign`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token}`,
+                        'x-organization-id': selectedOrgId
+                    },
+                    body: JSON.stringify({ contact, objective: campaignObjective })
+                });
+
+                if (res.ok) {
+                    const data = await res.json();
+                    results.push({ contact, ...data });
+                } else {
+                    results.push({ contact, error: true, personalizedMessage: "Erreur de génération" });
+                }
+            } catch (err) {
+                results.push({ contact, error: true, personalizedMessage: "Erreur critique" });
+            }
+        }
+
+        setBulkResults(results);
+        setBulkProgress(prev => ({ ...prev, status: 'completed' }));
+    };
+
+    const toggleSelectAll = () => {
+        if (selectedContactIds.length === filteredContacts.length) {
+            setSelectedContactIds([]);
+        } else {
+            setSelectedContactIds(filteredContacts.map(c => c.id));
+        }
+    };
+
+    const toggleSelectContact = (id: string) => {
+        setSelectedContactIds(prev => 
+            prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+        );
+    };
+
+    const handleDeleteContact = async (id: string) => {
+        if (!token || !selectedOrgId) return;
+        if (!confirm("Voulez-vous vraiment supprimer ce contact ?")) return;
+
+        try {
+            const res = await api.delete(`/v1/organizations/${selectedOrgId}/contacts/${id}`, token);
+            if (res.ok || res.success || res) { // api.delete might return true/ok depending on implementation
+                setContacts(prev => prev.filter(c => c.id !== id));
+                setSelectedContactIds(prev => prev.filter(i => i !== id));
+            }
+        } catch (error) {
+            console.error("Delete failed:", error);
+            alert("Erreur lors de la suppression.");
+        }
+    };
+
+    const handleBulkDelete = async () => {
+        if (!token || !selectedOrgId || selectedContactIds.length === 0) return;
+        if (!confirm(`Voulez-vous vraiment supprimer ${selectedContactIds.length} contacts ?`)) return;
+
+        try {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/organizations/${selectedOrgId}/contacts/bulk-delete`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`,
+                    'x-organization-id': selectedOrgId
+                },
+                body: JSON.stringify({ contactIds: selectedContactIds })
+            });
+
+            if (res.ok) {
+                setContacts(prev => prev.filter(c => !selectedContactIds.includes(c.id)));
+                setSelectedContactIds([]);
+                alert("Contacts supprimés avec succès.");
+            } else {
+                alert("Erreur lors de la suppression groupée.");
+            }
+        } catch (error) {
+            console.error("Bulk delete failed:", error);
+            alert("Erreur lors de la suppression groupée.");
+        }
+    };
+
+    const filteredContacts = contacts.filter(c => {
+        const searchLower = searchQuery.toLowerCase();
+        const inName = c.name?.toLowerCase().includes(searchLower);
+        const inPhone = c.phoneNumber.includes(searchQuery);
+        
+        // Search in dynamic attributes
+        const inAttributes = c.attributes && Object.values(c.attributes).some(val => 
+            String(val).toLowerCase().includes(searchLower)
+        );
+
+        return inName || inPhone || inAttributes;
+    });
 
     return (
         <div className="p-8 max-w-7xl mx-auto">
@@ -157,6 +308,14 @@ export default function ContactsPage() {
                     <table className="w-full text-left">
                         <thead>
                             <tr className="bg-slate-50/50">
+                                <th className="px-8 py-5 w-10">
+                                    <input 
+                                        type="checkbox" 
+                                        className="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                                        checked={selectedContactIds.length > 0 && selectedContactIds.length === filteredContacts.length}
+                                        onChange={toggleSelectAll}
+                                    />
+                                </th>
                                 <th className="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest">Client</th>
                                 <th className="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest">Téléphone</th>
                                 <th className="px-8 py-5 text-xs font-bold text-slate-400 uppercase tracking-widest">Attributs</th>
@@ -166,14 +325,14 @@ export default function ContactsPage() {
                         <tbody className="divide-y divide-slate-50">
                             {loading ? (
                                 <tr>
-                                    <td colSpan={4} className="px-8 py-20 text-center">
+                                    <td colSpan={5} className="px-8 py-20 text-center">
                                         <Loader2 className="w-10 h-10 animate-spin text-blue-600 mx-auto mb-4" />
                                         <p className="font-bold text-slate-400">Chargement de la base de données...</p>
                                     </td>
                                 </tr>
                             ) : filteredContacts.length === 0 ? (
                                 <tr>
-                                    <td colSpan={4} className="px-8 py-20 text-center">
+                                    <td colSpan={5} className="px-8 py-20 text-center">
                                         <div className="w-20 h-20 bg-slate-50 rounded-[2rem] flex items-center justify-center mx-auto mb-6">
                                             <Users className="w-10 h-10 text-slate-200" />
                                         </div>
@@ -182,7 +341,15 @@ export default function ContactsPage() {
                                     </td>
                                 </tr>
                             ) : filteredContacts.map(contact => (
-                                <tr key={contact.id} className="hover:bg-slate-50/50 transition">
+                                <tr key={contact.id} className={`hover:bg-slate-50/50 transition ${selectedContactIds.includes(contact.id) ? 'bg-blue-50/30' : ''}`}>
+                                    <td className="px-8 py-6">
+                                        <input 
+                                            type="checkbox" 
+                                            className="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+                                            checked={selectedContactIds.includes(contact.id)}
+                                            onChange={() => toggleSelectContact(contact.id)}
+                                        />
+                                    </td>
                                     <td className="px-8 py-6">
                                         <div className="flex items-center gap-4">
                                             <div className="w-10 h-10 bg-slate-100 rounded-xl flex items-center justify-center font-bold text-slate-600 uppercase">
@@ -212,9 +379,20 @@ export default function ContactsPage() {
                                         </div>
                                     </td>
                                     <td className="px-8 py-6 text-right">
-                                        <button className="p-2 text-slate-400 hover:text-red-500 transition">
-                                            <Trash2 className="w-5 h-5" />
-                                        </button>
+                                        <div className="flex items-center justify-end gap-2">
+                                            <button 
+                                                onClick={() => handleGenerateAI(contact)}
+                                                className="flex items-center gap-2 bg-indigo-50 text-indigo-600 px-4 py-2 rounded-xl font-bold hover:bg-indigo-100 transition"
+                                            >
+                                                <Sparkles className="w-4 h-4" /> IA
+                                            </button>
+                                            <button 
+                                                onClick={() => handleDeleteContact(contact.id)}
+                                                className="p-2 text-slate-400 hover:text-red-500 transition"
+                                            >
+                                                <Trash2 className="w-5 h-5" />
+                                            </button>
+                                        </div>
                                     </td>
                                 </tr>
                             ))}
@@ -301,6 +479,248 @@ export default function ContactsPage() {
                     </div>
                 </div>
             )}
+
+            {/* AI Generation Modal */}
+            {selectedContactForAI && (
+                <div className="fixed inset-0 bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-6 z-50">
+                    <div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
+                        {/* Modal Header */}
+                        <div className="bg-indigo-600 p-8 text-white flex items-center justify-between">
+                            <div className="flex items-center gap-4">
+                                <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center">
+                                    <Sparkles className="w-6 h-6" />
+                                </div>
+                                <div>
+                                    <h3 className="text-xl font-black">AI Campaign Studio</h3>
+                                    <p className="text-indigo-100 text-sm font-medium">Génération pour {selectedContactForAI.name || 'Inconnu'}</p>
+                                </div>
+                            </div>
+                            <button onClick={() => setSelectedContactForAI(null)} className="p-2 hover:bg-white/10 rounded-full transition">
+                                <Trash2 className="w-6 h-6" />
+                            </button>
+                        </div>
+
+                        <div className="p-8">
+                            {generatingAI ? (
+                                <div className="py-20 text-center">
+                                    <Loader2 className="w-16 h-16 animate-spin text-indigo-600 mx-auto mb-6" />
+                                    <h4 className="text-xl font-bold text-slate-900 mb-2">L'IA analyse le contact...</h4>
+                                    <p className="text-slate-500 font-medium">Personnalisation du message en cours.</p>
+                                </div>
+                            ) : aiResult ? (
+                                <div className="space-y-6">
+                                    {/* Objective Field */}
+                                    <div>
+                                        <label className="text-xs font-bold text-slate-400 uppercase mb-2 block tracking-widest">Objectif de la campagne</label>
+                                        <div className="flex gap-2">
+                                            <input 
+                                                className="flex-1 bg-slate-50 border-none rounded-xl p-3 font-medium text-slate-700 focus:ring-2 focus:ring-indigo-100"
+                                                value={campaignObjective}
+                                                onChange={(e) => setCampaignObjective(e.target.value)}
+                                            />
+                                            <button 
+                                                onClick={() => handleGenerateAI(selectedContactForAI)}
+                                                className="p-3 bg-indigo-50 text-indigo-600 rounded-xl hover:bg-indigo-100 transition"
+                                                title="Régénérer"
+                                            >
+                                                <RefreshCw className="w-5 h-5" />
+                                            </button>
+                                        </div>
+                                    </div>
+
+                                    {/* Reasoning */}
+                                    <div className="p-5 bg-amber-50 rounded-[1.5rem] border border-amber-100 flex gap-4">
+                                        <div className="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center flex-shrink-0">
+                                            <BrainCircuit className="w-5 h-5 text-amber-600" />
+                                        </div>
+                                        <div>
+                                            <p className="text-xs font-bold text-amber-700 uppercase mb-1">Raisonnement de l'IA ({aiResult.aiSource})</p>
+                                            <p className="text-sm text-amber-900 font-medium leading-relaxed">{aiResult.reasoning}</p>
+                                        </div>
+                                    </div>
+
+                                    {/* Generated Message */}
+                                    <div className="relative group">
+                                        <label className="text-xs font-bold text-slate-400 uppercase mb-2 block tracking-widest">Message Personnalisé (WhatsApp)</label>
+                                        <textarea 
+                                            rows={6}
+                                            className="w-full bg-slate-50 border-none rounded-[1.5rem] p-6 font-medium text-slate-800 leading-relaxed focus:ring-4 focus:ring-indigo-50 transition"
+                                            value={aiResult.personalizedMessage}
+                                            onChange={(e) => setAiResult({...aiResult, personalizedMessage: e.target.value})}
+                                        />
+                                        <button className="absolute top-10 right-4 p-2 bg-white text-slate-400 rounded-lg hover:text-indigo-600 shadow-sm border border-slate-100 opacity-0 group-hover:opacity-100 transition">
+                                            <Copy className="w-4 h-4" />
+                                        </button>
+                                    </div>
+
+                                    <div className="flex gap-3">
+                                        <button 
+                                            onClick={() => {
+                                                const url = `https://wa.me/${selectedContactForAI.phoneNumber}?text=${encodeURIComponent(aiResult.personalizedMessage)}`;
+                                                window.open(url, '_blank');
+                                            }}
+                                            className="flex-1 flex items-center justify-center gap-3 bg-indigo-600 text-white py-4 rounded-[1.5rem] font-bold hover:bg-indigo-700 transition shadow-xl shadow-indigo-100"
+                                        >
+                                            <Send className="w-5 h-5" /> Envoyer via WhatsApp
+                                        </button>
+                                        <button 
+                                            onClick={() => setSelectedContactForAI(null)}
+                                            className="px-8 bg-slate-100 text-slate-600 rounded-[1.5rem] font-bold hover:bg-slate-200 transition"
+                                        >
+                                            Annuler
+                                        </button>
+                                    </div>
+                                </div>
+                            ) : (
+                                <div className="text-center py-10">
+                                    <button 
+                                        onClick={() => handleGenerateAI(selectedContactForAI)}
+                                        className="bg-indigo-600 text-white px-8 py-4 rounded-2xl font-bold hover:bg-indigo-700 transition"
+                                    >
+                                        Lancer la génération
+                                    </button>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Bulk Action Bar */}
+            {selectedContactIds.length > 0 && (
+                <div className="fixed bottom-10 left-1/2 -translate-x-1/2 bg-slate-900 text-white px-8 py-5 rounded-[2rem] shadow-2xl flex items-center gap-8 z-40 animate-in slide-in-from-bottom-10 duration-500">
+                    <div className="flex items-center gap-3 pr-8 border-r border-slate-700">
+                        <div className="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center font-black text-sm">
+                            {selectedContactIds.length}
+                        </div>
+                        <p className="font-bold text-sm text-slate-300">Contacts sélectionnés</p>
+                    </div>
+
+                    <div className="flex items-center gap-4">
+                        <button 
+                            className="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-bold transition shadow-lg shadow-indigo-900/20"
+                            onClick={handleBulkGenerate}
+                        >
+                            <Sparkles className="w-5 h-5" /> Générer Campagne IA
+                        </button>
+                        <button 
+                            onClick={handleBulkDelete}
+                            className="flex items-center gap-2 bg-slate-800 hover:bg-red-900/40 text-slate-300 hover:text-red-400 px-6 py-3 rounded-xl font-bold transition"
+                        >
+                            <Trash2 className="w-5 h-5" /> Supprimer
+                        </button>
+                        <button 
+                            onClick={() => setSelectedContactIds([])}
+                            className="text-slate-500 hover:text-white font-bold text-sm transition ml-4"
+                        >
+                            Annuler
+                        </button>
+                    </div>
+                </div>
+             )}
+
+            {/* Bulk Generation Modal */}
+            {showBulkModal && (
+                <div className="fixed inset-0 bg-slate-900/80 backdrop-blur-xl flex items-center justify-center p-6 z-50">
+                    <div className="bg-white rounded-[3rem] shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col overflow-hidden animate-in zoom-in-95 duration-300">
+                        {/* Header */}
+                        <div className="p-8 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
+                            <div className="flex items-center gap-4">
+                                <div className="w-12 h-12 bg-indigo-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-indigo-200">
+                                    <BrainCircuit className="w-6 h-6" />
+                                </div>
+                                <div>
+                                    <h3 className="text-2xl font-black text-slate-900">Génération de Campagne</h3>
+                                    <p className="text-slate-500 font-medium">{bulkProgress.current} / {bulkProgress.total} contacts traités</p>
+                                </div>
+                            </div>
+                            {bulkProgress.status === 'completed' && (
+                                <button 
+                                    onClick={() => setShowBulkModal(false)}
+                                    className="p-3 hover:bg-slate-200 rounded-full transition text-slate-400 hover:text-slate-900"
+                                >
+                                    <Trash2 className="w-6 h-6" />
+                                </button>
+                            )}
+                        </div>
+
+                        {/* Progress Bar */}
+                        <div className="h-2 bg-slate-100 w-full overflow-hidden">
+                            <div 
+                                className="h-full bg-indigo-600 transition-all duration-500 shadow-[0_0_20px_rgba(79,70,229,0.5)]"
+                                style={{ width: `${(bulkProgress.current / bulkProgress.total) * 100}%` }}
+                            />
+                        </div>
+
+                        {/* Results Content */}
+                        <div className="flex-1 overflow-y-auto p-8 space-y-4">
+                            {bulkResults.length === 0 && bulkProgress.status === 'processing' && (
+                                <div className="py-20 text-center space-y-6">
+                                    <Loader2 className="w-16 h-16 animate-spin text-indigo-600 mx-auto" />
+                                    <p className="text-xl font-bold text-slate-900 italic">"L'intelligence artificielle rédige vos messages personnalisés..."</p>
+                                </div>
+                            )}
+
+                            {bulkResults.map((result, idx) => (
+                                <div key={idx} className="p-6 bg-slate-50 rounded-3xl border border-slate-100 flex items-start gap-6 hover:bg-white hover:shadow-xl hover:shadow-slate-100 transition duration-300 group">
+                                    <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center font-bold text-slate-400 border border-slate-100 group-hover:border-indigo-200 group-hover:text-indigo-600 transition">
+                                        {idx + 1}
+                                    </div>
+                                    <div className="flex-1">
+                                        <div className="flex items-center justify-between mb-3">
+                                            <h4 className="font-bold text-slate-900">{result.contact.name || 'Inconnu'}</h4>
+                                            <span className="text-xs font-mono text-slate-400">+{result.contact.phoneNumber}</span>
+                                        </div>
+                                        <p className="text-sm text-slate-600 leading-relaxed bg-white p-4 rounded-2xl border border-slate-50">
+                                            {result.personalizedMessage}
+                                        </p>
+                                    </div>
+                                    <div className="flex flex-col gap-2">
+                                        <button 
+                                            onClick={() => {
+                                                const url = `https://wa.me/${result.contact.phoneNumber}?text=${encodeURIComponent(result.personalizedMessage)}`;
+                                                window.open(url, '_blank');
+                                            }}
+                                            className="p-3 bg-emerald-50 text-emerald-600 rounded-xl hover:bg-emerald-600 hover:text-white transition shadow-sm"
+                                            title="Envoyer WhatsApp"
+                                        >
+                                            <Send className="w-5 h-5" />
+                                        </button>
+                                        <button 
+                                            onClick={() => {
+                                                navigator.clipboard.writeText(result.personalizedMessage);
+                                                alert("Copié !");
+                                            }}
+                                            className="p-3 bg-slate-100 text-slate-400 rounded-xl hover:bg-slate-200 hover:text-slate-900 transition"
+                                            title="Copier"
+                                        >
+                                            <Copy className="w-5 h-5" />
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        {/* Footer */}
+                        {bulkProgress.status === 'completed' && (
+                            <div className="p-8 border-t border-slate-100 bg-slate-50/50 flex items-center justify-between">
+                                <div className="flex items-center gap-2 text-emerald-600 font-bold">
+                                    <CheckCircle2 className="w-5 h-5" />
+                                    Génération terminée avec succès
+                                </div>
+                                <div className="flex items-center gap-3">
+                                    <button 
+                                        onClick={() => setShowBulkModal(false)}
+                                        className="px-8 py-4 bg-slate-900 text-white rounded-2xl font-bold hover:bg-slate-800 transition shadow-xl"
+                                    >
+                                        Terminer
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
         </div>
     );
 }

apps/admin/src/pages/ConversationalDashboard.tsx

@@ -0,0 +1,352 @@
+import { useState, useEffect, useRef } from 'react';
+import { Send, Sparkles, History, Upload, Users, Bot, User, Loader2, Mic } from 'lucide-react';
+// api is not used here for now as we use fetch directly
+import { useAuth } from '../lib/auth';
+import { useTenant } from '../lib/tenant';
+import { CRMAnalytics } from '../components/CRMAnalytics';
+import { setupNotifications } from '../lib/notifications';
+
+interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    type?: 'text' | 'contact_list' | 'campaign_preview' | 'import_dropzone' | 'stats' | 'choice_buttons' | 'campaign_summary';
+    data?: any;
+}
+
+export default function ConversationalDashboard() {
+    const { token } = useAuth();
+    const { selectedOrgId } = useTenant();
+    const [messages, setMessages] = useState<Message[]>([
+        {
+            id: '1',
+            role: 'assistant',
+            content: "Bonjour ! Je suis votre assistant CRM IA. Que souhaitez-vous faire aujourd'hui ?",
+            type: 'choice_buttons',
+            data: [
+                { label: "📊 Voir l'historique", action: "Montre moi l'historique des contacts" },
+                { label: "📤 Importer des clients", action: "Je veux importer de nouveaux contacts" },
+                { label: "✨ Lancer une campagne", action: "Génère une nouvelle campagne marketing" }
+            ]
+        }
+    ]);
+    const [input, setInput] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [isRecording, setIsRecording] = useState(false);
+    const mediaRecorder = useRef<MediaRecorder | null>(null);
+    const audioChunks = useRef<Blob[]>([]);
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+
+    useEffect(() => {
+        if (token && selectedOrgId) {
+            setupNotifications(token, selectedOrgId);
+        }
+    }, [token, selectedOrgId]);
+
+    const handleSendMessage = async (text: string) => {
+        if (!text.trim() || !token || !selectedOrgId) return;
+
+        const userMsg: Message = { id: Date.now().toString(), role: 'user', content: text };
+        setMessages(prev => [...prev, userMsg]);
+        setInput('');
+        setLoading(true);
+
+        try {
+            // This route will be implemented in the next step
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/ai/crm/command`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`,
+                    'x-organization-id': selectedOrgId
+                },
+                body: JSON.stringify({ query: text })
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                const aiMsg: Message = {
+                    id: (Date.now() + 1).toString(),
+                    role: 'assistant',
+                    content: data.message,
+                    type: data.type,
+                    data: data.payload
+                };
+                setMessages(prev => [...prev, aiMsg]);
+            } else {
+                const errorMsg: Message = {
+                    id: (Date.now() + 1).toString(),
+                    role: 'assistant',
+                    content: "Désolé, je rencontre une difficulté technique pour traiter cette commande. Pouvons-nous réessayer ?",
+                    type: 'text'
+                };
+                setMessages(prev => [...prev, errorMsg]);
+            }
+        } catch (err) {
+            console.error("Command failed:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const startRecording = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorder.current = new MediaRecorder(stream);
+            audioChunks.current = [];
+
+            mediaRecorder.current.ondataavailable = (e) => {
+                if (e.data.size > 0) audioChunks.current.push(e.data);
+            };
+
+            mediaRecorder.current.onstop = async () => {
+                const audioBlob = new Blob(audioChunks.current, { type: 'audio/webm' });
+                await handleVoiceUpload(audioBlob);
+                // Stop all tracks
+                stream.getTracks().forEach(track => track.stop());
+            };
+
+            mediaRecorder.current.start();
+            setIsRecording(true);
+        } catch (err) {
+            console.error("Failed to start recording:", err);
+            alert("Erreur d'accès au micro.");
+        }
+    };
+
+    const stopRecording = () => {
+        if (mediaRecorder.current && isRecording) {
+            mediaRecorder.current.stop();
+            setIsRecording(false);
+        }
+    };
+
+    const handleVoiceUpload = async (blob: Blob) => {
+        if (!token || !selectedOrgId) return;
+        setLoading(true);
+
+        const formData = new FormData();
+        formData.append('audio', blob, 'command.webm');
+
+        try {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/ai/crm/voice-command`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'x-organization-id': selectedOrgId
+                },
+                body: formData
+            });
+
+            if (res.ok) {
+                const { transcription } = await res.json();
+                if (transcription) {
+                    handleSendMessage(transcription);
+                }
+            }
+        } catch (err) {
+            console.error("Voice upload failed:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleBulkSend = async (messagesToSend: any[]) => {
+        if (!token || !selectedOrgId) return;
+        setLoading(true);
+
+        try {
+            const res = await fetch(`${import.meta.env.VITE_API_URL}/v1/ai/crm/send-bulk`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`,
+                    'x-organization-id': selectedOrgId
+                },
+                body: JSON.stringify({ messages: messagesToSend })
+            });
+
+            if (res.ok) {
+                const data = await res.json();
+                const aiMsg: Message = {
+                    id: Date.now().toString(),
+                    role: 'assistant',
+                    content: `🚀 Succès ! ${data.results.sent} messages ont été envoyés avec succès via WhatsApp Cloud API.`,
+                    type: 'text'
+                };
+                setMessages(prev => [...prev, aiMsg]);
+            }
+        } catch (err) {
+            console.error("Bulk send failed:", err);
+            alert("Erreur lors de l'envoi en masse.");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="flex flex-col h-[calc(100vh-120px)] max-w-4xl mx-auto">
+            {/* Chat Area */}
+            <div className="flex-1 overflow-y-auto space-y-8 p-6 scrollbar-hide">
+                {messages.map((msg) => (
+                    <div key={msg.id} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in slide-in-from-bottom-4 duration-300`}>
+                        <div className={`max-w-[85%] flex gap-4 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
+                            <div className={`w-10 h-10 rounded-2xl flex items-center justify-center flex-shrink-0 shadow-sm ${msg.role === 'user' ? 'bg-slate-900 text-white' : 'bg-indigo-600 text-white'}`}>
+                                {msg.role === 'user' ? <User className="w-5 h-5" /> : <Bot className="w-6 h-6" />}
+                            </div>
+                            <div className="space-y-4">
+                                <div className={`p-5 rounded-[1.5rem] font-medium leading-relaxed shadow-sm ${msg.role === 'user' ? 'bg-indigo-50 text-indigo-900 rounded-tr-none' : 'bg-white border border-slate-100 text-slate-900 rounded-tl-none'}`}>
+                                    {msg.content}
+                                </div>
+
+                                {/* Dynamic Widgets Based on Type */}
+                                {msg.type === 'contact_list' && msg.data && (
+                                    <div className="bg-white border border-slate-100 rounded-[2rem] overflow-hidden shadow-xl animate-in zoom-in-95 duration-500 max-w-md">
+                                        <div className="p-4 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
+                                            <span className="text-xs font-black text-slate-400 uppercase tracking-widest">Aperçu de la base</span>
+                                            <Users className="w-4 h-4 text-slate-400" />
+                                        </div>
+                                        <div className="max-h-64 overflow-y-auto divide-y divide-slate-50">
+                                            {msg.data.slice(0, 10).map((c: any) => (
+                                                <div key={c.id} className="p-4 flex items-center justify-between hover:bg-slate-50 transition">
+                                                    <div className="flex items-center gap-3">
+                                                        <div className="w-8 h-8 bg-indigo-50 rounded-lg flex items-center justify-center text-[10px] font-black text-indigo-600 uppercase">{c.name?.[0] || '?'}</div>
+                                                        <div>
+                                                            <p className="text-sm font-bold text-slate-900">{c.name || 'Inconnu'}</p>
+                                                            <p className="text-[10px] text-slate-400 font-mono">+{c.phoneNumber}</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                            {msg.data.length > 10 && (
+                                                <div className="p-3 text-center text-[10px] font-bold text-slate-400 uppercase bg-slate-50/50">
+                                                    + {msg.data.length - 10} autres contacts
+                                                </div>
+                                            )}
+                                        </div>
+                                    </div>
+                                )}
+
+                                {msg.type === 'choice_buttons' && msg.data && (
+                                    <div className="flex flex-col gap-2 animate-in fade-in slide-in-from-left-2 duration-500">
+                                        {msg.data.map((btn: any, i: number) => (
+                                            <button 
+                                                key={i}
+                                                onClick={() => handleSendMessage(btn.action)}
+                                                className="w-full text-left p-4 bg-white border border-slate-200 rounded-2xl font-bold text-slate-700 hover:border-indigo-500 hover:bg-indigo-50/30 transition-all shadow-sm"
+                                            >
+                                                {btn.label}
+                                            </button>
+                                        ))}
+                                    </div>
+                                )}
+
+                                {msg.type === 'campaign_summary' && msg.data && (
+                                    <div className="bg-white border border-slate-100 rounded-[2rem] overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500 max-w-md">
+                                        <div className="p-6 bg-indigo-600 text-white">
+                                            <div className="flex items-center gap-3 mb-4">
+                                                <Sparkles className="w-6 h-6" />
+                                                <h4 className="font-black text-lg">Résumé de Campagne</h4>
+                                            </div>
+                                            <p className="text-indigo-100 text-sm font-medium">
+                                                {msg.data.length} messages personnalisés prêts à être envoyés.
+                                            </p>
+                                        </div>
+                                        <div className="p-6 space-y-4">
+                                            <div className="max-h-48 overflow-y-auto space-y-3 pr-2 scrollbar-hide">
+                                                {msg.data.slice(0, 3).map((m: any, i: number) => (
+                                                    <div key={i} className="p-3 bg-slate-50 rounded-xl border border-slate-100">
+                                                        <p className="text-[10px] font-black text-slate-400 mb-1">DESTINATAIRE: {m.to}</p>
+                                                        <p className="text-xs text-slate-600 italic line-clamp-2">"{m.text}"</p>
+                                                    </div>
+                                                ))}
+                                                {msg.data.length > 3 && (
+                                                    <p className="text-center text-[10px] font-bold text-slate-400 uppercase">+ {msg.data.length - 3} autres messages</p>
+                                                )}
+                                            </div>
+                                            <button 
+                                                onClick={() => handleBulkSend(msg.data)}
+                                                className="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black text-sm shadow-xl shadow-indigo-100 hover:bg-indigo-700 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-2"
+                                            >
+                                                🚀 Tout envoyer via WhatsApp API
+                                            </button>
+                                        </div>
+                                    </div>
+                                )}
+                                {msg.type === 'stats' && (
+                                    <div className="w-full max-w-2xl">
+                                        <CRMAnalytics />
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                ))}
+                {loading && (
+                    <div className="flex justify-start">
+                        <div className="bg-white border border-slate-100 p-5 rounded-[1.5rem] rounded-tl-none flex items-center gap-3 text-slate-400 font-medium animate-pulse">
+                            <Loader2 className="w-5 h-5 animate-spin" /> L'IA prépare une réponse...
+                        </div>
+                    </div>
+                )}
+                <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input Area */}
+            <div className="p-6">
+                {/* Quick Actions Suggestions */}
+                <div className="flex flex-wrap gap-2 mb-6 justify-center">
+                    {[
+                        { label: "📊 Historique", icon: History, action: "Montre moi l'historique des contacts" },
+                        { label: "📤 Importer", icon: Upload, action: "Je veux importer de nouveaux contacts" },
+                        { label: "✨ Campagne", icon: Sparkles, action: "Génère une nouvelle campagne marketing" }
+                    ].map((btn, i) => (
+                        <button 
+                            key={i} 
+                            onClick={() => handleSendMessage(btn.action)}
+                            className="flex items-center gap-2 px-6 py-3 bg-white border border-slate-200 rounded-full text-xs font-black uppercase tracking-widest text-slate-500 hover:border-indigo-500 hover:text-indigo-600 hover:shadow-xl hover:scale-105 transition-all active:scale-95"
+                        >
+                            <btn.icon className="w-4 h-4" /> {btn.label}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="relative group max-w-3xl mx-auto">
+                    <div className="absolute inset-0 bg-indigo-500 blur-3xl opacity-5 group-focus-within:opacity-10 transition-opacity" />
+                    <div className="relative bg-white border border-slate-200 rounded-[2.5rem] p-2 flex items-center shadow-2xl focus-within:border-indigo-500 focus-within:ring-4 focus-within:ring-indigo-50 transition-all">
+                        <button 
+                            className={`w-12 h-12 rounded-full flex items-center justify-center ml-2 transition-all ${isRecording ? 'bg-red-500 text-white animate-pulse' : 'bg-slate-50 text-slate-400 hover:bg-indigo-50 hover:text-indigo-600'}`}
+                            onClick={isRecording ? stopRecording : startRecording}
+                        >
+                            <Mic className={`w-6 h-6 ${isRecording ? 'animate-bounce' : ''}`} />
+                        </button>
+                        <input 
+                            className="flex-1 bg-transparent border-none focus:ring-0 px-6 py-4 font-medium text-slate-900 placeholder:text-slate-400"
+                            placeholder="Écrivez votre commande ici..."
+                            value={input}
+                            onChange={(e) => setInput(e.target.value)}
+                            onKeyPress={(e) => e.key === 'Enter' && handleSendMessage(input)}
+                        />
+                        <button 
+                            onClick={() => handleSendMessage(input)}
+                            className="w-14 h-14 bg-indigo-600 text-white rounded-[2rem] flex items-center justify-center hover:bg-indigo-700 hover:rotate-12 transition-all shadow-xl shadow-indigo-100 mr-2"
+                        >
+                            <Send className="w-6 h-6" />
+                        </button>
+                    </div>
+                </div>
+                <p className="text-center text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-6 opacity-50">
+                    Propulsé par Xamlé AI • CRM PaaS Intégré
+                </p>
+            </div>
+        </div>
+    );
+}

apps/api/package.json

@@ -42,6 +42,7 @@
         "pptxgenjs": "^3.12.0",
         "puppeteer": "^22.0.0",
         "stripe": "^20.3.1",
+        "web-push": "^3.6.7",
         "xlsx": "^0.18.5",
         "zod": "^3.25.76"
     },
@@ -52,6 +53,7 @@
         "@types/fast-levenshtein": "^0.0.4",
         "@types/node": "^20.0.0",
         "@types/node-cron": "^3.0.11",
+        "@types/web-push": "^3.6.4",
         "@vitest/ui": "^4.0.18",
         "tsx": "^3.0.0",
         "typescript": "^5.0.0",

apps/api/src/index.ts

@@ -11,6 +11,7 @@ import { organizationRoutes } from './routes/organizations';
 import { aiRoutes } from './routes/ai';
 import { paymentRoutes, stripeWebhookRoute } from './routes/payments';
 import { analyticsRoutes } from './routes/analytics';
+import { notificationRoutes } from './routes/notifications';
 import { internalRoutes } from './routes/internal';
 import { authRoutes } from './routes/auth';
 import { setupRateLimit } from './middleware/rateLimit';
@@ -107,6 +108,7 @@ const registerRoutes = async () => {
         scope.register(aiRoutes, { prefix: '/v1/ai' });
         scope.register(paymentRoutes, { prefix: '/v1/payments' });
         scope.register(analyticsRoutes, { prefix: '/v1/analytics' });
+        scope.register(notificationRoutes, { prefix: '/v1/notifications' });
         scope.register(internalRoutes);
     });
 

apps/api/src/routes/ai.ts

@@ -312,4 +312,209 @@ export async function aiRoutes(fastify: FastifyInstance) {
         const { text, aiSource } = await aiService.generateText(systemPrompt, userPrompt, temperature);
         return { success: true, text, aiSource };
     });
+
+    // 10. CRM: Generate Personalized Campaign Message
+    fastify.post('/crm/generate-campaign', async (request) => {
+        const bodySchema = z.object({
+            contact: z.any(),
+            objective: z.string(),
+            language: z.string().optional().default('FR')
+        });
+        const { contact, objective, language } = bodySchema.parse(request.body);
+
+        const organizationId = request.headers['x-organization-id'] as string;
+        // In Fastify, prisma is usually attached to the instance if decorated
+        const prisma = (fastify as any).prisma;
+        
+        const org = await prisma.organization.findUnique({
+            where: { id: organizationId },
+            select: { name: true, personalityConfig: true }
+        });
+
+        const personality = (org?.personalityConfig as any) || {};
+        
+        const result = await aiService.generateCrmCampaign(
+            contact,
+            objective,
+            {
+                name: org?.name || 'Notre Entreprise',
+                mission: personality.coreMission || 'Offrir un service d excellence',
+                tone: personality.toneDescription || 'Professionnel et chaleureux'
+            },
+            language
+        );
+
+        return { success: true, ...result };
+    });
+
+    // 11. CRM: Conversational Command Processor
+    fastify.post('/crm/command', async (request) => {
+        const bodySchema = z.object({
+            query: z.string()
+        });
+        const { query } = bodySchema.parse(request.body);
+        const organizationId = request.headers['x-organization-id'] as string;
+        const prisma = (fastify as any).prisma;
+
+        // Step 1: Detect intent using a lightweight prompt
+        const systemPrompt = `You are a CRM Command Interpreter. Your job is to classify the user's intent into one of these:
+        - LIST_CONTACTS: User wants to see their contacts or history.
+        - SHOW_IMPORT: User wants to import data or Excel files.
+        - START_CAMPAIGN: User wants to start or generate a campaign.
+        - GENERAL_CHAT: Any other conversation.
+
+        Return ONLY a JSON object: { "intent": "INTENT_NAME", "reply": "A brief, friendly acknowledgment in French" }`;
+
+        const { text } = await aiService.generateText(systemPrompt, query, 0.1);
+        let analysis;
+        try {
+            analysis = JSON.parse(text);
+        } catch (e) {
+            analysis = { intent: 'GENERAL_CHAT', reply: "Je suis à votre écoute. Comment puis-je vous aider ?" };
+        }
+
+        let payload = null;
+        let type = 'text';
+
+        // Step 2: Execute action based on intent
+        if (analysis.intent === 'LIST_CONTACTS') {
+            payload = await prisma.contact.findMany({
+                where: { organizationId },
+                orderBy: { createdAt: 'desc' },
+                take: 10
+            });
+            type = 'contact_list';
+            analysis.reply = "Voici les derniers contacts de votre base de données :";
+        } else if (analysis.intent === 'SHOW_IMPORT') {
+            type = 'import_dropzone';
+            analysis.reply = "C'est noté. Vous pouvez glisser-déposer votre fichier Excel ici pour l'importation :";
+        } else if (analysis.intent === 'START_CAMPAIGN' || query.toLowerCase().includes('génère une campagne')) {
+            // Fetch contacts to generate messages for
+            const contacts = await prisma.contact.findMany({
+                where: { organizationId },
+                take: 5 // Sample for demo/speed
+            });
+
+            if (contacts.length === 0) {
+                analysis.reply = "Votre base de données est vide. Souhaitez-vous importer des contacts ?";
+                type = 'choice_buttons';
+                payload = [{ label: "📤 Importer Excel", action: "Importer des clients" }];
+            } else {
+                // Generate messages for each contact
+                const org = await prisma.organization.findUnique({ where: { id: organizationId } });
+                const results = [];
+                for (const contact of contacts) {
+                    const gen = await aiService.generateCrmCampaign(contact, "Présentation de nos nouveaux services", {
+                        name: org?.name || 'Xamlé',
+                        mission: (org?.personalityConfig as any)?.coreMission || 'Accompagnement IA',
+                        tone: (org?.personalityConfig as any)?.toneDescription || 'Professionnel'
+                    });
+                    results.push({ 
+                        contactId: contact.id,
+                        to: contact.phoneNumber, 
+                        text: gen.personalizedMessage 
+                    });
+                }
+                
+                type = 'campaign_summary';
+                payload = results;
+                analysis.reply = `J'ai analysé ${contacts.length} contacts et rédigé des approches personnalisées. Voici le résumé :`;
+            }
+        } else if (query.toLowerCase().includes('stat') || query.toLowerCase().includes('analyt') || query.toLowerCase().includes('perfor')) {
+            type = 'stats';
+            analysis.reply = "Voici l'analyse détaillée de vos dernières campagnes :";
+        } else {
+            // General chat or unknown intent - provide guide buttons
+            type = 'choice_buttons';
+            payload = [
+                { label: "📊 Voir mes contacts", action: "Montre moi l'historique" },
+                { label: "📤 Importer Excel", action: "Importer des clients" },
+                { label: "✨ Créer une Campagne", action: "Lancer une campagne" }
+            ];
+        }
+
+        return { 
+            success: true, 
+            message: analysis.reply, 
+            type, 
+            payload 
+        };
+    });
+
+    // 12. CRM: Voice Command Processor
+    fastify.post('/crm/voice-command', async (request, reply) => {
+        const file = await (request as any).file();
+        if (!file) return reply.code(400).send({ error: 'No audio file' });
+
+        const buffer = await file.toBuffer();
+        
+        // Step 1: Transcribe
+        const { text: transcription } = await aiService.transcribeAudio(buffer, 'command.webm');
+        
+        // Step 2: Route to the command processor logic
+        return { success: true, transcription };
+    });
+
+    // 13. CRM: Bulk Send Campaign via WhatsApp Cloud API
+    fastify.post('/crm/send-bulk', async (request, reply) => {
+        const bodySchema = z.object({
+            messages: z.array(z.object({
+                contactId: z.string().optional(),
+                to: z.string(),
+                text: z.string()
+            }))
+        });
+
+        const { messages } = bodySchema.parse(request.body);
+        const organizationId = request.headers['x-organization-id'] as string;
+        const prisma = (fastify as any).prisma;
+
+        // 1. Fetch Org Credentials
+        const org = await prisma.organization.findUnique({
+            where: { id: organizationId },
+            include: { phoneNumbers: true }
+        });
+
+        if (!org || !org.systemUserToken) {
+            return reply.code(400).send({ error: 'WhatsApp not configured for this organization' });
+        }
+
+        const phoneNumberId = org.phoneNumbers?.[0]?.id;
+        if (!phoneNumberId) {
+            return reply.code(400).send({ error: 'No phone number connected' });
+        }
+
+        const { decryptSecrets } = await import('../services/organization');
+        const { whatsappService } = await import('../services/whatsapp');
+        const decryptedOrg = decryptSecrets(org);
+
+        // 2. Send and Log sequentially (to get contactIds right)
+        const results = { sent: 0, failed: 0 };
+        for (const msg of messages) {
+            try {
+                const res = await whatsappService.sendMessage({
+                    accessToken: decryptedOrg.systemUserToken,
+                    phoneNumberId
+                }, { to: msg.to, text: msg.text });
+
+                // Archive in DB
+                if (msg.contactId) {
+                    await prisma.campaignHistory.create({
+                        data: {
+                            organizationId,
+                            contactId: msg.contactId,
+                            whatsappMessageId: res.id,
+                            content: msg.text,
+                            status: 'SENT'
+                        }
+                    });
+                }
+                results.sent++;
+            } catch (err) {
+                results.failed++;
+            }
+        }
+
+        return { success: true, results };
+    });
 }

apps/api/src/routes/analytics.ts

@@ -108,4 +108,60 @@ export async function analyticsRoutes(fastify: FastifyInstance) {
             return reply.code(500).send({ error: 'Failed to fetch pedagogical analytics' });
         }
     });
+
+    /**
+     * GET /v1/analytics/campaigns
+     * Returns CRM campaign funnel: sent, delivered, read, failed.
+     */
+    fastify.get('/campaigns', async (req, reply) => {
+        const organizationId = (req as any).organizationId;
+
+        if (!organizationId) {
+            return reply.code(400).send({ error: 'Organization ID is required' });
+        }
+
+        try {
+            const stats = await prisma.campaignHistory.groupBy({
+                by: ['status'],
+                where: { organizationId },
+                _count: { _all: true }
+            });
+
+            const counts: Record<string, number> = {
+                SENT: 0,
+                DELIVERED: 0,
+                READ: 0,
+                FAILED: 0
+            };
+
+            stats.forEach((s: any) => {
+                counts[s.status] = s._count._all;
+            });
+
+            const total = counts.SENT + counts.DELIVERED + counts.READ + counts.FAILED;
+            
+            // Funnel logic: DELIVERED usually implies it was SENT, etc.
+            // But here we count specific statuses.
+            
+            return {
+                summary: {
+                    total,
+                    sent: counts.SENT,
+                    delivered: counts.DELIVERED,
+                    read: counts.READ,
+                    failed: counts.FAILED,
+                    deliveryRate: total > 0 ? ((counts.DELIVERED + counts.READ) / total) * 100 : 0,
+                    readRate: (counts.DELIVERED + counts.READ) > 0 ? (counts.READ / (counts.DELIVERED + counts.READ)) * 100 : 0
+                },
+                funnel: [
+                    { name: 'Envoyés', value: total, fill: '#6366f1' },
+                    { name: 'Livrés', value: counts.DELIVERED + counts.READ, fill: '#8b5cf6' },
+                    { name: 'Lus', value: counts.READ, fill: '#ec4899' }
+                ]
+            };
+        } catch (err) {
+            logger.error({ err }, '[ANALYTICS] Campaigns fetch failed:');
+            return reply.code(500).send({ error: 'Failed to fetch campaign analytics' });
+        }
+    });
 }

apps/api/src/routes/internal.ts

@@ -1,5 +1,5 @@
 import { FastifyInstance } from 'fastify';
-import { WhatsAppService } from '../services/whatsapp';
+import { whatsappService } from '../services/whatsapp';
 import { z } from 'zod';
 import { getOrganizationByPhoneNumberId } from '../services/organization';
 import { logger } from '../logger';
@@ -65,12 +65,12 @@ export async function internalRoutes(fastify: FastifyInstance) {
                                 text = message.interactive?.button_reply?.id || message.interactive?.list_reply?.id;
                             } else if (message.type === 'audio' || message.type === 'image') {
                                 // Delegate media to worker via service
-                                await WhatsAppService.handleIncomingMessage(phone, '', message.audio?.id || undefined, message.image?.id || undefined, undefined, organizationId);
+                                await whatsappService.handleIncomingMessage(phone, '', message.audio?.id || undefined, message.image?.id || undefined, undefined, organizationId);
                                 continue;
                             }
 
                             if (phone && text) {
-                                await WhatsAppService.handleIncomingMessage(phone, text, undefined, undefined, undefined, organizationId);
+                                await whatsappService.handleIncomingMessage(phone, text, undefined, undefined, undefined, organizationId);
                             }
                         }
                     }
@@ -90,7 +90,7 @@ export async function internalRoutes(fastify: FastifyInstance) {
     }, async (request, reply) => {
         const { phone, text, audioUrl, imageUrl, organizationId } = request.body;
         try {
-            await WhatsAppService.handleIncomingMessage(phone, text, audioUrl, imageUrl, undefined, organizationId);
+            await whatsappService.handleIncomingMessage(phone, text, audioUrl, imageUrl, undefined, organizationId);
             return reply.send({ ok: true });
         } catch (err: any) {
             return reply.code(500).send({ error: err.message });

apps/api/src/routes/notifications.ts

@@ -0,0 +1,41 @@
+import { FastifyInstance } from 'fastify';
+import { pushService } from '../services/push';
+import { z } from 'zod';
+
+export async function notificationRoutes(fastify: FastifyInstance) {
+    /**
+     * POST /v1/notifications/subscribe
+     * Subscribe the current user to push notifications
+     */
+    fastify.post('/subscribe', async (request, reply) => {
+        const bodySchema = z.object({
+            subscription: z.object({
+                endpoint: z.string(),
+                keys: z.object({
+                    p256dh: z.string(),
+                    auth: z.string()
+                })
+            })
+        });
+
+        const { subscription } = bodySchema.parse(request.body);
+        const user = (request as any).user;
+        const organizationId = (request as any).organizationId;
+
+        if (!user || !organizationId) {
+            return reply.code(401).send({ error: 'Unauthorized' });
+        }
+
+        await pushService.subscribe(user.id, organizationId, subscription);
+
+        return { success: true };
+    });
+
+    /**
+     * GET /v1/notifications/vapid-key
+     * Returns the public VAPID key for the frontend
+     */
+    fastify.get('/vapid-key', async () => {
+        return { publicKey: process.env.VAPID_PUBLIC_KEY };
+    });
+}

apps/api/src/routes/organizations.ts

@@ -289,4 +289,41 @@ export async function organizationRoutes(fastify: FastifyInstance) {
         });
         return contacts;
     });
+
+    // 10. CRM: Delete Single Contact
+    fastify.delete('/:id/contacts/:contactId', async (req, reply) => {
+        const { id: organizationId, contactId } = req.params as { id: string; contactId: string };
+        
+        try {
+            await (prisma as any).contact.delete({
+                where: { id: contactId, organizationId } // Security check
+            });
+            return { ok: true };
+        } catch (err) {
+            return reply.code(404).send({ error: 'Contact not found or not owned by organization' });
+        }
+    });
+
+    // 11. CRM: Bulk Delete Contacts
+    fastify.post('/:id/contacts/bulk-delete', async (req, reply) => {
+        const { id: organizationId } = req.params as { id: string };
+        const { contactIds } = req.body as { contactIds: string[] };
+
+        if (!contactIds || !Array.isArray(contactIds)) {
+            return reply.code(400).send({ error: 'Invalid contactIds' });
+        }
+
+        try {
+            const result = await (prisma as any).contact.deleteMany({
+                where: {
+                    id: { in: contactIds },
+                    organizationId
+                }
+            });
+            return { ok: true, deletedCount: result.count };
+        } catch (err) {
+            logger.error({ err }, '[CRM-BULK-DELETE] Failed');
+            return reply.code(500).send({ error: 'Failed to delete contacts' });
+        }
+    });
 }

apps/api/src/routes/whatsapp.ts

@@ -1,153 +1,121 @@
-import { logger } from '../logger';
 import { FastifyInstance } from 'fastify';
-import type { FastifyRequest } from 'fastify';
-import crypto from 'crypto';
-import { z } from 'zod';
-import { getOrganizationByPhoneNumberId } from '../services/organization';
-import { whatsappQueue } from '../services/queue';
-
-// ─── Zod Schema for WhatsApp Webhook Payload ─────────────────────────────────
-const WhatsAppMessageSchema = z.object({
-    from: z.string(),
-    id: z.string(),
-    timestamp: z.string(),
-    type: z.enum(['text', 'audio', 'image', 'video', 'document', 'sticker', 'reaction', 'interactive']),
-    text: z.object({ body: z.string() }).optional(),
-    audio: z.object({ id: z.string(), mime_type: z.string().optional() }).optional(),
-    image: z.object({ id: z.string(), caption: z.string().optional() }).optional(),
-    interactive: z.object({
-        type: z.enum(['button_reply', 'list_reply']),
-        button_reply: z.object({
-            id: z.string(),
-            title: z.string(),
-        }).optional(),
-        list_reply: z.object({
-            id: z.string(),
-            title: z.string(),
-            description: z.string().optional()
-        }).optional(),
-    }).optional()
-});
-
-const WebhookPayloadSchema = z.object({
-    object: z.literal('whatsapp_business_account'),
-    entry: z.array(z.object({
-        id: z.string(),
-        changes: z.array(z.object({
-            value: z.object({
-                messaging_product: z.string().optional(),
-                metadata: z.object({ phone_number_id: z.string() }).optional(),
-                contacts: z.array(z.object({
-                    profile: z.object({ name: z.string() }).optional(),
-                    wa_id: z.string()
-                })).optional(),
-                messages: z.array(WhatsAppMessageSchema).optional(),
-                statuses: z.array(z.object({
-                    id: z.string(),
-                    status: z.string(),
-                    timestamp: z.string().optional(),
-                    recipient_id: z.string().optional()
-                })).optional(),
-            }),
-            field: z.string(),
-        })),
-    })),
-});
-
-// ─── HMAC Signature Verification ─────────────────────────────────────────────
-function verifyWebhookSignature(rawBody: Buffer, signature: string | undefined, secret: string): boolean {
-    if (!signature) return false;
-    const expected = 'sha256=' + crypto.createHmac('sha256', secret).update(rawBody).digest('hex');
-    try {
-        return crypto.timingSafeEqual(Buffer.from(expected, 'utf8'), Buffer.from(signature, 'utf8'));
-    } catch {
-        return false;
-    }
-}
+import { logger } from '../logger';
 
-// ─── Route Plugin ─────────────────────────────────────────────────────────────
 export async function whatsappRoutes(fastify: FastifyInstance) {
-    fastify.addContentTypeParser('application/json', { parseAs: 'buffer' }, async (req: FastifyRequest, body: Buffer) => {
-        req.rawBody = body;
-        return JSON.parse(body.toString('utf8'));
-    });
-
+    
+    /**
+     * GET /v1/whatsapp/webhook
+     * Meta verification challenge
+     */
     fastify.get('/webhook', async (request, reply) => {
-        const query = request.query as Record<string, string>;
+        const query = request.query as any;
         const mode = query['hub.mode'];
         const token = query['hub.verify_token'];
         const challenge = query['hub.challenge'];
 
-        if (!mode && !token && !challenge) return reply.code(200).type('text/plain').send('ok');
-
-        if (mode === 'subscribe' && token === process.env.WHATSAPP_VERIFY_TOKEN) {
-            return reply.code(200).type('text/plain').send(challenge);
-        }
-        return reply.code(403).send('Forbidden');
-    });
-
-    fastify.post('/webhook', async (request, reply) => handleIncoming(request, reply));
-    fastify.post('/webhook/:organizationId', async (request, reply) => handleIncoming(request, reply));
+        // Use a verify token that you will set in the Meta Dashboard
+        const VERIFY_TOKEN = process.env.WHATSAPP_VERIFY_TOKEN || 'xamle_studio_secret_token';
 
-    async function handleIncoming(request: any, reply: any) {
-        const { organizationId: urlOrgId } = request.params as { organizationId?: string };
-        
-        // 1. HMAC Verification
-        const appSecret = process.env.WHATSAPP_APP_SECRET;
-        if (appSecret) {
-            const signature = request.headers['x-hub-signature-256'] as string;
-            if (!request.rawBody || !verifyWebhookSignature(request.rawBody, signature, appSecret)) {
-                request.log.warn(`[WEBHOOK] Invalid HMAC for Org ${urlOrgId || 'global'}`);
-                return reply.code(403).send({ error: 'Invalid signature' });
+        if (mode && token) {
+            if (mode === 'subscribe' && token === VERIFY_TOKEN) {
+                logger.info('[WHATSAPP-WEBHOOK] Webhook verified successfully');
+                return reply.code(200).send(challenge);
+            } else {
+                return reply.code(403).send();
             }
         }
+    });
 
-        // 2. Gateway Forwarding
-        const railwayInternalUrl = process.env.RAILWAY_INTERNAL_URL;
-        const isGateway = process.env.IS_GATEWAY === 'true' || !!process.env.HF_SPACE_ID;
-
-        if (railwayInternalUrl && isGateway) {
-            const targetUrl = `${railwayInternalUrl.replace(/\/$/, '')}/v1/internal/whatsapp/inbound`;
-            fetch(targetUrl, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'x-api-key': process.env.ADMIN_API_KEY || '',
-                    'x-organization-id': urlOrgId || ''
-                },
-                body: JSON.stringify(request.body)
-            }).catch(err => logger.error({ err }, '[WEBHOOK] Forwarding failed:'));
-
-            return reply.code(200).send({ status: 'forwarded' });
-        }
+    /**
+     * POST /v1/whatsapp/webhook
+     * Main entry point for incoming messages and events
+     */
+    fastify.post('/webhook', async (request, reply) => {
+        const body = request.body as any;
+
+        if (body.object === 'whatsapp_business_account') {
+            try {
+                const entry = body.entry?.[0];
+                const wabaId = entry?.id;
+                const changes = entry?.changes?.[0];
+                const value = changes?.value;
+                const prisma = (fastify as any).prisma;
+
+                // 1. Handle Status Updates (delivered, read, etc.)
+                const statusUpdate = value?.statuses?.[0];
+                if (statusUpdate) {
+                    const messageId = statusUpdate.id;
+                    const status = statusUpdate.status.toUpperCase(); // DELIVERED, READ, etc.
+                    
+                    await prisma.campaignHistory.update({
+                        where: { whatsappMessageId: messageId },
+                        data: { status }
+                    });
 
-        // 3. Queue for Processing
-        const parsed = WebhookPayloadSchema.safeParse(request.body);
-        if (!parsed.success) return reply.code(200).send({ status: 'ignored' });
+                    // Log analytics for "READ"
+                    if (status === 'READ') {
+                        const history = await prisma.campaignHistory.findUnique({ where: { whatsappMessageId: messageId } });
+                        if (history) {
+                            await prisma.analyticsLog.create({
+                                data: {
+                                    campaignHistoryId: history.id,
+                                    eventType: 'READ'
+                                }
+                            });
+                        }
+                    }
+                    
+                    return reply.code(200).send('EVENT_RECEIVED');
+                }
 
-        for (const entry of parsed.data.entry) {
-            for (const change of entry.changes) {
-                const phoneNumberId = change.value.metadata?.phone_number_id || 'unknown';
-                
-                // Use URL OrgId if present, otherwise resolve from phone number
-                const organizationId = urlOrgId || await getOrganizationByPhoneNumberId(phoneNumberId);
+                // 2. Handle Incoming Messages (already implemented)
+                const message = value?.messages?.[0];
+                if (message) {
+                    const from = message.from;
+                    const text = message.text?.body;
+                    
+                    const org = await prisma.organization.findUnique({
+                        where: { wabaId },
+                        include: { phoneNumbers: true }
+                    });
 
-                for (const message of change.value.messages || []) {
-                    await whatsappQueue.add('process-message', {
-                        message,
-                        organizationId,
-                        metadata: {
-                            phoneNumberId,
-                            displayPhoneNumber: (change.value.metadata as any)?.display_phone_number
+                    if (org && text) {
+                        logger.info({ from, wabaId, orgName: org.name }, '[WHATSAPP-WEBHOOK] Processing automated response');
+                        
+                        const { aiService } = await import('../services/ai');
+                        const { response } = await aiService.handleCrmConversation(from, org.id, text);
+
+                        // Trigger Push Notification to the team
+                        const { pushService } = await import('../services/push');
+                        await pushService.notifyOrganization(
+                            org.id, 
+                            "Nouveau message WhatsApp", 
+                            `Le client ${from} a répondu : "${text.substring(0, 50)}..."`
+                        ).catch(e => logger.warn({ e }, "[PUSH] Failed to notify"));
+
+                        const phoneNumberId = org.phoneNumbers?.[0]?.id;
+                        if (phoneNumberId && org.systemUserToken) {
+                            const { decryptSecrets } = await import('../services/organization');
+                            const { whatsappService } = await import('../services/whatsapp');
+                            const decryptedOrg = decryptSecrets(org);
+                            
+                            await whatsappService.sendMessage({
+                                accessToken: decryptedOrg.systemUserToken,
+                                phoneNumberId
+                            }, { to: from, text: response });
+                            
+                            logger.info({ to: from }, '[WHATSAPP-WEBHOOK] Response sent successfully');
                         }
-                    }, {
-                        attempts: 3,
-                        backoff: { type: 'exponential', delay: 1000 }
-                    });
+                    }
                 }
+
+                return reply.code(200).send('EVENT_RECEIVED');
+            } catch (err) {
+                logger.error({ err }, '[WHATSAPP-WEBHOOK] Error in automated loop');
+                return reply.code(200).send('EVENT_RECEIVED');
             }
+        } else {
+            return reply.code(404).send();
         }
-
-        return reply.code(200).send({ status: 'received' });
-    }
+    });
 }

apps/api/src/services/ai/index.ts

@@ -257,6 +257,33 @@ export class AIService {
         return provider.instance.transcribeAudio(audioBuffer, filename, language);
     }
 
+    async generateCrmCampaign(
+        contact: any,
+        objective: string,
+        orgData: { name: string; mission: string; tone: string },
+        language: string = 'FR'
+    ): Promise<{ personalizedMessage: string, reasoning: string, aiSource: string }> {
+        const personality = await this.getTenantPersonality();
+        const prompt = PromptLoader.compile('crm-campaign', {
+            orgName: orgData.name,
+            coreMission: orgData.mission,
+            toneDescription: orgData.tone,
+            campaignObjective: objective,
+            contactName: contact.name || 'Inconnu',
+            contactPhone: contact.phoneNumber,
+            contactAttributes: JSON.stringify(contact.attributes || {}),
+            languageLabel: language === 'WOLOF' ? 'WOLOF (ñ, ë, é)' : 'Français'
+        }, personality);
+
+        const schema = z.object({
+            personalizedMessage: z.string(),
+            reasoning: z.string()
+        });
+
+        const { data, source } = await this.callWithFailover(prompt, schema);
+        return { ...data, aiSource: source };
+    }
+
     async extractBusinessProfile(userInput: string, dayNumber: number, userLanguage: string = 'FR'): Promise<any> {
         const personality = await this.getTenantPersonality();
         const prompt = PromptLoader.compile('business-profile-extraction', {
@@ -303,6 +330,52 @@ export class AIService {
         }
         throw new Error(`[AI_ERROR] All providers for ${capability} failed.`);
     }
+
+    /**
+     * CRM: Handles an incoming message, manages memory, and generates a response.
+     */
+    async handleCrmConversation(
+        phoneNumber: string, 
+        organizationId: string, 
+        userMessage: string
+    ): Promise<{ response: string, aiSource: string }> {
+        const memoryKey = `crm:chat:${organizationId}:${phoneNumber}`;
+        
+        // 1. Retrieve History from Redis
+        let history = [];
+        try {
+            const cached = await redis.get(memoryKey);
+            if (cached) history = JSON.parse(cached);
+        } catch (err) {
+            logger.warn({ err }, "[AI_SERVICE] Memory retrieval failed");
+        }
+
+        // 2. Fetch Organization context
+        const org = await prisma.organization.findUnique({ where: { id: organizationId } });
+        const personality = (org?.personalityConfig as any) || {};
+
+        // 3. Compile Closing Prompt
+        const prompt = PromptLoader.compile('crm-closing', {
+            orgName: org?.name || 'Xamlé',
+            coreMission: personality.coreMission || 'Service client',
+            toneDescription: personality.toneDescription || 'Professionnel',
+            chatHistory: history.map((h: any) => `${h.role === 'user' ? 'Client' : 'Assistant'}: ${h.content}`).join('\n'),
+            userInput: userMessage
+        }, personality);
+
+        // 4. Generate Response
+        const { text, aiSource } = await this.generateText(
+            "Tu es un assistant commercial expert. Ta mission est de répondre aux questions du client et de le guider vers un rendez-vous ou une vente, tout en respectant l'historique de la conversation.",
+            prompt,
+            0.7
+        );
+
+        // 5. Update Memory (Keep last 10 messages)
+        const updatedHistory = [...history, { role: 'user', content: userMessage }, { role: 'assistant', content: text }].slice(-10);
+        await redis.set(memoryKey, JSON.stringify(updatedHistory), 'EX', 86400); // 24h expiration
+
+        return { response: text, aiSource };
+    }
 }
 
 export const aiService = new AIService();

apps/api/src/services/push.ts

@@ -0,0 +1,80 @@
+import webpush from 'web-push';
+import { prisma } from './prisma';
+import { logger } from '../logger';
+
+// VAPID keys should be in .env. If not, we log a warning.
+const publicVapidKey = process.env.VAPID_PUBLIC_KEY;
+const privateVapidKey = process.env.VAPID_PRIVATE_KEY;
+const contactEmail = process.env.VAPID_EMAIL || 'mailto:support@xamle.studio';
+
+if (publicVapidKey && privateVapidKey) {
+    webpush.setVapidDetails(contactEmail, publicVapidKey, privateVapidKey);
+} else {
+    logger.warn('[PUSH-SERVICE] VAPID keys are missing. Push notifications will not work.');
+    // To generate keys, you can use: webpush.generateVAPIDKeys()
+}
+
+export const pushService = {
+    /**
+     * Store a new subscription for a user
+     */
+    async subscribe(userId: string, organizationId: string, subscription: any) {
+        return (prisma as any).pushSubscription.upsert({
+            where: { endpoint: subscription.endpoint },
+            update: {
+                userId,
+                organizationId,
+                p256dh: subscription.keys.p256dh,
+                auth: subscription.keys.auth
+            },
+            create: {
+                userId,
+                organizationId,
+                endpoint: subscription.endpoint,
+                p256dh: subscription.keys.p256dh,
+                auth: subscription.keys.auth
+            }
+        });
+    },
+
+    /**
+     * Send a notification to all active subscriptions of an organization
+     */
+    async notifyOrganization(organizationId: string, title: string, body: string, icon?: string) {
+        const subscriptions = await (prisma as any).pushSubscription.findMany({
+            where: { organizationId }
+        });
+
+        const payload = JSON.stringify({
+            title,
+            body,
+            icon: icon || 'https://xamle.studio/logo.png',
+            timestamp: Date.now()
+        });
+
+        const results = await Promise.allSettled(
+            subscriptions.map((sub: any) => {
+                const pushConfig = {
+                    endpoint: sub.endpoint,
+                    keys: {
+                        p256dh: sub.p256dh,
+                        auth: sub.auth
+                    }
+                };
+
+                return webpush.sendNotification(pushConfig, payload);
+            })
+        );
+
+        // Clean up failed subscriptions (e.g. expired or unsubscribed)
+        for (let i = 0; i < results.length; i++) {
+            if (results[i].status === 'rejected') {
+                const error = (results[i] as PromiseRejectedResult).reason;
+                if (error.statusCode === 410 || error.statusCode === 404) {
+                    logger.info(`[PUSH-SERVICE] Removing expired subscription: ${subscriptions[i].endpoint}`);
+                    await (prisma as any).pushSubscription.delete({ where: { id: subscriptions[i].id } }).catch(() => {});
+                }
+            }
+        }
+    }
+};

apps/api/src/services/whatsapp.ts

@@ -1,34 +1,109 @@
+import axios from 'axios';
 import { logger } from '../logger';
-import { whatsappQueue } from './queue';
+
+export interface WhatsAppMessage {
+    to: string;
+    text: string;
+}
 
 export class WhatsAppService {
+    private baseUrl = 'https://graph.facebook.com/v18.0';
+
+    /**
+     * Sends a direct text message via WhatsApp Cloud API
+     * Note: Requires a 24h window or a pre-approved template for proactive outreach
+     */
+    async sendMessage(config: { accessToken: string; phoneNumberId: string }, message: WhatsAppMessage) {
+        try {
+            const url = `${this.baseUrl}/${config.phoneNumberId}/messages`;
+            const response = await axios.post(url, {
+                messaging_product: 'whatsapp',
+                recipient_type: 'individual',
+                to: message.to,
+                type: 'text',
+                text: { body: message.text }
+            }, {
+                headers: {
+                    'Authorization': `Bearer ${config.accessToken}`,
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            return {
+                id: response.data.messages?.[0]?.id,
+                status: 'SENT'
+            };
+        } catch (err: any) {
+            logger.error({ 
+                error: err.response?.data || err.message,
+                to: message.to 
+            }, '[WHATSAPP_SERVICE] Failed to send message');
+            throw err;
+        }
+    }
+
+    /**
+     * Bulk send utility
+     */
+    async sendBulk(config: { accessToken: string; phoneNumberId: string }, messages: WhatsAppMessage[]) {
+        const results = { sent: 0, failed: 0 };
+        
+        // We use sequential or limited concurrency to avoid Meta rate limits
+        for (const msg of messages) {
+            try {
+                await this.sendMessage(config, msg);
+                results.sent++;
+            } catch (err) {
+                results.failed++;
+            }
+        }
+        
+        return results;
+    }
+
     /**
-     * Unified entry point for incoming messages.
-     * Delegates all business logic to the background worker via BullMQ.
+     * Orchestrates the AI response loop and notifications for an incoming message
      */
-    static async handleIncomingMessage(
-        phone: string, 
-        text: string, 
-        audioUrl?: string, 
-        imageUrl?: string, 
-        timeTravelDayOverride?: number, 
-        organizationId: string = 'default-org-id'
-    ) {
-        const traceId = audioUrl ? `[STT-FLOW-${phone.slice(-4)}]` : imageUrl ? `[IMG-FLOW-${phone.slice(-4)}]` : `[TXT-FLOW-${phone.slice(-4)}]`;
-        logger.info(`${traceId} Enqueueing message for worker: "${text.substring(0, 50)}..." (Org: ${organizationId})`);
-
-        await whatsappQueue.add('handle-inbound', {
-            phone,
-            text,
-            audioUrl,
-            imageUrl,
-            isTimeTravelMode: timeTravelDayOverride !== undefined,
-            realCurrentDay: timeTravelDayOverride,
-            organizationId
-        }, {
-            priority: 1,
-            attempts: 3,
-            backoff: { type: 'exponential', delay: 2000 }
-        });
+    async handleIncomingMessage(phone: string, text: string, _audioId?: string, _imageId?: string, _videoId?: string, organizationId?: string) {
+        if (!organizationId) {
+            logger.warn({ phone }, '[WHATSAPP_SERVICE] Cannot handle message without organizationId');
+            return;
+        }
+
+        try {
+            const { prisma } = await import('./prisma');
+            const { aiService } = await import('./ai');
+            const { pushService } = await import('./push');
+            const { decryptSecrets } = await import('./organization');
+
+            // 1. Process via AI Closing Engine
+            const { response } = await aiService.handleCrmConversation(phone, organizationId, text || '[Médias Reçus]');
+
+            // 2. Trigger Push Notification to the team
+            await pushService.notifyOrganization(
+                organizationId, 
+                "Nouveau message WhatsApp", 
+                `Le client ${phone} a répondu : "${(text || '').substring(0, 50)}..."`
+            ).catch(e => logger.warn({ e }, "[PUSH] Failed to notify"));
+
+            // 3. Send automated response if possible
+            const org = await prisma.organization.findUnique({
+                where: { id: organizationId },
+                include: { phoneNumbers: true }
+            });
+
+            const phoneNumberId = org?.phoneNumbers?.[0]?.id;
+            if (org && phoneNumberId && org.systemUserToken) {
+                const decryptedOrg = decryptSecrets(org);
+                await this.sendMessage({
+                    accessToken: decryptedOrg.systemUserToken,
+                    phoneNumberId
+                }, { to: phone, text: response });
+            }
+        } catch (err) {
+            logger.error({ err, phone }, '[WHATSAPP_SERVICE] handleIncomingMessage failed');
+        }
     }
 }
+
+export const whatsappService = new WhatsAppService();

packages/database/prisma/schema.prisma

@@ -43,6 +43,7 @@ model Organization {
   progress           UserProgress[]
   phoneNumbers       WhatsAppPhoneNumber[]
   contacts           Contact[]
+  campaigns          CampaignHistory[]
 }
 
 model Contact {
@@ -54,11 +55,46 @@ model Contact {
   createdAt      DateTime     @default(now())
   updatedAt      DateTime     @updatedAt
   organization   Organization @relation(fields: [organizationId], references: [id])
+  campaigns      CampaignHistory[]
 
   @@unique([phoneNumber, organizationId])
   @@index([organizationId])
 }
 
+// ... existing models ...
+
+model CampaignHistory {
+  id                String         @id @default(uuid())
+  organizationId    String
+  contactId         String
+  whatsappMessageId String?        @unique // ID returned by Meta
+  content           String
+  status            String         @default("SENT") // SENT, DELIVERED, READ, FAILED
+  error             String?
+  sentAt            DateTime       @default(now())
+  updatedAt         DateTime       @updatedAt
+  organization      Organization   @relation(fields: [organizationId], references: [id])
+  contact           Contact        @relation(fields: [contactId], references: [id], onDelete: Cascade)
+  analytics         AnalyticsLog[]
+
+  @@index([organizationId])
+  @@index([contactId])
+  @@index([whatsappMessageId])
+}
+
+model AnalyticsLog {
+  id                String          @id @default(uuid())
+  campaignHistoryId String
+  eventType         String          // CLICK, READ, RESPONSE
+  metadata          Json?
+  occurredAt        DateTime        @default(now())
+  campaign          CampaignHistory @relation(fields: [campaignHistoryId], references: [id], onDelete: Cascade)
+
+  @@index([campaignHistoryId])
+}
+
+// ... existing enums ...
+
 model KnowledgeBaseEntry {
   id             String                 @id @default(uuid())
   organizationId String
@@ -103,6 +139,7 @@ model User {
   responses       Response[]
   organization    Organization     @relation(fields: [organizationId], references: [id])
   progress        UserProgress[]
+  pushSubscriptions PushSubscription[]
 
   @@unique([phone, organizationId])
   @@unique([email, organizationId])
@@ -111,6 +148,20 @@ model User {
   @@index([email])
 }
 
+model PushSubscription {
+  id             String   @id @default(uuid())
+  userId         String
+  organizationId String
+  endpoint       String   @unique
+  p256dh         String
+  auth           String
+  createdAt      DateTime @default(now())
+  user           User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@index([organizationId])
+  @@index([userId])
+}
+
 model BusinessProfile {
   id                   String       @id @default(uuid())
   userId               String       @unique

packages/prompts/src/templates/crm-campaign.md

@@ -0,0 +1,32 @@
+# AI CRM Campaign Generator
+
+Tu es un expert en marketing conversationnel WhatsApp et en psychologie de la vente.
+Ton objectif est de générer un message de prospection ou de relance ultra-personnalisé pour un contact spécifique.
+
+## CONTEXTE DE L'ORGANISATION
+Nom: {{orgName}}
+Mission: {{coreMission}}
+Ton: {{toneDescription}}
+
+## OBJECTIF DE LA CAMPAGNE
+{{campaignObjective}}
+
+## DONNÉES DU CONTACT
+Nom: {{contactName}}
+Téléphone: {{contactPhone}}
+Attributs additionnels (JSON): 
+{{contactAttributes}}
+
+## DIRECTIVES DE RÉDACTION
+1. **Accroche Contextuelle** : Utilise les attributs du contact (ex: son secteur d'activité, son dernier achat ou sa ville) pour montrer que le message n'est pas un spam.
+2. **Style WhatsApp** : Court, direct, chaleureux. Utilise des emojis avec parcimonie.
+3. **Appel à l'action (CTA)** : Toujours finir par une question ouverte ou une proposition d'action simple.
+4. **Langue** : {{languageLabel}} (si WOLOF, utilise un wolof standardisé et respectueux).
+
+## FORMAT DE RÉPONSE ATTENDU (JSON)
+```json
+{
+  "personalizedMessage": "Le contenu du message ici...",
+  "reasoning": "Pourquoi as-tu choisi cette approche ?"
+}
+```