https://app.wattfootprint.com/_next/static/chunks/pages/budget-ddcd462738aed84c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6852],{19572:function(e,t,l){"use strict";var a=l(91941);t.Z=void 0;var s=a(l(64938)),n=l(85893);t.Z=(0,s.default)((0,n.jsx)("path",{d:"M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"}),"ChevronLeft")},26215:function(e,t,l){"use strict";var a=l(91941);t.Z=void 0;var s=a(l(64938)),n=l(85893);t.Z=(0,s.default)((0,n.jsx)("path",{d:"M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}),"ChevronRight")},19142:function(e,t,l){(window.__NEXT_P=window.__NEXT_P||[]).push(["/budget",function(){return l(26715)}])},26715:function(e,t,l){"use strict";l.r(t),l.d(t,{default:function(){return L}});var a=l(85893),s=l(9008),n=l.n(s),o=l(67294);l(51431);var i=l(62260),c=l(90228),r=l(28552),d=l(17931),u=l(74154),x=l(27484),m=l.n(x),p=l(96540),g=l(99609),b=l(36815),h=l(93393),f=l(87089),v=l(13173),j=l(44403),y=l(11163),N=l(67720),C=l(82175),Z=l(1870),w=l(99380);let defaultFormat=e=>"".concat(e,"%");function Slider(e){let{value:t,onChange:l,min:s=0,max:n=100,step:i=1,disabled:c=!1,formatLabel:r=defaultFormat,className:d=""}=e,[u,x]=(0,o.useState)(!1),m=Math.min(100,Math.max(0,(t-s)/(n-s)*100)),p="calc(".concat(m,"% + ").concat(11-.22*m,"px)");return(0,a.jsxs)("div",{className:"flex items-center gap-3 w-full ".concat(c?"opacity-50 cursor-not-allowed":""," ").concat(d),children:[(0,a.jsx)("span",{className:"text-sm text-labelText shrink-0 select-none",children:r(s)}),(0,a.jsxs)("div",{className:"uikit-slider relative flex-1",children:[u&&(0,a.jsxs)("div",{className:"absolute pointer-events-none flex flex-col items-center",style:{left:p,bottom:"calc(100% + 6px)",transform:"translateX(-50%)"},children:[(0,a.jsx)("div",{className:"bg-activeTabAndTextButton text-white text-xs font-medium px-2.5 py-1 rounded-lg whitespace-nowrap",children:r(t)}),(0,a.jsx)("div",{style:{width:0,height:0,borderLeft:"5px solid transparent",borderRight:"5px solid transparent",borderTop:"5px solid var(--active-tab-and-text-button)"}})]}),(0,a.jsx)("input",{type:"range",min:s,max:n,step:i,value:t,disabled:c,onChange:e=>l(Number(e.target.value)),onMouseEnter:()=>!c&&x(!0),onMouseLeave:()=>x(!1),onFocus:()=>!c&&x(!0),onBlur:()=>x(!1),style:{"--slider-fill":"".concat(m,"%")}})]}),(0,a.jsx)("span",{className:"text-sm text-labelText shrink-0 select-none",children:r(n)})]})}var S=l(81502),T=l(76458),k=l(53345);let B=[{key:"electricity",label:"Electricity",icon:h.Z,iconColor:"text-electricity",bgColor:"bg-electricityBg"},{key:"gas",label:"Gas",icon:f.Z,iconColor:"text-gas",bgColor:"bg-gasBg"},{key:"co2",label:"CO2",icon:j.Z,iconColor:"text-co2",bgColor:"bg-co2Bg",description:"Target is based on gas and electricity usage"}];var components_SetBudgetModal=e=>{var t,l,s;let{open:n,setOpen:i,displayDateText:c,period:r,selectedDate:x,getTypeSpecificRestriction:m}=e,j=(0,T.Z)(),_=(0,y.useRouter)(),[F,D]=(0,o.useState)(1),[M,E]=(0,o.useState)(null),[I,Y]=(0,o.useState)(null),[O,L]=(0,o.useState)(null),R=(0,u.T)(),z=(0,u.C)(e=>e.budget.goals),A=(0,u.C)(e=>e.budget.limits),P=(0,u.C)(e=>e.budget.billsRate),V=(0,u.C)(e=>e.budget.loading),U=(0,u.C)(e=>e.locations.selectedLocation),W=(0,u.C)(e=>e.overviewStats.nodes_data.sensorsCount);(0,o.useEffect)(()=>{(null==U?void 0:U.id)&&R((0,w.Md)(U.id))},[U,R]);let X=(0,C.TA)({initialValues:{rate:(null==I?void 0:I.rate)||P||"",budget:(null==I?void 0:I.budget)||"",consumption:(null==I?void 0:I.consumption)||"",reduce:(null==I?void 0:I.reduce)||0},enableReinitialize:!0,onSubmit:e=>{if(!(null==U?void 0:U.id)||!M)return;let t=x.month()+1,l="year"===r?"".concat(x.year(),"-01"):"".concat(x.year(),"-").concat(t.toString().padStart(2,"0")),a={type:M,period:l,period_type:r,budget:e.budget,consumption:e.consumption,rate:e.rate,reduce:e.reduce,locationId:null==U?void 0:U.id};I?R((0,w.Vx)({locationId:U.id,goalId:I.id,goalData:a})).unwrap().then(()=>{onClose()}):R((0,w.Ue)({locationId:U.id,goalData:a})).unwrap().then(()=>{onClose()})}});(0,o.useEffect)(()=>{let e=parseFloat(X.values.budget),t=parseFloat(X.values.rate);if(e&&t&&!isNaN(e)&&!isNaN(t)){let l=e/t;l!==parseFloat(X.values.consumption)&&X.setFieldValue("consumption",l)}},[X.values.budget,X.values.rate]);let onClose=()=>{i(!1),D(1),E(null),Y(null),L(null)},deleteBudget=e=>{L(e)},cancelDeleteBudget=()=>{L(null)},q=r.charAt(0).toUpperCase()+r.slice(1),G=M?M.charAt(0).toUpperCase()+M.slice(1):"",$=function(e){let t="gas"===e.type?d.D6:d.Rt,l=+e.consumption||0,a=+e.budget||0,s=(+e.reduce||0)/100,n=l*s,o=n*t/1e3,i=l*(1-s),c=i*t/1e3;return{saving:{consumption:(0,S.uf)(n,2,2),co2:(0,S.uf)(o,2,2),budget:(0,S.uf)(a*s,2,2)},target:{consumption:(0,S.uf)(i,2,2),co2:(0,S.uf)(c,2,2),budget:(0,S.uf)(a*(1-s),2,2)}}}(X.values),H=(0,o.useMemo)(()=>B.filter(e=>"co2"===e.key?W.electricity||W.gas:W[e.key]),[B,W]);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(k.Z,{open:n,onClose:onClose,title:1===F?"Set Budget for ".concat(c):(0,a.jsxs)(a.Fragment,{children:[(e=>{switch(e){case"electricity":return(0,a.jsx)(h.Z,{fontSize:"small",className:"text-electricity mr-1"});case"gas":return(0,a.jsx)(f.Z,{fontSize:"small",className:"text-gas mr-1"});default:return null}})(M),I?"Edit":"Set"," ",q," ",G," Budget",(0,a.jsx)("p",{className:"text-[12px] font-semibold text-text1 text-center uppercase",children:c})]}),variant:"default",actions:1===F?[]:[{children:"Close",onClick:onClose,rounded:"full",outline:!0,className:"mr-auto"},{children:"Save & Close",onClick:()=>X.handleSubmit(),rounded:"full",variant:"primary"}],children:1===F?(0,a.jsx)("div",{children:H.map(e=>{let t=z.find(t=>t.type===e.key),l=!!m&&m(e.key);return(0,a.jsxs)("div",{className:"flex items-center gap-x-3 p-3 border border-inputsStroke rounded-2xl mb-3 ",children:[(0,a.jsx)("div",{className:"p-3 flex items-center justify-center rounded-full ".concat(e.bgColor),children:(0,a.jsx)(e.icon,{className:"text-[20px] ".concat(e.iconColor)})}),(0,a.jsxs)("div",{className:"flex-1",children:[(0,a.jsx)("h4",{className:"text-labelText text-[18px] font-semibold",children:e.label}),e.description&&(0,a.jsx)("p",{className:"text-[14px] text-text1",children:e.description}),l&&"co2"!==e.key&&(0,a.jsx)("p",{className:"text-[14px] text-text1",children:"Remove annual budget to set monthly"})]}),!e.description&&(t?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(b.Z,{variant:"secondary",iconOnly:!0,className:"border-none text-labelText",icon:(0,a.jsx)(g.Z,{}),onClick:()=>

