@zeniai/web-cockpit-ui 1.14.49-dev → 1.14.50-dev

package/dist/assets/ExpenseAutomationOverviewPage-CN8oHejg-BCXoKv-G.js

@@ -0,0 +1,222 @@
+import{u as H,e as W,bM as I,j as r,a2 as $,fH as J,bi as Y,g as a,br as O,M as V,o,a_ as Q,js as q,$ as c,hd as G,hc as U,X,a3 as K,l as Z,jt as E,f as ee,aV as re,fq as se,E as oe,bT as te,c9 as ie,w as g,s as ae,eC as le,S as ne,bt as ce,gT as de,J as he,ap as pe,ar as L,ai as me}from"./index-dX8TSOm6.js";import{n as s,j as m,k as ge}from"./vendor-rkTZJa59.js";import{o as xe}from"./transaction-placeholder-CpOwZAMG-DYG2_sCF.js";import"./mui-C42whWwM.js";import"./analytics-CcevxdRy.js";import"./routing-CH3KJxCW.js";import"./sentry-osuhWjvS.js";import"./redux-2gfZRks6.js";import"./liveblocks-CP09Cz-7.js";import"./crypto-CK3r1iTV.js";const ue={transaction_categorization:xe,missing_receipts:se,flux_analysis:re,je_schedules:E,month_end_insights:ee,reconciliation:E},fe=e=>{const x={Weekly:[],Monthly:[]};return e.forEach(u=>{x[u.frequency].push(u)}),x},{expenseAutomation:d,common:i,dateFormat:$e}=V.getLocalizedStrings();function xr({monthEndCloseChecksView:e,isRealtimeInsightsFeatureEnabled:x,onMonthEndCheckClick:u,onBackClick:M,handleReviewButtonClick:P,onPeriodChange:T,onReload:k}){const b=H(),R=W();if(I({componentName:"expense_automation.overview"}),e.monthEndCloseChecks==null||e.fetchState==="Not-Started"||e.fetchState==="In-Progress")return r.jsx(_,{"data-testid":$("expense-automation-overview-page-activity-indicator"),children:r.jsx(J,{fetchState:"In-Progress"})});if(e.monthEndCloseChecks==null||e.fetchState==="Error")return r.jsx(_,{children:r.jsx(Ke,{"data-testid":$("expense-automation-overview-page-reload-page"),onClick:k,children:r.jsx(Y,{})})});const{monthEndCloseChecks:{auditSummary:l,monthEndCloseCheckList:z,insights:h,reportEmailSentDate:S},refreshStatus:N}=e,F=fe(z);let f,p;l.auditScorePercentage<=50?(f=a.important,p=a.importantLight):l.auditScorePercentage<=75?(f=a.alert,p=a.alertLight):(f=a.success,p=a.successLight);const A=r.jsx(Qe,{"data-testid":$("expense-automation-overview-page-refresh-icon"),onClick:k,children:r.jsx(O,{style:{marginTop:o.sp1},placement:"bottom",title:i.texts.refresh,enterDelay:600,children:r.jsx(er,{$spinning:N.fetchState==="In-Progress"})})});return r.jsxs(ye,{children:[r.jsx(Q,{title:r.jsx(q,{labelSuffix:i.texts.close,pickerLabelStyle:{...c.largeSemiBold.cssObject},onPeriodChange:T,monthEndCloseChecksView:e}),showBackButton:!0,onBackClick:M,source:"ExpenseAutomationOverviewPage",rightSideComponent:A}),r.jsxs(_e,{children:[r.jsxs(je,{children:[r.jsx(ve,{windowSize:R,children:r.jsx(be,{children:r.jsxs(Se,{children:[r.jsx(Ve,{children:r.jsx(G,{background:!0,value:Math.floor(l.auditScorePercentage),text:`${Math.floor(l.auditScorePercentage)}${i.strings.percentage}`,strokeWidth:10,styles:{...U({strokeLinecap:"butt",pathColor:f,textColor:b.colors.primary,trailColor:b.colors.grey2,backgroundColor:p}),root:{width:"96px",height:"96px",backgroundColor:p,borderRadius:"50%"},text:{fontSize:c.h6Medium.fontSize,fontFamily:c.h6Medium.fontFamily,lineHeight:c.h6Medium.lineHeight,fontWeight:c.h6Medium.fontWeight,letterSpacing:c.h6Medium.letterSpacing,fill:a.primaryLight}}})}),r.jsxs(tr,{children:[r.jsxs(Ee,{children:[r.jsxs(C,{children:[r.jsxs(qe,{children:[r.jsx(Ce,{children:d.overview.auditScoreTitle}),l.auditReportLastGeneratedDate!=null?r.jsx(Ge,{children:l.auditReportLastGeneratedDate.utc(!0).fromNow()}):null]}),r.jsx(ke,{children:d.overview.auditScoreDescription})]}),r.jsx(X,{style:{alignSelf:"flex-start"},variant:"primary",label:i.texts.review,onClick:P})]}),r.jsxs(De,{children:[r.jsxs(We,{children:[r.jsx(Ye,{}),r.jsx(Ie,{children:i.texts.aiAgents}),r.jsx(Je,{children:i.texts.saved})]}),r.jsx(Oe,{children:K("0,0",{amount:h.savedAmount,currencyCode:i.currency.countryCode,currencySymbol:i.currency.currencySymbol})})]})]})]})})}),r.jsxs(we,{children:[r.jsxs(y,{isLastTab:!1,children:[r.jsx(j,{children:h.vendorsWithFluctuations}),r.jsx(v,{children:d.overview.statistics.vendorsWithFluctuations})]}),r.jsxs(y,{isLastTab:!1,children:[r.jsx(j,{children:h.transactionsAutoCategorized}),r.jsx(v,{children:d.overview.statistics.transactionsAutoCategorized})]}),r.jsxs(y,{isLastTab:!1,children:[r.jsxs(j,{children:[h.efficiencyPercentage,i.strings.percentage]}),r.jsx(v,{children:d.overview.statistics.humanEfficiency})]}),r.jsxs(y,{isLastTab:!0,children:[r.jsxs(j,{children:[h.efficiency,"x"]}),r.jsx(v,{children:d.overview.statistics.fasterReviews})]})]})]}),r.jsx(Le,{children:Z.ALL_MONTH_END_CLOSE_CHECKS_FREQUENCY.map(w=>r.jsxs(Me,{children:[r.jsx(D,{cardDisabled:!1,children:w}),r.jsx(Pe,{children:F[w].map(t=>{const n=t.id==="month_end_insights"?!x:t.isDisabled,B=n===!0||t.id==="month_end_insights"&&e.monthEndCloseChecks?.reportEmailSentDate!=null;return r.jsxs(Te,{"data-testid":$("expense-automation-overview-page-month-end-close-check-card",t.id),cardDisabled:n,onClick:()=>{B===!1&&u(t.id)},children:[r.jsxs(He,{children:[r.jsx(Be,{cardDisabled:n,isDarkMode:b.mode==="dark",children:r.jsx(Ae,{as:ue[t.id]??null})}),r.jsxs(C,{children:[r.jsx(D,{cardDisabled:n,children:t.title}),r.jsx(Re,{className:"card-description",cardDisabled:n,children:t.description})]})]}),r.jsxs(ze,{children:[r.jsx(oe,{controller:t.id!=="month_end_insights",children:r.jsxs(Ne,{children:[r.jsxs(Ue,{progress:t.progress,children:[Math.floor(t.progress),i.strings.percentage]}),r.jsx(Xe,{className:t.progress<100?"progress-complete-text":i.strings.empty,progress:t.progress,children:i.texts.complete})]})}),t.id==="month_end_insights"&&S!=null?r.jsxs(or,{children:[r.jsx(rr,{children:i.texts.closed}),r.jsx(sr,{children:S.format($e.visual.MMMDCommaYYYYformat)})]}):null,r.jsx(C,{children:r.jsx(Fe,{className:"card-right-chevron",disabled:n})})]})]},t.id)})})]},w))})]})]})}const ye=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey5};
+  row-gap: ${o.sp3};
+`,je=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp6};
+  background-color: ${e=>e.theme.colors.grey5};
+  box-shadow: ${e=>e.theme.colors.elevation1};
+`,ve=s.div`
+  height: 200px;
+  ${e=>e.windowSize!=="extra-large"?m`
+          background-repeat: no-repeat;
+          background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/expense-automation-background.png);
+        `:null};
+`,be=s.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp8};
+  justify-content: center;
+  height: 100%;
+`,we=s.div`
+  border-top: 1px solid ${e=>e.theme.colors.grey3};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,Ce=s(ie)`
+  color: ${e=>e.theme.colors.primary};
+`,ke=s(ae)`
+  color: ${e=>e.theme.colors.primary};
+`,Se=s.div`
+  display: flex;
+  column-gap: ${o.sp3};
+  align-items: flex-start;
+`,Ee=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp3};
+  width: 466px;
+`,De=s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 310px;
+  text-align: center;
+  visibility: hidden;
+`,y=s.div`
+  text-align: center;
+  width: 300px;
+  padding: ${o.sp3} ${o.sp0};
+  ${e=>e.isLastTab===!1?m`
+          border-right: 1px solid ${e.theme.colors.grey3};
+        `:m`
+          border: 0;
+        `}
+`,j=s(he)`
+  color: ${e=>e.theme.colors.primary};
+`,v=s(g)`
+  color: ${e=>e.theme.colors.primary};
+`,_e=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  row-gap: ${o.sp6};
+`,Le=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp5};
+  padding-bottom: ${o.sp4};
+  margin: auto;
+`,D=s(pe)`
+  color: ${e=>e.cardDisabled?e.theme.colors.grey2:e.theme.colors.primary};
+`,Me=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp2};
+`,Pe=s.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp4};
+`,Te=s.div`
+  width: 726px;
+  background-color: ${e=>e.theme.colors.grey5};
+  padding: ${o.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  cursor: ${e=>e.cardDisabled?"not-allowed":"pointer"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: ${e=>e.theme.colors.elevation1};
+  ${e=>e.cardDisabled===!1?m`
+          &:hover {
+            border: 1px solid ${e.theme.colors.primary};
+            .card-right-chevron,
+            .card-description,
+            .progress-complete-text {
+              color: ${e.theme.colors.primary};
+            }
+          }
+        `:null}
+`,Re=s(g)`
+  color: ${e=>e.cardDisabled?e.theme.colors.grey2:e.theme.colors.hero};
+`,ze=s.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp7};
+`,C=s.div``,Ne=s.div`
+  text-align: center;
+  width: 82px;
+`,Fe=s(me)`
+  color: ${e=>e.disabled?e.theme.colors.grey2:e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+`,Ae=s.div`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${e=>e.theme.colors.primary};
+`,Be=s.div`
+  width: ${o.sp7};
+  height: ${o.sp7};
+  background-color: ${e=>e.isDarkMode?e.theme.colors.brandColorJadeDark:e.theme.colors.brandColorJadeLight};
+  border-radius: 50%;
+  opacity: ${e=>e.cardDisabled?.2:1};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,He=s.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp3};
+`,We=s.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp1};
+  justify-content: center;
+`,Ie=s(ne)`
+  color: ${e=>e.theme.colors.brandColorSapphire};
+`,Je=s(ce)`
+  color: ${e=>e.theme.colors.brandColorJade};
+`,Ye=s(le)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  margin-right: ${o.sp1};
+`,Oe=s(de)`
+  color: ${e=>e.theme.colors.primary};
+`,Ve=s.div`
+  display: flex;
+  height: 96px;
+  justify-content: center;
+`,Qe=s.div`
+  color: ${e=>e.theme.colors.hero};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,qe=s.div`
+  display: flex;
+  align-items: flex-end;
+  column-gap: ${o.sp2};
+`,Ge=s(g)`
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${o.sp1};
+`,Ue=s(L)`
+  color: ${e=>e.progress<100?e.theme.colors.primary:e.theme.colors.success};
+`,Xe=s(g)`
+  color: ${e=>e.progress<100?e.theme.colors.hero:e.theme.colors.success};
+`,Ke=s.div`
+  height: 96px;
+  width: 96px;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${o.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,_=s.div`
+  display: flex;
+  height: 100vh;
+  overflow: auto;
+  background-color: ${e=>e.theme.colors.grey5};
+  justify-content: center;
+  align-items: center;
+`,Ze=ge`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`,er=s(te,{shouldForwardProp:e=>typeof e=="string"&&e!=="$spinning"})`
+  cursor: pointer;
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${e=>e.theme.colors.hero};
+  animation: ${e=>e.$spinning?m`
+          ${Ze} 2s linear infinite;
+        `:"none"};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,rr=s(L)`
+  color: ${e=>e.theme.colors.success};
+`,sr=s(g)`
+  color: ${e=>e.theme.colors.success};
+`,or=s.div`
+  width: 82px;
+  text-align: center;
+`,tr=s.div`
+  display: flex;
+  column-gap: ${o.sp8};
+  align-items: flex-start;
+`;export{xr as default};