// ======================================================== // Views: Översikt, Leads, Budget & Kanaler, Analys, Inställningar // ======================================================== const R = Recharts; const { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend, ReferenceLine, Cell, PieChart, Pie } = R; const COLOR_SE = "#1e5fa3"; const COLOR_NO = "#c83b3b"; const COLOR_ACCENT = "#2f6a5f"; // helpers ------------------------------------------------------ function getLeadsFor(market, period){ return getLeadsInRange(market, period.fromIso, period.toIso); } function getBudgetFor(market, period){ if(market === "BOTH"){ const b = getBudgetForResolvedPeriod(market, period); return { SE: b.SE, NO: b.NO, combined: b.combined }; } return getBudgetForResolvedPeriod(market, period); } function summarize(leads, budget, market){ const total = leads.length; const conv = leads.filter(l => l.status === "Konverterad").length; const intakt = leads.reduce((a,l)=> a + (l.ordervarde||0), 0); let ongoingTotal = 0, setupTotal = 0, monthlyBudgetTotal = 0; if(budget){ if(market === "BOTH"){ const c = budget.combined; ongoingTotal = c.ongoing; setupTotal = c.setup; monthlyBudgetTotal = c.monthlyBudget; } else { ongoingTotal = budget.ongoing; setupTotal = budget.setup; monthlyBudgetTotal = budget.monthlyBudget; } } // tracked leads = leads with attribution confidence Hög or Medel const tracked = leads.filter(l => l.attribution_confidence === "Hög" || l.attribution_confidence === "Medel").length; return { total, conv, convRate: total ? (conv/total)*100 : 0, intakt, tracked, trackedRate: total ? (tracked/total)*100 : 0, budget: ongoingTotal, setup: setupTotal, monthlyBudget: monthlyBudgetTotal, cpl: total ? ongoingTotal/total : 0, }; } function pctDelta(curr, prev){ if(prev === null || prev === undefined || prev === 0) return null; const diff = ((curr - prev) / Math.abs(prev)) * 100; return { text: `${diff >= 0 ? "+" : ""}${diff.toFixed(1).replace(".",",")} %`, dir: diff >= 0.5 ? "up" : diff <= -0.5 ? "down" : "flat", }; } // Compute a prev-period summary (using resolved.prev range) function summarizePrev(market, period){ const prevPeriod = { from: period.prev.from, to: period.prev.to, fromIso: period.prev.fromIso, toIso: period.prev.toIso, monthKeys: [], }; // Re-derive monthKeys for prev range let cursor = startOfMonth(period.prev.from); while(cursor <= period.prev.to){ prevPeriod.monthKeys.push(`${cursor.getFullYear()}-${cursor.getMonth()}`); cursor = new Date(cursor.getFullYear(), cursor.getMonth()+1, 1); } const leads = getLeadsInRange(market, period.prev.fromIso, period.prev.toIso); const budget = market === "BOTH" ? getBudgetForResolvedPeriod(market, prevPeriod) : getBudgetForResolvedPeriod(market, prevPeriod); return summarize(leads, budget, market); } // =============== ÖVERSIKT ==================================== function OversiktView({ market, period }){ const leads = getLeadsFor(market, period); const budget = getBudgetFor(market, period); const summary = summarize(leads, budget, market); const prevSummary = summarizePrev(market, period); // build daily series across [from, to] const dailySeries = useMemo(() => { const arr = []; let cursor = new Date(period.from); while(cursor <= period.to){ const ds = isoDate(cursor); if(market === "BOTH"){ const se = LEADS_DB[`${cursor.getFullYear()}-${cursor.getMonth()}`]?.SE?.filter(l => l.datum === ds).length || 0; const no = LEADS_DB[`${cursor.getFullYear()}-${cursor.getMonth()}`]?.NO?.filter(l => l.datum === ds).length || 0; arr.push({ day: ds, label: shortLabelForTick(cursor, period.days), SE: se, NO: no }); } else { const c = leads.filter(l => l.datum === ds).length; arr.push({ day: ds, label: shortLabelForTick(cursor, period.days), leads: c }); } cursor = addDays(cursor, 1); } return arr; }, [market, period, leads]); function shortLabelForTick(d, totalDays){ if(totalDays <= 31) return String(d.getDate()); return `${String(d.getDate()).padStart(2,"0")}/${MONTHS_SV[d.getMonth()].slice(0,3).toLowerCase()}`; } // by channel mini const byChannel = useMemo(() => { const map = {}; leads.forEach(l => { map[l.kanal] = (map[l.kanal]||0) + 1; }); return Object.entries(map).map(([k,v]) => ({ kanal:k, leads:v })).sort((a,b)=>b.leads-a.leads); }, [leads]); // recent leads const recent = useMemo(() => { return [...leads].sort((a,b) => (b.datum+b.tid).localeCompare(a.datum+a.tid)).slice(0, 6); }, [leads]); // tracking quality breakdown const trackingStats = useMemo(() => { const out = { total: leads.length, Hög: 0, Medel: 0, Låg: 0, Okänd: 0 }; leads.forEach(l => { out[l.attribution_confidence || "Okänd"] = (out[l.attribution_confidence || "Okänd"]||0) + 1; }); out.säkerProcent = out.total ? (out.Hög / out.total) * 100 : 0; return out; }, [leads]); return ( <> Exportera PDF + Ny lead } /> {/* Partial period banner */} {!period.isCalendarMonth && (
i Budget och CPL är beräknade på vald period ({period.days} dagar) — fasta retainers prorerade. Hel månadsbudget är {fmtNum(summary.monthlyBudget)} kr.
)} {/* KPI strip */}
{/* Chart + side */}
{market === "BOTH" ? ( }/> ) : ( }/> )}
{market === "BOTH" ? : }
{/* Trackingstatus + GA4 note */}
{trackingStats["Hög"]}
av {trackingStats.total} leads har säker attribution i vald period · {fmtPct(trackingStats.säkerProcent, 0)}
{/* progress bar */}
{["Hög","Medel","Låg","Okänd"].map(k => { const w = trackingStats.total ? (trackingStats[k]/trackingStats.total)*100 : 0; const color = k==="Hög"?"#3a8a5a":k==="Medel"?"#d6a44e":k==="Låg"?"#c25a5f":"#c4cad3"; return
; })}
HögMedelLågOkänd
i GA4 vs Fluent Forms

