@zeniai/web-components 3.17.24 → 3.17.25

package/dist/OpExByVendorPage-C1PGMDWy.cjs

@@ -0,0 +1,100 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./vendor-.pnpm-DLVCFIC_.cjs"),y=require("react"),u=require("@emotion/styled"),o=require("./index-CxdL3KSn.cjs"),D=require("recharts"),ie=require("@zeniai/client-epic-state"),w=require("./chartTypes-CpzJjV0O.cjs"),ce=require("./toChartData-whjiHJaj.cjs"),A=require("./analyticsHelper-u3ileqb8.cjs"),de=require("./TimeRangeSwitcher-BnewXm7j.cjs"),me=require("./TimeframeSwitcherWithToggle-BRtauGTF.cjs"),pe=require("./NoDataChart-DvdqX33I.cjs"),ue=require("./NoDataTable-DJ5Dd-Dk.cjs"),K=require("./detailCommon-r26BpzvM.cjs"),z=require("./getReferrerType-Dc1M7vxU.cjs"),F=require("./CollapsableReportTable-CYJ-MplC.cjs"),ee=require("./mapTimeframeBalancesToTreeNode-DiGSIk7E.cjs"),X=require("./mapLoadingInProgressToTreeNode-b2CzZOA_.cjs"),he=require("./mapSpacerToTreeNode-BcritkXf.cjs"),ge=u.div`
+  display: flex;
+`,xe=u.div`
+  flex: display;
+  opacity: 0.85;
+  width: 320px;
+  border-radius: ${o.Space.sp1};
+  flex-direction: column;
+  padding: ${o.Space.sp3};
+  background-color: ${e=>e.theme.colors.black};
+`,J=u.div`
+  display: flex;
+  justify-content: space-between;
+`,U=u(o.StandardRegular)`
+  color: ${e=>e.color??o.Colors.neutralGrey2Light};
+  text-align: left;
+`,Q=u(o.StandardRegular)`
+  color: ${e=>e.color??o.Colors.neutralGrey2Light};
+  text-align: right;
+`,fe=u.div`
+  margin: ${o.Space.sp2} ${o.Space.sp0} ${o.Space.sp2} ${o.Space.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${o.Colors.neutralGrey3Dark};
+`,Ce=({active:e,payload:t,barName:r})=>{const n=[];if(t!==void 0&&e===!0){const l=t.filter(x=>x.name==r)[0],a=l.payload,p=l.color,i={amount:a.record[r].amount?.amount??0,currencyCode:a.record[r].amount?.currencyCode??"",currencySymbol:a.record[r].amount?.currencySymbol??""},c={amount:0,currencyCode:"",currencySymbol:""};let h=0,m;for(m in a.record)m.endsWith("_actual")&&(h+=a.record[m].amount?.amount??0);c.amount=h,c.currencyCode=i.currencyCode,c.currencySymbol=i.currencySymbol,n.push({barName:w.getIDFromChartValueKey(r),actual:i,color:p,total:c,timeframeTick:a.timeLabel})}return n},ye=({barLabelsWithValues:e,getVendorName:t})=>s.jsxRuntimeExports.jsx(ge,{children:s.jsxRuntimeExports.jsxs(xe,{children:[s.jsxRuntimeExports.jsxs(J,{children:[s.jsxRuntimeExports.jsx(U,{color:e[0].color,children:`${t(e[0].timeframeTick,e[0].barName)}`}),s.jsxRuntimeExports.jsx(Q,{color:e[0].color,children:`${w.currencyFormatter(e[0].actual)}`})]}),s.jsxRuntimeExports.jsx(fe,{}),s.jsxRuntimeExports.jsxs(J,{children:[s.jsxRuntimeExports.jsx(U,{color:o.Colors.primaryDark,children:`${o.appLocale.getLocalizedStrings().chartCard.total}`}),s.jsxRuntimeExports.jsx(Q,{children:`${w.currencyFormatter(e[0].total)}`})]})]})}),_e=e=>{const t=Ce({...e});return t.length===0?null:s.jsxRuntimeExports.jsx(ye,{barLabelsWithValues:t,getVendorName:e.getVendorName})},Te=y.memo(_e),Z=[o.Colors.graphColor34,o.Colors.graphColor05,o.Colors.graphColor08,o.Colors.graphColor11,o.Colors.graphColor13,o.Colors.graphColor19,o.Colors.graphColor29,o.Colors.graphColor28,o.Colors.graphColor20,o.Colors.graphColor21,o.Colors.graphColor22,o.Colors.graphColor14,o.Colors.graphColor35,o.Colors.graphColor31,o.Colors.graphColor33,o.Colors.graphColor32,o.Colors.graphColor36,o.Colors.graphColor02,o.Colors.graphColor06,o.Colors.graphColor04,o.Colors.graphColor10,o.Colors.graphColor12,o.Colors.graphColor15,o.Colors.graphColor18,o.Colors.graphColor17,o.Colors.graphColor07,o.Colors.graphColor34Dark,o.Colors.graphColor05Dark,o.Colors.graphColor08Dark,o.Colors.graphColor11Dark,o.Colors.graphColor13Dark,o.Colors.graphColor19Dark,o.Colors.graphColor29Dark,o.Colors.graphColor28Dark,o.Colors.graphColor20Dark,o.Colors.graphColor21Dark,o.Colors.graphColor22Dark,o.Colors.graphColor14Dark,o.Colors.graphColor35Dark,o.Colors.graphColor31Dark,o.Colors.graphColor33Dark,o.Colors.graphColor32Dark,o.Colors.graphColor36Dark,o.Colors.graphColor02Dark,o.Colors.graphColor06Dark,o.Colors.graphColor04Dark,o.Colors.graphColor10Dark,o.Colors.graphColor12Dark,o.Colors.graphColor15Dark,o.Colors.graphColor18Dark,o.Colors.graphColor17Dark,o.Colors.graphColor07Dark];class I{_barColors;_barColorsKeyWise;_defaultColor;constructor(){this._defaultColor=o.Colors.graphColor34,this._barColors=Z.slice(),this._barColorsKeyWise=new Map}static#e=new I;getBarColor(t){const r=I.instance();return r._barColorsKeyWise.has(t)||(r._barColors.length===0&&(r._barColors=Z.slice()),r._barColorsKeyWise.set(t,r._barColors.shift()??r._defaultColor)),r._barColorsKeyWise.get(t)}shouldUpdate(t){const r=I.instance(),n=Array.from(r._barColorsKeyWise.keys()).sort();return!s.isEqual(n,t)}static init(){return this.#e=new I,this.#e}static instance(){return this.#e}}const be=I.instance(),Re=(e,t)=>{const r=new Set,n={};let l;const a=t.top4VendorsAndOthers;return Object.keys(a).length>0&&Object.keys(a).forEach(p=>{a[p].forEach((c,h)=>{const m=`vendor_${h}`,g=w.getChartValueKey(m,"actual");r.add(g),l==null&&c.balance!=null&&(l=g),n[g]!=null?n[g].push({key:g,balance:c.balance}):n[g]=[{key:g,balance:c.balance}]})}),l!=null?ce.toChartData(e,[...r],l,n):void 0},je=u.div`
+  width: ${e=>e.width}px;
+  height: ${e=>e.height}px;
+`;function ve({selectedRangeReport:e,width:t,height:r,showBarHoverBackground:n=!1,isDetailPage:l=!1}){const a=y.useRef(!1),p=be,[i,c]=y.useState(void 0);y.useEffect(()=>{a.current=!0},[]);const h=Re(e.firstMonthOfFY,e),m=()=>{const d=[];return h?.orderedKeys.forEach(_=>{const j=l===!0&&!a.current;d.push(x(_,j))}),d},x=(d,_)=>s.jsxRuntimeExports.jsx(D.Bar,{name:d,animationDuration:_?500:void 0,style:{cursor:"pointer"},dataKey:j=>{const T=j.record;return(T[d]?.amount!=null?T[d].amount:void 0)?.amount??0},stackId:"chartByTimeSeries",fill:p.getBarColor(w.getIDFromChartValueKey(d)),onMouseEnter:()=>{i!==d&&c(d)},onMouseLeave:()=>{i!=null&&c(void 0)}},d),g=({active:d,payload:_})=>_?.find(T=>T.name===i)!=null&&i!=null&&d===!0?s.jsxRuntimeExports.jsx(Te,{active:d,payload:_,barName:i,getVendorName:f}):null,f=(d,_)=>{const j=ie.getOpexVendorTimeframeKey(d);try{const T=_.split("_")[1];return e.top4VendorsAndOthers[j][parseInt(T)].vendor.name}catch(T){return console.warn("Was not able to parse vendor index for tooltip ",T),""}};return h==null?null:s.jsxRuntimeExports.jsx(we,{chartData:h,showBarHoverBackground:n,barElements:m(),customToolTipContent:s.jsxRuntimeExports.jsx(g,{}),width:t,height:r,isDetailPage:l===!0})}const we=({chartData:e,barElements:t,customToolTipContent:r,width:n,height:l,showBarHoverBackground:a=!1,isDetailPage:p})=>{const i=s.useTheme(),c=w.getCurrencySymbol(e),h=a!==!1,m=p?(n-60)/w.maxXAxisItems.operating_expenses_by_vendor*(w.maxXAxisItems.operating_expenses_by_vendor-e.timeseries.length):20;return s.jsxRuntimeExports.jsx(je,{width:n,height:l,children:s.jsxRuntimeExports.jsx(s.AutoSizer,{children:({height:x,width:g})=>s.jsxRuntimeExports.jsxs(D.ComposedChart,{width:g,height:x,stackOffset:"sign",data:e.recordByTimeseries,barCategoryGap:"25%",maxBarSize:p?o.sp[5]:30,margin:{top:5,right:m,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto"},children:[s.jsxRuntimeExports.jsx(D.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:i.colors.grey3}),s.jsxRuntimeExports.jsx(D.XAxis,{dataKey:f=>f.timeLabel.label,type:"category",axisLine:{stroke:i.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:i.colors.hero,...o.textStyles.extraSmallRegular.cssObject}}),s.jsxRuntimeExports.jsx(D.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:i.colors.hero,...o.textStyles.extraSmallRegular.cssObject},tickFormatter:f=>o.amountValueToString("0,0.[00]a",f,c)}),s.jsxRuntimeExports.jsx(D.Tooltip,{wrapperStyle:{zIndex:2},cursor:h?{stroke:i.colors.background,strokeWidth:(g-120)/w.maxXAxisItems.operating_expenses_by_vendor,fill:i.colors.background}:!1,content:r,allowEscapeViewBox:{x:!1,y:!0}}),t]})})})};function Se(e){return{locale_id:e.localeId,show_negative_amount_in_parenthesis:e.showNegativeAmountInParenthesis,filter_accounts_with_nil_balances:e.filterAccountsWithNilBalances,filter_account_groups_with_nil_balances:e.filterAccountGroupsWithNilBalances,company_name:e.companyName,statement_file_type:e.statementFileType,timeframe:e.timeframe,timezone:e.timezone,additional_balances:e.additionalBalances,format:e.format,sort_key:e.sortKey,sort_order:e.sortOrder,is_compare_mode_on:e.isCompareModeOn,search_string:e.searchString}}function Ee(e){const{isCompareModeOn:t,report:r,currentTenantCompanyName:n}=e,l=[];if(t&&(l.push("this_period_vs_last_period_percent"),l.push("this_period_vs_last_period")),r.dataAvailable!=null)return{localeId:o.appLocale.getAppLocaleID(),showNegativeAmountInParenthesis:!0,filterAccountsWithNilBalances:"filter_actual_nil_balances",filterAccountGroupsWithNilBalances:"filter_actual_forecast_empty_account_group_balances",companyName:n,statementFileType:"excel",timeframe:e.timeframe,timezone:e.timezone,additionalBalances:l,format:e.reportType,sortKey:e.sortKey,sortOrder:e.sortOrder,isCompareModeOn:e.isCompareModeOn,searchString:e.searchString}}function ke(e){const t=Ee(e);if(t!=null)return Be(e.statementEndPoint,e.authParams,t)}async function Be(e,t,r){const n=o.appLocale.getLocalizedStrings().downloadReport,l=`${e}?query=${encodeURIComponent(JSON.stringify(Se(r)))}`;try{const a=await o.fetchRequest({urlEndPoint:l,authParams:t,fileType:r.statementFileType});if(a.ok){const p=o.getFileNameFromResponseHeaders(a.headers,n.defaultFileName),i=await a.arrayBuffer();s.fileDownload(i,p)}else console.error(`${n.reportErrorMessage} ${a.statusText}`)}catch(a){console.error(`${n.reportErrorMessage} ${JSON.stringify(a)}`)}}function De({title:e,balances:t,config:r,nodeId:n}){return{children:[],id:n??F.uniqueID("title_string_only",[]),isLastNode:!1,reportElementData:{element:{kind:"title_string_only",title:e,data:t,numOfBalances:t.length},config:r}}}function Ie({opExByVendor:e,numOfBalances:t,title:r,isLastNode:n,config:l}){const a=e.account?.accountName??"-",p=e.classBase?.className??"-",i=F.uniqueID("vendor_row",[],r+a+p);return{children:[],id:i,isLastNode:n,reportElementData:{element:{kind:"vendor_row",title:r,data:e,numOfBalances:t},config:l}}}function Ne({title:e,balances:t,config:r,numOfBalances:n,nodeId:l}){return{children:[],id:l??F.uniqueID("total",[]),isLastNode:!1,reportElementData:{element:{kind:"total",title:e,data:t,numOfBalances:n},config:r}}}const Pe=(e,t,r,n=!0)=>{const l=r.mode==="this_period_vs_period_before"?e.filter.balancesRange.numberOfPeriods+1:e.filter.balancesRange.numberOfPeriods,a=e.totalBalances!=null?[...e.totalBalances.balances,...e.totalBalances.additionalBalances]:[];e.totalBalances?.totalBalance!=null&&a.push(e.totalBalances.totalBalance);const p=ee.mapTimeframeBalancesToTreeNode({balances:a,config:r}),i=[];i.push(p);const c=o.appLocale.getLocalizedStrings().vendors.opExByVendor,h=r.opexByVendorConfig?.sortOrSearchInProgress??!1,m=r.opexByVendorConfig?.pageFetchInProgress??!1;if(h===!0)[...Array(10)].forEach((x,g)=>{i.push(X.mapLoadingInProgressToTreeNode({title:`${g}+${c.loading}`,balances:a,config:r}))});else if(e.opexBalances.length>0){if(!t.searchString){const f=Ne({title:o.appLocale.getLocalizedStrings().chartCard.total,balances:e.totalBalances,config:r,numOfBalances:l});i.push(f)}const x=t.pageToken[t.timeframe],g=e.opexBalances.map((f,d)=>Ie({opExByVendor:f,title:f.vendor.name,numOfBalances:l,isLastNode:d===e.opexBalances.length-1&&x==null,config:r}));i.push(...g),m===!0&&[...Array(1)].forEach((f,d)=>{i.push(X.mapLoadingInProgressToTreeNode({title:`${d}+${c.loading}`,balances:a,config:r}))}),[...Array(1)].forEach((f,d)=>{i.push(he.mapSpacerToTreeNode({title:`${d}+${c.loading}`,balances:[],config:r}))})}return e.opexBalances.length===0&&h!==!0&&i.push(De({title:o.appLocale.getLocalizedStrings().vendors.opExByVendor.noResultsFound,balances:a,config:r})),{config:r,headerNodes:n?[p]:[],contentNodes:i}};function $e(e,t,r,n=!0){Object.assign(e.config,t);const l=Oe(r),a=ee.mapTimeframeBalancesToTreeNode({balances:l,config:t});return{config:t,headerNodes:n?[a]:[],contentNodes:[a,...e.contentNodes.slice(1)]}}const Oe=e=>e.totalBalances!=null?[...e.totalBalances.balances,...e.totalBalances.additionalBalances]:[],N={chartHeight:new o.ResponsiveSized(288,360),wrapperPadding:new o.ResponsiveSized(o.sp[3],o.sp[3],o.sp[8]),contentPaddingLeft:new o.ResponsiveSized(o.sp[0],o.sp[0],o.sp[0]),contentPaddingRight:new o.ResponsiveSized(o.sp[3],o.sp[3],o.sp[8])},Le=u.div`
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding: ${o.Space.sp0};
+  gap: 2px;
+`,Ae=u.div`
+  position: relative;
+  box-shadow: ${e=>`2px 2px ${o.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>N.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>N.wrapperPadding.valuePx(e.windowSize)};
+`,ze=u.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey5};
+`,Fe=u.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Me=u.div`
+  height: 96px;
+  width: 96px;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${o.Space.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,qe=u(o.SmallRegularSp)`
+  margin-top: ${o.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,We=u.div`
+  display: flex;
+  padding: ${o.Space.sp2} ${o.Space.sp0} ${o.Space.sp4} ${o.Space.sp0};
+`,Ve=u.div``,Ke=u.div``,Ge=u.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: ${e=>N.chartHeight.valuePx(e.windowSize)};
+  padding-bottom: ${o.Space.sp6};
+`,Ye=u.div`
+  display: flex;
+`,He=u.div`
+  margin-top: ${o.Space.sp5};
+  margin-bottom: ${o.Space.sp6};
+`,Xe=u.div`
+  display: flex;
+  position: sticky;
+  justify-content: center;
+  padding-top: ${o.Space.sp8};
+  padding-left: ${e=>N.wrapperPadding.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey4};
+`,Je=u.div`
+  width: 100%;
+  height: calc(100vh - ${o.Space.sp11});
+`,Ue=({fetchState:e})=>e==="In-Progress"||e==="Not-Started"?s.jsxRuntimeExports.jsx(ze,{children:s.jsxRuntimeExports.jsx(o.ActivityIndicator,{size:"ExtraLarge",start:!0})}):null,Qe=({report:e,vendorTabsToShow:t,uiState:r,downloadParams:n,onVendorTabSelectionChanged:l,onReloadReport:a,onBackClick:p,onFetchOpExByVendors:i,onAdditionalBalanceSelectionChanged:c,onTimeframeSelectionChanged:h,onSortOrderChanged:m,onSortOrSearchStarted:x,onVendorNameAndBalanceClicked:g,onPageFetchStarted:f,previousTabPosition:d,setPreviousTabPosition:_,updateDownloadStateHandler:j,onClearSearch:T,analytics:v,onClickMenuIcon:M})=>{const[k,P]=y.useState(r.searchString[r.timeframe]),[$,O]=y.useState(!1),b=o.useWindowSizeContext(),E=y.useRef(null),q=o.getVendorTabsToShow(t),oe=q.length>1,re=o.appLocale.getLocalizedStrings().reports.common,G=o.appLocale.getLocalizedStrings().vendors,Y=s.useTheme(),te=["month","quarter"],se=e.availableNumberOfPeriods!=null&&e.availableNumberOfPeriods<2,L=r.mode==="compare_mode"&&!se,W=e.allTimeframeTicks.length===0,{timeframe:S}=r,B=r.searchString[S];o.useSentryPerformanceTracking({componentName:"vendors.opex_by_vendor.list"});const ne=y.useCallback(R=>{i(S,B,R)},[S,B,i]),ae=y.useCallback((R,C)=>{window.scrollTo({top:E.current?.offsetTop,behavior:"smooth"}),R.length>0?(x(!0),i(C,R,!1)):(x(!1),T(C))},[T,i,x]),H=y.useRef(s.debounce((R,C)=>ae(R,C),500,{trailing:!0})).current,le=(R,C)=>{m(R,C,S),x(!0),i(S,B,!1)};if(y.useEffect(()=>{async function R(){await ke({report:e,isCompareModeOn:L,downloadState:r.downloadState,reportType:"more_detailed",timeframe:r.timeframe,sortKey:r.sortKey[r.timeframe],sortOrder:r.sortOrder[r.timeframe],searchString:r.searchString[S],...n}),v?.trackDownload(z.getReferrerType("operating_expenses_by_vendor"),A.toTimeframeFilter(r.timeframe),"excel",L),j("Completed")}$&&r.downloadState!=="In-Progress"&&(O(!1),j("In-Progress"),R())},[e,r,L,n,r.downloadState,$]),y.useEffect(()=>{P(B)},[B]),e.fetchState==="Error")return s.jsxRuntimeExports.jsxs(Fe,{children:[s.jsxRuntimeExports.jsx(Me,{"data-testid":o.generateDataTestId("op-ex-by-vendor-reload-page"),onClick:a,children:s.jsxRuntimeExports.jsx(o.SvgReload,{})}),s.jsxRuntimeExports.jsx(qe,{children:re.failed})]});const V=e.totalBalances?.totalBalance;if(r.sortOrSearchInProgress===!1&&r.pageFetchInProgress===!1&&(e.fetchState==="In-Progress"||e.fetchState==="Not-Started"))return s.jsxRuntimeExports.jsx(Ue,{fetchState:e.fetchState});if((e.fetchState==="Completed"||r.sortOrSearchInProgress===!0||r.pageFetchInProgress===!0)&&e.isReportGenerated===!0){const R=s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsx(o.ListPageSearchSection,{isSearchOpen:(B?.length??0)>0,searchPlaceHolder:G.common.searchPlaceholder,searchText:k??"",onSearchTextChanged:C=>{P(C),C.trim().length>=2?H(C,S):C.trim().length==0&&H("",S)},downloadPresent:!0}),s.jsxRuntimeExports.jsx(o.DownloadButton,{downloadReportOptions:{type:"simple_menu",downloadMenu:{simpleMenuItems:[{type:"excel",isDisabled:W,isDownloading:r.downloadState==="In-Progress"}],onDownloadClick:async C=>{if(C==="excel")if(r.downloadState==="In-Progress"){console.log("Download is already in progress!");return}else O(!0)}}}})]});return s.jsxRuntimeExports.jsxs(Le,{windowSize:b,children:[s.jsxRuntimeExports.jsx(o.NavBar,{title:G.common.navBarTitle,subTitle:e.lastRefreshSuccessTime!=null?e.lastRefreshSuccessTime.utc(!0).fromNow():"",backgroundColor:Y.colors.grey5,onBackClick:p,rightSideComponent:R,showMenuIcon:b==="medium-compact"||b==="small",downloadPresent:!0,onClickMenuIcon:M,source:"OpExByVendorPage"}),s.jsxRuntimeExports.jsxs(Ae,{windowSize:b,children:[oe?s.jsxRuntimeExports.jsx(o.TabSwitcher,{allTabs:q,selectedTab:q[1].id,containerStyle:{borderBottom:`2px solid ${Y.colors.grey3}`},onTabChange:C=>l(o.convertIdToVendorReportIDType(C.id)),previousTabPosition:d,setPreviousTabPosition:_}):null,s.jsxRuntimeExports.jsx(Ze,{timeframes:te,isCompareModeOn:L,firstMonthOfFY:e.firstMonthOfFY,allTimeframeTicks:e.allTimeframeTicks,selectedTimeframe:r.timeframe,selectedCOABalancesRange:e.filter.balancesRange,onAdditionalBalanceSelectionChanged:c,onTimeframeSelectionChanged:h,mode:r.mode,analytics:v}),V!=null?s.jsxRuntimeExports.jsx(He,{children:s.jsxRuntimeExports.jsx(K.BalancesInsightWithToolTip,{balance:V,dateText:ro(V)})}):null,s.jsxRuntimeExports.jsx(eo,{report:e,isEmptyPeriod:W})]}),s.jsxRuntimeExports.jsx(oo,{reference:E,report:e,uiState:r,isEmptyPeriod:W,onAdditionalBalanceSelectionChanged:c,onVendorNameAndBalanceClicked:g,onSortOrderChanged:le,handleFetchOpExByVendor:ne,onPageFetchStarted:f,analytics:v})]})}return s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{})},Ze=({timeframes:e,firstMonthOfFY:t,allTimeframeTicks:r,selectedCOABalancesRange:n,selectedTimeframe:l,onTimeframeSelectionChanged:a,onAdditionalBalanceSelectionChanged:p,mode:i,isCompareModeOn:c,analytics:h})=>s.jsxRuntimeExports.jsx(Ke,{children:s.jsxRuntimeExports.jsxs(Ve,{children:[s.jsxRuntimeExports.jsx(We,{children:s.jsxRuntimeExports.jsx(me.TimeframeSwitcherWithToggle,{timeframe:{allowedTimeframes:e,selectedTimeframe:l,onTimeframeSelectionChanged:m=>{h?.trackTimeframeSwitch(A.toTimeframeFilter(m),z.getReferrerType("operating_expenses_by_vendor")),(m==="month"||m==="quarter")&&a(m),i==="compare_mode"&&!c&&p(c,c?["this_period_vs_last_period_percent"]:[])}},toggle:{label:o.appLocale.getLocalizedStrings().compareSwitchLabel,isOn:c,isToggleDisabled:!1,onValueChanged:m=>{h?.trackCompareMode(m,z.getReferrerType("operating_expenses_by_vendor"),A.toTimeframeFilter(l)),p(m,m?["this_period_vs_last_period_percent"]:[])}}})}),s.jsxRuntimeExports.jsx(de.TimeRangeSwitcher,{firstMonthOfFY:t,timeframe:l,timeframeTicks:r,selection:{selectedTicks:K.mapCOABalancesRangeToTimeframeTicksRange(r,n),highlightedOfSelectedTicks:K.mapCOABalancesRangeToTimeframeTicksRange(r,n)}})]})}),eo=({isEmptyPeriod:e,report:t})=>{const r=o.useWindowSizeContext();return e?s.jsxRuntimeExports.jsx(Ye,{children:s.jsxRuntimeExports.jsx(pe.NoDataChart,{title:o.appLocale.getLocalizedStrings().chartCard.no_data_available})}):s.jsxRuntimeExports.jsx(Ge,{windowSize:r,children:s.jsxRuntimeExports.jsx(s.AutoSizer,{children:({height:n,width:l})=>s.jsxRuntimeExports.jsx(ve,{selectedRangeReport:t,width:l,height:n,isDetailPage:!0,showBarHoverBackground:!1})})})},oo=({report:e,uiState:t,isEmptyPeriod:r,reference:n,onAdditionalBalanceSelectionChanged:l,onTableScroll:a,onSortOrderChanged:p,onVendorNameAndBalanceClicked:i,handleFetchOpExByVendor:c,onPageFetchStarted:h,analytics:m})=>{const x=t.mode==="compare_mode",g=b=>{m?.trackCompareFilterChange(b==="compare_mode_percent"?"percentage":"amount",z.getReferrerType("operating_expenses_by_vendor"),A.toTimeframeFilter(t.timeframe),"dropdown"),l(x,[b==="compare_mode_percent"?"this_period_vs_last_period_percent":"this_period_vs_last_period"])},f=t.selectedAdditionalBalances.includes("this_period_vs_last_period_percent")?"compare_mode_percent":"compare_mode_amount",[d,_]=y.useState(void 0),[j,T]=y.useState(void 0),v=o.useWindowSizeContext(),M=s.useTheme(),k=!(v==="small"||v==="medium-compact");y.useEffect(()=>{const b={reportId:e.reportId,mode:t.mode==="compare_mode"?"this_period_vs_period_before":"none",displayOrder:"ascending_date",reportFormat:"more_detailed",bookCloseDate:e.bookCloseDate,firstMonthOfFY:e.firstMonthOfFY,filterAccountsWithNilBalances:"off",filterAccountGroupsWithNilBalances:"off",showNegativeAmountInParenthesis:o.getShowNegativeAmountInParenthesisDefaultValue(),dataAvailable:e.dataAvailable,opexByVendorConfig:{sortKey:t.sortKey[t.timeframe],sortOrder:t.sortOrder[t.timeframe],isCompareModeOn:t.mode==="compare_mode",isAccountColumnShown:!0,isClassColumnShown:!0,onSortOrderChanged:p,sortOrSearchInProgress:t.sortOrSearchInProgress,pageFetchInProgress:t.pageFetchInProgress,onVendorNameAndBalanceClicked:i}};if(d==null||!s.isEqual(j,e)){const E=Pe(e,t,b,k);T(e),_(E)}else{const E=$e(d,b,e,k);_(E)}},[t.mode,e]);const P=b=>b<e.opexBalances.length,$=()=>{t.pageToken[t.timeframe]!=null&&e.fetchState==="Completed"&&(h(),c(!0))},O=e.opexBalances.length;return s.jsxRuntimeExports.jsx(Xe,{windowSize:v,ref:n,children:r?s.jsxRuntimeExports.jsx(ue.NoDataTable,{}):d!=null?s.jsxRuntimeExports.jsx(Je,{children:s.jsxRuntimeExports.jsx(F.CollapsableReportTable,{backgroundColor:new s.Color(M.colors.grey4),rootNodes:d,type:"name+balances_actual",compareMode:f,isSticky:{isStickyHeader:k,isStickyName:k},treeNodePadding:{left:N.contentPaddingLeft.value(v),right:N.contentPaddingRight.value(v)},nodeOpenStatus:{},scrollPosition:t.scrollPosition,onCompareModeChanged:g,onScroll:a,infiniteLoadingProps:{isItemLoaded:P,itemCount:O,loadMoreItems:$}})}):null})},ro=e=>{const t=e.startDate,r=e.endDate,{vendors:n,dateFormat:l}=o.appLocale.getLocalizedStrings();return`${n.opExByVendor.in} ${t.format(l.visual.MMMYYFormat)} - ${r.format(l.visual.MMMYYFormat)}`};exports.default=Qe;