1{E(e.key),Y(t||null),D(2)}}),(0,a.jsx)(b.Z,{variant:"secondary",iconOnly:!0,className:"border-none text-labelText",icon:(0,a.jsx)(v.Z,{}),onClick:()=>deleteBudget(t)})]}):l?null:(0,a.jsx)(b.Z,{variant:"secondary",iconOnly:!0,className:"border-none text-labelText",icon:(0,a.jsx)(p.Z,{}),onClick:()=>{E(e.key),Y(null),D(2)}}))]},e.key)})}):(0,a.jsxs)("div",{children:[(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsx)("div",{className:"bg-btn-gradient p-px rounded-2xl",children:(0,a.jsx)("div",{className:"bg-globalBg3 py-4 px-5 rounded-2xl",children:P?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{className:"text-text1 text-[12px] font-semibold uppercase mb-1",children:"Last year Consumption"}),(0,a.jsx)("div",{className:"flex items-center justify-between",children:(0,a.jsx)("p",{className:"text-[14px] text-labelText font-semibold",children:"Based on last year’s data, we’ve calculated your average consumption and rate"})})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("p",{className:"text-text1 text-[12px] font-semibold uppercase mb-1",children:"Advice to upload bills"}),(0,a.jsxs)("div",{className:"flex items-center justify-between",children:[(0,a.jsx)("p",{className:"text-[14px] text-labelText font-semibold",children:"Upload your last 3 bills, and we'll calculate your average monthly consumption and rate"}),(0,a.jsx)(b.Z,{size:"small",className:"shrink-0",label:"Upload Bills",onClick:()=>_.push("/bills/bills-new/")})]})]})})}),(0,a.jsx)(Z.Z,{label:"Rate for the ".concat(r),value:String(null!==(t=X.values.rate)&&void 0!==t?t:""),onChange:e=>{(""===e||/^\d*\.?\d*$/.test(e))&&X.setFieldValue("rate",e)}})]}),(0,a.jsx)(N.Z,{className:"!my-6 bg-line"}),(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsxs)("p",{className:"text-[16px] text-labelText font-semibold",children:["Enter your total usage for the ",r]}),(0,a.jsxs)("div",{className:"flex items-center gap-x-6",children:[(0,a.jsx)(Z.Z,{label:"Budget for the ".concat(r),value:String(null!==(l=X.values.budget)&&void 0!==l?l:""),onChange:e=>X.setFieldValue("budget",parseFloat(e))}),(0,a.jsx)(Z.Z,{label:"".concat(G," usage for the ").concat(r),value:String(null!==(s=X.values.consumption)&&void 0!==s?s:""),onChange:e=>X.setFieldValue("consumption",parseFloat(e))})]})]}),(0,a.jsx)(N.Z,{className:"!my-6 bg-line"}),(0,a.jsxs)("div",{className:"space-y-5",children:[(0,a.jsx)("p",{className:"text-[16px] text-labelText font-semibold",children:"Set your reduction target"}),(0,a.jsx)(Slider,{value:X.values.reduce||0,onChange:e=>X.setFieldValue("reduce",e),min:A.min||0,max:A.max||30,step:.01,formatLabel:e=>"".concat(e,"%")})]}),(0,a.jsx)(N.Z,{className:"!my-6 bg-line"}),(0,a.jsxs)("div",{className:"space-y-3",children:[(0,a.jsxs)("p",{className:"text-[12px] text-text1 uppercase font-semibold",children:["Saving:"," ",(0,a.jsxs)("span",{className:"text-labelText text-xl font-semibold normal-case",children:[$.saving.consumption," kWh"]})," ",(0,a.jsx)("span",{className:"align-text-bottom",children:"|"})," ",(0,a.jsxs)("span",{className:"text-labelText text-xl font-semibold lowercase",children:[$.saving.co2," t"]})," ",(0,a.jsx)("span",{className:"align-text-bottom",children:"|"})," ",(0,a.jsx)("span",{className:"text-labelText text-xl font-semibold",children:"".concat(j," ").concat($.saving.budget)})]}),(0,a.jsxs)("p",{className:"text-[12px] text-text1 uppercase font-semibold",children:["Target:"," ",(0,a.jsxs)("span",{className:"text-labelText text-xl font-semibold normal-case",children:[$.target.consumption," kWh"]})," ",(0,a.jsx)("span",{className:"align-text-bottom",children:"|"})," ",(0,a.jsxs)("span",{className:"text-labelText text-xl font-semibold lowercase",children:[$.target.co2," t"]})," ",(0,a.jsx)("span",{className:"align-text-bottom",children:"|"})," ",(0,a.jsx)("span",{className:"text-labelText text-xl font-semibold",children:"".concat(j," ").concat($.target.budget)})]}),(0,a.jsxs)("p",{className:"text-[12px] text-text1",children:["We use the ",M," usage for the month to calculate carbon emissions targets"]})]})]})}),(0,a.jsx)(k.Z,{open:!!O,onClose:cancelDeleteBudget,title:"Delete this budget?",titleAlign:"left",className:"!w-[380px] !max-w-[calc(100vw-32px)]",containerClassName:"pt-0",actions:[{children:"Cancel",variant:"secondary",onClick:cancelDeleteBudget},{children:V?"Deleting...":"Delete",variant:"solid",onClick:()=>{O&&(null==U?void 0:U.id)&&R((0,w.wz)({locationId:U.id,goalId:O.id})).unwrap().then(()=>{L(null)})},disabled:V,icon:(0,a.jsx)(v.Z,{className:"text-[18px]"})}],children:(0,a.jsx)("p",{className:"text-labelText",children:"Are you sure you want to delete this budget? This action cannot be undone"})})]})},_=l(94834),F=l(4485),D=l(20109),M=l(47053),E=l(19572),I=l(26215),components_IntervalSelector=e=>{let{handlePrev:t,handleNext:l,displayText:s,nextPeriodIsDisabled:n,prevPerio

1dIsDisabled:o}=e;return(0,a.jsxs)("div",{className:"flex items-center gap-x-2",children:[(0,a.jsx)("button",{onClick:t,"aria-label":"Previous period",disabled:o,className:"h-full bg-componentBg p-[4px] text-[18px] flex items-center justify-center rounded-full text-labelText disabled:text-text1",children:(0,a.jsx)(E.Z,{})}),(0,a.jsx)("span",{className:"px-[4px] text-activeText w-[76px] text-center",children:s}),(0,a.jsx)("button",{onClick:l,"aria-label":"Next period",disabled:n,className:"h-full bg-componentBg p-[4px] text-[18px] flex items-center justify-center rounded-full text-labelText disabled:text-text1",children:(0,a.jsx)(I.Z,{})})]})},Budget=()=>{var e,t;let[l,s]=(0,o.useState)("month"),[n,i]=(0,o.useState)(m()()),[c,r]=(0,o.useState)(!1),x=(0,u.T)(),h=(0,u.C)(e=>e.budget.goals),f=(0,u.C)(e=>e.budget.goalsTargets),v=(0,u.C)(e=>e.budget.fromYearGoals),j=(0,u.C)(e=>e.locations.selectedLocation),y=(0,u.C)(e=>{var t;return(null===(t=e.overviewStats)||void 0===t?void 0:t.energy_overview)||{}}),N=(0,u.C)(e=>e.budget.chartData);(0,o.useEffect)(()=>{if(!(null==j?void 0:j.id))return;let e="?period_type=".concat(l,"&type=electricity&year=").concat(n.year(),"&month=").concat(n.month()+1),t="?period_type=".concat(l,"&period=").concat(n.format("YYYY-MM"));x((0,w.ho)({locationId:null==j?void 0:j.id,query:e})),x((0,w.gY)({locationId:null==j?void 0:j.id,query:t}))},[x,l,n,j]),(0,o.useEffect)(()=>{if(!(null==j?void 0:j.id))return;let e=[n.startOf(l).toDate(),n.endOf(l).toDate()];x((0,w.yp)({locationId:j.id,period:l,dateRange:e}))},[x,null==j?void 0:j.id,l,n]);let C="month"===l&&n.month()===m()().month()||"year"===l&&n.year()===m()().year(),Z="month"===l&&0===n.month(),S="month"===l?n.format("MMMM"):n.format("YYYY"),T=(()=>{let e=m()().year(),t=m()().month(),s=n.year(),o=n.month();if(s!==e)return{disabled:!0,text:"Set Budget",icon:(0,a.jsx)(p.Z,{})};if("year"===l)return{disabled:!1,text:"Set Budget",icon:(0,a.jsx)(p.Z,{})};let i=h&&h.length>0;return o<t?{disabled:!i,text:i?"Edit budget":"Set budget",icon:i?(0,a.jsx)(g.Z,{}):(0,a.jsx)(p.Z,{})}:o===t?{disabled:!1,text:i?"Edit budget":"Set budget",icon:i?(0,a.jsx)(g.Z,{}):(0,a.jsx)(p.Z,{})}:{disabled:!0,text:"Set Budget",icon:(0,a.jsx)(p.Z,{})}})(),k=(0,o.useMemo)(()=>[n.startOf(l).toDate(),n.endOf(l).toDate()],[n,l]),B=(0,o.useMemo)(()=>Object.keys(y).reduce((e,t)=>{let{price:l=0,value:a=0}=y[t].usage||{},s=a*function(e){switch(e){case"electricity":return d.Rt;case"gas":return d.D6;default:return 0}}(t)/1e3;return d.eW&&(e.total||(e.total={usage:0,price:0,co2:0}),e.total.usage+=a,e.total.price+=l,e.total.co2+=s),{...e,[t]:{usage:a,price:l,co2:s}}},{}),[y]);return(0,a.jsxs)("div",{className:"flex-1 overflow-auto bg-globalBg2 rounded-3xl p-5 flex flex-col",children:[(0,a.jsxs)("div",{className:"flex items-center justify-between mb-5",children:[(0,a.jsxs)("div",{className:"flex items-center justify-start",children:[(0,a.jsx)(M.Z,{className:"mr-[20px]",availablePeriods:["month","year"],setPeriod:e=>{s(e)},period:l}),(0,a.jsx)(components_IntervalSelector,{handleNext:()=>{C||i(n.add(1,l))},handlePrev:()=>{i(n.subtract(1,l))},displayText:S,nextPeriodIsDisabled:C||(null==N?void 0:N.loading),prevPeriodIsDisabled:Z||(null==N?void 0:N.loading)})]}),(0,a.jsx)(b.Z,{disabled:T.disabled,icon:T.icon,label:T.text,onClick:()=>r(!0)})]}),(0,a.jsxs)("div",{className:"flex-1 overflow-hidden flex flex-col",children:[(0,a.jsx)("div",{className:"w-full h-2/5 mb-[20px] overflow-hidden",children:(0,a.jsx)(F.Z,{withBorders:!0,noTitle:!0,compact:!0,goals:f,usages:B})}),(0,a.jsx)("div",{className:"flex-1 overflow-hidden",children:(0,a.jsxs)("div",{className:"h-full grid grid-cols-3 gap-[20px]",children:[(0,a.jsx)("div",{className:"rounded-[20px] p-[20px] border border-inputsStroke col-span-2",children:(0,a.jsx)(D.Z,{title:"Total Usage",dateFormat:(null===d.ly||void 0===d.ly?void 0:null===(t=d.ly[l])||void 0===t?void 0:null===(e=t[0])||void 0===e?void 0:e.dateFormat)||"YYYY-MM-DD",periodName:l,graphics:N.graphics,notes:[],units:["value","price","co2"],loading:N.loading,refetchNotes:()=>null})}),(0,a.jsx)(_.Z,{locationId:null==j?void 0:j.id,interval:l,dateRange:k,title:"Data for ".concat(S),periodLabels:{current:"",previous:""}})]})})]}),(0,a.jsx)(components_SetBudgetModal,{open:c,setOpen:r,displayDateText:S,period:l,selectedDate:n,getTypeSpecificRestriction:e=>{if("month"!==l)return!1;let t=v&&v.some(t=>t.type===e),a=h&&h.some(t=>t.type===e);return t&&!a}})]})},Y=l(91444),O=l(93973);let budget_Budget=()=>{let e=(0,u.C)(e=>e.budget.notify),notify=(e,t)=>(0,Y.Am)(t,{type:e});return(0,o.useEffect)(()=>{e.showNotification&&notify(e.typeNotification,e.textNotification)},[e.showNotification]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n(),{children:(0,a.jsx)("title",{children:(0,d.pz)("Budget")})}),(0,a.jsxs)(c.Z,{children:[(0,a.jsx)(r.Z,{title:"Budget",main:!0,enableSelector:!0}),(0,a.jsx)(Budget,{}),(0,a.jsx)(O.Z,{})]})]})};budget_Budget.getLayout=function(e){return(0,a.jsx)(i.Z,{children:e})};var L=budget_Budget}},function(e){e.O(0,[7702,5443,2757,518,8792,1664,7724,5892,2175,4844,5708,8607,7819,6094,6865,2260,545,5251,8655,1334,3255,9774,2888,179],function(){return e(e.s=19142)}),_N_E=e.O()}]);