/* global React, ReactDOM, Icon, Btn, Badge, Dot, RefChip */ // DevisPage — liste / détail / builder devis Odoo (sale.order) // Règle 0 : s'insère dans le layout design-v1 sans le modifier // Règle 5 : CRUD complet (read, create, actions state : confirm/cancel/draft) // Backend : GET/POST/PATCH /api/odoo/quotes · GET /api/odoo/products (function () { const { useState, useEffect, useMemo, useRef } = React; const STATE_META = { draft: { label: 'Brouillon', tone: 'neutral', color: 'var(--ink-4)' }, sent: { label: 'Envoyé', tone: 'plasma', color: 'var(--plasma)' }, sale: { label: 'Confirmé', tone: 'signal', color: 'var(--signal-deep)' }, done: { label: 'Clôturé', tone: 'signal', color: 'var(--signal-deep)' }, cancel: { label: 'Annulé', tone: 'rouge', color: 'var(--rouge)' }, }; const fmtEur = (n) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(Number(n) || 0); const fmtEur2 = (n) => new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(n) || 0); const fmtDate = (d) => d ? new Date(d).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' }) : '—'; // ── Templates de lignes pré-remplies (portage DV_TEMPLATES ancienne V) ──────── const DV_TEMPLATES = { solaire: { label: '🔆 Solaire', lines: [ { designation: 'Panneaux photovoltaïques', quantity: 1, unitPrice: 0, product_name: 'panneau solaire' }, { designation: 'Onduleur', quantity: 1, unitPrice: 0, product_name: 'onduleur' }, { designation: 'Structure de fixation', quantity: 1, unitPrice: 0, product_name: 'fixation toiture' }, { designation: 'Coffret AC/DC + câblage', quantity: 1, unitPrice: 0, product_name: 'coffret' }, { designation: "Main d'œuvre installation", quantity: 1, unitPrice: 0, product_name: 'installation' }, { designation: 'Démarches administratives (Enedis / mairie)', quantity: 1, unitPrice: 350, product_name: 'administratif' }, ], }, cee: { label: '♻️ CEE', lines: [ { designation: 'Équipement principal', quantity: 1, unitPrice: 0, product_name: '' }, { designation: 'Forfait constitution dossier CEE', quantity: 1, unitPrice: 450, product_name: 'CEE dossier' }, { designation: "Main d'œuvre pose", quantity: 1, unitPrice: 0, product_name: 'main oeuvre' }, ], }, pac: { label: '🌡 PAC', lines: [ { designation: 'PAC air/eau — fourniture', quantity: 1, unitPrice: 0, product_name: 'pompe chaleur' }, { designation: 'Unité intérieure / hydraulique', quantity: 1, unitPrice: 0, product_name: 'unité intérieure' }, { designation: 'Mise en service + réglages', quantity: 1, unitPrice: 600, product_name: 'mise en service' }, { designation: "Main d'œuvre installation", quantity: 1, unitPrice: 0, product_name: 'installation' }, { designation: 'Forfait constitution dossier CEE', quantity: 1, unitPrice: 450, product_name: 'CEE dossier' }, ], }, audit: { label: '📋 Audit', lines: [ { designation: 'Audit énergétique réglementaire', quantity: 1, unitPrice: 1800, product_name: 'audit énergétique' }, { designation: 'Rapport détaillé + préconisations', quantity: 1, unitPrice: 0, product_name: 'rapport' }, { designation: 'Présentation résultats (réunion)', quantity: 1, unitPrice: 400, product_name: 'réunion' }, ], }, terrain: { label: '🔍 Pré-visite', lines: [ { designation: 'Visite technique préalable', quantity: 1, unitPrice: 350, product_name: 'visite technique' }, { designation: 'Relevé des données site', quantity: 1, unitPrice: 0, product_name: 'relevé' }, { designation: 'Compte-rendu de visite', quantity: 1, unitPrice: 0, product_name: 'compte rendu' }, ], }, dim: { label: '📐 Dimensionnement', lines: [ { designation: 'Étude de dimensionnement', quantity: 1, unitPrice: 600, product_name: 'dimensionnement' }, { designation: 'Note de calcul', quantity: 1, unitPrice: 0, product_name: 'note calcul' }, { designation: 'Équipement principal', quantity: 1, unitPrice: 0, product_name: '' }, ], }, }; // Helper: convertit une ligne template vers le format Odoo (product_id/qty/price_unit) const tplToOdooLine = (l) => ({ id: Date.now() + Math.random(), product_id: null, product_name: l.product_name || '', name: l.designation, qty: l.quantity, price_unit: l.unitPrice }); // Helper: convertit une ligne template vers le format AE natif (designation/quantity/unitPrice) const tplToAELine = (l) => ({ designation: l.designation, quantity: l.quantity, unitPrice: l.unitPrice }); // ── TemplateBar — barre de boutons de modèles réutilisable ──────────────────── function TemplateBar({ onSelect, active }) { return (
Modèle : {Object.entries(DV_TEMPLATES).map(([key, tpl]) => ( ))}
); } // ────────────────────────────────────────────────────────────────────────── // DevisPage — racine : header + stats + list+detail // ────────────────────────────────────────────────────────────────────────── function DevisPage({ prefillPartnerId } = {}) { const API = () => (window.AE_API && window.AE_API.BASE) || ''; const [sourceTab, setSourceTab] = useState('ae'); // 'ae' (natif Discovery) | 'odoo' const [quotes, setQuotes] = useState([]); const [loading, setLoading] = useState(true); const [sel, setSel] = useState(null); const [q, setQ] = useState(''); const [filterState, setFilterState] = useState('all'); const [newOpen, setNewOpen] = useState(false); const [syncing, setSyncing] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); const [syncMsg, setSyncMsg] = useState(null); // Charger la liste const fetchList = () => { setLoading(true); fetch(`${API()}/api/odoo/quotes?limit=200`) .then(r => r.json()) .then(d => setQuotes(d?.quotes || [])) .catch(() => setQuotes([])) .finally(() => setLoading(false)); }; useEffect(fetchList, []); // Lire contexte de navigation éventuel (ex: depuis Visite/Opp) useEffect(() => { try { const raw = sessionStorage.getItem('ae_nav_context'); if (raw) { const ctx = JSON.parse(raw); if (ctx?.screen === 'devis' && ctx.context?.newDevis) { setNewOpen(true); sessionStorage.removeItem('ae_nav_context'); } } } catch (_) {} }, []); // Stats const stats = useMemo(() => ({ total: quotes.length, draft: quotes.filter(q => q.state === 'draft').length, sent: quotes.filter(q => q.state === 'sent').length, sale: quotes.filter(q => q.state === 'sale' || q.state === 'done').length, amountAll: quotes.reduce((s, q) => s + (Number(q.amount_total) || 0), 0), amountConf: quotes.filter(q => q.state === 'sale' || q.state === 'done').reduce((s, q) => s + (Number(q.amount_total) || 0), 0), }), [quotes]); const filtered = useMemo(() => { let list = quotes; if (filterState !== 'all') list = list.filter(q => q.state === filterState); if (q.trim()) { const needle = q.trim().toLowerCase(); list = list.filter(x => { const partnerName = Array.isArray(x.partner_id) ? x.partner_id[1] : ''; return (x.name || '').toLowerCase().includes(needle) || String(partnerName || '').toLowerCase().includes(needle); }); } return list; }, [quotes, filterState, q]); const doSync = async () => { setSyncing(true); setSyncMsg(null); try { await fetch(`${API()}/api/odoo/sync`, { method: 'POST' }).then(r => r.json()); fetchList(); setSyncMsg('✓ Sync terminée'); } catch (e) { setSyncMsg(`⚠ ${e.message}`); } setSyncing(false); setTimeout(() => setSyncMsg(null), 3000); }; return (
{/* Header + tabs source */}

