@zeniai/web-components 3.16.84 → 3.16.85

package/dist/OpExByVendorPage-BexSDNav.cjs

@@ -0,0 +1,100 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-CT-Z_-kn.cjs"),y=require("react"),u=require("@emotion/styled"),o=require("./index-BOGO7v0l.cjs"),le=require("@zeniai/client-epic-state"),w=require("./chartTypes-BPJEaSrX.cjs"),ie=require("./toChartData-CrKAlry_.cjs"),L=require("./analyticsHelper-CNTy_u1x.cjs"),ce=require("./TimeRangeSwitcher-JGeFgjoB.cjs"),de=require("./TimeframeSwitcherWithToggle-BbHAdwvs.cjs"),me=require("./NoDataChart-DP962K7W.cjs"),pe=require("./NoDataTable-DPIKt0r6.cjs"),V=require("./detailCommon-DtA7_k2P.cjs"),A=require("./getReferrerType-Dc1M7vxU.cjs"),z=require("./CollapsableReportTable-DWZAvxZ-.cjs"),Z=require("./mapTimeframeBalancesToTreeNode-CvmPOXLb.cjs"),H=require("./mapLoadingInProgressToTreeNode-DlxleQQX.cjs"),ue=require("./mapSpacerToTreeNode-3XYDcTUD.cjs"),he=u.div`
+  display: flex;
+`,ge=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};
+`,X=u.div`
+  display: flex;
+  justify-content: space-between;
+`,J=u(o.StandardRegular)`
+  color: ${e=>e.color??o.Colors.neutralGrey2Light};
+  text-align: left;
+`,U=u(o.StandardRegular)`
+  color: ${e=>e.color??o.Colors.neutralGrey2Light};
+  text-align: right;
+`,xe=u.div`
+  margin: ${o.Space.sp2} ${o.Space.sp0} ${o.Space.sp2} ${o.Space.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${o.Colors.neutralGrey3Dark};
+`,fe=({active:e,payload:s,barName:r})=>{const n=[];if(s!==void 0&&e===!0){const l=s.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},Ce=({barLabelsWithValues:e,getVendorName:s})=>t.jsxRuntimeExports.jsx(he,{children:t.jsxRuntimeExports.jsxs(ge,{children:[t.jsxRuntimeExports.jsxs(X,{children:[t.jsxRuntimeExports.jsx(J,{color:e[0].color,children:`${s(e[0].timeframeTick,e[0].barName)}`}),t.jsxRuntimeExports.jsx(U,{color:e[0].color,children:`${w.currencyFormatter(e[0].actual)}`})]}),t.jsxRuntimeExports.jsx(xe,{}),t.jsxRuntimeExports.jsxs(X,{children:[t.jsxRuntimeExports.jsx(J,{color:o.Colors.primaryDark,children:`${o.appLocale.getLocalizedStrings().chartCard.total}`}),t.jsxRuntimeExports.jsx(U,{children:`${w.currencyFormatter(e[0].total)}`})]})]})}),ye=e=>{const s=fe({...e});return s.length===0?null:t.jsxRuntimeExports.jsx(Ce,{barLabelsWithValues:s,getVendorName:e.getVendorName})},_e=y.memo(ye),Q=[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 D{_barColors;_barColorsKeyWise;_defaultColor;constructor(){this._defaultColor=o.Colors.graphColor34,this._barColors=Q.slice(),this._barColorsKeyWise=new Map}static#e=new D;getBarColor(s){const r=D.instance();return r._barColorsKeyWise.has(s)||(r._barColors.length===0&&(r._barColors=Q.slice()),r._barColorsKeyWise.set(s,r._barColors.shift()??r._defaultColor)),r._barColorsKeyWise.get(s)}shouldUpdate(s){const r=D.instance(),n=Array.from(r._barColorsKeyWise.keys()).sort();return!t.isEqual(n,s)}static init(){return this.#e=new D,this.#e}static instance(){return this.#e}}const Te=D.instance(),be=(e,s)=>{const r=new Set,n={};let l;const a=s.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?ie.toChartData(e,[...r],l,n):void 0},Re=u.div`
+  width: ${e=>e.width}px;
+  height: ${e=>e.height}px;
+`;function je({selectedRangeReport:e,width:s,height:r,showBarHoverBackground:n=!1,isDetailPage:l=!1}){const a=y.useRef(!1),p=Te,[i,c]=y.useState(void 0);y.useEffect(()=>{a.current=!0},[]);const h=be(e.firstMonthOfFY,e),m=()=>{const d=[];return h?.orderedKeys.forEach(_=>{const j=l===!0&&!a.current;d.push(x(_,j))}),d},x=(d,_)=>t.jsxRuntimeExports.jsx(t.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?t.jsxRuntimeExports.jsx(_e,{active:d,payload:_,barName:i,getVendorName:f}):null,f=(d,_)=>{const j=le.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:t.jsxRuntimeExports.jsx(ve,{chartData:h,showBarHoverBackground:n,barElements:m(),customToolTipContent:t.jsxRuntimeExports.jsx(g,{}),width:s,height:r,isDetailPage:l===!0})}const ve=({chartData:e,barElements:s,customToolTipContent:r,width:n,height:l,showBarHoverBackground:a=!1,isDetailPage:p})=>{const i=t.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 t.jsxRuntimeExports.jsx(Re,{width:n,height:l,children:t.jsxRuntimeExports.jsx(t.AutoSizer,{children:({height:x,width:g})=>t.jsxRuntimeExports.jsxs(t.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:[t.jsxRuntimeExports.jsx(t.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:i.colors.grey3}),t.jsxRuntimeExports.jsx(t.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}}),t.jsxRuntimeExports.jsx(t.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)}),t.jsxRuntimeExports.jsx(t.Tooltip$1,{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}}),s]})})})};function we(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 Se(e){const{isCompareModeOn:s,report:r,currentTenantCompanyName:n}=e,l=[];if(s&&(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 Ee(e){const s=Se(e);if(s!=null)return ke(e.statementEndPoint,e.authParams,s)}async function ke(e,s,r){const n=o.appLocale.getLocalizedStrings().downloadReport,l=`${e}?query=${encodeURIComponent(JSON.stringify(we(r)))}`;try{const a=await o.fetchRequest({urlEndPoint:l,authParams:s,fileType:r.statementFileType});if(a.ok){const p=o.getFileNameFromResponseHeaders(a.headers,n.defaultFileName),i=await a.arrayBuffer();t.fileDownload(i,p)}else console.error(`${n.reportErrorMessage} ${a.statusText}`)}catch(a){console.error(`${n.reportErrorMessage} ${JSON.stringify(a)}`)}}function Be({title:e,balances:s,config:r,nodeId:n}){return{children:[],id:n??z.uniqueID("title_string_only",[]),isLastNode:!1,reportElementData:{element:{kind:"title_string_only",title:e,data:s,numOfBalances:s.length},config:r}}}function De({opExByVendor:e,numOfBalances:s,title:r,isLastNode:n,config:l}){const a=e.account?.accountName??"-",p=e.classBase?.className??"-",i=z.uniqueID("vendor_row",[],r+a+p);return{children:[],id:i,isLastNode:n,reportElementData:{element:{kind:"vendor_row",title:r,data:e,numOfBalances:s},config:l}}}function Ie({title:e,balances:s,config:r,numOfBalances:n,nodeId:l}){return{children:[],id:l??z.uniqueID("total",[]),isLastNode:!1,reportElementData:{element:{kind:"total",title:e,data:s,numOfBalances:n},config:r}}}const Ne=(e,s,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=Z.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(H.mapLoadingInProgressToTreeNode({title:`${g}+${c.loading}`,balances:a,config:r}))});else if(e.opexBalances.length>0){if(!s.searchString){const f=Ie({title:o.appLocale.getLocalizedStrings().chartCard.total,balances:e.totalBalances,config:r,numOfBalances:l});i.push(f)}const x=s.pageToken[s.timeframe],g=e.opexBalances.map((f,d)=>De({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(H.mapLoadingInProgressToTreeNode({title:`${d}+${c.loading}`,balances:a,config:r}))}),[...Array(1)].forEach((f,d)=>{i.push(ue.mapSpacerToTreeNode({title:`${d}+${c.loading}`,balances:[],config:r}))})}return e.opexBalances.length===0&&h!==!0&&i.push(Be({title:o.appLocale.getLocalizedStrings().vendors.opExByVendor.noResultsFound,balances:a,config:r})),{config:r,headerNodes:n?[p]:[],contentNodes:i}};function Pe(e,s,r,n=!0){Object.assign(e.config,s);const l=$e(r),a=Z.mapTimeframeBalancesToTreeNode({balances:l,config:s});return{config:s,headerNodes:n?[a]:[],contentNodes:[a,...e.contentNodes.slice(1)]}}const $e=e=>e.totalBalances!=null?[...e.totalBalances.balances,...e.totalBalances.additionalBalances]:[],I={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])},Oe=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;
+`,Le=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=>I.wrapperPadding.valuePx(e.windowSize)};
+  padding-right: ${e=>I.wrapperPadding.valuePx(e.windowSize)};
+`,Ae=u.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey5};
+`,ze=u.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Fe=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};
+    }
+  }
+`,Me=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};
+`,qe=u.div``,Ve=u.div``,Ke=u.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: ${e=>I.chartHeight.valuePx(e.windowSize)};
+  padding-bottom: ${o.Space.sp6};
+`,Ge=u.div`
+  display: flex;
+`,Ye=u.div`
+  margin-top: ${o.Space.sp5};
+  margin-bottom: ${o.Space.sp6};
+`,He=u.div`
+  display: flex;
+  position: sticky;
+  justify-content: center;
+  padding-top: ${o.Space.sp8};
+  padding-left: ${e=>I.wrapperPadding.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey4};
+`,Xe=u.div`
+  width: 100%;
+  height: calc(100vh - ${o.Space.sp11});
+`,Je=({fetchState:e})=>e==="In-Progress"||e==="Not-Started"?t.jsxRuntimeExports.jsx(Ae,{children:t.jsxRuntimeExports.jsx(o.ActivityIndicator,{size:"ExtraLarge",start:!0})}):null,Ue=({report:e,vendorTabsToShow:s,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:F})=>{const[k,N]=y.useState(r.searchString[r.timeframe]),[P,$]=y.useState(!1),b=o.useWindowSizeContext(),E=y.useRef(null),M=o.getVendorTabsToShow(s),ee=M.length>1,oe=o.appLocale.getLocalizedStrings().reports.common,K=o.appLocale.getLocalizedStrings().vendors,G=t.useTheme(),re=["month","quarter"],te=e.availableNumberOfPeriods!=null&&e.availableNumberOfPeriods<2,O=r.mode==="compare_mode"&&!te,W=e.allTimeframeTicks.length===0,{timeframe:S}=r,B=r.searchString[S];o.useSentryPerformanceTracking({componentName:"vendors.opex_by_vendor.list"});const se=y.useCallback(R=>{i(S,B,R)},[S,B,i]),ne=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]),Y=y.useRef(t.debounce((R,C)=>ne(R,C),500,{trailing:!0})).current,ae=(R,C)=>{m(R,C,S),x(!0),i(S,B,!1)};if(y.useEffect(()=>{async function R(){await Ee({report:e,isCompareModeOn:O,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(A.getReferrerType("operating_expenses_by_vendor"),L.toTimeframeFilter(r.timeframe),"excel",O),j("Completed")}P&&r.downloadState!=="In-Progress"&&($(!1),j("In-Progress"),R())},[e,r,O,n,r.downloadState,P]),y.useEffect(()=>{N(B)},[B]),e.fetchState==="Error")return t.jsxRuntimeExports.jsxs(ze,{children:[t.jsxRuntimeExports.jsx(Fe,{"data-testid":o.generateDataTestId("op-ex-by-vendor-reload-page"),onClick:a,children:t.jsxRuntimeExports.jsx(o.SvgReload,{})}),t.jsxRuntimeExports.jsx(Me,{children:oe.failed})]});const q=e.totalBalances?.totalBalance;if(r.sortOrSearchInProgress===!1&&r.pageFetchInProgress===!1&&(e.fetchState==="In-Progress"||e.fetchState==="Not-Started"))return t.jsxRuntimeExports.jsx(Je,{fetchState:e.fetchState});if((e.fetchState==="Completed"||r.sortOrSearchInProgress===!0||r.pageFetchInProgress===!0)&&e.isReportGenerated===!0){const R=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(o.ListPageSearchSection,{isSearchOpen:(B?.length??0)>0,searchPlaceHolder:K.common.searchPlaceholder,searchText:k??"",onSearchTextChanged:C=>{N(C),C.trim().length>=2?Y(C,S):C.trim().length==0&&Y("",S)},downloadPresent:!0}),t.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 $(!0)}}}})]});return t.jsxRuntimeExports.jsxs(Oe,{windowSize:b,children:[t.jsxRuntimeExports.jsx(o.NavBar,{title:K.common.navBarTitle,subTitle:e.lastRefreshSuccessTime!=null?e.lastRefreshSuccessTime.utc(!0).fromNow():"",backgroundColor:G.colors.grey5,onBackClick:p,rightSideComponent:R,showMenuIcon:b==="medium-compact"||b==="small",downloadPresent:!0,onClickMenuIcon:F,source:"OpExByVendorPage"}),t.jsxRuntimeExports.jsxs(Le,{windowSize:b,children:[ee?t.jsxRuntimeExports.jsx(o.TabSwitcher,{allTabs:M,selectedTab:M[1].id,containerStyle:{borderBottom:`2px solid ${G.colors.grey3}`},onTabChange:C=>l(o.convertIdToVendorReportIDType(C.id)),previousTabPosition:d,setPreviousTabPosition:_}):null,t.jsxRuntimeExports.jsx(Qe,{timeframes:re,isCompareModeOn:O,firstMonthOfFY:e.firstMonthOfFY,allTimeframeTicks:e.allTimeframeTicks,selectedTimeframe:r.timeframe,selectedCOABalancesRange:e.filter.balancesRange,onAdditionalBalanceSelectionChanged:c,onTimeframeSelectionChanged:h,mode:r.mode,analytics:v}),q!=null?t.jsxRuntimeExports.jsx(Ye,{children:t.jsxRuntimeExports.jsx(V.BalancesInsightWithToolTip,{balance:q,dateText:oo(q)})}):null,t.jsxRuntimeExports.jsx(Ze,{report:e,isEmptyPeriod:W})]}),t.jsxRuntimeExports.jsx(eo,{reference:E,report:e,uiState:r,isEmptyPeriod:W,onAdditionalBalanceSelectionChanged:c,onVendorNameAndBalanceClicked:g,onSortOrderChanged:ae,handleFetchOpExByVendor:se,onPageFetchStarted:f,analytics:v})]})}return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{})},Qe=({timeframes:e,firstMonthOfFY:s,allTimeframeTicks:r,selectedCOABalancesRange:n,selectedTimeframe:l,onTimeframeSelectionChanged:a,onAdditionalBalanceSelectionChanged:p,mode:i,isCompareModeOn:c,analytics:h})=>t.jsxRuntimeExports.jsx(Ve,{children:t.jsxRuntimeExports.jsxs(qe,{children:[t.jsxRuntimeExports.jsx(We,{children:t.jsxRuntimeExports.jsx(de.TimeframeSwitcherWithToggle,{timeframe:{allowedTimeframes:e,selectedTimeframe:l,onTimeframeSelectionChanged:m=>{h?.trackTimeframeSwitch(L.toTimeframeFilter(m),A.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,A.getReferrerType("operating_expenses_by_vendor"),L.toTimeframeFilter(l)),p(m,m?["this_period_vs_last_period_percent"]:[])}}})}),t.jsxRuntimeExports.jsx(ce.TimeRangeSwitcher,{firstMonthOfFY:s,timeframe:l,timeframeTicks:r,selection:{selectedTicks:V.mapCOABalancesRangeToTimeframeTicksRange(r,n),highlightedOfSelectedTicks:V.mapCOABalancesRangeToTimeframeTicksRange(r,n)}})]})}),Ze=({isEmptyPeriod:e,report:s})=>{const r=o.useWindowSizeContext();return e?t.jsxRuntimeExports.jsx(Ge,{children:t.jsxRuntimeExports.jsx(me.NoDataChart,{title:o.appLocale.getLocalizedStrings().chartCard.no_data_available})}):t.jsxRuntimeExports.jsx(Ke,{windowSize:r,children:t.jsxRuntimeExports.jsx(t.AutoSizer,{children:({height:n,width:l})=>t.jsxRuntimeExports.jsx(je,{selectedRangeReport:s,width:l,height:n,isDetailPage:!0,showBarHoverBackground:!1})})})},eo=({report:e,uiState:s,isEmptyPeriod:r,reference:n,onAdditionalBalanceSelectionChanged:l,onTableScroll:a,onSortOrderChanged:p,onVendorNameAndBalanceClicked:i,handleFetchOpExByVendor:c,onPageFetchStarted:h,analytics:m})=>{const x=s.mode==="compare_mode",g=b=>{m?.trackCompareFilterChange(b==="compare_mode_percent"?"percentage":"amount",A.getReferrerType("operating_expenses_by_vendor"),L.toTimeframeFilter(s.timeframe),"dropdown"),l(x,[b==="compare_mode_percent"?"this_period_vs_last_period_percent":"this_period_vs_last_period"])},f=s.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(),F=t.useTheme(),k=!(v==="small"||v==="medium-compact");y.useEffect(()=>{const b={reportId:e.reportId,mode:s.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:s.sortKey[s.timeframe],sortOrder:s.sortOrder[s.timeframe],isCompareModeOn:s.mode==="compare_mode",isAccountColumnShown:!0,isClassColumnShown:!0,onSortOrderChanged:p,sortOrSearchInProgress:s.sortOrSearchInProgress,pageFetchInProgress:s.pageFetchInProgress,onVendorNameAndBalanceClicked:i}};if(d==null||!t.isEqual(j,e)){const E=Ne(e,s,b,k);T(e),_(E)}else{const E=Pe(d,b,e,k);_(E)}},[s.mode,e]);const N=b=>b<e.opexBalances.length,P=()=>{s.pageToken[s.timeframe]!=null&&e.fetchState==="Completed"&&(h(),c(!0))},$=e.opexBalances.length;return t.jsxRuntimeExports.jsx(He,{windowSize:v,ref:n,children:r?t.jsxRuntimeExports.jsx(pe.NoDataTable,{}):d!=null?t.jsxRuntimeExports.jsx(Xe,{children:t.jsxRuntimeExports.jsx(z.CollapsableReportTable,{backgroundColor:new t.Color(F.colors.grey4),rootNodes:d,type:"name+balances_actual",compareMode:f,isSticky:{isStickyHeader:k,isStickyName:k},treeNodePadding:{left:I.contentPaddingLeft.value(v),right:I.contentPaddingRight.value(v)},nodeOpenStatus:{},scrollPosition:s.scrollPosition,onCompareModeChanged:g,onScroll:a,infiniteLoadingProps:{isItemLoaded:N,itemCount:$,loadMoreItems:P}})}):null})},oo=e=>{const s=e.startDate,r=e.endDate,{vendors:n,dateFormat:l}=o.appLocale.getLocalizedStrings();return`${n.opExByVendor.in} ${s.format(l.visual.MMMYYFormat)} - ${r.format(l.visual.MMMYYFormat)}`};exports.default=Ue;