From 3cd296f6bf55ac9b10258f69699a7e2c0431cc59 Mon Sep 17 00:00:00 2001 From: Omair Saleh Date: Mon, 2 Mar 2026 22:16:29 +0800 Subject: [PATCH] feat: dynamic data insights + remaining audit fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DATA FIXES: - Dashboard insights now fully dynamic per date range - Revenue/orders/newcust/AOV trend (splits data in half, compares) - Channel concentration % computed from filtered data - Repeat revenue % with date-range label - All insights adapt when user changes date filter/preset - Offer page charts now load from API (not hardcoded arrays) - Revenue chart, new customer chart, channel donut = live data - Hero stats (-84%, -42%, 85%) computed dynamically from API - ROI calculator AOV pulled from latest year's actual data REMAINING AUDIT FIXES: - Fix #4: 'Built by' section on offer page (name, bio, contact) - Fix #9: Before/After comparison block on homepage - Side-by-side: current JV PDP flaws vs AI engine output - 8 specific ✗/✓ comparison points - Fix #6: Before/after serves as instant proof (no 90s wait) All 10 audit fixes now implemented. --- static/dashboard/index.html | 73 +++++++++++++--- static/offer/index.html | 161 ++++++++++++++++++++++++++---------- templates/index.html | 44 ++++++++++ 3 files changed, 222 insertions(+), 56 deletions(-) diff --git a/static/dashboard/index.html b/static/dashboard/index.html index 87d7362..755d76c 100644 --- a/static/dashboard/index.html +++ b/static/dashboard/index.html @@ -387,18 +387,69 @@ function buildExec(fm){ `
${k.l}
${k.v}
${k.s}
` ).join(''); - // Insights - const latestYear = fm.filter(r=>r.YearMonth>='2025-01'); - const prevYear = fm.filter(r=>r.YearMonth>='2024-01'&&r.YearMonth<='2024-12'); - const lyRev = latestYear.reduce((s,r)=>s+r.revenue,0); - const pyRev = prevYear.reduce((s,r)=>s+r.revenue,0); - const yoyChange = pyRev > 0 ? ((lyRev - pyRev) / pyRev * 100) : 0; + // Dynamic range-aware insights + // Split into halves for trend comparison + const half = Math.floor(fm.length / 2); + const firstHalf = fm.slice(0, half); + const secondHalf = fm.slice(half); + const fhRev = firstHalf.reduce((s,r)=>s+r.revenue,0); + const shRev = secondHalf.reduce((s,r)=>s+r.revenue,0); + const revTrend = fhRev > 0 ? ((shRev - fhRev) / fhRev * 100) : 0; + const fhOrders = firstHalf.reduce((s,r)=>s+r.orders,0); + const shOrders = secondHalf.reduce((s,r)=>s+r.orders,0); + const orderTrend = fhOrders > 0 ? ((shOrders - fhOrders) / fhOrders * 100) : 0; + const fhNew = firstHalf.reduce((s,r)=>s+r.newCustomers,0); + const shNew = secondHalf.reduce((s,r)=>s+r.newCustomers,0); + const newTrend = fhNew > 0 ? ((shNew - fhNew) / fhNew * 100) : 0; + const fhAOV = fhOrders > 0 ? fhRev / fhOrders : 0; + const shAOV = shOrders > 0 ? shRev / shOrders : 0; + const aovTrend = fhAOV > 0 ? ((shAOV - fhAOV) / fhAOV * 100) : 0; - document.getElementById('execInsights').innerHTML = ` -
Avg Margin ${pct(avgMargin)}: ${avgMargin >= 55 ? 'Healthy margins across the product range.' : 'Margins are under pressure — review product costs and pricing.'}
-
Returning customer revenue: ${pct(repeatRevPct)} of revenue comes from repeat buyers. ${repeatRevPct > 40 ? 'Strong loyalty base to leverage.' : 'Opportunity to improve retention.'}
-
Items per order: ${fmt(avgItems,1)}. ${avgItems < 2 ? 'Most orders are single-item. Bundling and cross-sell could lift AOV.' : 'Good cross-sell rate.'}
- `; + // Channel concentration for this date range + const chFilt = filterArr(RAW.channelMonthly); + const chTotals = {}; + chFilt.forEach(r => { chTotals[r.ReferrerSource] = (chTotals[r.ReferrerSource]||0) + r.orders; }); + const chTotal = Object.values(chTotals).reduce((a,b)=>a+b,0); + const googleOrg = (chTotals['Organic']||0) + (chTotals['Google Adwords']||0); + const googlePct = chTotal > 0 ? googleOrg / chTotal * 100 : 0; + const socialPct = chTotal > 0 ? ((chTotals['Facebook']||0) / chTotal * 100) : 0; + + const rangeLabel = FSTART && FEND ? `${FSTART} to ${FEND}` : FSTART ? `${FSTART} onwards` : FEND ? `up to ${FEND}` : 'all time'; + const halfLabel1 = firstHalf.length ? `${firstHalf[0].YearMonth}–${firstHalf[firstHalf.length-1].YearMonth}` : ''; + const halfLabel2 = secondHalf.length ? `${secondHalf[0].YearMonth}–${secondHalf[secondHalf.length-1].YearMonth}` : ''; + + let insightsHtml = ''; + + // Revenue trend + if(fm.length >= 4) { + insightsHtml += `
Revenue ${revTrend >= 0 ? '↑' : '↓'} ${pct(Math.abs(revTrend))}: ${gbp(shRev)} in ${halfLabel2} vs ${gbp(fhRev)} in ${halfLabel1}. ${revTrend < -10 ? 'Declining trend in this range.' : revTrend > 10 ? 'Growing in this range.' : 'Relatively flat.'}
`; + } + + // New customer trend + if(fm.length >= 4 && fhNew > 0) { + insightsHtml += `
New customers ${newTrend >= 0 ? '↑' : '↓'} ${pct(Math.abs(newTrend))}: ${fmt(shNew)} new customers in second half vs ${fmt(fhNew)} in first half of this range.
`; + } + + // AOV trend + if(fm.length >= 4) { + insightsHtml += `
AOV ${aovTrend >= 0 ? '↑' : '↓'} ${pct(Math.abs(aovTrend))}: ${gbp(shAOV)} vs ${gbp(fhAOV)}. ${aovTrend > 5 ? 'Customers are spending more per order.' : aovTrend < -5 ? 'Average basket value declining.' : 'AOV holding steady.'}
`; + } + + // Margins + insightsHtml += `
Avg margin ${pct(avgMargin)}: ${avgMargin >= 55 ? 'Healthy margins across the product range.' : 'Margins under pressure — review product costs and pricing.'}
`; + + // Returning revenue + insightsHtml += `
Returning customer revenue: ${pct(repeatRevPct)} of revenue comes from repeat buyers (${rangeLabel}). ${repeatRevPct > 60 ? 'Extremely loyal base — but dependency on existing customers may mask acquisition weakness.' : repeatRevPct > 40 ? 'Strong loyalty base to leverage.' : 'Opportunity to improve retention.'}
`; + + // Channel concentration + if(chTotal > 0) { + insightsHtml += `
Channel concentration: ${pct(googlePct)} of orders from Google channels (Organic + Ads) in this range. ${socialPct < 1 ? 'Social commerce is under ' + pct(socialPct) + ' — virtually zero discovery from social channels.' : 'Social contributing ' + pct(socialPct) + '.'}
`; + } + + // Items per order + insightsHtml += `
Items per order: ${fmt(avgItems,1)}. ${avgItems < 2 ? 'Most orders are single-item. Bundling and cross-sell could lift AOV.' : 'Good cross-sell rate.'}
`; + + document.getElementById('execInsights').innerHTML = insightsHtml; // Revenue + Orders chart destroyChart('revOrdersChart'); diff --git a/static/offer/index.html b/static/offer/index.html index 415d1cf..a981993 100644 --- a/static/offer/index.html +++ b/static/offer/index.html @@ -599,6 +599,19 @@ input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;heigh
How is this different from hiring an agency?+
An agency charges monthly for services and you own nothing when you leave. This is a one-time infrastructure build — you own the server, the workflows, the content, and the integrations. The £500/mo covers hosting and maintenance only. If you cancel, you keep the infrastructure and can self-host.
+ +
+
O
+
+
Omair · QuikCue
+
I build AI infrastructure for ecommerce brands — automation, content engines, and data systems. This proposal was built using the same tools I'm proposing to install. Every demo, every chart, every number on this page is real.
+
+omair@quikcue.com +quikcue.com +
+
+
+
Prepared for Just Vitamins · March 2026 · Confidential
Data source: 728,018 validated orders · Nov 2005 — Jan 2026 @@ -644,60 +657,118 @@ const counterObs = new IntersectionObserver(e => { }, {threshold:.5}); document.querySelectorAll('[data-count]').forEach(el => counterObs.observe(el)); -// ══════ CHARTS ══════ +// ══════ LOAD REAL DATA FROM API ══════ const cBase = {responsive:true,maintainAspectRatio:false,animation:{duration:600},plugins:{legend:{display:false}},scales:{x:{grid:{color:'rgba(26,37,69,.4)'},ticks:{color:'#5a6d94',font:{size:10}}},y:{grid:{color:'rgba(26,37,69,.4)'},ticks:{color:'#5a6d94',font:{size:10}}}}}; -// Revenue chart -new Chart(document.getElementById('revChart'), { - type:'line', - data:{ - labels:['2018','2019','2020','2021','2022','2023','2024','2025'], - datasets:[{ - data:[1654002,1545674,1820963,1775174,1514505,1378510,1244661,1047850], - borderColor:'#6366f1',backgroundColor:'rgba(99,102,241,.1)',fill:true,tension:.4,pointRadius:4,pointBackgroundColor:'#6366f1', - pointBorderColor:'#0d1322',pointBorderWidth:2,borderWidth:2.5 - }] - }, - options:{...cBase,scales:{...cBase.scales,y:{...cBase.scales.y,ticks:{...cBase.scales.y.ticks,callback:v=>'£'+Math.round(v/1000)+'k'}}}, - plugins:{...cBase.plugins,tooltip:{callbacks:{label:ctx=>'£'+ctx.raw.toLocaleString()}}}} -}); +fetch('/api/dashboard/data').then(r=>r.json()).then(data => { + const m = data.monthly.sort((a,b)=>a.YearMonth.localeCompare(b.YearMonth)); -// New customer chart -new Chart(document.getElementById('custChart'), { - type:'bar', - data:{ - labels:['2018','2019','2020','2021','2022','2023','2024','2025'], - datasets:[{ - data:[20219,11874,24666,20309,16404,9869,6338,3941], - backgroundColor:['#6366f1cc','#6366f1cc','#10b981cc','#6366f1cc','#f59e0bcc','#ef4444cc','#ef4444cc','#ef4444cc'], - borderRadius:6,borderSkipped:false - }] - }, - options:{...cBase,plugins:{...cBase.plugins,tooltip:{callbacks:{label:ctx=>ctx.raw.toLocaleString()+' new customers'}}}} -}); + // Aggregate by year (2018+) + const yearly = {}; + m.forEach(r => { + const y = r.YearMonth.substring(0,4); + if(parseInt(y) < 2018) return; + if(!yearly[y]) yearly[y] = {rev:0, orders:0, newCust:0}; + yearly[y].rev += r.revenue; + yearly[y].orders += r.orders; + yearly[y].newCust += r.newCustomers; + }); + const years = Object.keys(yearly).sort().filter(y => y !== '2026'); + const peakYear = years.reduce((a,b) => yearly[a].rev > yearly[b].rev ? a : b); + const latestYear = years[years.length-1]; + const peakNewYear = years.reduce((a,b) => yearly[a].newCust > yearly[b].newCust ? a : b); -// Channel donut -new Chart(document.getElementById('chChart'), { - type:'doughnut', - data:{ - labels:['Organic','Google Ads','Webgains','Email','Bing','Social/Other'], - datasets:[{ - data:[50.5,31.2,10.4,5.6,2.2,0.1], - backgroundColor:['#6366f1','#818cf8','#a855f7','#06b6d4','#64748b','#ef4444'], - borderWidth:0,spacing:2 - }] - }, - options:{responsive:true,maintainAspectRatio:false,cutout:'65%', - plugins:{legend:{position:'bottom',labels:{color:'#5a6d94',font:{size:10},padding:12,usePointStyle:true,pointStyleWidth:8}}, - tooltip:{callbacks:{label:ctx=>ctx.label+': '+ctx.raw+'%'}}}} -}); + // Update hero stats dynamically + const newDecline = yearly[peakNewYear] && yearly[latestYear] ? Math.round((yearly[latestYear].newCust - yearly[peakNewYear].newCust) / yearly[peakNewYear].newCust * 100) : -84; + const revDecline = yearly[peakYear] && yearly[latestYear] ? Math.round((yearly[latestYear].rev - yearly[peakYear].rev) / yearly[peakYear].rev * 100) : -42; + document.querySelectorAll('[data-count]').forEach(el => { + if(el.closest('.red')) el.dataset.count = newDecline; + if(el.closest('.amber')) el.dataset.count = revDecline; + }); + + // Channel data + const ch = data.channelMonthly || []; + const chTotals = {}; + // Use last 24 months for channel % + const recent = m.filter(r => r.YearMonth >= (parseInt(latestYear)-1)+'-01'); + const recentYMs = new Set(recent.map(r=>r.YearMonth)); + ch.filter(r => recentYMs.has(r.YearMonth)).forEach(r => { + chTotals[r.ReferrerSource] = (chTotals[r.ReferrerSource]||0) + r.orders; + }); + const chTotal = Object.values(chTotals).reduce((a,b)=>a+b,0); + const googleOrgPct = chTotal > 0 ? Math.round(((chTotals['Organic']||0) + (chTotals['Google Adwords']||0)) / chTotal * 100) : 85; + + // Update the 85% stat dynamically + const greyVal = document.querySelector('.alert-stat.grey .val'); + if(greyVal) greyVal.textContent = googleOrgPct + '%'; + const channelH2 = document.querySelector('h2.stitle'); + if(channelH2 && channelH2.textContent.includes('Channel Dependency')) + channelH2.textContent = googleOrgPct + '% Channel Dependency'; + + // Revenue chart — from real data + new Chart(document.getElementById('revChart'), { + type:'line', + data:{ + labels: years, + datasets:[{ + data: years.map(y => Math.round(yearly[y].rev)), + borderColor:'#6366f1',backgroundColor:'rgba(99,102,241,.1)',fill:true,tension:.4,pointRadius:4,pointBackgroundColor:'#6366f1', + pointBorderColor:'#0d1322',pointBorderWidth:2,borderWidth:2.5 + }] + }, + options:{...cBase,scales:{...cBase.scales,y:{...cBase.scales.y,ticks:{...cBase.scales.y.ticks,callback:v=>'£'+Math.round(v/1000)+'k'}}}, + plugins:{...cBase.plugins,tooltip:{callbacks:{label:ctx=>'£'+ctx.raw.toLocaleString()}}}} + }); + + // New customer chart — from real data + const custColors = years.map(y => { + if(y === peakNewYear) return '#10b981cc'; + return yearly[y].newCust < yearly[peakNewYear].newCust * 0.5 ? '#ef4444cc' : + yearly[y].newCust < yearly[peakNewYear].newCust * 0.75 ? '#f59e0bcc' : '#6366f1cc'; + }); + new Chart(document.getElementById('custChart'), { + type:'bar', + data:{ + labels: years, + datasets:[{ + data: years.map(y => yearly[y].newCust), + backgroundColor: custColors, + borderRadius:6,borderSkipped:false + }] + }, + options:{...cBase,plugins:{...cBase.plugins,tooltip:{callbacks:{label:ctx=>ctx.raw.toLocaleString()+' new customers'}}}} + }); + + // Channel donut — from real data + const chEntries = Object.entries(chTotals).sort((a,b)=>b[1]-a[1]); + const chColors = ['#6366f1','#818cf8','#a855f7','#06b6d4','#64748b','#ef4444','#f59e0b','#10b981']; + new Chart(document.getElementById('chChart'), { + type:'doughnut', + data:{ + labels: chEntries.map(e => e[0]), + datasets:[{ + data: chEntries.map(e => parseFloat((e[1]/chTotal*100).toFixed(1))), + backgroundColor: chColors.slice(0, chEntries.length), + borderWidth:0,spacing:2 + }] + }, + options:{responsive:true,maintainAspectRatio:false,cutout:'65%', + plugins:{legend:{position:'bottom',labels:{color:'#5a6d94',font:{size:10},padding:12,usePointStyle:true,pointStyleWidth:8}}, + tooltip:{callbacks:{label:ctx=>ctx.label+': '+ctx.raw+'%'}}}} + }); + + // Update ROI calculator with real AOV + const latestAOV = yearly[latestYear] ? yearly[latestYear].rev / yearly[latestYear].orders : 35.02; + window._realAOV = latestAOV; + calcROI(); +}).catch(err => console.warn('Offer charts: using static fallback', err)); // ══════ ROI CALCULATOR ══════ function calcROI() { const n = parseInt(document.getElementById('roiSlider').value); document.getElementById('sliderVal').textContent = n; - const aov = 35.02; // 2025 actual (source-linked) - const cohortReturnRate = 0.576; // 12-month cohort return rate (verified from 728K orders) + const aov = window._realAOV || 35.02; // live from API, fallback to 2025 actual + const cohortReturnRate = 0.576; // 12-month cohort return rate (verified from 728K orders) const avgRepeats = 2; // conservative avg repeat purchases in year 1 const ltv = aov * (1 + cohortReturnRate * avgRepeats); const monthlyRev = n * aov; diff --git a/templates/index.html b/templates/index.html index 253e728..e48f33b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -68,6 +68,50 @@
+ +
+ 📊 WHAT THE AI ENGINE PRODUCES +

Before → After: Real Product Comparison

+

Same product. Left is the current justvitamins.co.uk page. Right is what the AI engine generates in 90 seconds.

+
+
+
Current PDP
+
+
Super Strength Vitamin D3 4000iu + K2
+
justvitamins.co.uk — actual product page
+
+
✗ Generic subtitle: "A powerful pairing"
+
✗ Single product photo (pouch only)
+
✗ No benefit-driven bullets (Feature→Benefit→Proof)
+
✗ No trust signals (money-back, UK-made, certifications)
+
✗ No price anchoring (daily cost, cost-per-dose)
+
✗ No SEO meta description
+
✗ No ad hooks or email sequences
+
✗ Cookie consent modal covers half the page
+
+
+
+
+
AI-Generated PDP
+
+
Same product — generated in ~90 seconds
+
Conversion-optimised by Gemini AI
+
+
✓ 5 AI-generated product photos (lifestyle, scale, detail, banner)
+
✓ Feature → Benefit → Proof bullet structure
+
✓ Trust bar: money-back, UK-made, EFSA claims
+
✓ Price anchoring: "just 14p per day"
+
✓ Full FAQ accordion with objection handling
+
✓ SEO meta + Open Graph tags
+
✓ 3 ad hooks + 3 email sequences
+
✓ 4 copy styles: Balanced, Premium, Direct, Medical-Safe
+
+
+
+
+

↑ Run Demo A above to see the full AI-generated PDP for any JustVitamins product

+
+
🔍 DEMO B — LIVE