// Brand-accurate offer document — auto-paginating så korta avsnitt får dela sida function OfferPreview({ offer }) { const sub = offer.lines.reduce((s,l) => s + l.qty*l.price, 0); const disc = sub * (offer.discount || 0) / 100; const net = sub - disc; const vat = net * 0.25; const total = net + vat; const term = offer.term || 48; const monthly = net/term; const mode = offer.pricingMode || 'kontant'; const renderBody = (text) => { if (!text) return null; const blocks = text.split(/\n\n+/); return blocks.map((blk, i) => { const lines = blk.split('\n'); const isList = lines.every(l => /^\s*[•\-*]/.test(l)); if (isList) return ( ); return

{blk}

; }); }; const groups = offer.lines.reduce((g, l) => { (g[l.cat||'Övrigt'] ||= []).push(l); return g; }, {}); // Sortera om så Tjänster → Kostnad → Finansiering alltid följer direkt efter Produkter const ORDER = ['summary','need','solution','products','services','cost','finance','support','about','terms','close']; const orderKey = (s) => { if (s.isProductList) return ORDER.indexOf('products'); if (s.isServiceList) return ORDER.indexOf('services'); if (s.kind === 'cost') return ORDER.indexOf('cost'); const idx = ORDER.indexOf(s.kind); return idx >= 0 ? idx : 999; // okända/egna avsnitt behåller sin plats sist }; const rawSections = [...(offer.sections || [])].map((s, i) => ({s, i})) .sort((a, b) => { const ka = orderKey(a.s), kb = orderKey(b.s); if (ka !== kb) return ka - kb; return a.i - b.i; }) .map(x => x.s); // Säkerställ att Kostnadssammanställning (Steg 3) alltid kommer med — annars hamnar pris/totaler aldrig i offerten const hasCost = rawSections.some(s => s.kind === 'cost'); const sections = hasCost ? rawSections : (() => { const arr = [...rawSections]; // Lägg in Kostnadssammanställning EFTER tjänster (om finns), annars efter produkter const servicesIdx = arr.findIndex(s => s.isServiceList); const productsIdx = arr.findIndex(s => s.isProductList); const anchorIdx = servicesIdx >= 0 ? servicesIdx : productsIdx; const insertIdx = anchorIdx >= 0 ? anchorIdx + 1 : arr.length; arr.splice(insertIdx, 0, { id:'auto-cost', kind:'cost', title:'Kostnadssammanställning', body:'', isProductList:false, isServiceList:false, _auto:true, }); return arr; })(); const services = offer.services || []; const monthlyServiceTotal = services.reduce((s,l) => s + (l.qty||0)*(l.price||0), 0); // Auto‑paginate: gruppera korta avsnitt på samma sida (estimera höjd) const PAGE_HEIGHT = 920; // px tillgängligt const estimateHeight = (s) => { if (s.isProductList) { // Produkter med kategori‑rubriker + radtotaler + sammanfattningsbox const catCount = Object.keys(groups).length || 1; const lineCount = Object.values(groups).flat().length; return 110 + catCount*30 + lineCount*44 + 180; } if (s.isServiceList) return 110 + services.length * 44 + 120; if (s.kind === 'cost') return 380 + (services.length>0 ? 80 + services.length*24 : 0); const txt = s.body || ''; const lines = Math.ceil(txt.length / 70) + (txt.match(/\n/g)||[]).length; return 110 + lines * 24; // titel + textrader (med marginal under) }; const pages = []; let cur = []; let curH = 0; for (const s of sections) { const h = estimateHeight(s); // Tunga avsnitt (produkter, tjänster, kostnad) får alltid egen sida när möjligt const isHeavy = s.isProductList || s.isServiceList || s.kind === 'cost'; const prevIsHeavy = cur.length > 0 && ( cur[cur.length-1].isProductList || cur[cur.length-1].isServiceList || cur[cur.length-1].kind === 'cost' ); const wouldOverflow = curH + h > PAGE_HEIGHT && cur.length > 0; // Bryt sida före ett tungt avsnitt om föregående var TEXT (men låt produkter→tjänster→kostnad blir tight block) const heavyAfterText = isHeavy && cur.length > 0 && !prevIsHeavy && curH > 280; if (wouldOverflow || heavyAfterText) { pages.push(cur); cur = []; curH = 0; } cur.push(s); curH += h; } if (cur.length) pages.push(cur); // Post-process: undvik att enstaka korta textavsnitt (typ Avslutning) blir ensamma på sista sidan if (pages.length >= 2) { const last = pages[pages.length - 1]; const prev = pages[pages.length - 2]; const isLight = (s) => !s.isProductList && !s.isServiceList && s.kind !== 'cost'; const lastH = last.reduce((h,s)=>h+estimateHeight(s),0); const prevH = prev.reduce((h,s)=>h+estimateHeight(s),0); if (last.length <= 2 && last.every(isLight) && lastH < 360 && prevH + lastH < PAGE_HEIGHT) { prev.push(...last); pages.pop(); } } const totalPages = 1 + pages.length; let pn = 0; const next = () => ++pn; return (
{/* Coral accent band */}
{/* Top: logo + meta */}
ULAB
Offert
#{offer.number}
{offer.date}
{/* Hero block */}
Make IT easy