Devis

{sourceTab === 'odoo' && <> {syncing ? '⏳ Sync…' : (syncMsg || '⟳ Sync Odoo')} } onClick={() => setNewOpen(true)}>Nouveau devis Odoo }
{settingsOpen && setSettingsOpen(false)} />}
{[ { k: 'ae', l: '💼 Audits Énergies', sub: 'devis natifs' }, { k: 'odoo', l: '🟣 Odoo', sub: 'sale.order' }, ].map(t => ( ))}
{sourceTab === 'ae' && } {sourceTab === 'odoo' && (<> {/* Stats strip */}
5 ? 'amber' : 'muted'}/>
{/* Filters */}
{[ { k: 'all', l: `Tous (${stats.total})` }, { k: 'draft', l: `Brouillons (${stats.draft})` }, { k: 'sent', l: `Envoyés (${stats.sent})` }, { k: 'sale', l: `Confirmés (${quotes.filter(q => q.state === 'sale').length})` }, { k: 'cancel', l: `Annulés (${quotes.filter(q => q.state === 'cancel').length})` }, ].map(f => ( ))} setQ(e.target.value)} placeholder="Rechercher devis, client…" style={{ padding: '5px 10px', fontSize: 12, border: '1px solid var(--line-2)', borderRadius: 4, background: 'var(--paper)', minWidth: 240 }}/>
{/* List + detail */}
{loading && (window.Skeleton ?
:
Chargement…
)} {!loading && filtered.length === 0 && (window.EmptyState ? :
Aucun devis.
)} {filtered.map(qt => { const meta = STATE_META[qt.state] || STATE_META.draft; const partnerName = Array.isArray(qt.partner_id) ? qt.partner_id[1] : '—'; return ( ); })}
{!sel &&
Sélectionne un devis pour voir ses lignes et agir dessus
} {sel && { fetchList(); }} onDeleted={() => { setSel(null); fetchList(); }}/>}
{/* Modal création */} {newOpen && ( setNewOpen(false)} onCreated={async (id) => { setNewOpen(false); // Re-fetch et ouvre directement le nouveau devis const r = await fetch(`${API()}/api/odoo/quotes?limit=300`).then(x => x.json()).catch(() => null); if (r?.quotes) { setList(r.quotes); const created = r.quotes.find(q => q.id === id); if (created) setSel(created); } else { fetchList(); } }} /> )} )}
); } // ══════════════════════════════════════════════════════════════════════════ // DevisAE — système natif Discovery (billing/invoices?type=proforma) // Ancienne implémentation /api/devis + DevisAEDetail + NewDevisAEModal // supprimées — remplacées par DevisAEContent v2 + DevisBuilderModal ci-dessous // ══════════════════════════════════════════════════════════════════════════ function _DevisAEContentDeprecated() { const API = () => (window.AE_API && window.AE_API.BASE) || ''; const [list, setList] = useState([]); const [loading, setLoading] = useState(true); const [sel, setSel] = useState(null); const [q, setQ] = useState(''); const [filterState, setFilterState] = useState('all'); const [newOpen, setNewOpen] = useState(false); const fetchList = () => { setLoading(true); fetch(`${API()}/api/devis?limit=300`).then(r => r.json()) .then(d => setList(d?.devis || [])) .catch(() => setList([])) .finally(() => setLoading(false)); }; useEffect(fetchList, []); const stats = useMemo(() => ({ total: list.length, draft: list.filter(d => d.state === 'draft').length, sent: list.filter(d => d.state === 'sent').length, accepted: list.filter(d => d.state === 'accepted').length, signed: list.filter(d => d.state === 'signed').length, cancelled: list.filter(d => d.state === 'cancelled').length, amountSigned: list.filter(d => d.state === 'signed').reduce((s, d) => s + Number(d.totalTtc || 0), 0), amountAll: list.reduce((s, d) => s + Number(d.totalTtc || 0), 0), }), [list]); const filtered = useMemo(() => { let l = list; if (filterState !== 'all') l = l.filter(d => d.state === filterState); if (q.trim()) { const n = q.trim().toLowerCase(); l = l.filter(d => (d.reference || '').toLowerCase().includes(n) || (d.clientName || '').toLowerCase().includes(n) || (d.notes || '').toLowerCase().includes(n)); } return l; }, [list, q, filterState]); return ( <>
{stats.total} devis · {stats.draft} brouillons · {stats.signed} signés } onClick={() => setNewOpen(true)}>Nouveau devis AE
{[ { k: 'all', l: `Tous (${stats.total})` }, { k: 'draft', l: `Brouillons (${stats.draft})` }, { k: 'sent', l: `Envoyés (${stats.sent})` }, { k: 'accepted', l: `Acceptés (${stats.accepted})` }, { k: 'signed', l: `Signés (${stats.signed})` }, { k: 'cancelled', l: `Annulés (${stats.cancelled})` }, ].map(f => ( ))} setQ(e.target.value)} placeholder="Rechercher devis, client…" style={{ padding: '5px 10px', fontSize: 12, border: '1px solid var(--line-2)', borderRadius: 4, background: 'var(--paper)', minWidth: 240 }}/>
{loading &&
Chargement…
} {!loading && filtered.length === 0 &&
Aucun devis. Créez-en un avec « Nouveau devis AE ».
} {filtered.map(d => { const meta = AE_STATE_META[d.state] || AE_STATE_META.draft; return ( ); })}
{!sel &&
Sélectionne un devis pour voir ses lignes et actions
} {sel && { setSel(null); fetchList(); }}/>}
{newOpen && setNewOpen(false)} onCreated={async (newId) => { setNewOpen(false); // Re-fetch et ouvre directement le nouveau devis AE const r = await fetch(`${API()}/api/devis?limit=300`).then(x => x.json()).catch(() => null); if (r?.devis) { setList(r.devis); const created = r.devis.find(d => d.id === newId); if (created) setSel(created); } else { fetchList(); } }}/>} ); } // ────────────────────────────────────────────────────────────────────────── // DevisAEDetail — détail devis natif avec actions state + édition lignes // ────────────────────────────────────────────────────────────────────────── function _DevisAEDetailDeprecated({ devisId, onChanged, onDeleted }) { const API = () => (window.AE_API && window.AE_API.BASE) || ''; const [d, setD] = useState(null); const [loading, setLoading] = useState(true); const [acting, setActing] = useState(null); const [msg, setMsg] = useState(null); const [editLines, setEditLines] = useState(false); const [draftLines, setDraftLines] = useState([]); const fetchDetail = () => { setLoading(true); fetch(`${API()}/api/devis/${devisId}`).then(r => r.json()) .then(r => { setD(r?.devis || null); setDraftLines(r?.devis?.lines || []); }) .finally(() => setLoading(false)); }; useEffect(fetchDetail, [devisId]); const doTransition = async (path) => { if (path !== 'send' && !window.confirm(`Confirmer la transition « ${path} » ?`)) return; setActing(path); setMsg(null); try { const r = await fetch(`${API()}/api/devis/${devisId}/${path}`, { method: 'POST' }).then(r => r.json()); if (r?.error) throw new Error(r.error); setMsg(`✓ ${path}`); fetchDetail(); onChanged && onChanged(); } catch (e) { setMsg(`⚠ ${e.message}`); } finally { setActing(null); setTimeout(() => setMsg(null), 3000); } }; const doDelete = async () => { if (!window.confirm(`Supprimer définitivement ${d?.reference} ?`)) return; setActing('delete'); setMsg(null); try { const r = await fetch(`${API()}/api/devis/${devisId}`, { method: 'DELETE' }).then(r => r.json()); if (r?.error) throw new Error(r.error); onDeleted && onDeleted(); } catch (e) { setMsg(`⚠ ${e.message}`); setActing(null); } }; const saveLines = async () => { setActing('savelines'); setMsg(null); try { const r = await fetch(`${API()}/api/devis/${devisId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ lines: draftLines }), }).then(r => r.json()); if (r?.error) throw new Error(r.error); setEditLines(false); fetchDetail(); onChanged && onChanged(); setMsg('✓ Lignes enregistrées'); } catch (e) { setMsg(`⚠ ${e.message}`); } finally { setActing(null); setTimeout(() => setMsg(null), 3000); } }; if (loading) return
Chargement…
; if (!d) return
Devis introuvable.
; const meta = AE_STATE_META[d.state] || AE_STATE_META.draft; const isLocked = d.state === 'signed'; const lines = editLines ? draftLines : (d.lines || []); const liveTotals = useMemo(() => { let ht = 0, tva = 0; lines.forEach(l => { const sub = (Number(l.qty) || 0) * (Number(l.unitPrice) || 0) * (1 - (Number(l.discount) || 0) / 100); ht += sub; tva += sub * (Number(l.vatRate) || 0) / 100; }); return { ht, tva, ttc: ht + tva }; }, [lines]); const updLine = (i, patch) => setDraftLines(ls => ls.map((l, j) => j === i ? { ...l, ...patch } : l)); const addLine = () => setDraftLines(ls => [...ls, { description: '', qty: 1, unitPrice: 0, vatRate: 20, discount: 0 }]); const rmLine = (i) => setDraftLines(ls => ls.filter((_, j) => j !== i)); return ( <>
📄 {d.reference} {meta.label}
{d.clientName || '—'} · {fmtDate(d.dateOrder)} · validité {fmtDate(d.validityDate)}
{!isLocked && (
{d.state === 'draft' && } {(d.state === 'sent' || d.state === 'draft') && } {(d.state === 'accepted' || d.state === 'sent') && } {(d.state === 'sent' || d.state === 'cancelled') && } {d.state !== 'cancelled' && } 📄 PDF
)}
{msg &&
{msg}
} {/* Totaux */}
Total HT
{fmtEur2(liveTotals.ht)}
TVA
{fmtEur2(liveTotals.tva)}
Total TTC
{fmtEur2(liveTotals.ttc)}
{/* Lignes */}
Lignes ({lines.length})
{!isLocked && !editLines && } {editLines && <> }
Désignation
Qté
PU HT
TVA%
Rem%
Total HT
{lines.length === 0 &&
Aucune ligne.
} {lines.map((l, i) => { const sub = (Number(l.qty) || 0) * (Number(l.unitPrice) || 0) * (1 - (Number(l.discount) || 0) / 100); const inp = { padding: '3px 6px', fontSize: 11, border: '1px solid var(--line-2)', borderRadius: 3, background: 'var(--paper-2)', textAlign: 'right', boxSizing: 'border-box', width: '100%' }; return (
{editLines ? updLine(i, { description: e.target.value })} placeholder="Désignation…" style={{ ...inp, textAlign: 'left' }}/> :
{l.description || '—'}
} {editLines ? updLine(i, { qty: Number(e.target.value) })} style={inp}/> :
{l.qty}
} {editLines ? updLine(i, { unitPrice: Number(e.target.value) })} style={inp}/> :
{fmtEur2(l.unitPrice)}
} {editLines ? updLine(i, { vatRate: Number(e.target.value) })} style={inp}/> :
{l.vatRate}%
} {editLines ? updLine(i, { discount: Number(e.target.value) })} style={inp}/> :
{l.discount || 0}%
}
{fmtEur2(sub)}
{editLines ? :
}
); })}
{d.notes &&
Notes
{d.notes}
} {/* Chatter natif */} {window.ChatterPanel && } ); } // ────────────────────────────────────────────────────────────────────────── // NewDevisAEModal — DÉPRÉCIÉ (remplacé par DevisBuilderModal) // ────────────────────────────────────────────────────────────────────────── function _NewDevisAEModalDeprecated({ onClose, onCreated }) { const API = () => (window.AE_API && window.AE_API.BASE) || ''; const [pickedClient, setPickedClient] = useState(null); const [pickerOpen, setPickerOpen] = useState(false); const [validityDate, setValidityDate] = useState(''); const [notes, setNotes] = useState(''); const [lines, setLines] = useState([{ description: '', qty: 1, unitPrice: 0, vatRate: 20, discount: 0 }]); const [productQuery, setProductQuery] = useState(''); const [productResults, setProductResults] = useState([]); const [busy, setBusy] = useState(false); const [error, setError] = useState(null); // Search produits catalogue Discovery (EPREL + seeds + manuels) useEffect(() => { if (!productQuery.trim()) { setProductResults([]); return; } const t = setTimeout(() => { fetch(`${API()}/api/products?q=${encodeURIComponent(productQuery)}&limit=8`).then(r => r.json()) .then(d => setProductResults(d?.products || d || [])) .catch(() => setProductResults([])); }, 250); return () => clearTimeout(t); }, [productQuery]); const totals = useMemo(() => { let ht = 0, tva = 0; lines.forEach(l => { const sub = (Number(l.qty) || 0) * (Number(l.unitPrice) || 0) * (1 - (Number(l.discount) || 0) / 100); ht += sub; tva += sub * (Number(l.vatRate) || 0) / 100; }); return { ht, tva, ttc: ht + tva }; }, [lines]); const addLine = (preset) => setLines(ls => [...ls, preset || { description: '', qty: 1, unitPrice: 0, vatRate: 20, discount: 0 }]); const updLine = (i, patch) => setLines(ls => ls.map((l, j) => j === i ? { ...l, ...patch } : l)); const rmLine = (i) => setLines(ls => ls.filter((_, j) => j !== i)); const useProduct = (p) => { addLine({ productId: p.id, description: `${p.brand || ''} ${p.model || p.name || ''}`.trim() || p.name, qty: 1, unitPrice: Number(p.price_ht || p.list_price || 0), vatRate: 20, discount: 0 }); setProductQuery(''); setProductResults([]); }; const submit = async () => { setBusy(true); setError(null); try { const body = { contactId: pickedClient?.source !== 'odoo' ? pickedClient?.id : null, organizationId: pickedClient?.organizationId || null, clientName: pickedClient?.name || null, clientEmail: pickedClient?.email || null, validityDate: validityDate || null, notes: notes || null, lines, }; const r = await fetch(`${API()}/api/devis`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }).then(r => r.json()); if (r?.error) throw new Error(r.error); onCreated && onCreated(r.devis?.id); } catch (e) { setError(e.message); } finally { setBusy(false); } }; const inp = { padding: '6px 8px', fontSize: 12, border: '1px solid var(--line-2)', borderRadius: 4, background: 'var(--paper)', boxSizing: 'border-box', width: '100%' }; return (
📄 Nouveau devis Audits Énergies
{/* Client */}
Client
{pickedClient ?
{pickedClient.name} {pickedClient.email || ''} · {pickedClient.source === 'odoo' ? 'Odoo' : 'AE'} #{pickedClient.id}
: window.ClientPicker ? : setPickedClient({ name: e.target.value })} style={inp}/>}
{/* Date validité + recherche produit */}
Validité
setValidityDate(e.target.value)} style={inp}/>
Ajouter un produit du catalogue
setProductQuery(e.target.value)} placeholder="Rechercher PAC, panneau, batterie…" style={inp}/> {productResults.length > 0 && (
{productResults.map(p => ( ))}
)}
{/* Lignes */}
Lignes ({lines.length})
Désignation
Qté
PU HT
TVA%
Rem%
Total HT
{lines.map((l, i) => { const sub = (Number(l.qty) || 0) * (Number(l.unitPrice) || 0) * (1 - (Number(l.discount) || 0) / 100); const cell = { padding: '4px 6px', fontSize: 11, border: '1px solid var(--line-2)', borderRadius: 3, background: 'var(--paper-2)', textAlign: 'right', boxSizing: 'border-box', width: '100%' }; return (
updLine(i, { description: e.target.value })} placeholder="Désignation…" style={{ ...cell, textAlign: 'left' }}/> updLine(i, { qty: Number(e.target.value) })} style={cell}/> updLine(i, { unitPrice: Number(e.target.value) })} style={cell}/> updLine(i, { vatRate: Number(e.target.value) })} style={cell}/> updLine(i, { discount: Number(e.target.value) })} style={cell}/>
{fmtEur2(sub)}
); })}
{/* Totaux + notes */}