@zeniai/web-components 3.17.23 → 3.17.24

package/dist/ArAgingChart-CH9RAcWf.cjs

@@ -0,0 +1,24 @@
+"use strict";const c=require("./vendor-.pnpm-DLVCFIC_.cjs"),j=require("react"),R=require("@emotion/styled"),h=require("recharts"),n=require("./index-BSvKy2E6.cjs"),y=require("./chartTypes-BlewtnyE.cjs"),b=require("@zeniai/client-epic-state"),T=R.div`
+  display: flex;
+`,O=R.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${n.Space.sp1};
+  flex-direction: column;
+  padding: ${n.Space.sp3};
+  background-color: ${t=>t.theme.colors.black};
+`,E=R(n.StandardRegular)`
+  color: ${t=>t.color??n.Colors.neutralGrey2Light};
+  text-align: left;
+`,$=R.div`
+  margin: ${n.Space.sp2} ${n.Space.sp0} ${n.Space.sp2} ${n.Space.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${n.Colors.neutralGrey3Dark};
+`,w=({active:t,payload:s,barName:o})=>{const u=[];if(s!=null&&t===!0){const r=s.filter(p=>p.name==o)[0],a=r.payload,l=r.color,d=o!=null&&a.record[o]!=null?a.record[o].amount:void 0,i={amount:0,currencyCode:"",currencySymbol:""};let m;for(m in a.record){const p=a.record[m].amount;i.amount+=a.record[m].amount?.amount??0,i.currencyCode=p!=null?p.currencyCode:i.currencyCode,i.currencySymbol=p!=null?p.currencySymbol:i.currencySymbol}const e=y.getAgingReportIDFromAgingReportChartValueKey(o);u.push({barName:e,actual:d,color:l}),u.push({barName:n.appLocale.getLocalizedStrings().chartCard.total,actual:i,color:n.Colors.brandColorPearl})}return u},v=({barLabelsWithValues:t})=>c.jsxRuntimeExports.jsx(T,{children:c.jsxRuntimeExports.jsxs(O,{children:[c.jsxRuntimeExports.jsx(E,{color:t[0].color,children:`${t[0].barName}: ${y.currencyFormatter(t[0].actual)}`}),c.jsxRuntimeExports.jsx($,{}),c.jsxRuntimeExports.jsx(E,{children:`${n.appLocale.getLocalizedStrings().chartCard.total}: ${y.currencyFormatter(t[1].actual)}`})]})}),V=t=>{const s=w({...t});return s.length===0?null:c.jsxRuntimeExports.jsx(v,{barLabelsWithValues:s})},B=j.memo(V),k=5;function z(t){const s=c.map(t,(u,r)=>[u.amount?.amount??0,r]);return s.sort((u,r)=>r[0]-u[0]),s.slice(0,k-1).reduce((u,r)=>({...u,[r[1]]:!0}),{})}function A(t){const s=[];for(const o in t)s.push(o);return s.sort((o,u)=>(t[u].amount?.amount??0)-(t[o].amount?.amount??0)),s}const D=t=>{const s=t.agingPeriods.map(r=>n.appLocale.getLocalizedStrings().reports.aging.duration[r]),o=[];return{recordByDurations:t.agingPeriods.map(r=>{const a={};t.agingBalances.forEach(i=>{const m=y.getAgingReportChartValueKey(i.vendor?.name??"",r);a[m]={amount:i.apAgingBalances.find(e=>e.period===r)?.balance}});const l=n.appLocale.getLocalizedStrings().reports.aging.duration[r];if(Object.keys(a).length>k){const i=z(a),m=c.pickBy(a,(f,x)=>i[x]===!0),e=c.pickBy(a,(f,x)=>i[x]!==!0),p=Object.keys(e).reduce((f,x)=>f+(e[x].amount?.amount??0),0),g=Object.keys(e)[0],C=y.getAgingReportChartValueKey("Other",r);m[C]={...e[g],amount:{amount:p,currencyCode:e[g].amount?.currencyCode??b.defaultVendorCurrency.currencyCode,currencySymbol:e[g].amount?.currencySymbol??b.defaultVendorCurrency.currencySymbol}};const S=A(m);return o.push(...S),{label:l,record:m}}const d=A(a);return o.push(...d),{label:l,record:a}}),durationLabels:s,orderedKeys:Array.from(o)}},I=R.div`
+  width: ${t=>t.width}px;
+  height: ${t=>t.height}px;
+`,M=({active:t,payload:s,mouseOverBarName:o})=>s?.find(r=>r.name===o)!=null&&o!=null&&t===!0?c.jsxRuntimeExports.jsx(B,{active:t,payload:s,barName:o}):null;function _({report:t,width:s,height:o,isDetailPage:u}){const r=j.useRef(!1),[a,l]=j.useState(void 0);j.useEffect(()=>{r.current=!0},[]);const d=D(t),i=()=>{const e=[];return d?.orderedKeys.forEach(p=>{const g=u===!0&&!r.current;e.push(m(p,g))}),e},m=(e,p)=>c.jsxRuntimeExports.jsx(h.Bar,{name:e,animationDuration:p?500:void 0,style:{cursor:"pointer"},dataKey:g=>{const C=g.record;return(C[e]?.amount!=null?C[e].amount:void 0)?.amount??0},stackId:"a",fill:G(e,d),onMouseEnter:()=>{a!==e&&l(e)},onMouseLeave:()=>{a!=null&&l(void 0)}},e);return d==null?null:c.jsxRuntimeExports.jsx(F,{chartData:d,barElements:i(),width:s,height:o,isDetailPage:u===!0,customToolTipContent:c.jsxRuntimeExports.jsx(M,{mouseOverBarName:a})})}const F=({chartData:t,barElements:s,customToolTipContent:o,width:u,height:r,isDetailPage:a})=>{const l=c.useTheme(),d=y.getCurrencySymbolForAgingChart(t);return c.jsxRuntimeExports.jsx(I,{width:u,height:r,children:c.jsxRuntimeExports.jsx(c.AutoSizer,{children:({height:i,width:m})=>c.jsxRuntimeExports.jsxs(h.ComposedChart,{width:m,height:i,stackOffset:"sign",data:t.recordByDurations,barCategoryGap:"25%",maxBarSize:a?n.sp[8]:n.sp[3],margin:{top:5,right:20,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto"},children:[c.jsxRuntimeExports.jsx(h.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:l.colors.grey3}),c.jsxRuntimeExports.jsx(h.XAxis,{dataKey:e=>e.label,type:"category",axisLine:{stroke:l.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:l.colors.hero,...n.textStyles.extraSmallRegular.cssObject}}),c.jsxRuntimeExports.jsx(h.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:l.colors.hero,...n.textStyles.extraSmallRegular.cssObject},tickFormatter:e=>n.amountValueToString("0,0.[00]a",e,d)}),c.jsxRuntimeExports.jsx(h.Tooltip,{wrapperStyle:{zIndex:2},cursor:!1,content:o,allowEscapeViewBox:{x:!1,y:!0}}),s]})})})};function G(t,s){const o=y.getAgingPeriodFromAgingReportChartValueKey(t),u=n.appLocale.getLocalizedStrings().reports.aging.duration[o],r=s?.recordByDurations.find(a=>a.label===u)?.record;if(r?.[t]!=null){const a=r[t].amount?.amount??0;let l=1;switch(c.forOwn(r,d=>{(d.amount?.amount??0)>a&&l++}),l){case 1:return n.Colors.graphColor24;case 2:return n.Colors.graphColor33;case 3:return n.Colors.graphColor18;case 4:return n.Colors.graphColor12;case 5:return n.Colors.graphColor01;default:return n.Colors.graphColor01}}return n.Colors.graphColor01}const K=5;function q(t){const s=c.map(t,(u,r)=>[u.amount?.amount??0,r]);return s.sort((u,r)=>r[0]-u[0]),s.slice(0,K-1).reduce((u,r)=>({...u,[r[1]]:!0}),{})}function L(t){const s=[];for(const o in t)s.push(o);return s.sort((o,u)=>(t[u].amount?.amount??0)-(t[o].amount?.amount??0)),s}const P=t=>{const s=t.agingPeriods.map(r=>n.appLocale.getLocalizedStrings().reports.aging.duration[r]),o=[];return{recordByDurations:t.agingPeriods.map(r=>{const a={};t.agingBalances.forEach(i=>{const m=y.getAgingReportChartValueKey(i.customer?.name??"",r),e=i.arAgingBalances.find(p=>p.period===r);a[m]={amount:i.children.length>0?e?.totalBalance:e?.balance}});const l=n.appLocale.getLocalizedStrings().reports.aging.duration[r];if(Object.keys(a).length>K){const i=q(a),m=c.pickBy(a,(f,x)=>i[x]===!0),e=c.pickBy(a,(f,x)=>i[x]!==!0),p=Object.keys(e).reduce((f,x)=>f+(e[x].amount?.amount??0),0),g=Object.keys(e)[0],C=y.getAgingReportChartValueKey("Other",r);m[C]={...e[g],amount:{amount:p,currencyCode:e[g].amount?.currencyCode??b.defaultCustomerCurrency.currencyCode,currencySymbol:e[g].amount?.currencySymbol??b.defaultCustomerCurrency.currencySymbol}};const S=L(m);return o.push(...S),{label:l,record:m}}const d=L(a);return o.push(...d),{label:l,record:a}}),durationLabels:s,orderedKeys:Array.from(o)}},W=R.div`
+  width: ${t=>t.width}px;
+  height: ${t=>t.height}px;
+`,X=({active:t,payload:s,mouseOverBarName:o})=>s?.find(r=>r.name===o)!=null&&o!=null&&t===!0?c.jsxRuntimeExports.jsx(B,{active:t,payload:s,barName:o}):null;function J({report:t,width:s,height:o,isDetailPage:u}){const r=j.useRef(!1),[a,l]=j.useState(void 0);j.useEffect(()=>{r.current=!0},[]);const d=P(t),i=()=>{const e=[];return d?.orderedKeys.forEach(p=>{const g=u===!0&&!r.current;e.push(m(p,g))}),e},m=(e,p)=>c.jsxRuntimeExports.jsx(h.Bar,{name:e,animationDuration:p?500:void 0,style:{cursor:"pointer"},dataKey:g=>{const C=g.record;return(C[e]?.amount!=null?C[e].amount:void 0)?.amount??0},stackId:"a",fill:N(e,d),onMouseEnter:()=>{a!==e&&l(e)},onMouseLeave:()=>{a!=null&&l(void 0)}},e);return d==null?null:c.jsxRuntimeExports.jsx(Y,{chartData:d,barElements:i(),width:s,height:o,isDetailPage:u===!0,customToolTipContent:c.jsxRuntimeExports.jsx(X,{mouseOverBarName:a})})}const Y=({chartData:t,barElements:s,customToolTipContent:o,width:u,height:r,isDetailPage:a})=>{const l=c.useTheme(),d=y.getCurrencySymbolForAgingChart(t);return c.jsxRuntimeExports.jsx(W,{width:u,height:r,children:c.jsxRuntimeExports.jsx(c.AutoSizer,{children:({height:i,width:m})=>c.jsxRuntimeExports.jsxs(h.ComposedChart,{width:m,height:i,stackOffset:"sign",data:t.recordByDurations,barCategoryGap:"25%",maxBarSize:a?n.sp[8]:n.sp[3],margin:{top:5,right:20,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto"},children:[c.jsxRuntimeExports.jsx(h.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:l.colors.grey3}),c.jsxRuntimeExports.jsx(h.XAxis,{dataKey:e=>e.label,type:"category",axisLine:{stroke:l.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:l.colors.hero,...n.textStyles.extraSmallRegular.cssObject}}),c.jsxRuntimeExports.jsx(h.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:l.colors.hero,...n.textStyles.extraSmallRegular.cssObject},tickFormatter:e=>n.amountValueToString("0,0.[00]a",e,d)}),c.jsxRuntimeExports.jsx(h.Tooltip,{wrapperStyle:{zIndex:2},cursor:!1,content:o,allowEscapeViewBox:{x:!1,y:!0}}),s]})})})};function N(t,s){const o=y.getAgingPeriodFromAgingReportChartValueKey(t),u=n.appLocale.getLocalizedStrings().reports.aging.duration[o],r=s?.recordByDurations.find(a=>a.label===u)?.record;if(r?.[t]!=null){const a=r[t].amount?.amount??0;let l=1;switch(c.forOwn(r,d=>{(d.amount?.amount??0)>a&&l++}),l){case 1:return n.Colors.graphColor24;case 2:return n.Colors.graphColor33;case 3:return n.Colors.graphColor18;case 4:return n.Colors.graphColor12;case 5:return n.Colors.graphColor01;default:return n.Colors.graphColor01}}return n.Colors.graphColor01}exports.ApAgingChart=_;exports.ArAgingChart=J;

package/dist/ArAgingChart-PIQ_BFy4.js

@@ -0,0 +1,530 @@
+import { j as u, az as j, aA as w, u as E, A as v, aB as D } from "./vendor-.pnpm-UYinI_7q.js";
+import Q, { useRef as z, useState as I, useEffect as V } from "react";
+import b from "@emotion/styled";
+import { Bar as M, ComposedChart as _, CartesianGrid as G, XAxis as F, YAxis as W, Tooltip as P } from "recharts";
+import { C as g, a as f, S as x, o as U, D as A, t as B, dX as X } from "./index-ymbrtWl5.js";
+import { e as Z, c as k, f as L, h as J, i as N } from "./chartTypes-h1GkAvwh.js";
+import { defaultVendorCurrency as K, defaultCustomerCurrency as O } from "@zeniai/client-epic-state";
+const tt = b.div`
+  display: flex;
+`, rt = b.div`
+  flex: display;
+  opacity: 0.85;
+  border-radius: ${x.sp1};
+  flex-direction: column;
+  padding: ${x.sp3};
+  background-color: ${(t) => t.theme.colors.black};
+`, R = b(U)`
+  color: ${(t) => t.color ?? g.neutralGrey2Light};
+  text-align: left;
+`, et = b.div`
+  margin: ${x.sp2} ${x.sp0} ${x.sp2} ${x.sp0};
+  width: 100%;
+  height: 1px;
+  background-color: ${g.neutralGrey3Dark};
+`, ot = ({
+  active: t,
+  payload: n,
+  barName: o
+}) => {
+  const s = [];
+  if (n != null && t === !0) {
+    const r = n.filter(
+      (m) => m.name == o
+    )[0], a = r.payload, c = r.color, i = o != null && a.record[o] != null ? a.record[o].amount : void 0, l = {
+      amount: 0,
+      currencyCode: "",
+      currencySymbol: ""
+    };
+    let d;
+    for (d in a.record) {
+      const m = a.record[d].amount;
+      l.amount += a.record[d].amount?.amount ?? 0, l.currencyCode = m != null ? m.currencyCode : l.currencyCode, l.currencySymbol = m != null ? m.currencySymbol : l.currencySymbol;
+    }
+    const e = Z(o);
+    s.push({
+      barName: e,
+      actual: i,
+      color: c
+    }), s.push({
+      barName: f.getLocalizedStrings().chartCard.total,
+      actual: l,
+      color: g.brandColorPearl
+    });
+  }
+  return s;
+}, nt = ({
+  barLabelsWithValues: t
+}) => /* @__PURE__ */ u.jsx(tt, { children: /* @__PURE__ */ u.jsxs(rt, { children: [
+  /* @__PURE__ */ u.jsx(R, { color: t[0].color, children: `${t[0].barName}: ${k(t[0].actual)}` }),
+  /* @__PURE__ */ u.jsx(et, {}),
+  /* @__PURE__ */ u.jsx(R, { children: `${f.getLocalizedStrings().chartCard.total}: ${k(t[1].actual)}` })
+] }) }), at = (t) => {
+  const n = ot({ ...t });
+  return n.length === 0 ? null : /* @__PURE__ */ u.jsx(nt, { barLabelsWithValues: n });
+}, Y = Q.memo(at), q = 5;
+function st(t) {
+  const n = w(t, (s, r) => [s.amount?.amount ?? 0, r]);
+  return n.sort((s, r) => r[0] - s[0]), n.slice(0, q - 1).reduce((s, r) => ({
+    ...s,
+    [r[1]]: !0
+  }), {});
+}
+function T(t) {
+  const n = [];
+  for (const o in t)
+    n.push(o);
+  return n.sort((o, s) => (t[s].amount?.amount ?? 0) - (t[o].amount?.amount ?? 0)), n;
+}
+const ct = (t) => {
+  const n = t.agingPeriods.map(
+    (r) => f.getLocalizedStrings().reports.aging.duration[r]
+  ), o = [];
+  return {
+    recordByDurations: t.agingPeriods.map(
+      (r) => {
+        const a = {};
+        t.agingBalances.forEach((l) => {
+          const d = L(
+            l.vendor?.name ?? "",
+            r
+          );
+          a[d] = {
+            amount: l.apAgingBalances.find((e) => e.period === r)?.balance
+          };
+        });
+        const c = f.getLocalizedStrings().reports.aging.duration[r];
+        if (Object.keys(a).length > q) {
+          const l = st(a), d = j(a, (C, p) => l[p] === !0), e = j(a, (C, p) => l[p] !== !0), m = Object.keys(e).reduce(
+            (C, p) => C + (e[p].amount?.amount ?? 0),
+            0
+          ), h = Object.keys(e)[0], y = L("Other", r);
+          d[y] = {
+            ...e[h],
+            amount: {
+              amount: m,
+              currencyCode: e[h].amount?.currencyCode ?? K.currencyCode,
+              currencySymbol: e[h].amount?.currencySymbol ?? K.currencySymbol
+            }
+          };
+          const S = T(d);
+          return o.push(...S), {
+            label: c,
+            record: d
+          };
+        }
+        const i = T(a);
+        return o.push(...i), {
+          label: c,
+          record: a
+        };
+      }
+    ),
+    durationLabels: n,
+    orderedKeys: Array.from(o)
+  };
+}, ut = b.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+`, lt = ({
+  active: t,
+  payload: n,
+  mouseOverBarName: o
+}) => n?.find(
+  (r) => r.name === o
+) != null && o != null && t === !0 ? /* @__PURE__ */ u.jsx(
+  Y,
+  {
+    active: t,
+    payload: n,
+    barName: o
+  }
+) : null;
+function Lt({
+  report: t,
+  width: n,
+  height: o,
+  isDetailPage: s
+}) {
+  const r = z(!1), [a, c] = I(
+    void 0
+  );
+  V(() => {
+    r.current = !0;
+  }, []);
+  const i = ct(t), l = () => {
+    const e = [];
+    return i?.orderedKeys.forEach((m) => {
+      const h = s === !0 && !r.current;
+      e.push(d(m, h));
+    }), e;
+  }, d = (e, m) => /* @__PURE__ */ u.jsx(
+    M,
+    {
+      name: e,
+      animationDuration: m ? 500 : void 0,
+      style: { cursor: "pointer" },
+      dataKey: (h) => {
+        const y = h.record;
+        return (y[e]?.amount != null ? y[e].amount : void 0)?.amount ?? 0;
+      },
+      stackId: "a",
+      fill: dt(e, i),
+      onMouseEnter: () => {
+        a !== e && c(e);
+      },
+      onMouseLeave: () => {
+        a != null && c(void 0);
+      }
+    },
+    e
+  );
+  return i == null ? null : /* @__PURE__ */ u.jsx(
+    it,
+    {
+      chartData: i,
+      barElements: l(),
+      width: n,
+      height: o,
+      isDetailPage: s === !0,
+      customToolTipContent: /* @__PURE__ */ u.jsx(lt, { mouseOverBarName: a })
+    }
+  );
+}
+const it = ({
+  chartData: t,
+  barElements: n,
+  customToolTipContent: o,
+  width: s,
+  height: r,
+  isDetailPage: a
+}) => {
+  const c = E(), i = J(t);
+  return /* @__PURE__ */ u.jsx(ut, { width: s, height: r, children: /* @__PURE__ */ u.jsx(v, { children: ({ height: l, width: d }) => /* @__PURE__ */ u.jsxs(
+    _,
+    {
+      width: d,
+      height: l,
+      stackOffset: "sign",
+      data: t.recordByDurations,
+      barCategoryGap: "25%",
+      maxBarSize: a ? A[8] : A[3],
+      margin: {
+        top: 5,
+        right: 20,
+        left: 0,
+        bottom: 5
+      },
+      style: { display: "flex", flex: "1 1 auto" },
+      children: [
+        /* @__PURE__ */ u.jsx(
+          G,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: c.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          F,
+          {
+            dataKey: (e) => e.label,
+            type: "category",
+            axisLine: { stroke: c.colors.grey3, strokeWidth: 0.5 },
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...B.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          W,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...B.extraSmallRegular.cssObject
+            },
+            tickFormatter: (e) => X("0,0.[00]a", e, i)
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          P,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: !1,
+            content: o,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n
+      ]
+    }
+  ) }) });
+};
+function dt(t, n) {
+  const o = N(t), s = f.getLocalizedStrings().reports.aging.duration[o], r = n?.recordByDurations.find(
+    (a) => a.label === s
+  )?.record;
+  if (r?.[t] != null) {
+    const a = r[t].amount?.amount ?? 0;
+    let c = 1;
+    switch (D(r, (i) => {
+      (i.amount?.amount ?? 0) > a && c++;
+    }), c) {
+      case 1:
+        return g.graphColor24;
+      case 2:
+        return g.graphColor33;
+      case 3:
+        return g.graphColor18;
+      case 4:
+        return g.graphColor12;
+      case 5:
+        return g.graphColor01;
+      default:
+        return g.graphColor01;
+    }
+  }
+  return g.graphColor01;
+}
+const H = 5;
+function mt(t) {
+  const n = w(t, (s, r) => [s.amount?.amount ?? 0, r]);
+  return n.sort((s, r) => r[0] - s[0]), n.slice(0, H - 1).reduce((s, r) => ({
+    ...s,
+    [r[1]]: !0
+  }), {});
+}
+function $(t) {
+  const n = [];
+  for (const o in t)
+    n.push(o);
+  return n.sort((o, s) => (t[s].amount?.amount ?? 0) - (t[o].amount?.amount ?? 0)), n;
+}
+const gt = (t) => {
+  const n = t.agingPeriods.map(
+    (r) => f.getLocalizedStrings().reports.aging.duration[r]
+  ), o = [];
+  return {
+    recordByDurations: t.agingPeriods.map(
+      (r) => {
+        const a = {};
+        t.agingBalances.forEach((l) => {
+          const d = L(
+            l.customer?.name ?? "",
+            r
+          ), e = l.arAgingBalances.find(
+            (m) => m.period === r
+          );
+          a[d] = {
+            amount: l.children.length > 0 ? e?.totalBalance : e?.balance
+          };
+        });
+        const c = f.getLocalizedStrings().reports.aging.duration[r];
+        if (Object.keys(a).length > H) {
+          const l = mt(a), d = j(a, (C, p) => l[p] === !0), e = j(a, (C, p) => l[p] !== !0), m = Object.keys(e).reduce(
+            (C, p) => C + (e[p].amount?.amount ?? 0),
+            0
+          ), h = Object.keys(e)[0], y = L("Other", r);
+          d[y] = {
+            ...e[h],
+            amount: {
+              amount: m,
+              currencyCode: e[h].amount?.currencyCode ?? O.currencyCode,
+              currencySymbol: e[h].amount?.currencySymbol ?? O.currencySymbol
+            }
+          };
+          const S = $(d);
+          return o.push(...S), {
+            label: c,
+            record: d
+          };
+        }
+        const i = $(a);
+        return o.push(...i), {
+          label: c,
+          record: a
+        };
+      }
+    ),
+    durationLabels: n,
+    orderedKeys: Array.from(o)
+  };
+}, ht = b.div`
+  width: ${(t) => t.width}px;
+  height: ${(t) => t.height}px;
+`, pt = ({
+  active: t,
+  payload: n,
+  mouseOverBarName: o
+}) => n?.find(
+  (r) => r.name === o
+) != null && o != null && t === !0 ? /* @__PURE__ */ u.jsx(
+  Y,
+  {
+    active: t,
+    payload: n,
+    barName: o
+  }
+) : null;
+function kt({
+  report: t,
+  width: n,
+  height: o,
+  isDetailPage: s
+}) {
+  const r = z(!1), [a, c] = I(
+    void 0
+  );
+  V(() => {
+    r.current = !0;
+  }, []);
+  const i = gt(t), l = () => {
+    const e = [];
+    return i?.orderedKeys.forEach((m) => {
+      const h = s === !0 && !r.current;
+      e.push(d(m, h));
+    }), e;
+  }, d = (e, m) => /* @__PURE__ */ u.jsx(
+    M,
+    {
+      name: e,
+      animationDuration: m ? 500 : void 0,
+      style: { cursor: "pointer" },
+      dataKey: (h) => {
+        const y = h.record;
+        return (y[e]?.amount != null ? y[e].amount : void 0)?.amount ?? 0;
+      },
+      stackId: "a",
+      fill: ft(e, i),
+      onMouseEnter: () => {
+        a !== e && c(e);
+      },
+      onMouseLeave: () => {
+        a != null && c(void 0);
+      }
+    },
+    e
+  );
+  return i == null ? null : /* @__PURE__ */ u.jsx(
+    yt,
+    {
+      chartData: i,
+      barElements: l(),
+      width: n,
+      height: o,
+      isDetailPage: s === !0,
+      customToolTipContent: /* @__PURE__ */ u.jsx(pt, { mouseOverBarName: a })
+    }
+  );
+}
+const yt = ({
+  chartData: t,
+  barElements: n,
+  customToolTipContent: o,
+  width: s,
+  height: r,
+  isDetailPage: a
+}) => {
+  const c = E(), i = J(t);
+  return /* @__PURE__ */ u.jsx(ht, { width: s, height: r, children: /* @__PURE__ */ u.jsx(v, { children: ({ height: l, width: d }) => /* @__PURE__ */ u.jsxs(
+    _,
+    {
+      width: d,
+      height: l,
+      stackOffset: "sign",
+      data: t.recordByDurations,
+      barCategoryGap: "25%",
+      maxBarSize: a ? A[8] : A[3],
+      margin: {
+        top: 5,
+        right: 20,
+        left: 0,
+        bottom: 5
+      },
+      style: { display: "flex", flex: "1 1 auto" },
+      children: [
+        /* @__PURE__ */ u.jsx(
+          G,
+          {
+            horizontal: !0,
+            vertical: !1,
+            strokeWidth: 0.5,
+            stroke: c.colors.grey3
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          F,
+          {
+            dataKey: (e) => e.label,
+            type: "category",
+            axisLine: { stroke: c.colors.grey3, strokeWidth: 0.5 },
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...B.extraSmallRegular.cssObject
+            }
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          W,
+          {
+            type: "number",
+            axisLine: !1,
+            tickLine: !1,
+            tick: {
+              color: c.colors.hero,
+              ...B.extraSmallRegular.cssObject
+            },
+            tickFormatter: (e) => X("0,0.[00]a", e, i)
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          P,
+          {
+            wrapperStyle: { zIndex: 2 },
+            cursor: !1,
+            content: o,
+            allowEscapeViewBox: { x: !1, y: !0 }
+          }
+        ),
+        n
+      ]
+    }
+  ) }) });
+};
+function ft(t, n) {
+  const o = N(t), s = f.getLocalizedStrings().reports.aging.duration[o], r = n?.recordByDurations.find(
+    (a) => a.label === s
+  )?.record;
+  if (r?.[t] != null) {
+    const a = r[t].amount?.amount ?? 0;
+    let c = 1;
+    switch (D(r, (i) => {
+      (i.amount?.amount ?? 0) > a && c++;
+    }), c) {
+      case 1:
+        return g.graphColor24;
+      case 2:
+        return g.graphColor33;
+      case 3:
+        return g.graphColor18;
+      case 4:
+        return g.graphColor12;
+      case 5:
+        return g.graphColor01;
+      default:
+        return g.graphColor01;
+    }
+  }
+  return g.graphColor01;
+}
+export {
+  Lt as A,
+  kt as a
+};

package/dist/ArAgingDetailPage-Bcncj_p_.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-DLVCFIC_.cjs"),S=require("react"),l=require("@emotion/styled"),o=require("./index-BSvKy2E6.cjs"),L=require("./BusyIndication-Uo05RX3X.cjs"),I=require("./EntitySummarySection-CrrJvy-W.cjs"),R={wrapperContainerMarginTop:new o.ResponsiveSized(o.sp[4],o.sp[0]),wrapperContaineHorizontalrMargin:new o.ResponsiveSized(o.sp[0],o.sp[8])},{common:T,reports:{common:q,aging:{agingDetail:B}},dateFormat:$}=o.appLocale.getLocalizedStrings();function F(e){const y=t.useTheme(),g=o.useWindowSizeContext(),{arAgingDetail:n,downloadParams:c,reportDate:r,analytics:a,onReload:i,onBackClick:h,onColumnSortConfigChanged:m,updateDownloadStateHandler:f,onTransactionClick:b}=e,{authParams:C,downloadEndPoint:j,timezone:E}=c,{fetchState:p,invoices:_,arAgingDetailUIState:v,customer:s,totalBalances:z}=n,{sortKey:w,sortOrder:D,downloadState:u}=v,[P,A]=S.useState(!1),M=S.useCallback((d,x)=>{n.customer!=null&&a.trackArAgingDetailReportSortChange(d,x,r.format($.analytics.YYYYDashMMDashDDFormat),n.customer.id,n.customer.name),m(d,x)},[n.customer,m,a,r]);if(S.useEffect(()=>{async function d(){const x={companyName:c.companyName,sortKey:w,sortOrder:D,statementFileType:"excel",reportId:"accounts_receivable_aging",entityId:s?.id??"",timezone:E,reportDate:r};await O(j,C,x),f("Completed"),n.customer!=null&&a.trackApAgingDetailReportDownload(w,D,r.format($.analytics.YYYYDashMMDashDDFormat),n.customer.id,n.customer.name)}P&&u!=="In-Progress"&&(A(!1),f("In-Progress"),d())},[C,j,c.companyName,u,P,r,w,D,E,f,s?.id,n.customer,a]),p==="Error")return t.jsxRuntimeExports.jsxs(H,{children:[t.jsxRuntimeExports.jsx(J,{onClick:i,children:t.jsxRuntimeExports.jsx(o.SvgReload,{})}),t.jsxRuntimeExports.jsx(U,{children:q.failed})]});if(p==="In-Progress"||p==="Not-Started")return t.jsxRuntimeExports.jsx(L.BusyIndication,{fetchState:p});const N=t.jsxRuntimeExports.jsx(o.DownloadButton,{downloadReportOptions:{type:"simple_menu",downloadMenu:{simpleMenuItems:[{type:"excel",isDisabled:!1,isDownloading:u==="In-Progress"}],onDownloadClick:async d=>{if(d==="excel")if(u==="In-Progress"){console.log("Download is already in progress!");return}else A(!0)}}}});return t.jsxRuntimeExports.jsxs(W,{children:[t.jsxRuntimeExports.jsx(o.NavBar,{title:T.strings.empty,backgroundColor:y.colors.grey5,onBackClick:h,rightSideComponent:N,downloadPresent:!0,source:"ArAgingDetailPage"}),t.jsxRuntimeExports.jsx(I.EntitySummarySection,{totalBalances:z,entityName:s?.name??"",entityLogo:s?.logo,reportId:"accounts_receivable_aging",reportDate:r}),t.jsxRuntimeExports.jsx(K,{windowSize:g,children:t.jsxRuntimeExports.jsx(V,{windowSize:g,children:_.length===0||s==null?t.jsxRuntimeExports.jsx(o.NoListDataPage,{message:B.noDataText}):t.jsxRuntimeExports.jsx(Y,{windowSize:g,children:t.jsxRuntimeExports.jsx(I.AgingDetailReportTable,{uiState:v,invoices:_,entityName:s.name,entityLogo:s.logo,onColumnSortConfigChanged:M,onTransactionClick:b})})})})]})}async function O(e,y,g){const n=`${e}?query=${encodeURIComponent(JSON.stringify(k(g)))}`,c=o.appLocale.getLocalizedStrings(),r=c.reports.aging.arAging.arAging,a=c.download;try{const i=await o.fetchRequest({urlEndPoint:n,authParams:y,fileType:"excel"});if(i.ok){const h=o.getFileNameFromResponseHeaders(i.headers,a.defaultFileName),m=await i.arrayBuffer();t.fileDownload(m,h)}else console.error(`${a.errorMessages.fileDownloadError.replace("__feature__",r)} ${i.statusText}`)}catch(i){console.error(`${a.errorMessages.fileDownloadError.replace("__feature__",r)} ${JSON.stringify(i)}`)}}function k(e){return{statement_file_type:e.statementFileType,report_id:e.reportId,company_name:e.companyName,locale_id:o.appLocale.getAppLocaleID(),sort_key:e.sortKey,sort_order:e.sortOrder,entity_id:e.entityId,report_date:e.reportDate,timezone:e.timezone}}const Y=l.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`,H=l.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,J=l.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};
+    }
+  }
+`,U=l(o.SmallRegularSp)`
+  margin-top: ${o.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,W=l.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey5};
+`,K=l.div`
+  display: block;
+  background-color: ${e=>e.theme.colors.grey4};
+  height: calc(100vh - 178px);
+  margin-top: ${e=>R.wrapperContainerMarginTop.valuePx(e.windowSize)};
+`,V=l.div`
+  margin-left: ${e=>R.wrapperContaineHorizontalrMargin.valuePx(e.windowSize)};
+  margin-right: ${e=>R.wrapperContaineHorizontalrMargin.valuePx(e.windowSize)};
+  height: 100%;
+`;exports.default=F;exports.toDownloadAgingDetailedReportOptionsPayload=k;