{offer.subject || 'Vi är din trygga\nhelhetsleverantör.'}

Ett förslag framtaget för
{offer.customer || '—'} {offer.contact && Att: {offer.contact}}
{/* Three value pillars */}
{[ ['Personlig kontakt', 'Våra medarbetare kombinerar flera kompetenser och tar gärna ansvarar för att ditt kontor fungerar som det ska. Vi kan tekniken som vi säljer och levererar. Just därför gör vi vad vi kan för att hitta lösningar som fungerar bäst för din arbetsplats.'], ['Hela IT‑ansvaret', 'Nätverk, server, säkerhet, telefoni och arbetsplats — på ett avtal.'], ['Trygghet i drift', 'Övervakning, backup och säkerhet som är aktiv dygnet runt.'], ].map(([t, b]) => (
{t}
{b}
))}
{/* Spacer pushes footer down */}
{/* Footer block: salesperson + dates */}
Din kontaktperson på Ulab IT Partner
{offer.salesperson || 'Adam Bjarneteg'}
{offer.salesphone || '0767 – 72 15 21'}
{offer.salesemail || 'adam.bjarneteg@ulabitpartner.se'}
Offertens giltighet
{offer.valid || '—'}
Skapad {offer.date}
ULAB IT Partner AB · Borås & Örby
{/* Bottom coral band */}
{pages.map((sectionsOnPage, pi) => ( !s.isProductList && !s.isServiceList && s.kind !== 'cost') && sectionsOnPage.reduce((h,s)=>h+estimateHeight(s),0) < 760}> {sectionsOnPage.map((s, si) => (

{s.title}

{s.isProductList ? ( <> {Object.entries(groups).map(([cat, lines]) => (
{cat}
{lines.map(l => (
{l.name || '—'} {l.qty} {l.unit} {fmtKr(l.price)} {fmtKr(l.qty*l.price)}
{l.desc &&
{l.desc}
}
))}
))}
{disc>0 && }
Komplett kostnadssammanställning återfinns under "Kostnadssammanställning".
) : s.kind === 'cost' ? ( ) : s.isServiceList ? ( <> {(offer.services||[]).length===0 &&
Inga tjänster angivna.
} {(offer.services||[]).map(l => (
{l.name||'—'} {l.qty} {l.unit} {fmtKr(l.price)} {fmtKr(l.qty*l.price)}/{l.unit}
{l.desc &&
{l.desc}
}
))} {(offer.services||[]).length>0 && (
s+l.qty*l.price,0))}/>
)} ) : renderBody(s.body)}
))} ))}
); } function Page({children, n, total, customer, subject, hideHeader, noPad, center}) { return (
{!hideHeader && (
{customer || '—'}{subject ? ` · ${subject}` : ''} Sida {n} av {total}
)}
{children}
{!hideHeader && (
ulabitpartner.se · 020 – 10 45 80 ULAB Borås · ULAB Örby
)}
); } function CostSummary({ offer, sub, disc, net, vat, total, monthly, mode, term, services, monthlyServiceTotal, body }) { // Speglar TotalsPanel i editorn (steg 3) exakt — samma fält, samma ordning. return (
{body &&
{body}
}
{disc>0 && }
{mode==='hyra' && term>0 && (
≈ {fmtKr(net/term)} / mån i {term} mån
)} {mode==='bada' && term>0 && (
Kontant: {fmtKr(total)}
eller hyra: {fmtKr(net/term)}/mån i {term} mån
)} {services.length>0 && (
Månadskostnader
{services.map(l => (
{l.name || '—'}{l.qty>1 && × {l.qty}} {fmtKr((l.qty||0)*(l.price||0))}/{l.unit||'mån'}
))}
)}
Alla priser anges exklusive moms där inget annat anges. Frakt och eventuell resa enligt avtal.
); } function PRow({label, v, big}) { return (
{label}{v}
); } window.OfferPreview = OfferPreview;