https://ailikeme.ai/static/4078.061d0c5ec35ff9375552.js

1"use strict";(self.webpackChunkmy_webpack_project=self.webpackChunkmy_webpack_project||[]).push([[4078],{21730(e,t,a){a.r(t),a.d(t,{default:()=>y});var l=a(39471),n=a(4826),r=a.n(n),o=a(51794),s=a(18467),c=a(21628),i=a(705),u=a(92088),d=a(62727),m=a(10607),f=a(64834),g=a(71428),v=a(64350);function p(e){let t=e.newUsers,a=e.returningUsers;return l.createElement("div",{className:"w-full max-w-md bg-white rounded-xl shadow-md p-6"},l.createElement("div",{className:"flex items-center gap-2 mb-6"},l.createElement(v.A,null),l.createElement("span",{className:"text-gray-600 text-sm font-medium"},"User Demographics")),l.createElement("div",{className:"relative flex items-center justify-center h-40 mb-6"},l.createElement("div",{className:"w-32 h-32 bg-[#27B3AE] rounded-full flex items-center justify-center text-white font-bold text-2xl"},a,"%"),l.createElement("div",{className:"absolute top-0 w-24 h-24 bg-[#F7A928] rounded-full flex items-center justify-center text-white font-bold text-xl translate-x-16 z-20"},t,"%")),l.createElement("div",{className:"bg-gray-100 flex items-center justify-center gap-6 rounded-lg px-3"},l.createElement("div",{className:"flex items-center gap-2"},l.createElement("span",{className:"w-4 h-4 rounded bg-[#27B3AE]"}),l.createElement("p",{className:"text-sm text-gray-700"},"Returning Users")),l.createElement("div",{className:"flex items-center gap-2"},l.createElement("span",{className:"w-4 h-4 rounded bg-[#F7A928]"}),l.createElement("p",{className:"text-sm text-gray-700"},"New Users"))))}function x(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l,n,r,o,s=[],c=!0,i=!1;try{if(r=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;c=!1}else for(;!(c=(l=r.call(a)).done)&&(s.push(l.value),s.length!==t);c=!0);}catch(e){i=!0,n=e}finally{try{if(!c&&null!=a.return&&(o=a.return(),Object(o)!==o))return}finally{if(i)throw n}}return s}}(e,t)||function(e,t){if(e){if("string"==typeof e)return E(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?E(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function E(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,l=Array(t);a<t;a++)l[a]=e[a];return l}const y=e=>{e.formatDate;const t=(0,s.d4)(e=>e.auth),a=x((0,l.useState)([]),2),n=a[0],v=a[1],E=x((0,l.useState)(""),2),y=E[0],h=E[1],b=x((0,l.useState)(""),2),w=b[0],A=b[1],N=x((0,l.useState)(""),2),D=N[0],S=N[1],j=x((0,l.useState)(!1),2),U=j[0],Y=j[1],R=x((0,l.useState)([r()().subtract(1,"month"),r()()]),2),F=R[0],T=R[1],k=x((0,l.useState)(!1),2),C=k[0],M=k[1],O=x((0,l.useState)(0),2),_=(O[0],O[1]),I=async(e,a)=>{try{var l,n,r,s,c;Y(!0);const i=null==t||null===(l=t.userData)||void 0===l||null===(l=l.influencer)||void 0===l?void 0:l.id,u=await o._d.getFanDemographic(e.format("YYYY-MM-DD"),a.format("YYYY-MM-DD"),i);v((null==u?void 0:u.data)||[]);const d=(e=>{if(!e||0===e.length)return 0;let t=e[0].count,a=0;for(let l=1;l<e.length;l++)t<e[l].count&&(t=e[l].count,a=l);return a})((null==u||null===(n=u.data)||void 0===n?void 0:n.locationData)||[]);h((null==u||null===(r=u.data)||void 0===r||null===(r=r.locationData[d])||void 0===r?void 0:r.location)||""),A((null==u||null===(s=u.data)||void 0===s||null===(s=s.fanTypeData)||void 0===s||null===(s=s.find(e=>"new"===e.type))||void 0===s?void 0:s.percent)||""),S((null==u||null===(c=u.data)||void 0===c||null===(c=c.fanTypeData)||void 0===c||null===(c=c.find(e=>"returning"===e.type))||void 0===c?void 0:c.percent)||"")}catch(e){console.error("Error fetching engagement data:",e),v([])}finally{Y(!1)}};return(0,l.useEffect)(()=>{var e;F[0]&&F[1]&&I(F[0],F[1],null==t||null===(e=t.userData)||void 0===e||null===(e=e.influencer)||void 0===e||e.id)},[]),(0,l.useEffect)(()=>{C&&(_(e=>e+1),M(!1))},[C]),l.createElement(l.Fragment,null,l.createElement(g.default,{onApply:e=>{T(e.dateRange),console.log(null==e?void 0:e.dateRange,"date"),I(null==e?void 0:e.dateRange[0],null==e?void 0:e.dateRange[1]),M(!0)},onReset:()=>{T([r()().startOf("month"),r()()]);let e=r()().startOf("month"),t=r()();I(e,t),M(!0)},dateRange:F,setDateRange:T,mode:"single"}),l.createElement("div",{className:"bg-[#F3EDE8]"},l.createElement("div",{className:"sm:flex sm:flex-col gap-2 mt-2 "},l.createElement("div",{className:"flex flex-row gap-2"},l.createElement(i.A,{data:null==n?void 0:n.genderData,header:"Total Users"}),l.createElement("div",{className:"flex flex-row gap-[6px]"},l.createElement(p,{newUsers:w,returningUsers:D})),l.createElement("div",{className:"flex flex-col flex-grow items-center gap-2"},l.createElement(m.A,{logo:l.createElement(u.A,null),header:"Total Spent",value:null==n?void 0:n.totalSpentAmount}),l.createElement(m.A,{logo:l.createElement(d.A,null),header:"Top Country",value:y}))),l.createElement("div",{className:"sm:flex sm:flex-row gap-2 flex flex-col "},l.createElement("div",{className:"px-14 py-5 bg-white rounded-lg w-full"},l.createElement(c.A,{data:null==n?void 0:n.ageData,dataKey:"percent",xAxisKey:"age",yPostFixTooltip:"fans",xPrefixTooltop:"ages",labelX:"Age",labelY:"Percentage",title:"Age Distribution of Your Users",barColor:"#FFA33E",height:420,loading:U,shouldRotateLabels:!1})),l.createElement(f.A,{data:(null==n?void 0:n.locationData)||[]})))))}}}]);