https://mysleepfitter.com/assets/ConversionFunnel-BEsaUS7V.js

1import{a as J,r as n,j as e,s as V,e as Q}from"./index-CUnD0zRX.js";import{B as K}from"./button-xYvlBXNV.js";import{C as v,b as y,c as b,a as C}from"./card-CPmLZw49.js";import{R as W}from"./refresh-cw-i0o1LcZX.js";import{F as Z,A as k}from"./filter-CFCzyKIq.js";import{U as ee}from"./users-C0OG_exl.js";import{C as se}from"./credit-card-DtfRO-v4.js";import{U as te}from"./user-plus-uMMMigHH.js";import{R,X as $,Y as P,T as L,B as N}from"./generateCategoricalChart-WJjJR9DU.js";import{B as z}from"./BarChart-D1on14Jn.js";import{C as E}from"./CartesianGrid-CoeYpVU4.js";import{T as ae}from"./trending-up-B7mBHc5E.js";import{s as w}from"./subDays-Ch0RWqvG.js";import{f as _,s as S}from"./format-CHVFF-e_.js";import{R as ie}from"./RoleGuard-Dgs30VOW.js";import{A as re}from"./arrow-left-BHmIwLpj.js";import"./index-DoVR9Y5h.js";import"./addDays-DUX3p28w.js";import"./constructFrom-rJN6zrQ_.js";import"./startOfWeek-D73QWovg.js";import"./useAuth-Avra37EG.js";import"./useUserRole-B6okIXOd.js";import"./input-CpvQ5L1O.js";import"./label-BSdZfXg9.js";import"./loader-circle-CpOmg-m6.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const U=J("MousePointer",[["path",{d:"M12.586 12.586 19 19",key:"ea5xo7"}],["path",{d:"M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z",key:"277e5u"}]]),h=["#8b5cf6","#6366f1","#3b82f6","#0ea5e9","#06b6d4"],le=()=>{const[c,x]=n.useState(!1),[s,p]=n.useState(null),[m,O]=n.useState([]),[F,Y]=n.useState([]),[f,H]=n.useState("7d"),G=t=>{const i=new Date;switch(t){case"7d":return{start:w(S(i),7),end:i};case"14d":return{start:w(S(i),14),end:i};case"30d":return{start:w(S(i),30),end:i};case"ytd":return{start:new Date(i.getFullYear(),0,1),end:i}}},M=async()=>{x(!0);try{const{start:t,end:i}=G(f),D=_(t,"yyyy-MM-dd"),A=_(i,"yyyy-MM-dd"),{data:l,error:ce}=await V.from("flyer_analytics").select("*").gte("created_at",D).lte("created_at",`${A}T23:59:59`).in("flyer_type",["sleep-fitting","sleep_fitting"]),{count:X}=await V.from("profiles").select("*",{count:"exact",head:!0}).gte("created_at",D).lte("created_at",`${A}T23:59:59`),j={};let B=0;l&&l.forEach(a=>{const r=a.event_type;j[r]=(j[r]||0)+1,B++});const I={basic_hero_click:"Basic - Hero CTA",bundle_hero_click:"Bundle - Hero CTA",basic_bottom_click:"Basic - Bottom CTA",bundle_bottom_click:"Bundle - Bottom CTA",view_pillows_click:"View Pillows",pillow_selected:"Pillow Selected",checkout_started:"Checkout Started",page_visit:"Page Visits"},q=Object.entries(j).map(([a,r])=>({eventType:a,count:r,label:I[a]||a})).sort((a,r)=>r.count-a.count);O(q);const T=(l==null?void 0:l.filter(a=>a.event_type==="checkout_started").length)||0,g=(l==null?void 0:l.filter(a=>a.event_type==="page_visit").length)||0;p({visitors:g*10,sleepFittingVisitors:g,ctaClicks:B-g-T,signups:X||0,checkouts:T});const d={};l&&l.forEach(a=>{const r=_(new Date(a.created_at),"MMM d");d[r]||(d[r]={date:r,visitors:0,signups:0,ctaClicks:0}),a.event_type==="page_visit"?d[r].visitors++:a.event_type!=="checkout_started"&&d[r].ctaClicks++}),Y(Object.values(d).slice(-14))}catch(t){console.error("Error fetching funnel data:",t)}finally{x(!1)}};n.useEffect(()=>{M()},[f]),s&&[{name:"Page Visits",value:s.sleepFittingVisitors,fill:h[0]},{name:"CTA Clicks",value:s.ctaClicks,fill:h[1]},{name:"Checkouts Started",value:s.checkouts,fill:h[2]},{name:"Signups",value:s.signups,fill:h[3]}].filter(t=>t.value>0);const o=(t,i)=>t===0?"0%":`${(i/t*100).toFixed(1)}%`;return e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("h2",{className:"text-lg font-semibold",children:"Conversion Funnel"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Sleep Fitting page performance"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"flex bg-muted rounded-lg p-1",children:["7d","14d","30d","ytd"].map(t=>e.jsx("button",{onClick:()=>H(t),className:`px-3 py-1 text-sm rounded-md transition-colors ${f===t?"bg-background text-foreground shadow-sm":"text-muted-foreground hover:text-foreground"}`,children:t==="ytd"?"YTD":t},t))}