GA4 visar kanalstatistik, men varje enskilt lead behöver egen spårningsdata från Fluent Forms för säker attribution.

  • ·Lägg till hidden fields i Fluent Forms för first_landing_page
  • ·Skicka med utm_*, gclid, gbraid, wbraid
  • ·Behåll original document.referrer som hidden field
{/* Recent leads */} Visa alla →}>
{market==="BOTH" && } {recent.map(l => ( {market==="BOTH" && } ))}
Datum Källa Säkerhet Tjänst KontaktMarknadStatus Värde
{l.datum} · {l.tid} {l.tjanst} {l.kontakt}{}}/> {l.ordervarde ? fmtNum(l.ordervarde) : —}
); } function ChannelMix({ data }){ const max = Math.max(...data.map(d => d.leads), 1); return (
{data.map(d => (
{d.kanal} {d.leads}
))}
); } function TrackStatCell({ label, value, sub, tone }){ const tones = { ink: "bg-paper-50 border-paper-200 text-ink-900", good: "bg-accent-soft/60 border-accent/15 text-accent-ink", warn: "bg-amber-50 border-amber-200 text-amber-900", bad: "bg-rose-50 border-rose-200 text-rose-900", mute: "bg-paper-100 border-paper-200 text-ink-600", }; return (
{label}
{value}
{sub &&
{sub}
}
); } function CompareSEvsNO({ period }){ const seL = getLeadsInRange("SE", period.fromIso, period.toIso); const noL = getLeadsInRange("NO", period.fromIso, period.toIso); const seB = getBudgetForResolvedPeriod("SE", period); const noB = getBudgetForResolvedPeriod("NO", period); const seBT = seB.ongoing; const noBT = noB.ongoing; const rows = [ { label: "Leads", se: seL.length, no: noL.length, fmt: v=>fmtNum(v) }, { label: "Konvertering", se: seL.length ? (seL.filter(l=>l.status==="Konverterad").length/seL.length)*100 : 0, no: noL.length ? (noL.filter(l=>l.status==="Konverterad").length/noL.length)*100 : 0, fmt: v=>fmtPct(v) }, { label: "CPL", se: seL.length ? seBT/seL.length : 0, no: noL.length ? noBT/noL.length : 0, fmt: (v,m)=>fmtMoney(v, m) }, { label: "Intäkt", se: seL.reduce((a,l)=>a+(l.ordervarde||0),0), no: noL.reduce((a,l)=>a+(l.ordervarde||0),0), fmt:(v,m)=>fmtMoney(v,m) }, ]; return (
{rows.map(r => { const winner = r.label === "CPL" ? (r.se < r.no ? "SE" : "NO") : (r.se > r.no ? "SE" : "NO"); return (
{r.label}
{r.fmt(r.se, "SE")} {winner==="SE" && Bäst}
{r.fmt(r.no, "NO")} {winner==="NO" && Bäst}
); })}
); } // =============== LEADS =========================================== const EMPTY_FILTER = { kanal:"alla", tjanst:"alla", status:"alla", kalla:"alla", confidence:"alla", landning:"alla", form:"alla", sok:"" }; function filterIsEmpty(f){ return Object.keys(EMPTY_FILTER).every(k => f[k] === EMPTY_FILTER[k]); } function describeFilter(f){ const bits = []; if(f.kanal && f.kanal !== "alla") bits.push(f.kanal); if(f.tjanst && f.tjanst !== "alla") bits.push(f.tjanst); if(f.status && f.status !== "alla") bits.push(f.status); if(f.kalla && f.kalla !== "alla") bits.push(f.kalla); if(f.confidence && f.confidence !== "alla") bits.push("Säkerhet: "+f.confidence); if(f.landning && f.landning !== "alla") bits.push(f.landning); if(f.form && f.form !== "alla") bits.push("Formulär: "+f.form); if(f.sok) bits.push(`"${f.sok}"`); return bits.join(" · ") || "Inga aktiva filter"; } function loadPresets(userEmail){ try { const raw = localStorage.getItem(`easytull:filters:${userEmail}`); return raw ? JSON.parse(raw) : []; } catch(_) { return []; } } function savePresets(userEmail, presets){ try { localStorage.setItem(`easytull:filters:${userEmail}`, JSON.stringify(presets)); } catch(_) {} } function LeadsView({ market, period, setLeadsState, leadsState, currentUser, isAdmin }){ // we keep edits to leads in leadsState (overrides on top of LEADS_DB) const baseLeads = useMemo(() => { const arr = getLeadsFor(market, period).map(l => ({ ...l })); // apply overrides return arr .map(l => leadsState[l.id] ? { ...l, ...leadsState[l.id] } : l) .filter(l => !l.deleted_at); }, [market, period, leadsState]); const [filter, setFilter] = useState(EMPTY_FILTER); const [openEdit, setOpenEdit] = useState(null); const [openAdd, setOpenAdd] = useState(false); // ===== Per-user saved presets ===== const [presets, setPresets] = useState(() => loadPresets(currentUser)); const [activePresetId, setActivePresetId] = useState(null); const [openSave, setOpenSave] = useState(false); const [presetName, setPresetName] = useState(""); useEffect(() => { setPresets(loadPresets(currentUser)); setActivePresetId(null); }, [currentUser]); useEffect(() => { savePresets(currentUser, presets); }, [currentUser, presets]); function applyPreset(p){ setFilter(p.filter); setActivePresetId(p.id); } function clearFilter(){ setFilter(EMPTY_FILTER); setActivePresetId(null); } function saveCurrentAsPreset(){ if(!presetName.trim()) return; const id = `p-${Date.now()}-${Math.floor(Math.random()*999)}`; const p = { id, name: presetName.trim(), favorit: false, filter: {...filter} }; setPresets(arr => [...arr, p]); setActivePresetId(id); setPresetName(""); setOpenSave(false); } function toggleFavorit(id){ setPresets(arr => arr.map(p => p.id === id ? { ...p, favorit: !p.favorit } : p)); } function deletePreset(id){ setPresets(arr => arr.filter(p => p.id !== id)); if(activePresetId === id) setActivePresetId(null); } function renamePreset(id, name){ setPresets(arr => arr.map(p => p.id === id ? { ...p, name } : p)); } const sortedPresets = useMemo(() => [...presets].sort((a,b) => (b.favorit?1:0) - (a.favorit?1:0)), [presets]); const filterChanged = !filterIsEmpty(filter); // If user edits filter manually, drop active preset function updateFilter(patch){ setFilter(f => ({ ...f, ...patch })); setActivePresetId(null); } const filtered = baseLeads.filter(l => { if(filter.kanal !== "alla" && l.kanal !== filter.kanal) return false; if(filter.tjanst !== "alla" && l.tjanst !== filter.tjanst) return false; if(filter.status !== "alla" && l.status !== filter.status) return false; if(filter.kalla !== "alla" && l.kalla_kategori !== filter.kalla) return false; if(filter.confidence !== "alla" && l.attribution_confidence !== filter.confidence) return false; if(filter.landning !== "alla" && (l.first_landing_page || l.landning) !== filter.landning) return false; if(filter.form !== "alla" && l.form_page !== filter.form) return false; if(filter.sok && !(l.anteckning||"").toLowerCase().includes(filter.sok.toLowerCase()) && !l.tjanst.toLowerCase().includes(filter.sok.toLowerCase()) && !l.kanal.toLowerCase().includes(filter.sok.toLowerCase()) && !(l.kampanj||"").toLowerCase().includes(filter.sok.toLowerCase()) && !(l.sokord||"").toLowerCase().includes(filter.sok.toLowerCase())) return false; return true; }).sort((a,b) => (b.datum+b.tid).localeCompare(a.datum+a.tid)); const allKanaler = market === "BOTH" ? [...new Set([...KANALER_SE, ...KANALER_NO])] : (market === "SE" ? KANALER_SE : KANALER_NO); const uniqueKallor = useMemo(()=> [...new Set(baseLeads.map(l => l.kalla_kategori).filter(Boolean))], [baseLeads]); const uniqueLandningar= useMemo(()=> [...new Set(baseLeads.map(l => l.first_landing_page || l.landning).filter(Boolean))].slice(0,30), [baseLeads]); const uniqueForms = useMemo(()=> [...new Set(baseLeads.map(l => l.form_page).filter(Boolean))].slice(0,30), [baseLeads]); // KPI summary for filtered set const kpis = useMemo(() => { const total = filtered.length; const konv = filtered.filter(l => l.status === "Konverterad").length; const pag = filtered.filter(l => l.status === "Pågående").length; // Order values are mixed currencies in BOTH mode; sum and label accordingly. const ordSE = filtered.filter(l => l.land === "SE").reduce((a,l)=>a+(l.ordervarde||0),0); const ordNO = filtered.filter(l => l.land === "NO").reduce((a,l)=>a+(l.ordervarde||0),0); return { total, konv, pag, ordSE, ordNO }; }, [filtered]); function updateLead(id, patch){ const base = baseLeads.find(l => l.id === id) || {}; const saved = { ...base, ...patch, id }; upsertLeadIntoDb(saved); setLeadsState(s => ({ ...s, [id]: { ...(s[id]||{}), ...patch } })); window.EASYTULL_BACKEND?.persistLead(saved) .catch(err => console.warn("Lead kunde inte sparas i Supabase.", err)); } function addLead(newLead){ upsertLeadIntoDb(newLead); setLeadsState(s => ({ ...s, [newLead.id]: newLead })); window.EASYTULL_BACKEND?.persistLead(newLead) .catch(err => console.warn("Lead kunde inte sparas i Supabase.", err)); } function deleteLead(lead){ if(!isAdmin || !lead) return; const ok = window.confirm("Radera leaden från dashboarden?"); if(!ok) return; const deleted = { ...lead, deleted_at: new Date().toISOString() }; setLeadsState(s => ({ ...s, [lead.id]: { ...(s[lead.id]||{}), deleted_at: deleted.deleted_at } })); window.EASYTULL_BACKEND?.persistLead(deleted) .catch(err => console.warn("Lead kunde inte raderas i Supabase.", err)); } return ( <> Exportera CSV setOpenAdd(true)}>+ Ny lead
} /> {/* Small KPI strip */}
{fmtNum(kpis.ordSE)}SEK/ {fmtNum(kpis.ordNO)}NOK : {fmtNum(market === "SE" ? kpis.ordSE : kpis.ordNO)}{market === "NO" ? "NOK" : "SEK"} } dot="bg-emerald-500" tint="accent" big />
{/* Saved filter presets (per-user) */}
Sparade filter {sortedPresets.length === 0 && ( Inga sparade filter än — spara nuvarande för att börja. )} {sortedPresets.map(p => ( applyPreset(p)} onToggleFavorit={()=>toggleFavorit(p.id)} onDelete={()=>deletePreset(p.id)} onRename={(name)=>renamePreset(p.id, name)} /> ))}
{filterChanged && ( )}
{activePresetId && (
Aktivt filter: {(presets.find(p=>p.id===activePresetId)||{}).name} · {describeFilter(filter)}
)} {/* Filter bar */}
updateFilter({sok:e.target.value})} className="w-full bg-paper-50 border border-paper-200 rounded-lg pl-9 pr-3 py-2 text-sm focus:outline-none focus:border-ink-600" />
updateFilter({kanal:v})} options={["alla", ...allKanaler]}/> updateFilter({tjanst:v})} options={["alla", ...TJANSTER]}/> updateFilter({status:v})} options={["alla", ...STATUSAR]}/> updateFilter({kalla:v})} options={["alla", ...uniqueKallor]}/> updateFilter({confidence:v})} options={["alla", ...CONFIDENCE_NIVAER]}/> updateFilter({landning:v})} options={["alla", ...uniqueLandningar]}/> updateFilter({form:v})} options={["alla", ...uniqueForms]}/>
{filtered.length} av {baseLeads.length} leads
 {/* Save preset modal */} {openSave && (
setOpenSave(false)}>
e.stopPropagation()}>
Spara filter

