/* ============================================================ CALENDARIO — visite commerciali, stile Teams/Outlook. Desktop: vista Mese e Settimana con drag&drop. Mobile: vista Mese (compatta) e Giorno. Commerciale vede le sue; admin/backoffice tutte + filtro. Ogni visita collegata a un'opportunità. Promemoria configurabile. ============================================================ */ const GIORNI = ['Lun','Mar','Mer','Gio','Ven','Sab','Dom']; const MESI = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno','Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre']; // helper date const startOfDay = (d) => { const x=new Date(d); x.setHours(0,0,0,0); return x; }; const sameDay = (a,b) => startOfDay(a).getTime()===startOfDay(b).getTime(); const addDays = (d,n) => { const x=new Date(d); x.setDate(x.getDate()+n); return x; }; const startOfWeek = (d) => { const x=startOfDay(d); const g=(x.getDay()+6)%7; return addDays(x,-g); }; // lunedì const startOfMonth = (d) => { const x=startOfDay(d); x.setDate(1); return x; }; const ymd = (d) => { const x=new Date(d); return x.getFullYear()+'-'+String(x.getMonth()+1).padStart(2,'0')+'-'+String(x.getDate()).padStart(2,'0'); }; // ora attuale nel fuso italiano (Europe/Rome) const nowItaly = () => { const s = new Date().toLocaleString('en-US', { timeZone:'Europe/Rome' }); return new Date(s); }; // colore stabile per commerciale (per distinguerli nel calendario manager) const COMM_COLORS = ['#c0392b','#2980b9','#27ae60','#8e44ad','#d68910','#16a085','#c2185b','#5d6d7e']; const commColor = (id) => { if(!id) return '#7f8c8d'; let h=0; const s=String(id); for(let i=0;i>>0; return COMM_COLORS[h%COMM_COLORS.length]; }; // solo il primo nome (per risparmiare spazio nelle celle strette) const firstName = (full) => { if(!full||full==='—') return full; return String(full).trim().split(/\s+/)[0]; }; function Calendario({ role, currentUser, users, clienti, opportunities, stages, bookings, onOpenOpportunity, toast }) { const vp = useViewport(); const isManager = role==='admin' || role==='backoffice'; const [visits, setVisits] = useState([]); const [loading, setLoading] = useState(true); const [editing, setEditing] = useState(undefined); const [commFilter, setCommFilter] = useState('all'); const [showReminderPref, setShowReminderPref] = useState(false); const [cursor, setCursor] = useState(startOfDay(new Date())); // data di riferimento const [mode, setMode] = useState(vp.isMobile ? 'month' : 'month'); // month | week | day const [selectedDay, setSelectedDay] = useState(startOfDay(new Date())); const [dragVisit, setDragVisit] = useState(null); const load = async () => { setLoading(true); try { setVisits(await window.DataAPI.listVisits() || []); } catch(e){ console.error(e); } finally { setLoading(false); } }; useEffect(()=>{ load(); }, []); useEffect(()=>{ window.__calToast = toast; return ()=>{ delete window.__calToast; }; }, [toast]); const commName = (id) => (users||[]).find(u=>u.id===id)?.nome || '—'; let shown = visits.slice(); if (isManager && commFilter!=='all') shown = shown.filter(v=>v.commerciale_id===commFilter); const visitsOn = (day) => shown.filter(v => sameDay(new Date(v.data_visita), day)) .sort((a,b)=> new Date(a.data_visita)-new Date(b.data_visita)); // salvataggio (create/update) const saveVisit = async (v) => { // controllo conflitto: stesso commerciale, orari sovrapposti const s = new Date(v.data_visita).getTime(); const e = s + (v.durata_min||30)*60000; const conflict = visits.some(x => { if (x.id===v.id) return false; if (x.commerciale_id !== v.commerciale_id) return false; if (x.stato==='annullata') return false; const xs = new Date(x.data_visita).getTime(); const xe = xs + (x.durata_min||30)*60000; return s < xe && e > xs; }); if (conflict) { toast('Conflitto: questo commerciale ha già una visita in quell\'orario'); return; } try { const saved = await window.DataAPI.saveVisit(v); if (!v.id && saved) { window.LogAPI?.logEvent('visit.scheduled', { entity_type:'visit', entity_id: saved.id, title:'Visita programmata', description:`${saved.cliente} · ${new Date(saved.data_visita).toLocaleDateString('it-IT')}`, metadata:{ cliente: saved.cliente, commerciale_id: saved.commerciale_id, data_visita: saved.data_visita }, }); } toast(v.id?'Visita aggiornata':'Visita programmata'); setEditing(undefined); load(); } catch(e){ console.error('saveVisit', e); toast('Errore: '+(e?.message||'')); } }; const removeVisit = async (v) => { try { await window.DataAPI.deleteVisit(v.id); toast('Visita eliminata'); setEditing(undefined); load(); } catch(e){ console.error(e); toast('Errore'); } }; // sposta visita a nuovo giorno (drag&drop) mantenendo l'ora const moveVisitToDay = async (visit, day) => { const old = new Date(visit.data_visita); const nd = new Date(day); nd.setHours(old.getHours(), old.getMinutes(), 0, 0); if (sameDay(old, nd)) return; setVisits(prev => prev.map(v => v.id===visit.id ? { ...v, data_visita: nd.toISOString() } : v)); try { await window.DataAPI.saveVisit({ ...visit, data_visita: nd.toISOString() }); toast('Visita spostata'); } catch(e){ console.error(e); toast('Errore spostamento'); load(); } }; // sposta visita a giorno+ora+minuti (week view, granularità 15min) const moveVisitToSlot = async (visit, day, hour, minute=0) => { const nd = new Date(day); nd.setHours(hour, minute, 0, 0); setVisits(prev => prev.map(v => v.id===visit.id ? { ...v, data_visita: nd.toISOString() } : v)); try { await window.DataAPI.saveVisit({ ...visit, data_visita: nd.toISOString() }); toast('Visita spostata'); } catch(e){ console.error(e); toast('Errore spostamento'); load(); } }; // navigazione const prev = () => setCursor(c => mode==='month' ? startOfMonth(addDays(startOfMonth(c),-1)) : mode==='week' ? addDays(c,-7) : addDays(c,-1)); const next = () => setCursor(c => mode==='month' ? startOfMonth(addDays(startOfMonth(c),32)) : mode==='week' ? addDays(c,7) : addDays(c,1)); const goToday = () => { const t=startOfDay(new Date()); setCursor(t); setSelectedDay(t); }; const title = () => { if (mode==='month') return `${MESI[cursor.getMonth()]} ${cursor.getFullYear()}`; if (mode==='week') { const s=startOfWeek(cursor), e=addDays(s,6); return `${s.getDate()} ${MESI[s.getMonth()].slice(0,3)} – ${e.getDate()} ${MESI[e.getMonth()].slice(0,3)} ${e.getFullYear()}`; } return cursor.toLocaleDateString('it-IT',{weekday:'long',day:'numeric',month:'long'}); }; const openNewAt = (day, hour, minute=0) => { const d = new Date(day); if (hour!=null) d.setHours(hour,minute,0,0); else d.setHours(9,0,0,0); setEditing({ _prefillDate: d }); }; const modes = vp.isMobile ? [['month','Mese'],['day','Giorno']] : [['month','Mese'],['week','Settimana']]; return (
{/* header */}

