https://app.improvmx.com/assets/UsageDashboard-B6RFJN-9.js

1import{r as s,j as e,h as oe}from"./index-B552Uwma.js";import{i as $}from"./index-ClPwX7rX.js";import{D as T}from"./DatePicker-Cj-u--Fl.js";import{I as ae,a as le}from"./IconOutbox-DAPNw8d4.js";import"./useClickOutside-DGxClyqo.js";import"./IconChevronDown-CmDiaw3N.js";import"./IconChevronRight-CgD7Ssn2.js";const de="#32D96E",ce="#005FFF",me="#981AFF",ue="#FF08AD",ge="#FC1717",xe="#FF7700",L=[de,ce,me,ue,ge,xe];function z(i){return i>=1e6?(i/1e6).toFixed(2)+"M":i>=1e3?(i/1e3).toFixed(1)+"K":i}const O=i=>`${i.getFullYear()}-${String(i.getMonth()+1).padStart(2,"0")}-${String(i.getDate()).padStart(2,"0")}`,B=i=>{const l=new Date;return l.setDate(l.getDate()-i),l};function we(){const[i]=s.useState(()=>{const t=Date.now(),r=1;return{now:t,weekAgo:t-(7-r)*24*60*60*1e3,monthAgo:t-(30-r)*24*60*60*1e3,threeMonthsAgo:t-(90-r)*24*60*60*1e3,sixMonthsAgo:t-(180-r)*24*60*60*1e3}}),[l,Y]=s.useState({received:0,sent:0}),[D,K]=s.useState(i.monthAgo),[b,E]=s.useState(!1),[c,Z]=s.useState(""),[m,q]=s.useState(""),[G,R]=s.useState(!0),[k,H]=s.useState({received:[],sent:[]}),[P,J]=s.useState({sending:0,receiving:0}),[u,Q]=s.useState({sending:0,receiving:0}),[W,X]=s.useState([]),[x,_]=s.useState({}),[A,ee]=s.useState({daysRemaining:0,date:null}),F=s.useRef(null),V=s.useRef(null),v=s.useRef(null),p=s.useRef(null),h=s.useRef(null),d=s.useRef(null),S=P.receiving>0,w=P.sending>0,y=u.receiving>0,f=u.sending>0,te=Object.values(x).reduce((t,r)=>t+(r.received||0),0),re=Object.values(x).reduce((t,r)=>t+(r.sent||0),0),se=(()=>{const t=u.receiving,r=l.received;return!t||t<=0?{width:"0%"}:{width:`${Math.min(r/t*100,100)}%`}})(),ie=(()=>{const t=u.sending,r=l.sent;return!t||t<=0?{width:"0%"}:{width:`${Math.min(r/t*100,100)}%`}})(),j=async(t,r)=>{R(!0);const a={start:t,end:r},o=await oe.get("account/usage",{params:a});let n={dates:o.body.dates,usage:o.body.usage,dailyLimits:o.body.dailyLimits,monthlyLimits:o.body.monthlyLimits,domainsData:o.body.domains,usageReset:o.body.reset,currentPeriodUsage:o.body.periodUsage};X(n.dates),H(n.usage),J(n.dailyLimits),Q(n.monthlyLimits),_(n.domainsData),ee(n.usageReset),Y(n.currentPeriodUsage),R(!1)},M=!c||!m?!0:new Date(c)<=new Date(m),C=(t,r)=>{if(!t||!r||new Date(t)>new Date(r))return;const a=new Date(`${t}T00:00:00`).getTime(),o=new Date(`${r}T23:59:59`).getTime();j(a,o)},U=(t,r,a)=>{if(!t.current)return;r.current&&r.current.dispose(),r.current=$(t.current);const o=Object.keys(x).map(n=>{const g=x[n];return{name:n,value:g&&g[a]||0}});r.current.setOption({backgroundColor:"transparent",tooltip:{trigger:"item",appendToBody:!0,backgroundColor:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-lightest").trim(),borderColor:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light").trim(),textStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim()},formatter:n=>`${n.name}: ${n.value.toLocaleString()} (${n.percent.toFixed(1)}%)`},color:L,series:[{type:"pie",radius:"70%",label:{show:!1},labelLine:{show:!1},data:o}]})},ne=()=>{if(!v.current)return;d.current&&d.current.dispose(),d.current=$(v.current);let t=[],r=[],a=[];(S||y)&&(t.push("Received"),r.push({name:"Received",type:"bar",data:k.received,itemStyle:{color:L[0]},yAxisIndex:0})),(w||f)&&(t.push("Sent"),r.push({name:"Sent",type:"bar",data:k.sent,itemStyle:{color:L[1]},yAxisIndex:0})),a=W,d.current.setOption({tooltip:{trigger:"axis",backgroundColor:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-lightest").trim(),borderColor:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light").trim(),textStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim()},formatter:o=>{let n=o[0].name+"<br/>";return o.forEach(g=>{n+=g.marker+g.seriesName+": "+g.value.toLocaleString()+"<br/>"}),n}},legend:{data:t,textStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim(),fontSize:14}},grid:{left:"3%",right:"4%",top:"10%",bottom:"20%",containLabel:!0},dataZoom:[{type:"slider",show:!0,xAxisIndex:[0],start:0,end:100,backgroundColor:"transparent",fillerColor:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light").trim()+"40",borderColor:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light").trim(),handleStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-medium").trim()}

1,dataBackground:{lineStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light-medium").trim()},areaStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light").trim()}},selectedDataBackground:{lineStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim()},areaStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-medium").trim()}}},{type:"inside",xAxisIndex:[0],start:0,end:100}],xAxis:{type:"category",data:a,axisLabel:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim()}},yAxis:{type:"value",name:"",position:"left",axisLabel:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim(),formatter:o=>o.toLocaleString()},nameTextStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-dark").trim()},splitLine:{lineStyle:{color:getComputedStyle(document.documentElement).getPropertyValue("--imx-grey-light-medium").trim(),width:.5}}},series:r})},I=()=>{(S||y)&&U(F,p,"received"),(w||f)&&U(V,h,"sent"),ne()},N=s.useRef(I);return N.current=I,s.useEffect(()=>{N.current()},[x]),s.useEffect(()=>{j(i.monthAgo,i.now);const t=()=>{p.current&&p.current.resize(),h.current&&h.current.resize(),d.current&&d.current.resize()};window.addEventListener("resize",t);const r=new MutationObserver(()=>{N.current()});return r.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>{window.removeEventListener("resize",t),r.disconnect(),p.current&&p.current.dispose(),h.current&&h.current.dispose(),d.current&&d.current.dispose()}},[]),e.jsxs("div",{className:"wrapper wrapper--shift wrapper--padded fade-in",children:[e.jsx("h1",{className:"text-imx-black mb-8",children:"Usage Dashboard"}),(y||f)&&e.jsxs("div",{className:"mb-16",children:[e.jsx("h2",{className:"text-xl font-semibold mb-2 text-start",children:"Current usage period"}),e.jsxs("p",{className:"text-sm text-imx-grey-dark mb-4 text-start",children:["Usage resets in ",A.daysRemaining," days on ",A.date]}),e.jsxs("div",{className:"flex flex-col gap-4",children:[y&&e.jsxs("div",{children:[e.jsxs("div",{className:"mb-1",children:[l.received.toLocaleString()," of"," ",u.receiving.toLocaleString()," emails"," ",e.jsx("a",{href:"https://improvmx.com/guides/sending-receiving-limits",children:"received"})]}),e.jsx("div",{className:"w-full h-2 bg-imx-grey-light rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full bg-[#32D96E] transition-all duration-300",style:se})})]}),f&&e.jsxs("div",{children:[e.jsxs("div",{className:"mb-1",children:[l.sent.toLocaleString()," of"," ",u.sending.toLocaleString()," emails"," ",e.jsx("a",{href:"https://improvmx.com/guides/sending-receiving-limits",children:"sent"})]}),e.jsx("div",{className:"w-full h-2 bg-imx-grey-light rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full bg-[#005FFF] transition-all duration-300",style:ie})})]})]})]}),e.jsxs("div",{className:"flex flex-col gap-2 mb-8",children:[e.jsxs("div",{className:"w-full max-w-[260px] text-left relative",children:[e.jsxs("select",{className:"appearance-none pr-8 w-full",name:"period",id:"period",value:b?"custom"

1:D,onChange:t=>{if(t.target.value==="custom"){E(!0),C(c,m);return}const r=Number(t.target.value);E(!1),K(r),j(r,i.now)},children:[e.jsx("option",{value:i.weekAgo,children:"Last 7 days"}),e.jsx("option",{value:i.monthAgo,children:"Last 30 days"}),e.jsx("option",{value:i.threeMonthsAgo,children:"Last 90 days"}),e.jsx("option",{value:i.sixMonthsAgo,children:"Last 180 days"}),e.jsx("option",{value:"custom",children:"Custom range"})]}),e.jsx("span",{className:"h-12 pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 text-imx-grey-dark",children:"▾"})]}),b&&e.jsxs("div",{className:"flex items-center gap-1 md:gap-2",children:[e.jsx(T,{value:c,onChange:t=>{Z(t),C(t,m)},max:m||O(new Date),invalid:!M,placeholder:"From date",ariaLabel:"From date",presets:[{label:"30d ago",date:B(30)},{label:"7d ago",date:B(7)}]}),e.jsx("span",{className:"text-imx-grey-medium text-sm",children:"to"}),e.jsx(T,{value:m,onChange:t=>{q(t),C(c,t)},min:c||void 0,max:O(new Date),invalid:!M,placeholder:"To date",ariaLabel:"To date"})]}),!b&&D===i.sixMonthsAgo&&e.jsx("p",{className:"text-sm text-imx-grey-dark",children:"Tip: Drag the slider below the bar chart to zoom into a specific date range."})]}),e.jsxs("div",{className:"flex flex-col sm:flex-row gap-16 mt-36 lg:mt-20 xl:mt-0 mb-14",children:[(S||y)&&e.jsxs("div",{className:"grid grid-flow-col grid-rows-2 gap-4 bg-imx-white pr-8 rounded-md shadow-sm border border-solid border-imx-grey-light",children:[e.jsx("div",{className:"row-span-3",children:e.jsx("div",{ref:F,className:"w-[12em] h-[12em]"})}),e.jsx("div",{className:"col-span-2 flex items-end justify-center text-4xl font-bold text-imx-black",children:z(te)}),e.jsxs("div",{className:"col-span-2 flex flex-col items-center justify-start text-imx-grey-dark gap-1",children:[e.jsx(ae,{className:"w-10 h-10"}),"Received"]})]}),(w||f)&&e.jsxs("div",{className:"grid grid-flow-col grid-rows-2 gap-4 bg-imx-white pr-8 rounded-md shadow-sm border border-solid border-imx-grey-light ml-auto",children:[e.jsx("div",{className:"row-span-3",children:e.jsx("div",{ref:V,className:"w-[12em] h-[12em]"})}),e.jsx("div",{className:"col-span-2 flex items-end justify-center text-4xl font-bold text-imx-black",children:z(re)}),e.jsxs("div",{className:"col-span-2 flex flex-col items-center justify-start text-imx-grey-dark gap-1",children:[e.jsx(le,{className:"w-10 h-10"}),"Sent"]})]})]}),G?e.jsx("div",{className:"bg-imx-white rounded-md shadow-sm border border-solid border-imx-grey-light py-8 flex items-center justify-center text-3xl font-bold text-imx-grey",children:"Loading..."}):e.jsx("div",{className:"grid grid-flow-col bg-imx-white rounded-md shadow-sm border border-solid border-imx-grey-light pb-4",children:e.jsx("div",{className:"row",children:e.jsx("div",{ref:v,className:"mt-12 w-100 h-[20em]"})})})]})}export{we as default};