6),e.jsx(K,{variant:"outline",size:"sm",onClick:M,disabled:c,children:e.jsx(W,{className:`h-4 w-4 ${c?"animate-spin":""}`})})]})]}),e.jsxs("div",{className:"grid lg:grid-cols-2 gap-6",children:[e.jsxs(v,{children:[e.jsx(y,{children:e.jsxs(b,{className:"text-base flex items-center gap-2",children:[e.jsx(Z,{className:"h-4 w-4"}),"Conversion Funnel"]})}),e.jsx(C,{children:s&&e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx(u,{icon:e.jsx(ee,{className:"h-4 w-4"}),label:"Sleep Fitting Visits",value:s.sleepFittingVisitors,color:"bg-violet-500",width:"100%"}),e.jsxs("div",{className:"flex items-center justify-center",children:[e.jsx(k,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-xs text-muted-foreground ml-2",children:o(s.sleepFittingVisitors,s.ctaClicks)})]}),e.jsx(u,{icon:e.jsx(U,{className:"h-4 w-4"}),label:"CTA Clicks",value:s.ctaClicks,color:"bg-indigo-500",width:`${Math.max(20,s.ctaClicks/Math.max(s.sleepFittingVisitors,1)*100)}%`}),e.jsxs("div",{className:"flex items-center justify-center",children:[e.jsx(k,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-xs text-muted-foreground ml-2",children:o(s.ctaClicks,s.checkouts)})]}),e.jsx(u,{icon:e.jsx(se,{className:"h-4 w-4"}),label:"Checkouts Started",value:s.checkouts,color:"bg-blue-500",width:`${Math.max(15,s.checkouts/Math.max(s.sleepFittingVisitors,1)*100)}%`}),e.jsxs("div",{className:"flex items-center justify-center",children:[e.jsx(k,{className:"h-4 w-4 text-muted-foreground"}),e.jsx("span",{className:"text-xs text-muted-foreground ml-2",children:o(s.checkouts,s.signups)})]}),e.jsx(u,{icon:e.jsx(te,{className:"h-4 w-4"}),label:"Signups",value:s.signups,color:"bg-cyan-500",width:`${Math.max(10,s.signups/Math.max(s.sleepFittingVisitors,1)*100)}%`})]}),e.jsx("div",{className:"pt-4 border-t",children:e.jsxs("div",{className:"grid grid-cols-2 gap-4 text-center",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-2xl font-bold text-primary",children:o(s.sleepFittingVisitors,s.signups)}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Visit → Signup"})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-2xl font-bold text-green-500",children:o(s.ctaClicks,s.checkouts)}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Click → Checkout"})]})]})})]})})]}),e.jsxs(v,{children:[e.jsx(y,{children:e.jsxs(b,{className:"text-base flex items-center gap-2",children:[e.jsx(U,{className:"h-4 w-4"}),"CTA Click Breakdown"]})}),e.jsx(C,{children:m.length>0?e.jsx("div",{className:"h-64",children:e.jsx(R,{width:"100%",height:"100%",children:e.jsxs(z,{data:m,layout:"vertical",children:[e.jsx(E,{strokeDasharray:"3 3",horizontal:!0,vertical:!1}),e.jsx($,{type:"number"}),e.jsx(P,{dataKey:"label",type:"category",width:120,tick:{fontSize:11}}),e.jsx(L,{formatter:t=>[t,"Clicks"],contentStyle:{backgroundColor:"hsl(var(--card))",border:"1px solid hsl(var(--border))",borderRadius:"8px"}}),e.jsx(N,{dataKey:"count",fill:"hsl(var(--primary))",radius:[0,4,4,0]})]})})}):e.jsx("div",{className:"h-64 flex items-center justify-center text-muted-foreground",children:e.jsx("p",{children:"No CTA events recorded yet"})})})]})]}),e.jsxs(v,{children:[e.jsx(y,{children:e.jsxs(b,{className:"text-base flex items-center gap-2",children:[e.jsx(ae,{className:"h-4 w-4"}),"Daily CTA Activity"]})}),e.jsx(C,{children:F.length>0?e.jsx("div",{className:"h-64",children:e.jsx(R,{width:"100%",height:"100%",children:e.jsxs(z,{data:F,children:[e.jsx(E,{strokeDasharray:"3 3",vertical:!1}),e.jsx($,{dataKey:"date",tick:{fontSize:11}}),e.jsx(P,{}),e.jsx(L,{contentStyle:{backgroundColor:"hsl(var(--card))",border:"1px solid hsl(var(--border))",borderRadius:"8px"}}),e.jsx(N,{dataKey:"visitors",name:"Page Visits",fill:"#8b5cf6",radius:[4,4,0,0]}),e.jsx(N,{dataKey:"ctaClicks",name:"CTA Clicks",fill:"#3b82f6",radius:[4,4,0,0]})]})})}):e.jsx("div",{className:"h-64 flex items-center justify-center text-muted-foreground",children:e.jsx("p",{children:"No daily data available"})})})]})]})}

6,u=({icon:c,label:x,value:s,color:p,width:m})=>e.jsxs("div",{className:`${p} text-white rounded-lg p-3 flex items-center justify-between transition-all`,style:{width:m},children:[e.jsxs("div",{className:"flex items-center gap-2",children:[c,e.jsx("span",{className:"text-sm font-medium",children:x})]}),e.jsx("span",{className:"font-bold",children:s.toLocaleString()})]}),Te=()=>{const c=Q();return e.jsx(ie,{role:"admin",children:e.jsxs("div",{className:"min-h-screen bg-background",children:[e.jsx("header",{className:"border-b bg-card",children:e.jsxs("div",{className:"container mx-auto px-4 py-4 flex items-center gap-4",children:[e.jsxs(K,{variant:"ghost",size:"sm",onClick:()=>c("/team-dashboard"),children:[e.jsx(re,{className:"h-4 w-4 mr-2"}),"Back to Dashboard"]}),e.jsxs("div",{children:[e.jsx("h1",{className:"text-xl font-bold",children:"Conversion Funnel"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Sleep Fitting page analytics"})]})]})}),e.jsx("main",{className:"container mx-auto px-4 py-6",children:e.jsx(le,{})})]})})};export{Te as default};