Calendario

setShowReminderPref(true)}>{vp.isMobile?'':'Promemoria'} openNewAt(selectedDay)}>{vp.isMobile?'':'Nuova visita'}
{/* nav */}
{title()}
{/* mode toggle */}
{modes.map(([m,label]) => ( ))}
{isManager && (
)}
{/* body */}
{loading ?
Caricamento…
: mode==='month' ? : mode==='week' ? : }
{editing !== undefined && ( setEditing(undefined)} onSave={saveVisit} onDelete={removeVisit} /> )} {showReminderPref && setShowReminderPref(false)} toast={toast} />}
); } const navBtn = { width:34, height:34, borderRadius:'var(--r-md)', border:'1.5px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--ink-2)', background:'var(--surface)' }; /* ---------- VISTA MESE ---------- */ function MonthView({ cursor, vp, visitsOn, commName, isManager, selectedDay, setSelectedDay, onEditVisit, onNewAt, dragVisit, setDragVisit, moveVisitToDay, onOpenOpportunity, opportunities }) { const first = startOfWeek(startOfMonth(cursor)); const weeks = []; let d = first; for (let w=0; w<6; w++) { const row=[]; for(let i=0;i<7;i++){ row.push(d); d=addDays(d,1); } weeks.push(row); } const inMonth = (day) => day.getMonth()===cursor.getMonth(); const today = startOfDay(new Date()); const [overDay, setOverDay] = useState(null); if (vp.isMobile) { // mobile: griglia compatta con puntini, tap giorno → lista sotto const dayVisits = visitsOn(selectedDay); return (
{GIORNI.map(g=>
{g}
)}
{weeks.flat().map((day,i)=>{ const vs = visitsOn(day); const sel = sameDay(day,selectedDay); const isToday = sameDay(day,today); const isPast = startOfDay(day) < today; return ( ); })}
{/* lista giorno selezionato */}
{selectedDay.toLocaleDateString('it-IT',{weekday:'long',day:'numeric',month:'long'})}
{dayVisits.length===0 ? ( ) : (
{dayVisits.map(v=>onEditVisit(v)} full />)}
)}
); } // desktop: griglia mese con drag&drop const todayMonth = startOfDay(new Date()); return (
{GIORNI.map(g=>
{g}
)}
{weeks.map((week,wi)=>(
{week.map((day,di)=>{ const vs = visitsOn(day); const isToday = sameDay(day,todayMonth); const isOver = overDay && sameDay(overDay,day); const isPast = startOfDay(day) < todayMonth; const outMonth = !inMonth(day); return (
{ e.preventDefault(); if(!overDay||!sameDay(overDay,day)) setOverDay(startOfDay(day)); }} onDrop={(e)=>{ e.preventDefault(); if(dragVisit) moveVisitToDay(dragVisit, day); setDragVisit(null); setOverDay(null); }} onDoubleClick={()=>onNewAt(day)} style={{ borderRight: di<6?'1px solid var(--line-2)':'none', padding:'5px 5px 3px', minHeight:0, display:'flex', flexDirection:'column', gap:3, background: isOver?'var(--red-tint)':isToday?'rgba(192,57,43,0.04)':outMonth?'var(--surface-2)':'transparent', opacity: outMonth?0.5:isPast?0.72:1, cursor:'default', overflow:'hidden' }}>
{isToday && Oggi} {day.getDate()}
{vs.slice(0,3).map(v=>{ const done = v.stato==='completata'; const annull = v.stato==='annullata'; const col = isManager ? commColor(v.commerciale_id) : 'var(--red)'; return (
setDragVisit(v)} onDragEnd={()=>{setDragVisit(null);setOverDay(null);}} onClick={(e)=>{ e.stopPropagation(); onEditVisit(v); }} title={isManager && v.commerciale_id ? `${v.cliente} · ${commName(v.commerciale_id)}` : v.cliente} style={{ display:'flex', alignItems:'center', gap:5, fontSize:11, fontWeight:700, padding:'2px 6px 2px 5px', borderRadius:5, cursor:'grab', background: done?'var(--line-2)':'var(--surface)', border:'1px solid var(--line)', borderLeft:'3px solid '+(done?'var(--ink-4)':col), whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', opacity: (dragVisit&&dragVisit.id===v.id)?0.4:(annull?0.6:1), textDecoration: annull?'line-through':'none' }}> {new Date(v.data_visita).toLocaleTimeString('it-IT',{hour:'2-digit',minute:'2-digit'})} {v.cliente} {isManager && v.commerciale_id && ( {firstName(commName(v.commerciale_id))} )}
); })} {vs.length>3 &&
+{vs.length-3} altre
}
); })}
))}
); } /* ---------- VISTA SETTIMANA ---------- */ function WeekView({ cursor, visitsOn, commName, isManager, onEditVisit, onNewAt, dragVisit, setDragVisit, moveVisitToSlot, allVisits }) { const start = startOfWeek(cursor); const days = Array.from({length:7},(_,i)=>addDays(start,i)); const HOUR_H = 72; // più alta: 18px per quarto d'ora const QUARTER_H = HOUR_H/4; const H_START = 7, H_END = 20; const hours = Array.from({length:H_END-H_START},(_,i)=>i+H_START); const today = startOfDay(new Date()); const [now, setNow] = useState(nowItaly()); const [dropHint, setDropHint] = useState(null); // { day, minutes } posizione durante il drag useEffect(()=>{ const t=setInterval(()=>setNow(nowItaly()), 60000); return ()=>clearInterval(t); }, []); const yOf = (date) => { const d=new Date(date); return (d.getHours()-H_START)*HOUR_H + (d.getMinutes()/60)*HOUR_H; }; const nowInRange = now.getHours()>=H_START && now.getHours() { const rect = colEl.getBoundingClientRect(); const y = e.clientY - rect.top; const totalMin = Math.max(0, Math.min((H_END-H_START)*60 - 15, (y/HOUR_H)*60)); const snapped = Math.round(totalMin/15)*15; return snapped; // minuti dall'inizio (H_START) }; const minToTime = (min) => { const h=H_START+Math.floor(min/60); const m=min%60; return { h, m }; }; // verifica conflitto: stesso commerciale, stesso giorno, orari sovrapposti const hasConflict = (visit, day, startMin, durMin=60) => { const s = new Date(day); s.setHours(H_START,0,0,0); s.setMinutes(s.getMinutes()+startMin); const e = new Date(s.getTime()+durMin*60000); return (allVisits||[]).some(v => { if (v.id===visit.id) return false; if (v.commerciale_id !== visit.commerciale_id) return false; if (v.stato==='annullata') return false; const vs = new Date(v.data_visita); const ve = new Date(vs.getTime()+(v.durata_min||30)*60000); return s < ve && e > vs; // sovrapposizione }); }; const handleDrop = (e, day, colEl) => { e.preventDefault(); if (!dragVisit) { setDropHint(null); return; } const min = minutesFromY(e, colEl); const dur = dragVisit.durata_min || 30; if (hasConflict(dragVisit, day, min, dur)) { setDropHint(null); setDragVisit(null); window.__calToast && window.__calToast('Conflitto: il commerciale ha già una visita in quell\'orario'); return; } const { h, m } = minToTime(min); moveVisitToSlot(dragVisit, day, h, m); setDropHint(null); setDragVisit(null); }; return (
{/* header giorni */}
{days.map((d,i)=>{ const isToday=sameDay(d,today); const isPast=startOfDay(d)
{GIORNI[i]}
{d.getDate()}
); })}
{/* griglia orari */}
{/* colonna orari */}
{hours.map(h=>(
{String(h).padStart(2,'0')}:00
))}
{/* colonne giorni */} {days.map((d,di)=>{ const isToday=sameDay(d,today); const isPast=startOfDay(d){ if(el) el.__isCol=true; }} onDragOver={(e)=>{ e.preventDefault(); const min=minutesFromY(e, e.currentTarget); setDropHint({ day:d, minutes:min }); }} onDragLeave={(e)=>{ if(e.currentTarget===e.target) setDropHint(null); }} onDrop={(e)=>handleDrop(e, d, e.currentTarget)} onDoubleClick={(e)=>{ const min=minutesFromY(e, e.currentTarget); const {h,m}=minToTime(min); onNewAt(d,h,m); }} style={{ position:'relative', borderLeft:'1px solid var(--line-2)', background: isToday?'rgba(192,57,43,0.03)':'transparent', height:hours.length*HOUR_H }}> {/* righe ore + quarti */} {hours.map((h,hi)=>(
{/* linee quarti (sottili) */}
))} {/* guida tratteggiata dove cadrà l'evento (snap 15min) */} {showHint && (
{String(minToTime(dropHint.minutes).h).padStart(2,'0')}:{String(minToTime(dropHint.minutes).m).padStart(2,'0')}
)} {/* eventi posizionati (con affiancamento) */} {positioned.map(({ v, col, cols })=>{ const top = yOf(v.data_visita); const dur = v.durata_min || 30; const height = Math.max(QUARTER_H-2, (dur/60)*HOUR_H - 2); const done = v.stato==='completata'; const annull = v.stato==='annullata'; const color = isManager ? commColor(v.commerciale_id) : 'var(--red)'; const widthPct = 100/cols; const compact = height < 42; // blocco basso (es. 30 min) → tutto su una riga const ora = new Date(v.data_visita).toLocaleTimeString('it-IT',{hour:'2-digit',minute:'2-digit'}); const commLabel = isManager && v.commerciale_id ? commName(v.commerciale_id) : null; return (
setDragVisit(v)} onDragEnd={()=>{setDragVisit(null);setDropHint(null);}} onClick={(e)=>{ e.stopPropagation(); onEditVisit(v); }} title={`${ora} · ${v.cliente}${v.titolo?' · '+v.titolo:''}${commLabel?' · '+commLabel:''}`} style={{ position:'absolute', top, left:`calc(${col*widthPct}% + 2px)`, width:`calc(${widthPct}% - 4px)`, height, zIndex:3, cursor:'grab', background: done?'var(--line-2)':annull?'var(--surface-2)':'var(--surface)', borderLeft:'3px solid '+(done?'var(--ink-4)':color), border:'1px solid var(--line)', borderLeftWidth:3, borderRadius:6, boxShadow:'var(--sh-1)', padding: compact?'2px 5px':'3px 6px', overflow:'hidden', opacity: (dragVisit&&dragVisit.id===v.id)?0.35:(annull?0.6:1), textDecoration: annull?'line-through':'none', display:'flex', flexDirection:'column', justifyContent: compact?'center':'flex-start' }}> {compact ? ( /* riga unica: pallino comm + orario + cliente + nome comm */
{commLabel && } {ora} {v.cliente} {commLabel && · {commLabel}}
) : ( <>
{ora} {v.cliente}
{height>52 &&
{v.titolo||'Visita'}
} {commLabel && (
{commLabel}
)} )}
); })} {/* linea "adesso" */} {isToday && nowInRange && (
)}
); })}
); } // affianca in colonne gli eventi che si sovrappongono temporalmente function layoutVisits(visits) { const sorted = visits.slice().sort((a,b)=>new Date(a.data_visita)-new Date(b.data_visita)); const result = []; // trova gruppi di sovrapposizione let cluster = []; let clusterEnd = null; const flush = () => { if (!cluster.length) return; const cols = cluster.length; cluster.forEach((v,idx)=>result.push({ v, col:idx, cols })); cluster = []; clusterEnd = null; }; for (const v of sorted) { const s = new Date(v.data_visita).getTime(); const e = s + (v.durata_min||30)*60000; if (clusterEnd!==null && s < clusterEnd) { cluster.push(v); clusterEnd = Math.max(clusterEnd, e); } else { flush(); cluster=[v]; clusterEnd=e; } } flush(); return result; } /* ---------- VISTA GIORNO (mobile) ---------- */ function DayView({ day, visitsOn, commName, isManager, onEditVisit, onNewAt }) { const H_START=7, H_END=20, HOUR_H=52; const hours = Array.from({length:H_END-H_START},(_,i)=>i+H_START); const vs = visitsOn(day); const today = startOfDay(new Date()); const isToday = sameDay(day, today); const [now, setNow] = useState(nowItaly()); useEffect(()=>{ const t=setInterval(()=>setNow(nowItaly()),60000); return ()=>clearInterval(t); },[]); const yOf = (date)=>{ const d=new Date(date); return (d.getHours()-H_START)*HOUR_H + (d.getMinutes()/60)*HOUR_H; }; const nowInRange = now.getHours()>=H_START && now.getHours() {hours.map(h=>{ const slot = vs.filter(v=>new Date(v.data_visita).getHours()===h); return (
slot.length===0 && onNewAt(day,h)} style={{ display:'flex', gap:10, padding:'6px 12px', borderTop:'1px solid var(--line-2)', minHeight:HOUR_H }}>
{String(h).padStart(2,'0')}:00
{slot.map(v=>onEditVisit(v)} full />)}
); })} {isToday && nowInRange && (
)}
); } function VisitPill({ v, commName, isManager, onClick, full }) { const d = new Date(v.data_visita); const done = v.stato==='completata'; const annull = v.stato==='annullata'; const col = isManager ? commColor(v.commerciale_id) : 'var(--red)'; return ( ); } /* ---------- MODAL crea/modifica visita ---------- */ function VisitModal({ visit, prefillDate, prefillCliente, prefillOppId, role, currentUser, users, clienti, opportunities, stages, bookings, onClose, onSave, onDelete }) { const isNew = !visit; const isManager = role==='admin' || role==='backoffice'; const bookingsForOpp = (o) => (bookings||[]).filter(b => (o.bookingIds||[]).includes(b.id)); const initDate = visit?.data_visita ? new Date(visit.data_visita) : (prefillDate || new Date()); const [clienteName, setClienteName] = useState(visit?.cliente || prefillCliente?.nome || ''); const [clienteId, setClienteId] = useState(visit?.cliente_id || prefillCliente?.id || null); const [oppId, setOppId] = useState(visit?.opportunity_id || prefillOppId || ''); const [commId, setCommId] = useState(visit?.commerciale_id || currentUser?.id || ''); const [dataVisita, setDataVisita] = useState(new Date(initDate.getTime()-initDate.getTimezoneOffset()*60000).toISOString().slice(0,16)); const [titolo, setTitolo] = useState(visit?.titolo || ''); const [durata, setDurata] = useState(visit?.durata_min || 30); const [note, setNote] = useState(visit?.note || ''); const [stato, setStato] = useState(visit?.stato || 'programmata'); const [esito, setEsito] = useState(visit?.esito || ''); const [results, setResults] = useState([]); const [showRes, setShowRes] = useState(false); const timer = useRef(null); const clienteOpps = (opportunities||[]).filter(o => o.id===oppId || ( // includi sempre quella preselezionata (o.esito||'aperta')==='aperta' && ((clienteId && o.cliente_id===clienteId) || (clienteName.trim() && (o.cliente||'').toLowerCase()===clienteName.trim().toLowerCase()))) ); const onClienteChange = (val) => { setClienteName(val); setClienteId(null); setOppId(''); if (!val.trim() || val.trim().length<2) { setResults([]); setShowRes(false); return; } setShowRes(true); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(async ()=>{ try { setResults(await window.DataAPI.searchClienti(val)||[]); } catch(e){ setResults([]); } }, 280); }; const pickCliente = (c) => { setClienteName(c.ragione_sociale); setClienteId(c.id); setResults([]); setShowRes(false); }; const valid = clienteName.trim().length>=2 && dataVisita; const submit = () => { if (!valid) return; onSave({ ...(visit||{}), id: visit?.id, cliente: clienteName.trim(), cliente_id: clienteId || null, opportunity_id: oppId || null, commerciale_id: commId || currentUser?.id || null, data_visita: new Date(dataVisita).toISOString(), durata_min: Math.max(30, durata||30), titolo: titolo.trim() || null, note: note.trim() || null, stato, esito: esito.trim() || null, created_by: visit?.created_by || currentUser?.id || null, }); }; return (
onClienteChange(e.target.value)} placeholder="Cerca cliente…" style={inputStyle} autoFocus={isNew} /> {showRes && results.length>0 && (
{results.map(c=>)}
)}
{clienteName.trim() && clienteOpps.length===0 &&
Nessuna opportunità aperta per questo cliente
} {oppId && (() => { // riepilogo dell'opportunità selezionata (macchine collegate) per confermare la scelta const o = clienteOpps.find(x=>x.id===oppId); if (!o) return null; const machineLabels = (bookingsForOpp(o)||[]).map(b=>b.prodLabel).filter(Boolean); if (machineLabels.length===0) return
Nessuna macchina collegata a questa opportunità
; return
Macchine: {machineLabels.join(', ')}
; })()} setDataVisita(e.target.value)} style={inputStyle} />
setTitolo(e.target.value)} placeholder="es. Sopralluogo, presentazione…" style={inputStyle} /> {isManager && (
)}