Namnge ditt filter

Sparas bara för dig ({(ANVANDARE.find(u=>u.email===currentUser)||{}).namn}).

setPresetName(e.target.value)} onKeyDown={e=>{ if(e.key==="Enter") saveCurrentAsPreset(); }} placeholder="T.ex. Mina konverterade Google Ads-leads" className="w-full bg-paper-50 border border-paper-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-ink-600" />
Filter som sparas
{describeFilter(filter)}
setOpenSave(false)}>Avbryt Spara
)} {/* Table */}
{market==="BOTH" && } {isAdmin && } {filtered.map(l => { const converted = l.status === "Konverterad"; const landingShown = l.first_landing_page || l.landning; return ( setOpenEdit(l)} className="border-b border-paper-100 last:border-0 hover:bg-paper-50 cursor-pointer align-top" > {market==="BOTH" && } {isAdmin && ( )} ); })} {filtered.length === 0 && ( )}
När Källa Säkerhet Kanal Kampanj / Sökord Landningssida Formulärsida TjänstMarknadStatus Ordervärde AnteckningAdmin
{l.datum}
{l.tid} · {l.veckodag.slice(0,3)}
 {l.kanal} {l.kampanj ?
{l.kampanj}
: null} {l.sokord ?
{l.sokord}
: (!l.kampanj && —)} 		{landingShown ? {landingShown} : Ej spårad} {l.form_page ? {l.form_page} : Saknas} {l.tjanst}updateLead(l.id,{status:s})}/> {l.ordervarde ? ( {converted && ▲} {fmtNum(l.ordervarde)} {l.land === "NO" ? "NOK" : "SEK"} ) : —} {l.anteckning ? {l.anteckning} : —}
Inga leads matchar filtret.
{openEdit && ( setOpenEdit(null)} onSave={(patch)=>{ updateLead(openEdit.id, patch); setOpenEdit(null); }} /> )} {openAdd && ( setOpenAdd(false)} onSave={(newLead)=>{ addLead(newLead); setOpenAdd(false); }} /> )} ); } function FilterSelect({ label, value, onChange, options }){ return ( ); } function PresetChip({ preset, active, onApply, onToggleFavorit, onDelete, onRename }){ const [menuOpen, setMenuOpen] = useState(false); const [editing, setEditing] = useState(false); const [name, setName] = useState(preset.name); const ref = useRef(null); useEffect(() => { setName(preset.name); }, [preset.name]); useEffect(()=>{ function close(e){ if(ref.current && !ref.current.contains(e.target)) { setMenuOpen(false); } } document.addEventListener("mousedown", close); return ()=>document.removeEventListener("mousedown", close); },[]); function commitRename(){ if(name.trim() && name.trim() !== preset.name) onRename(name.trim()); else setName(preset.name); setEditing(false); } return (
{editing ? ( setName(e.target.value)} onBlur={commitRename} onKeyDown={e=>{ if(e.key==="Enter") commitRename(); if(e.key==="Escape"){ setName(preset.name); setEditing(false);} }} className="bg-transparent text-[12.5px] focus:outline-none w-[120px]" onClick={e=>e.stopPropagation()} /> ) : ( {preset.name} )} { e.stopPropagation(); setMenuOpen(o=>!o); }} className={`inline-flex items-center justify-center w-5 h-5 rounded-full ${active ? "hover:bg-white/15" : "hover:bg-paper-200"}`} title="Mer" > {menuOpen && (
)}
); } function MiniKpi({ label, value, sub, dot, tint, big }){ return (
{label}
{value}
{sub &&
{sub}
}
); } function LeadModal({ lead, isNew, period, defaultMarket, onClose, onSave }){ const [form, setForm] = useState(() => { if(isNew){ const now = new Date(); const land = defaultMarket || "SE"; // Pick a date inside the resolved period — clamp today into [from, to] const clamped = now < period.from ? period.from : now > period.to ? period.to : now; const y = clamped.getFullYear(); const m = clamped.getMonth(); const dd = clamped.getDate(); return { id: `${land}-${y}-${m+1}-new-${Date.now()}`, datum: `${y}-${String(m+1).padStart(2,"0")}-${String(dd).padStart(2,"0")}`, tid: `${String(now.getHours()).padStart(2,"0")}:${String(now.getMinutes()).padStart(2,"0")}`, veckodag: VECKODAGAR_FULL[(clamped.getDay()+6)%7], kanal: land === "SE" ? "Google Ads SE" : "Google Ads NO", kalla: "Google", kampanj: "", sokord: "", landning: "", kontakt: "E-post", tjanst: "Import", land, status: "Pågående", ordervarde: 0, anteckning: "", }; } return { ...lead }; }); function set(k,v){ setForm(f => ({ ...f, [k]: v })); } const allKanaler = form.land === "SE" ? KANALER_SE : KANALER_NO; return (
e.stopPropagation()}>
{isNew ? "Ny lead" : "Redigera lead"}

{isNew ? "Registrera ny lead" : `Lead · ${form.datum} ${form.tid}`}

Grundinformation
set("datum",e.target.value)} className="modalInput"/> set("tid",e.target.value)} className="modalInput"/>
Pineberry-spårning · UTM & kampanjdata
set("kalla",e.target.value)} className="modalInput" placeholder="Google · Bing · Direkt · LinkedIn"/> set("kampanj",e.target.value)} className="modalInput" placeholder="T.ex. 'Tullombud Import · SE'"/> set("sokord",e.target.value)} className="modalInput font-mono" placeholder="t.ex. tullombud import"/> set("landning",e.target.value)} className="modalInput font-mono" placeholder="/tjanster/import"/>
Utfall
set("ordervarde", Number(e.target.value))} className="modalInput num"/>