import {RecoveryEntry} from '../integration/password-recovery.jsx'; import {CloudApp} from '../integration/cloud-ui.jsx'; export {CloudApp}; import React,{useEffect,useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {LayoutDashboard,Wallet,ArrowDownLeft,ArrowUpRight,ArrowLeftRight,Plus,ChevronLeft,ChevronRight,ChevronDown,Check,X,Search,Download,Upload,Settings,Repeat,SlidersHorizontal,Home,Heart,User,Zap,ShoppingCart,Car,Coffee,Shield,MoreHorizontal,CreditCard,CalendarDays,ArrowRight,Trash2,Pencil,Info,CheckCircle2,Layers,Menu,HelpCircle,Monitor,Coins,TrendingUp,FileText,Archive,ArchiveRestore} from 'lucide-react'; import {CATEGORIES,TYPES,uid,euro,monthLabel,today,monthEnd,shiftMonth,categoryName,budgetKey,isScope,blankState,demoState,balances,reserves,cardBatches,budgetRows,metrics,generateRecurring,assertState,quarterOf,quarterLabel,activeAccounts,primaryAccount,budgetMonth,syncVat,accountDeletionReason,deleteAccount,archiveAccount,getCategories,expenseCategories,incomeCategories,defaultCategory,ensureCategories,saveCategory,toggleCategory,deleteCategory,categoryDeletionReason,movementInScope,transferDirection,recurringReview,applyRecurringGeneration,cardMonthOverview,monthlyMovements,cardDebitDescription} from './core.mjs'; const KEY='quadra-budget-local-v3';const LEGACY_KEYS=['vetro-budget-local-v2','vetro-budget-local-v1']; const icons={home:Home,heart:Heart,user:User,zap:Zap,cart:ShoppingCart,car:Car,coffee:Coffee,shield:Shield,dots:MoreHorizontal}; const AREAS={personal:'Personale',family:'Familiare',all:'Tutto'}; const NAV=[['overview','Panoramica',LayoutDashboard],['budget','Budget mensile',SlidersHorizontal],['transactions','Movimenti',ArrowLeftRight],['accounts','Conti e carte',Wallet],['recurring','Ricorrenze',Repeat],['settings','Impostazioni',Settings]]; const money=v=>{const text=String(v).trim().replace(/\s|€/g,'');const normalized=text.includes(',')?text.replace(/\./g,'').replace(',','.'):/^-?\d{1,3}(\.\d{3})+$/.test(text)?text.replace(/\./g,''):text;const n=Number(normalized);if(!Number.isFinite(n))throw Error('Inserisci un importo valido.');return Math.round(n*100)}; const inputMoney=n=>((n||0)/100).toFixed(2).replace('.',','); const dateLabel=d=>new Intl.DateTimeFormat('it-IT',{day:'numeric',month:'short',timeZone:'UTC'}).format(new Date(d+'T12:00:00Z')); const initial=()=>{try{const raw=localStorage.getItem(KEY)||LEGACY_KEYS.map(k=>localStorage.getItem(k)).find(Boolean);if(raw)return assertState(syncVat(ensureCategories(assertState(JSON.parse(raw)))))}catch{}return demoState()}; function IconBadge({category,size=20,s}){const c=getCategories(s).find(c=>c.id===category)||getCategories(s).find(c=>c.id==='altro'),I=icons[c.icon]||MoreHorizontal;return } function Pill({children,tone='neutral'}){return {children}} function Empty({title='Qui è tutto pronto per iniziare',children}){return
{title}
{children||'Aggiungi il primo movimento: i riepiloghi si aggiorneranno da soli.'}
} function Field({label,children,hint,wide=false}){return {label}{children}{hint&&{hint}}} function Modal({title,subtitle,children,onClose}){const ref=useRef();useEffect(()=>{const previous=document.activeElement;ref.current?.focus();const h=e=>{if(e.key==='Escape')onClose();if(e.key==='Tab'){const a=[...ref.current.querySelectorAll('button,input,select,textarea,[tabindex="0"]')].filter(x=>!x.disabled);const first=a[0],last=a[a.length-1];if(e.shiftKey&&document.activeElement===first){e.preventDefault();last?.focus()}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first?.focus()}}};document.addEventListener('keydown',h);document.body.style.overflow='hidden';return()=>{document.removeEventListener('keydown',h);document.body.style.overflow='';previous?.focus()}},[]);return
{if(e.target===e.currentTarget)onClose()}}>
{title}
{subtitle&&
{subtitle}
}
{children}
} function TransactionForm({s,familyOnly=false,item,month,onSave,onClose,mode='transaction'}){ const seed=item||{id:uid(),type:'expense',date:month===today().slice(0,7)?today():month+'-01',amount:0,area:'family',account:primaryAccount(s,'family')?.id||primaryAccount(s,'personal')?.id||'',category:defaultCategory(s,'expense'),description:'',status:'planned',day:1,interval:1,start:month,active:true}; const [f,setF]=useState({...seed,amount:seed.amount?inputMoney(seed.amount):'',release:seed.release?inputMoney(seed.release):''}),[error,setError]=useState(''); const set=(k,v)=>setF(p=>({...p,[k]:v}));const recurring=mode==='recurring'; const accounts=s.accounts.filter(a=>!a._external&&(f.type==='expense'||a.kind!=='card')&&(!a.archived||a.id===item?.account)); function save(e){e.preventDefault();try{const a=money(f.amount);if(a<=0)throw Error('L’importo deve essere maggiore di zero.');if(!f.description.trim())throw Error('Inserisci una descrizione.');const next={...f,amount:a,description:f.description.trim(),release:f.release?money(f.release):0};if(!recurring&&f.status==='actual'&&f.date>today())throw Error('Una data futura deve restare prevista fino all’effettivo pagamento o incasso.');if(f.type==='card_payment'&&f.status!=='actual')throw Error('Il saldo carta è già previsto automaticamente. Registra qui soltanto il pagamento avvenuto.');if(f.type==='card_payment'){const other={...s,transactions:s.transactions.filter(t=>t.id!==f.id)};const batch=cardBatches(other,f.date).find(b=>b.card===f.card&&b.month===f.settlement);if(!batch||a>batch.remaining)throw Error('Il pagamento supera gli acquisti confermati ancora da saldare.');}if(f.type==='reserve'&&f.area!=='personal')throw Error('Scegli l’area personale per un accantonamento fiscale.');if(recurring){next.day=Number(f.day);next.interval=Number(f.interval);assertState({...s,recurring:[...s.recurring.filter(r=>r.id!==next.id),next]})}else{assertState({...s,transactions:[...s.transactions.filter(t=>t.id!==next.id),next]});if(next.release>(reserves({...s,transactions:s.transactions.filter(t=>t.id!==next.id)},next.date)[next.account]||0))throw Error('L’accantonamento utilizzato supera la somma disponibile su questo conto.');}onSave(next)}catch(err){setError(err.message)}} return
set('amount',e.target.value)}/> set('description',e.target.value)}/> a.id===f.account)?.kind==='card'?'Addebito previsto il 15 del mese successivo.':null}> {f.type==='transfer'&&} {['expense','income'].includes(f.type)&&} {!recurring?<>a.id===f.account)?.openingDate||s.startDate} value={f.date} onChange={e=>set('date',e.target.value)}/>:<>set('start',e.target.value)}/>set('day',e.target.value)}/>set('end',e.target.value)}/>} {f.type==='expense'&&s.accounts.find(a=>a.id===f.account)?.kind!=='card'&&f.area==='personal'&&set('release',e.target.value)}/>}
{f.type==='transfer'&&
Un unico giroconto aggiorna entrambi i conti: uscita dall’origine ed entrata sulla destinazione. Finché è previsto aggiorna soltanto la previsione.
}{f.type==='reserve'&&
Riduce lo spendibile, senza movimentare il saldo del conto.
}{f.area==='family'&&s.accounts.find(a=>a.id===f.account)?.area==='personal'&&f.type==='expense'&&
Spesa familiare pagata da te, senza rimborso.
}{error&&
{error}
}
} function InvoiceForm({s,item,month,onSave,onClose}){ const date=item?.date||(month===today().slice(0,7)?today():month+'-01'),q=item?.quarter||quarterOf(date),existing=s.transactions.find(t=>t.vatQuarter===q); const [f,setF]=useState({id:item?.id||uid(),date,amount:item?inputMoney(item.amount):'',vat:item?inputMoney(item.vat):'',quarter:q,vatDue:existing?.date||item?.vatDue||'',account:item?.account||primaryAccount(s,'personal')?.id||'',description:item?.description||'',category:item?.category||defaultCategory(s,'invoice'),status:item?.status||'actual'}),[error,setError]=useState(''); const settlement=s.transactions.find(t=>t.vatQuarter===f.quarter),choices=s.accounts.filter(a=>a.kind!=='card'&&a.area==='personal'&&(!a.archived||a.id===item?.account)); const set=(k,v)=>setF(p=>({...p,[k]:v})); const changeQuarter=q=>setF(p=>({...p,quarter:q,vatDue:s.transactions.find(t=>t.vatQuarter===q)?.date||''})); let net=0,vatValue=0;try{vatValue=money(f.vat);net=money(f.amount)-vatValue}catch{} return
{e.preventDefault();try{const amount=money(f.amount),vat=money(f.vat);if(amount<=0||vat<0||vat>amount)throw Error('L’IVA deve essere compresa tra zero e il totale incassato.');if(!f.description.trim())throw Error('Indica il riferimento della fattura.');if(vat>0&&!f.vatDue)throw Error('Scegli la data prevista del versamento trimestrale.');if(f.status==='actual'&&f.date>today())throw Error('Un incasso futuro deve restare previsto.');const next={...f,type:'invoice',area:'personal',category:f.category,amount,vat,vatDue:f.vatDue||f.date,description:f.description.trim()};assertState({...s,transactions:[...s.transactions.filter(t=>t.id!==next.id),next]});onSave(next)}catch(err){setError(err.message)}}}>
set('description',e.target.value)}/>set('amount',e.target.value)}/>set('vat',e.target.value)}/>
Netto disponibile dell’incasso{euro(net)}
set('date',e.target.value)}/>changeQuarter(e.target.value+'-Q'+f.quarter.slice(-1))}/>0} type="date" min={s.startDate} disabled={settlement?.status==='actual'} value={f.vatDue} onChange={e=>set('vatDue',e.target.value)}/>
L’IVA viene accantonata sul conto al momento dell’incasso. La somma alimenta un’unica previsione per trimestre: potrai correggerla in base alla liquidazione.
{settlement?.vatFinal&&
Questo trimestre ha già un importo definitivo: rimarrà invariato, anche se cambi le fatture.
}{error&&
{error}
}
} function VatForm({s,item,onSave,onClose}){ const [f,setF]=useState({...item,amount:inputMoney(item.amount)}),[error,setError]=useState('');const set=(k,v)=>setF(p=>({...p,[k]:v})); const total=s.transactions.filter(t=>t.type==='invoice'&&t.quarter===item.vatQuarter&&t.status==='actual'&&t.date<=today()).reduce((n,t)=>n+t.vat,0); return
{e.preventDefault();try{const amount=money(f.amount);if(amount<0)throw Error('L’importo non può essere negativo.');if(f.status==='actual'&&f.date>today())throw Error('Conferma il pagamento soltanto quando avviene, oppure correggi la data.');const next={...f,amount,vatFinal:f.status==='actual'||f.vatFinal};assertState({...s,transactions:s.transactions.map(t=>t.id===next.id?next:t)});onSave(next)}catch(err){setError(err.message)}}}>
Somma IVA inserita nelle fatture{euro(item.vatEstimated)}
Quota relativa a incassi confermati{euro(total)}
{set('amount',e.target.value);set('vatFinal',true)}}/>set('date',e.target.value)}/>set('vatFinal',e.target.checked)}/>Importo definitivo sulla base della liquidazione
Finché l’importo non è definitivo, si aggiorna con le fatture. Alla conferma del pagamento si chiude l’accantonamento IVA del trimestre; l’eventuale differenza torna disponibile.
{error&&
{error}
}
} function CategoryForm({s,item,kind='expense',onSave,onClose}){ const [f,setF]=useState(item||{id:'cat_'+uid().replace(/-/g,'_'),name:'',kind,color:'#438bc6',icon:kind==='income'?'user':'dots',archived:false}),[error,setError]=useState('');const set=(k,v)=>setF(p=>({...p,[k]:v})); const iconNames={home:'Casa',heart:'Cuore',user:'Persona',zap:'Energia',cart:'Carrello',car:'Auto',coffee:'Tempo libero',shield:'Scudo',dots:'Altro'}; return
{e.preventDefault();try{saveCategory(s,f);onSave({...f,name:f.name.trim()})}catch(err){setError(err.message)}}}>
set('name',e.target.value)}/>set('color',e.target.value)}/>
Icona
{Object.entries(iconNames).map(([id,label])=>{const I=icons[id];return })}
c.id!==f.id),f]}} category={f.id}/>
{f.name||'La tua categoria'}{f.kind==='income'?'Entrate':'Budget e spese'}
{error&&
{error}
}
Cambiare il nome aggiorna le viste, mantenendo movimenti e budget già collegati.
} function AccountForm({s,familyOnly=false,item,onSave,onClose}){const seed=item||{id:uid(),name:'',kind:'bank',area:familyOnly?'family':'personal',opening:0,openingDate:s.startDate,linked:primaryAccount(s,familyOnly?'family':'personal')?.id||activeAccounts(s).find(a=>a.kind==='bank'&&!a._external)?.id||'',openingDue:shiftMonth(s.startDate.slice(0,7),0)+'-15'};const [f,setF]=useState({...seed,opening:inputMoney(seed.opening)}),[error,setError]=useState('');const set=(k,v)=>setF(p=>({...p,[k]:v}));return
{e.preventDefault();try{if(!f.name.trim())throw Error('Inserisci il nome.');const next={...f,name:f.name.trim(),opening:money(f.opening)};assertState({...s,accounts:[...s.accounts.filter(a=>a.id!==next.id),next]});onSave(next)}catch(err){setError(err.message)}}}>
set('name',e.target.value)}/>set('opening',e.target.value)}/>set('openingDate',e.target.value)}/>{f.kind==='card'&&<>set('openingDue',e.target.value)}/>
I nuovi acquisti si sommano per mese e si addebitano il 15 del mese successivo.
}
{error&&
{error}
}
} export function App({initialPage='overview',initialData,initialMonth,initialScope='all',initialModal=null,familyOnly=false,cloudMode=false,onStateChange,validateChange}={}){ const [s,setS]=useState(initialData||initial),[page,setPage]=useState(initialPage),[scope,setScope]=useState(initialScope),[month,setMonth]=useState(initialMonth||today().slice(0,7)),[modal,setModal]=useState(initialModal),[toast,setToast]=useState(''),[feedback,setFeedback]=useState(null),[storageError,setStorageError]=useState(''),[search,setSearch]=useState(''),[statusFilter,setStatusFilter]=useState('all'),[menu,setMenu]=useState(false),[showArchived,setShowArchived]=useState(false);const fileRef=useRef(),timer=useRef(),lastSaved=useRef(''); useEffect(()=>{if(cloudMode){onStateChange?.(s);return;}try{localStorage.setItem(KEY,JSON.stringify(s));lastSaved.current=JSON.stringify(s);setStorageError('')}catch{setStorageError('Il browser non consente il salvataggio automatico. Esporta un backup prima di chiudere.')}},[s]); useEffect(()=>{if(cloudMode)return;const h=e=>{if(e.key===KEY&&e.newValue&&e.newValue!==lastSaved.current){try{setS(assertState(syncVat(ensureCategories(assertState(JSON.parse(e.newValue))))));notify('Dati aggiornati da un’altra finestra.')}catch{}}};window.addEventListener('storage',h);return()=>window.removeEventListener('storage',h)},[]); useEffect(()=>{let hovered=null;const clear=()=>{if(hovered){hovered.removeAttribute('data-glass-hover');hovered.style.removeProperty('--pointer-x');hovered.style.removeProperty('--pointer-y');hovered=null}};const track=e=>{if(!['mouse','pen'].includes(e.pointerType)||e.buttons!==0)return;const target=e.target instanceof Element?e.target.closest('button:not(:disabled)'):null;if(!target){clear();return;}if(hovered!==target){clear();hovered=target;hovered.setAttribute('data-glass-hover','true')}const rect=target.getBoundingClientRect();target.style.setProperty('--pointer-x',Math.max(0,Math.min(100,(e.clientX-rect.left)/Math.max(1,rect.width)*100))+'%');target.style.setProperty('--pointer-y',Math.max(0,Math.min(100,(e.clientY-rect.top)/Math.max(1,rect.height)*100))+'%')};const leave=e=>{if(hovered&&!hovered.contains(e.relatedTarget))clear()};document.addEventListener('pointerover',track);document.addEventListener('pointermove',track);document.addEventListener('pointerout',leave);document.addEventListener('pointerdown',clear);document.addEventListener('pointercancel',clear);window.addEventListener('blur',clear);return()=>{clear();document.removeEventListener('pointerover',track);document.removeEventListener('pointermove',track);document.removeEventListener('pointerout',leave);document.removeEventListener('pointerdown',clear);document.removeEventListener('pointercancel',clear);window.removeEventListener('blur',clear)}},[]); const notify=text=>{setToast(text);clearTimeout(timer.current);timer.current=setTimeout(()=>setToast(''),3600)}; const commit=next=>{try{const reconciled=syncVat(ensureCategories(next));assertState(reconciled);validateChange?.(reconciled);setS(reconciled);notify(cloudMode?'Modifica pronta: salvataggio automatico in corso.':'Salvato sul tuo dispositivo');return true}catch(e){notify(e.message);return false}}; const saveItem=(collection,item)=>{if(commit({...s,[collection]:s[collection].some(t=>t.id===item.id)?s[collection].map(t=>t.id===item.id?item:t):[...s[collection],item]}))setModal(null)}; const m=metrics(s,month,scope),monthTx=monthlyMovements(s,month,scope),selectedAccounts=s.accounts.filter(a=>isScope(a.area,scope)&&(!a.archived||showArchived)),pendingBatches=m.batches.filter(b=>b.remaining>0&&selectedAccounts.some(a=>a.id===b.account)),cardOverview=cardMonthOverview(s,month,scope); const go=p=>{setPage(p);setMenu(false);setSearch('');setFeedback(null)}; function newTx(type='expense',extra={}){setModal({kind:'transaction',item:{id:uid(),type,date:month===today().slice(0,7)?today():month+'-01',amount:0,area:scope==='personal'?'personal':'family',account:primaryAccount(s,scope==='personal'?'personal':'family')?.id||activeAccounts(s).find(a=>a.kind!=='card')?.id||'',category:defaultCategory(s,type),description:'',status:'planned',...extra}})} function editTx(t,confirm=false){if(familyOnly&&t._external){notify('Questo pagamento personale condiviso è modificabile da Carlo.');return;}if(t.autoCardDebit){settle(t.batch);return;}const kind=t.type==='invoice'?'invoice':t.vatQuarter?'vat':'transaction';setModal({kind,item:confirm?{...t,status:'actual',date:t.date>today()?today():t.date}:t})} function confirmTx(t){editTx(t,true)} function deleteTx(t){if(familyOnly&&t._external){notify('Questo pagamento personale condiviso è modificabile da Carlo.');return;}if(t.vatQuarter){notify('La liquidazione è generata dalle fatture. Puoi correggerla con la matita.');return;}if(window.confirm('Eliminare «'+t.description+'»?'))commit({...s,transactions:s.transactions.filter(x=>x.id!==t.id)})} function settle(b){const amount=Math.max(0,b.remaining-b.planned);if(!amount){notify('Conferma prima gli acquisti previsti della carta.');return;}setModal({kind:'transaction',item:{id:uid(),type:'card_payment',amount,area:s.accounts.find(a=>a.id===b.account).area,account:b.account,description:cardDebitDescription(b.month),category:'altro',date:b.due<=today()?b.due:today(),status:'actual',card:b.card,settlement:b.month}})} function exportBackup(){const blob=new Blob([JSON.stringify(s,null,2)],{type:'application/json'});downloadBlob(blob,'Quadra_backup_'+today()+'.json');notify('Backup esportato')} function downloadBlob(blob,name){const url=URL.createObjectURL(blob),a=document.createElement('a');a.href=url;a.download=name;document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000)} async function importBackup(e){const file=e.target.files?.[0];if(!file)return;try{if(file.size>15000000)throw Error('Il file è troppo grande.');const next=assertState(syncVat(ensureCategories(assertState(JSON.parse(await file.text())))));if(window.confirm('Ripristinare il backup? I dati attuali verranno sostituiti. Esporta prima una copia se vuoi conservarli.')){validateChange?.(next);setS(next);notify('Backup ripristinato')}}catch(err){notify(err.message)}e.target.value=''} function generate(){setModal({kind:'generate',month,scope})} function confirmGeneration(){try{const result=applyRecurringGeneration(familyOnly?{...s,recurring:s.recurring.filter(r=>!r._external)}:s,modal.month,modal.scope);if(familyOnly)result.state.recurring=s.recurring;if(!result.items.length){setModal({...modal,error:'Nessuna nuova ricorrenza da generare: consulta il riepilogo.'});return;}if(commit(result.state)){const text=result.items.length+' movimenti previsti creati per '+monthLabel(modal.month)+'. Li trovi in Movimenti → Previsti.';setModal(null);setFeedback({tone:'success',text});setPage('transactions');setStatusFilter('planned');notify(text);}}catch(err){setModal({...modal,error:err.message});notify(err.message)}} function startClean(){if(familyOnly){notify('Il ripristino dell’area condivisa è riservato a Carlo.');return;}if(window.confirm('Iniziare con i tuoi dati? Tutti i dati dimostrativi o inseriti saranno rimossi. Scarica prima un backup se necessario.')){setS(blankState());setPage('accounts');notify('Inserisci i saldi iniziali di settembre 2026')}} function copyBudget(){const prev=shiftMonth(month,-1),b={...s.budgets};for(const area of ['personal','family'])if(isScope(area,scope))for(const c of expenseCategories(s).filter(c=>!c.archived))b[budgetKey(month,area,c.id)]=s.budgets[budgetKey(prev,area,c.id)]||0;if(commit({...s,budgets:b}))notify('Budget copiato da '+monthLabel(prev))} function budgetChange(area,cat,value){try{const n=money(value);if(n<0)throw Error('Il budget non può essere negativo.');commit({...s,budgets:{...s.budgets,[budgetKey(month,area,cat)]:n}})}catch(e){notify(e.message)}} const topRows=m.rows.filter(r=>r.budget||r.actual||r.planned), pct=m.budget?Math.round(m.spent/m.budget*100):0; const filtered=monthTx.filter(t=>(statusFilter==='all'||t.status===statusFilter)&&((t.type==='card_payment'?cardDebitDescription(t.settlement):t.description)+' '+(s.accounts.find(a=>a.id===t.card)?.name||'')+' '+categoryName(t.category,s)+' '+s.accounts.find(a=>a.id===t.account)?.name+' '+(s.accounts.find(a=>a.id===t.to)?.name||'')).toLowerCase().includes(search.toLowerCase())).sort((a,b)=>b.date.localeCompare(a.date)); function saveCategoryItem(c){try{if(commit(saveCategory(s,c)))setModal(null)}catch(e){notify(e.message)}} function archiveCategory(c){try{commit(toggleCategory(s,c.id))}catch(e){notify(e.message)}} function removeCategory(c){const reason=categoryDeletionReason(s,c.id);if(reason){notify(reason);return;}if(window.confirm('Eliminare la categoria «'+c.name+'»?')){try{commit(deleteCategory(s,c.id))}catch(e){notify(e.message)}}} function categoryManager(){return
Gestione categorie
Le categorie di spesa sono condivise con il budget: aggiunte e rinomine si aggiornano insieme.
{['expense','income'].map(kind=>
{kind==='expense'?'Spese e budget':'Entrate'}
{getCategories(s).filter(c=>c.kind===kind).map(c=>
{c.name}{c.archived&&Archiviata}{['iva','income_invoice','income_other'].includes(c.id)&&Collegata alle funzioni di Quadra}
)}
)}
Le categorie archiviate restano nei dati esistenti e nei budget già compilati, ma non vengono proposte per nuove registrazioni.
} function forecastPanel(){const accounts=s.accounts.filter(a=>a.kind!=='card'&&(modal.accountId?a.id===modal.accountId:isScope(a.area,scope)));return setModal(null)}>
{accounts.map(a=>{const d=m.forecastBreakdown[a.id]||{startingBalance:0,income:0,expenses:0,transfersIn:0,transfersOut:0,cards:0,budget:0};return
{a.name}
Saldo effettivo al {dateLabel(m.cutoff)}{euro(d.startingBalance)}
{d.income>0&&
Incassi previsti fino a fine {monthLabel(month)}+{euro(d.income)}
}{d.transfersIn>0&&
Giroconti in entrata+{euro(d.transfersIn)}
}{d.expenses>0&&
Spese previste già elencate−{euro(d.expenses)}
}{d.transfersOut>0&&
Giroconti in uscita−{euro(d.transfersOut)}
}{d.cards>0&&
Addebiti delle carte ancora da saldare−{euro(d.cards)}
}
Budget residui cumulati fino al mese scelto−{euro(d.budget)}
Saldo previsto a fine {monthLabel(month)}{euro(m.forecastBalances[a.id]||0)}
})}
Il budget non ancora associato a una spesa è ipotizzato come uscita. Passare al mese successivo non lo restituisce al conto. I giroconti possono aumentare un singolo conto senza creare nuove entrate complessive.
} function generationPanel(){const selectedMonth=modal.month||month,selectedScope=modal.scope||scope,review=recurringReview(s,selectedMonth,selectedScope),count=review.filter(r=>r.eligible).length;return setModal(null)}>
{count} {count===1?'movimento da generare':'movimenti da generare'}
Verranno inseriti come previsti, da confermare quando avvengono.
{review.length?
{review.map(({rule:r,eligible,reason})=>
{r.description}{euro(r.amount)} · {s.accounts.find(a=>a.id===r.account)?.name}{eligible?'Pronta per questo mese':reason}
)}
:Crea prima una regola con importo, data iniziale e frequenza.}{!count&&review.length>0&&
Il comando è attivo: nessuna delle regole elencate è da generare nel mese selezionato. Le ricorrenze già presenti non vengono duplicate.
}{modal.error&&
{modal.error}
}
{selectedScope!=='all'&&}
} function saveInvoice(item){let transactions=s.transactions.some(t=>t.id===item.id)?s.transactions.map(t=>t.id===item.id?item:t):[...s.transactions,item];transactions=transactions.map(t=>t.vatQuarter===item.quarter&&t.status==='planned'?{...t,date:item.vatDue}:t);if(commit({...s,transactions}))setModal(null)} function removeAccount(a){const reason=accountDeletionReason(s,a.id);if(reason){notify(reason);return;}if(window.confirm('Eliminare definitivamente «'+a.name+'»? Il saldo iniziale verrà rimosso.')){try{commit(deleteAccount(s,a.id))}catch(e){notify(e.message)}}} function toggleArchive(a){try{const next=archiveAccount(s,a.id);if(a.archived||window.confirm('Archiviare «'+a.name+'»? Rimane nello storico e nei saldi, ma non sarà selezionabile per nuovi movimenti.'))commit(next)}catch(e){notify(e.message)}} function monthlyCardBudget(){const batches=cardMonthOverview(s,month,scope).current;if(!batches.length)return null;return
Addebiti sul conto · {monthLabel(month)}
Prospetto di cassa separato dal budget: questi pagamenti saldano acquisti già conteggiati nel mese dell’acquisto.
{euro(batches.reduce((n,b)=>n+b.total,0))}
{cardList(false,batches)}
} function vatPanel(){if(scope==='family')return null;const rows=s.transactions.filter(t=>t.vatQuarter).sort((a,b)=>a.date.localeCompare(b.date));if(!rows.length)return null;return
IVA trimestrale
Un’unica previsione per trimestre, da definire con la liquidazione.
{rows.map(t=>
{quarterLabel(t.vatQuarter)}{dateLabel(t.date)} · {s.accounts.find(a=>a.id===t.account)?.name} · stima fatture {euro(t.vatEstimated)}{t.status==='actual'?'Pagata':t.vatFinal?'Definitiva · da pagare':'Stima · da definire'}
{euro(t.amount)}
)}
} function txList(rows,limit){return
{rows.slice(0,limit||rows.length).map(t=>{const account=s.accounts.find(a=>a.id===t.account),direction=transferDirection(s,t,scope),incoming=t.type==='income'||t.type==='invoice'||(t.type==='transfer'&&direction==='in'),outgoing=t.type==='expense'||t.type==='card_payment'||(t.type==='transfer'&&direction==='out');return })}
Movimento Data Disponibilità Stato Importo
{t.type==='card_payment'?cardDebitDescription(t.settlement):t.description}{t.type==='card_payment'&&{s.accounts.find(a=>a.id===t.card)?.name} · {dateLabel(t.date)} · {account?.name}}{t.autoCardDebit?'Addebito automatico':TYPES[t.type]}{t.type==='invoice'?' · IVA '+euro(t.vat)+' · netto '+euro(t.amount-t.vat):''}{['expense','income'].includes(t.type)?' · '+categoryName(t.category,s):''} · {t.type==='transfer'?(direction==='out'?'Uscita '+AREAS[scope].toLowerCase():direction==='in'?'Entrata '+AREAS[scope].toLowerCase():'Trasferimento interno'):AREAS[t.area]}{t.type==='expense'&&t.area==='family'&&account?.area==='personal'?(familyOnly?' · pagata da Carlo':' · pagata da te'):''}{t.autoCardDebit&&<>−{euro(t.amount)}
{t.batch.planned>0&&Include {euro(t.batch.planned)} di acquisti ancora previsti.}}
{dateLabel(t.date)} {account?.kind==='card'?:} {account?.name}{account?.archived?' · archiviato':''}{t.type==='expense'&&account?.kind==='card'&&Budget {monthLabel(budgetMonth(s,t))} · addebito {dateLabel(shiftMonth(t.date.slice(0,7),1)+'-15')}}{t.type==='transfer'&&→ {s.accounts.find(a=>a.id===t.to)?.name}} {t.status==='actual'?'Confermato':'Previsto'} {incoming?'+':outgoing?'−':t.type==='transfer'?'↔ ':''}{euro(t.amount)} {!t.autoCardDebit&&
{t.status==='planned'&&}
}
{!rows.length&&}
} function cardDebitPanel(){const b=modal.batch,card=s.accounts.find(a=>a.id===b.card),bank=s.accounts.find(a=>a.id===b.account),confirmed=Math.max(0,b.remaining-b.planned);return setModal(null)}>
Data prevista dell’addebito{dateLabel(b.due)} {b.due.slice(0,4)}
Totale acquisti{euro(b.total)}
Pagamenti già registrati{euro(b.paid)}
{b.planned>0&&
Acquisti ancora previsti{euro(b.planned)}
}
Residuo da addebitare{euro(b.remaining)}
Composizione degli acquisti
{Object.entries(b.categories).map(([id,amount])=>
{categoryName(id,s)}{euro(amount)}
)}
Il riepilogo si aggiorna con gli acquisti e i pagamenti registrati. Il budget conserva le categorie originarie. {b.planned>0?'Puoi confermare solo la quota di acquisti già avvenuti ('+euro(confirmed)+').':''}
} function cardList(full=false,batchesOverride=null){const batches=batchesOverride||(full?cardBatches(s,monthEnd(month),true).filter(b=>b.remaining&&selectedAccounts.some(a=>a.id===b.account)):cardOverview.current);return
{batches.slice(0,full?100:3).map(b=>{const card=s.accounts.find(a=>a.id===b.card);return
{b.due.slice(8)}{dateLabel(b.due).split(' ').slice(1).join(' ')}
{card.name}{euro(full?b.remaining:b.total)}
{s.accounts.find(a=>a.id===b.account)?.name} · acquisti {b.month==='opening'?'iniziali':monthLabel(b.month)}
{Object.entries(b.categories).map(([id,n])=>{categoryName(id,s)} {euro(n)})}
{!full&&b.paid>0&&Pagati {euro(b.paid)} · da saldare {euro(b.remaining)}}{b.planned>0&&Inclusi {euro(b.planned)} di acquisti ancora previsti}{full&&b.remaining>b.planned&&}{full&&b.planned>0&&Gli acquisti ancora previsti restano esclusi dal pagamento fino alla conferma.}
})}{!batches.length&&Gli acquisti del mese precedente compariranno qui, raggruppati per categoria.}
} function contributionBox(){const family=primaryAccount(s,'family');const own=s.transactions.filter(t=>t.date.slice(0,7)===month&&t.type==='transfer'&&t.to===family?.id).reduce((n,t)=>n+t.amount,0),partner=s.transactions.filter(t=>t.date.slice(0,7)===month&&t.type==='income'&&t.account===family?.id).reduce((n,t)=>n+t.amount,0),familyForecast=m.forecast!==undefined?(metrics(s,month,'family').forecast):0;return
INSIEME, CON CHIAREZZA
Il mese della famiglia
Versamento Carlo{euro(own)}
Entrate familiari / Rossella{euro(partner)}
{familyForecast<0?'Fabbisogno da coprire':'Saldo familiare previsto'}{euro(Math.abs(familyForecast))}
Il tuo versamento è un giroconto. Le spese familiari pagate dal personale restano familiari, senza rimborso.
} return

{e.preventDefault();go('overview')}}>
QuadraBUDGET PERSONALE E FAMILIARE
Budget personale & famiglia
{NAV.map(([id,name,I])=>)}
Quadra · v0.12
{cloudMode?'Salvataggio automatico attivo.':'I tuoi dati su questo dispositivo.'}
Backup nelle Impostazioni.
{s.name.slice(0,1)}
{s.name}Spazio personale

{e.preventDefault();go('overview')}}>QuadraBudget personale e familiare
Il mio spazio{NAV.find(n=>n[0]===page)?.[1]}
{storageError?'Salvataggio da verificare':(cloudMode?'Sincronizzazione nella barra in alto':'Salvato sul dispositivo')}
{s.name.slice(0,1)}

{feedback&&
{feedback.text}
}
{page==='overview'?'Ciao '+s.name:'BUDGET PERSONALE & FAMILIARE'}
{page==='overview'?'Il tuo mese, in equilibrio.':NAV.find(n=>n[0]===page)?.[1]}
{page==='overview'?'Ciao '+s.name+'. Tutto quello che ti serve, in un colpo d’occhio.':page==='budget'?'Dai spazio alle tue priorità, prima di spendere.':page==='transactions'?'Previsioni e consuntivi, con importo e data sempre modificabili.':page==='accounts'?'Saldi, somme accantonate e prossimi addebiti.':page==='recurring'?'Le abitudini del tuo budget, senza registrazioni automatiche.':'Il tuo spazio, le tue regole.'}
{s.demo&&
Dati dimostrativi. Importi inventati per esplorare la dashboard.
}{storageError&&
{storageError}
}
{(familyOnly?['family']:['all','personal','family']).map(a=>)}
{monthLabel(month)}{if(e.target.value)setMonth(e.target.value)}}/>
{page==='overview'&&<>
Disponibilità spendibile
{euro(m.available)}
Saldo effettivo{euro(m.cash)}
Accantonamenti{euro(m.reserved)}
Carte in sospeso {euro(m.debt)} · già escluse dallo spendibile
Spesa attesa
{euro(m.expected)}
Consumi e budget residuo del mese
Confermate {euro(m.spent)}
Entrate confermate
{euro(m.income)}
Incassi effettivi del mese
Giroconti esclusi
Saldo fine mese
{euro(m.forecast)}
Saldo previsto dei conti
Prima degli accantonamenti

Budget del mese
Ogni spesa consuma il budget del suo mese, anche se pagata con carta.
Budget mensile{euro(m.budget)}
Spesa attesa{euro(m.expected)}
Consuntivo Previsto
{topRows.slice(0,7).map(r=>{const max=Math.max(r.budget,r.actual+r.planned,1);return
{r.name}{euro(r.actual)} / {euro(r.budget)}
{r.over>0&&{r.budget?'Oltre budget di ':'Budget da coprire: '}{euro(r.over)}}
})}{!topRows.length&&Imposta le categorie o aggiungi una spesa prevista.}
{euro(m.rows.reduce((n,r)=>n+r.unallocated,0))} di budget residuo{euro(m.planned)} previsti

Carte del mese
Addebito del 15 {monthLabel(month)} · acquisti del mese precedente.
Addebiti di {monthLabel(month)}{euro(cardOverview.total)}
{cardList(false,cardOverview.current)}{cardOverview.previousRemaining>0&&
Mesi precedenti da confermare{euro(cardOverview.previousRemaining)}
Queste somme non sono nuovi addebiti del mese selezionato.
{cardOverview.previous.map(b=>
{s.accounts.find(a=>a.id===b.card)?.name} · {dateLabel(b.due)}{euro(b.remaining)}
)}
}
{!familyOnly&&scope!=='family'&&vatPanel()}
Ultimi movimenti
Ogni piccola scelta, nel posto giusto.
{txList([...monthTx].sort((a,b)=>b.date.localeCompare(a.date)),5)}
{!familyOnly&&contributionBox()}
I saldi seguono il conto che paga. Le spese seguono l’area a cui appartengono. Situazione al {dateLabel(m.cutoff)}.
} {page==='budget'&&<>
Budget del mese{euro(m.budget)}
Spese confermate + previste{euro(m.spent+m.planned)}
Budget residuo dopo spese e previsioni{euro(m.rows.reduce((n,r)=>n+r.unallocated,0))}
Quanto vuoi destinare a ogni categoria?
Categorie identiche ai movimenti. Le spese con carta contano alla data dell’acquisto, gli addebiti successivi aggiornano solo il conto.
{scope!=='family'&&}{scope!=='personal'&&}{m.rows.map(r=>{['personal','family'].filter(a=>isScope(a,scope)).map(area=>)})}
Categoria Budget personale € Budget familiare € Consuntivo Previsto Budget residuo atteso
{r.name}{r.archived&&Archiviata}
budgetChange(area,r.id,e.target.value)} onKeyDown={e=>{if(e.key==='Enter')e.currentTarget.blur()}}/> {euro(r.actual)} {euro(r.planned)} r.budget?'negative':'positive')}>{euro(r.budget-r.actual-r.planned)}
Ogni nuova categoria di spesa compare anche qui, con budget iniziale zero. Le rinomine si applicano a entrambe le sezioni. Il saldo previsto considera separatamente gli addebiti delle carte e il budget residuo, ipotizzato sul conto principale dell’area.
Spese previste di {monthLabel(month)}
Conferma l’importo effettivo quando vengono pagate.
{txList(monthTx.filter(t=>t.type==='expense'&&t.status==='planned'))}{monthlyCardBudget()}{!familyOnly&&vatPanel()}
{!familyOnly&&scope!=='personal'&&contributionBox()}} {page==='transactions'&&
setSearch(e.target.value)}/>
{txList(filtered)}
Gli addebiti delle carte compaiono automaticamente il 15 del mese successivo. Confermali quando vengono pagati: il residuo previsto si aggiorna senza aggiungere una seconda spesa.
{filtered.length} movimenti nel meseSaldo carta e giroconti non sono spese aggiuntive.
} {page==='accounts'&&<>
Le tue disponibilità
setShowArchived(e.target.checked)}/>Mostra archiviati
{selectedAccounts.map(a=>{const b=cardBatches(s,m.cutoff).filter(b=>b.card===a.id),debt=b.reduce((n,b)=>n+b.remaining,0),reserved=m.reserved===undefined?0:(reserves(s,m.cutoff)[a.id]||0),allM=metrics(s,month,'all');return
{a.kind==='card'?:a.kind==='cash'?:}
{AREAS[a.area]} · {a.kind==='card'?'CARTA DI CREDITO':a.kind==='cash'?'CONTANTI':'CONTO CORRENTE'}
{a.name}{a.archived&&Archiviato}
{euro(a.kind==='card'?debt:(allM.cashBalances[a.id]||0))}{a.kind==='card'?'Acquisti in attesa di saldo':'Saldo al '+dateLabel(m.cutoff)}
{a.kind==='card'?<>
Conto collegato{s.accounts.find(x=>x.id===a.linked)?.name}
Addebito15 del mese successivo
:<>
Accantonamenti fiscali{euro(reserved)}
Saldo previsto fine mese{euro(allM.forecastBalances[a.id]||0)}
}
{a.kind!=='card'&&}{a.kind==='card'?'Debito':'Saldo'} iniziale {euro(a.opening)} al {dateLabel(a.openingDate)}
})}
Addebiti delle carte
Acquisti raggruppati per categoria, carta e mese. Il pagamento riduce il conto una sola volta.
{cardList(true)}
L’addebito è una previsione finché non registri l’effettivo pagamento. Nessun movimento bancario viene creato automaticamente.
} {page==='recurring'&&<>
Entrate e spese ricorrenti
Genera le previsioni per il mese selezionato; importo e data restano modificabili.
{s.recurring.filter(r=>movementInScope(s,r,scope)).map(r=>
{r.description}{TYPES[r.type]}{['expense','income'].includes(r.type)?' · '+categoryName(r.category,s):''} · {s.accounts.find(a=>a.id===r.account)?.name} · {AREAS[r.area]}Giorno {r.day} · {r.interval===1?'mensile':'ogni '+r.interval+' mesi'} · dal {monthLabel(r.start)}
{euro(r.amount)}
)}
{!s.recurring.filter(r=>movementInScope(s,r,scope)).length&&Aggiungi stipendio, compensi, abbonamenti o utenze.}
Generare più volte lo stesso mese non duplica i movimenti. Disattivare una regola non elimina quelli già creati.
Il budget e le ricorrenze lavorano insieme.
Una bolletta prevista da 120 € occupa 120 € del budget Utenze. Quando confermi il pagamento, la stessa voce passa al consuntivo.
} {page==='settings'&&
{categoryManager()}
Il tuo profilo
{if(e.target.value.trim())commit({...s,name:e.target.value.trim()})}}/>
Partenza da settembre 2026
I movimenti precedenti sono già inclusi nei saldi iniziali.
Carte: addebito il 15 del mese successivo
La data di acquisto resta nei movimenti; il budget comprende l’addebito nel mese successivo.
Backup e portabilità
{cloudMode?'Le modifiche vengono salvate automaticamente. Prima di chiudere controlla che nella barra in alto compaia Salvato nel cloud. In caso di rete assente resta una bozza sul dispositivo.':'I dati vengono salvati nel browser usato per aprire questo file. Il backup permette di recuperarli o spostarli in una nuova versione.'}
Conserva una copia prima di spostare il file, cambiare browser o cancellare i dati del browser.
Collaborazione e accesso remoto
Versione online
{cloudMode?'Carlo accede all’area personale e familiare. Rossella accede solo alla famiglia. I pagamenti personali condivisi sono modificabili da Carlo.':'Nella versione definitiva tu accederai a tutto, mentre Rossella potrà vedere e aggiornare solo l’area familiare.'}
{cloudMode?'Le autorizzazioni sono verificate dal database. Un nuovo accesso allo stesso account disconnette gli altri dispositivi. Carlo e Rossella possono restare collegati insieme. Usa Aggiorna dati per acquisire le modifiche dell’altro utente.':'Questa versione salva i dati solo nel browser: ogni dispositivo ha dati separati. Il filtro Familiare cambia la vista e non costituisce un permesso di accesso.'}
}
Quadra Budget personale & familiareVersione di prova · v0.10 • Importi in euro
{[['overview','Panoramica',Home],['budget','Budget',SlidersHorizontal],['transactions','Movimenti',ArrowLeftRight],['accounts','Conti',Wallet],['more','Altro',MoreHorizontal]].map(([id,label,I])=>)}
{modal?.kind==='add'&&setModal(null)}>
} {modal?.kind==='more'&&setModal(null)}>
} {modal?.kind==='transaction'&&saveItem('transactions',item)} onClose={()=>setModal(null)}/>} {modal?.kind==='recurring'&&saveItem('recurring',item)} onClose={()=>setModal(null)}/>} {modal?.kind==='invoice'&&setModal(null)}/>}{modal?.kind==='vat'&&saveItem('transactions',item)} onClose={()=>setModal(null)}/>} {modal?.kind==='forecast'&&forecastPanel()}{modal?.kind==='cardDebit'&&cardDebitPanel()} {modal?.kind==='generate'&&generationPanel()} {modal?.kind==='category'&&setModal(null)}/>} {modal?.kind==='account'&&saveItem('accounts',item)} onClose={()=>setModal(null)}/>} {modal?.kind==='help'&&setModal(null)}>
1. Parti dai conti
In Conti e carte imposta il saldo al 1° settembre 2026, prima dei movimenti di quel giorno. Una carta può avere un debito iniziale.
2. Dai un limite alle categorie
Nel Budget mensile imposta gli importi personali e familiari. Le singole spese previste sono comprese in questi importi.
3. Registra, poi conferma
Le previsioni e le ricorrenze non cambiano il saldo effettivo. Premi la spunta per confermare importo e data quando avvengono.
4. Le carte seguono due tempi
Una spesa con carta di settembre riduce subito il budget di settembre. Il 15 ottobre trovi l’addebito nei Movimenti: confermandolo aggiorni solo il conto, senza consumare di nuovo il budget di ottobre.
5. Incasso fattura e IVA
Usa Incasso fattura: inserisci totale ricevuto, IVA e trimestre, scegliendo la data prevista della liquidazione. L’IVA resta accantonata; puoi definire l’importo del versamento e confermare il pagamento dalla sezione IVA trimestrale.
6. Elimina o archivia conti
In Conti e carte trovi i comandi sotto ogni disponibilità. Elimina rimuove i conti senza collegamenti; Archivia li nasconde dalle nuove registrazioni e conserva lo storico.
7. Conserva il backup
Apri sempre il file con lo stesso browser, fuori dalla modalità in incognito. Prima di cambiare versione scarica il backup e ripristinalo nel nuovo file.
} {toast&&
{toast}
}
; } if(typeof document!=='undefined')createRoot(document.getElementById('root')).render();

Gestione categorie

{kind==='expense'?'Spese e budget':'Entrate'}

{a.name}

Addebiti sul conto · {monthLabel(month)}

IVA trimestrale

Composizione degli acquisti

Il mese della famiglia

{page==='overview'?'Il tuo mese, in equilibrio.':NAV.find(n=>n[0]===page)?.[1]}

Budget del mese

Carte del mese

Ultimi movimenti

Quanto vuoi destinare a ogni categoria?

Spese previste di {monthLabel(month)}

Le tue disponibilità

{a.name}{a.archived&&Archiviato}

Addebiti delle carte

Entrate e spese ricorrenti

Il budget e le ricorrenze lavorano insieme.

Il tuo profilo

Backup e portabilità

Collaborazione e accesso remoto

Dati di prova