@mx-cartographer/experiences 7.4.7 → 7.4.8-alpha.mm0

package/dist/spending/index.es.js

@@ -1,5 +1,5 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import i from "react";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import a from "react";
 import { observer as x } from "mobx-react-lite";
 import { startOfMonth as it } from "date-fns/startOfMonth";
 import { endOfMonth as rt } from "date-fns/endOfMonth";
@@ -7,37 +7,43 @@ import M from "@mui/material/Box";
 import C from "@mui/material/Stack";
 import E from "@mui/material/Tab";
 import st from "@mui/material/Tabs";
-import ft from "@mui/material/styles/useTheme";
-import { g as ct, a as lt, S as W, b as Q } from "../SpendingLegend-Bf-wbJvb.mjs";
-import { Text as y, Icon as bt } from "@mxenabled/mxui";
+import bt from "@mui/material/styles/useTheme";
+import { g as ct, a as lt, S as W, b as Q } from "../SpendingLegend-DqZxN_BZ.mjs";
+import { Text as y, Icon as _t } from "@mxenabled/mxui";
 import { f as A } from "../NumberFormatting-DjTD0t3W.mjs";
-import { u as v, b as R, m as F, d as dt, n as _t, a as V, h as Ct, g as yt } from "../hooks-C41HAxM5.mjs";
+import { u as w, b as R, m as F, d as dt, a as V, h as Ct, g as yt } from "../hooks-ZMp65DFz.mjs";
+import { u as gt } from "../useWidgetLoadTimer-C1NBkyLd.mjs";
 import { L as P } from "../Loader-DUaFpDGv.mjs";
-import { M as St } from "../MiniWidgetContainer-CmXpTylX.mjs";
+import { M as St } from "../MiniWidgetContainer-98-hKFqm.mjs";
 import { startOfToday as Z } from "date-fns/startOfToday";
 import Tt from "@mui/material/Button";
 import { useTheme as Mt } from "@mui/material";
-import { e as xt } from "../exportTransactionsToCSV-Cz2t0lmA.mjs";
-import { T as vt, a as wt } from "../TransactionDetails-COH0OKNG.mjs";
+import { e as xt } from "../exportTransactionsToCSV-DuAaI5XA.mjs";
+import { T as wt, a as vt } from "../TransactionDetails-BA_E5nQ-.mjs";
 import Dt from "@mui/material/Collapse";
 import z from "@mui/material/Divider";
 import tt from "@mui/material/List";
 import et from "@mui/material/ListItem";
-import It from "@mui/material/ListItemButton";
-import { u as Lt } from "../useScreenSize-B6JyS_Lj.mjs";
+import Lt from "@mui/material/ListItemButton";
+import { u as It } from "../useScreenSize-B6JyS_Lj.mjs";
 import { D as nt } from "../Drawer-BEtCk82g.mjs";
-import { b as I } from "../Category-CevNQ03n.mjs";
-import { A as ot, W as At } from "../WidgetContainer-6dsjtOVg.mjs";
-const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column", children: [
+import { b as L } from "../Category-CevNQ03n.mjs";
+import { A as ot, W as At } from "../WidgetContainer-CaPjoWeE.mjs";
+const N = ({ amount: e, label: d }) => /* @__PURE__ */ l(C, { direction: "column", children: [
   /* @__PURE__ */ t(y, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: d }),
   /* @__PURE__ */ t(y, { variant: "XSmall", children: A(e, "0,0") })
 ] }), Et = () => {
-  const e = ft(), { goals: d, spending: o } = v(), { selectedAccounts: l } = R(), {
-    categories: r,
-    dateRangeCategoryTotals: a,
+  const e = bt(), { goals: d, spending: o } = w(), { selectedAccounts: r } = R(), {
+    categories: i,
+    dateRangeCategoryTotals: s,
     dataRangeTotalsLoaded: n,
     loadDateRangeCategoryTotals: u
-  } = F(), s = i.useMemo(
+  } = F();
+  gt({
+    widgetName: "SpendingMiniWidget",
+    isLoaded: n
+  });
+  const c = a.useMemo(
     () => [
       e.palette.chartMono.chartMono5,
       e.palette.chartMono.chartMono4,
@@ -48,26 +54,26 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
     ],
     [e]
   );
-  i.useEffect(() => {
+  a.useEffect(() => {
     u(
-      l,
+      r,
       it(/* @__PURE__ */ new Date()),
       rt(/* @__PURE__ */ new Date())
     ).finally();
-  }, [l]);
-  const [m, p] = i.useState(""), [h, w] = i.useState(0), _ = i.useMemo(
-    () => ct(r, d, e, a),
-    [r, a]
-  ), f = i.useMemo(
-    () => lt(r, a, s),
-    [r, a, s]
+  }, [r]);
+  const [m, g] = a.useState(""), [h, v] = a.useState(0), _ = a.useMemo(
+    () => ct(i, d, e, s),
+    [i, s]
+  ), f = a.useMemo(
+    () => lt(i, s, c),
+    [i, s, c]
   ), O = (T, k) => {
-    w(k), p("");
+    v(k), g("");
   }, S = (T) => {
-    p(m === T ? "" : T);
+    g(m === T ? "" : T);
   };
-  return n ? /* @__PURE__ */ c(M, { width: "100%", children: [
-    /* @__PURE__ */ c(
+  return n ? /* @__PURE__ */ l(M, { width: "100%", children: [
+    /* @__PURE__ */ l(
       st,
       {
         "aria-label": o.mini_title,
@@ -115,7 +121,7 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
         hidden: h !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ c(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ l(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
             W,
             {
@@ -136,7 +142,7 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
         hidden: h !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ c(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ l(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
             W,
             {
@@ -153,31 +159,31 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
     )
   ] }) : /* @__PURE__ */ t(P, { height: 250 });
 }, Wt = x(Et), Nt = ({ onPrimaryCtaClick: e, sx: d = {} }) => {
-  const { visibleAccounts: o } = dt(), { spending: l } = v(), { isCopyLoaded: r, isInitialized: a, setSelectedAccounts: n } = R();
-  return i.useEffect(() => {
+  const { visibleAccounts: o } = dt(), { spending: r } = w(), { isCopyLoaded: i, isInitialized: s, setSelectedAccounts: n } = R();
+  return a.useEffect(() => {
     n(o);
-  }, [o]), !r || !a ? /* @__PURE__ */ t(P, {}) : /* @__PURE__ */ t(
+  }, [o]), !i || !s ? /* @__PURE__ */ t(P, {}) : /* @__PURE__ */ t(
     St,
     {
       className: "mx-exp-spending-miniwidget",
       onPrimaryCtaClick: e,
-      primaryCtaLabel: l.primary_cta,
+      primaryCtaLabel: r.primary_cta,
       sx: { height: "100%", ...d },
-      title: l.mini_title,
+      title: r.mini_title,
       children: /* @__PURE__ */ t(Wt, {})
     }
   );
-}, be = x(Nt), Rt = ({
+}, _e = x(Nt), Rt = ({
   data: e,
   onSelected: d,
   selectedId: o = "",
-  title: l
+  title: r
 }) => {
-  const { spending: r } = v(), a = e.categoryData.find((n) => n.guid === o);
-  return /* @__PURE__ */ c(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
-    /* @__PURE__ */ t(y, { bold: !0, sx: { py: 12 }, children: `${l} ${r.by_category}` }),
+  const { spending: i } = w(), s = e.categoryData.find((n) => n.guid === o);
+  return /* @__PURE__ */ l(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ t(y, { bold: !0, sx: { py: 12 }, children: `${r} ${i.by_category}` }),
     /* @__PURE__ */ t(z, { "aria-hidden": "true" }),
-    /* @__PURE__ */ t(tt, { children: e.categoryData.map((n) => /* @__PURE__ */ c(i.Fragment, { children: [
+    /* @__PURE__ */ t(tt, { children: e.categoryData.map((n) => /* @__PURE__ */ l(a.Fragment, { children: [
       /* @__PURE__ */ t(
         et,
         {
@@ -186,10 +192,10 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
           sx: {
             minHeight: 44
           },
-          children: /* @__PURE__ */ c(
-            It,
+          children: /* @__PURE__ */ l(
+            Lt,
             {
-              "aria-expanded": a?.guid === n.guid,
+              "aria-expanded": s?.guid === n.guid,
               onClick: () => d(n.guid),
               sx: { minHeight: 44, px: 8, py: 0 },
               children: [
@@ -203,7 +209,7 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
                     width: 8
                   }
                 ),
-                /* @__PURE__ */ c(
+                /* @__PURE__ */ l(
                   C,
                   {
                     alignItems: "center",
@@ -222,8 +228,8 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
         }
       ),
       /* @__PURE__ */ t(z, {}),
-      n.categoryTotals && n.categoryTotals.length > 0 && /* @__PURE__ */ t(Dt, { in: a?.guid === n.guid, unmountOnExit: !0, children: /* @__PURE__ */ c(tt, { children: [
-        a?.categoryTotals?.map((u) => /* @__PURE__ */ t(
+      n.categoryTotals && n.categoryTotals.length > 0 && /* @__PURE__ */ t(Dt, { in: s?.guid === n.guid, unmountOnExit: !0, children: /* @__PURE__ */ l(tt, { children: [
+        s?.categoryTotals?.map((u) => /* @__PURE__ */ t(
           et,
           {
             sx: {
@@ -231,8 +237,8 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
               pr: 8,
               py: 0
             },
-            children: /* @__PURE__ */ c(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-              /* @__PURE__ */ c(y, { children: [
+            children: /* @__PURE__ */ l(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ l(y, { children: [
                 u.name,
                 " "
               ] }),
@@ -244,17 +250,17 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
         /* @__PURE__ */ t(z, {})
       ] }) })
     ] }, n.guid)) }),
-    /* @__PURE__ */ t(y, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${r.total}: ${A(e.totalAmount, "0,0")}` })
+    /* @__PURE__ */ t(y, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${A(e.totalAmount, "0,0")}` })
   ] });
 }, Ot = x(Rt), kt = ({
   data: e,
   onSelected: d,
   onViewTransactions: o,
-  selectedId: l,
-  title: r
+  selectedId: r,
+  title: i
 }) => {
-  const { isDesktop: a, isMobile: n } = Lt(), { isLoadingCategoryTotals: u } = F(), { spending: s } = v();
-  return /* @__PURE__ */ c(
+  const { isDesktop: s, isMobile: n } = It(), { isLoadingCategoryTotals: u } = F(), { spending: c } = w();
+  return /* @__PURE__ */ l(
     C,
     {
       alignItems: n ? "center" : "flex-start",
@@ -275,7 +281,7 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
             onSelected: () => {
             },
             selectedId: "",
-            size: a ? 400 : 300,
+            size: s ? 400 : 300,
             totalLabel: "Loading ...",
             variant: "full"
           }
@@ -286,13 +292,13 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
             data: e,
             onSelected: d,
             onViewTransactions: o,
-            selectedId: l,
-            size: a ? 400 : 300,
-            totalLabel: s.total_amount,
+            selectedId: r,
+            size: s ? 400 : 300,
+            totalLabel: c.total_amount,
             variant: "full"
           }
         ),
-        /* @__PURE__ */ t(Ot, { data: e, onSelected: d, selectedId: l, title: r })
+        /* @__PURE__ */ t(Ot, { data: e, onSelected: d, selectedId: r, title: i })
       ]
     }
   );
@@ -304,67 +310,73 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
   e.palette.chartMono.chartMono1,
   e.palette.chartMono.chartMono6
 ], Bt = () => {
-  const e = Mt(), { onLoad: d } = _t(), { is_mobile_webview: o } = V(), { clientConfig: l } = V(), { categories: r, dateRangeCategoryTotals: a, loadDateRangeCategoryTotals: n } = F(), {
+  const e = Mt(), { is_mobile_webview: d } = V(), { clientConfig: o } = V(), {
+    categories: r,
+    dateRangeCategoryTotals: i,
+    loadDateRangeCategoryTotals: s,
+    dataRangeTotalsLoaded: n
+  } = F(), {
     goals: u,
-    spending: s,
+    spending: c,
     transactions: m
-  } = v(), { displayedDateRange: p, selectedAccounts: h, selectedAccountGuids: w } = R(), {
+  } = w(), { displayedDateRange: g, selectedAccounts: h, selectedAccountGuids: v } = R(), {
     setFilter: _,
     sortedTransactions: f,
     sortedTransactionsWithSplits: O,
     tags: S
-  } = Ct(), T = l?.master?.deep_link_params?.account_guids, k = l?.master?.deep_link_params?.view, [$, H] = i.useState(""), [L, pt] = i.useState(k === "income" ? 1 : 0), [K, U] = i.useState(""), [gt, X] = i.useState(!1);
-  i.useEffect(() => {
-    n(
+  } = Ct(), T = o?.master?.deep_link_params?.account_guids, k = o?.master?.deep_link_params?.view, [$, H] = a.useState(""), [I, pt] = a.useState(k === "income" ? 1 : 0), [K, U] = a.useState(""), [ut, X] = a.useState(!1);
+  gt({
+    widgetName: "SpendingWidget",
+    isLoaded: n
+  }), a.useEffect(() => {
+    s(
       h,
-      p.start,
-      p.end
-    ).finally(() => {
-      d?.("SpendingWidget");
-    });
-  }, [h, p]);
-  const B = i.useMemo(
-    () => ct(r, u, e, a),
-    [r, a]
-  ), Y = i.useMemo(
-    () => lt(r, a, $t(e)),
-    [r, a]
-  ), G = i.useMemo(
-    () => f.find((g) => g.guid === K),
+      g.start,
+      g.end
+    ).finally();
+  }, [h, g]);
+  const B = a.useMemo(
+    () => ct(r, u, e, i),
+    [r, i]
+  ), Y = a.useMemo(
+    () => lt(r, i, $t(e)),
+    [r, i]
+  ), G = a.useMemo(
+    () => f.find((p) => p.guid === K),
     [K, f]
-  ), ut = (g, D) => {
+  ), mt = (p, D) => {
     pt(D), H("");
-  }, q = (g) => {
-    H($ === g || g === "0" ? "" : g);
-  }, J = (g) => {
+  }, q = (p) => {
+    H($ === p || p === "0" ? "" : p);
+  }, J = (p) => {
     const D = {
-      accounts: T || w,
-      dateRange: p
+      accounts: T || v,
+      dateRange: g
     };
-    if (L === 0)
-      if (g === "other") {
+    if (I === 0)
+      if (p === "other") {
         const b = B.categoryData.find((j) => j.guid === "other");
         _({
           ...D,
-          custom: (j) => !!b?.categoryTotals?.find((ht) => ht.guid === j.top_level_category_guid)
+          custom: (j) => !!b?.categoryTotals?.find((ft) => ft.guid === j.top_level_category_guid)
         });
       } else
         _({
           ...D,
-          custom: (b) => g ? b.top_level_category_guid === g : b.top_level_category_guid !== I.INCOME && b.top_level_category_guid !== I.INVESTMENTS && b.top_level_category_guid !== I.TRANSFER,
-          showSplits: !!g
+          custom: (b) => p ? b.top_level_category_guid === p : b.top_level_category_guid !== L.INCOME && b.top_level_category_guid !== L.INVESTMENTS && b.top_level_category_guid !== L.TRANSFER,
+          showSplits: !!p
         });
     else
       _({
         ...D,
-        custom: (b) => g ? b.category_guid === g : b.category_guid === I.INCOME || b.top_level_category_guid === I.INCOME
+        custom: (b) => p ? b.category_guid === p : b.category_guid === L.INCOME || b.top_level_category_guid === L.INCOME
       });
     X(!0);
-  }, mt = () => {
+  }, ht = () => {
     xt(O, S);
   };
-  return /* @__PURE__ */ c(M, { children: [
-    /* @__PURE__ */ c(st, { onChange: ut, value: L, variant: "fullWidth", children: [
+  return /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(st, { onChange: mt, value: I, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
         E,
         {
@@ -372,7 +384,7 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
             N,
             {
               amount: B.totalAmount,
-              label: s.spend_tab_title
+              label: c.spend_tab_title
             }
           )
         }
@@ -384,88 +396,88 @@ const N = ({ amount: e, label: d }) => /* @__PURE__ */ c(C, { direction: "column
             N,
             {
               amount: Y.totalAmount,
-              label: s.income_tab_title
+              label: c.income_tab_title
             }
           )
         }
       )
     ] }),
-    L === 0 && /* @__PURE__ */ t(
+    I === 0 && /* @__PURE__ */ t(
       at,
       {
         data: B,
         onSelected: q,
         onViewTransactions: J,
         selectedId: $,
-        title: s.spend_tab_title
+        title: c.spend_tab_title
       }
     ),
-    L === 1 && /* @__PURE__ */ t(
+    I === 1 && /* @__PURE__ */ t(
       at,
       {
         data: Y,
         onSelected: q,
         onViewTransactions: J,
         selectedId: $,
-        title: s.income_tab_title
+        title: c.income_tab_title
       }
     ),
     /* @__PURE__ */ t(
       nt,
       {
-        ariaLabelClose: s.close_drawer_aria,
-        isOpen: gt,
+        ariaLabelClose: c.close_drawer_aria,
+        isOpen: ut,
         onClose: () => X(!1),
-        title: s.transactions_drawer_title,
-        children: /* @__PURE__ */ c(C, { children: [
-          !o && f.length > 0 && /* @__PURE__ */ t(C, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
+        title: c.transactions_drawer_title,
+        children: /* @__PURE__ */ l(C, { children: [
+          !d && f.length > 0 && /* @__PURE__ */ t(C, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
             Tt,
             {
-              onClick: mt,
-              startIcon: /* @__PURE__ */ t(bt, { name: "ios_share" }),
+              onClick: ht,
+              startIcon: /* @__PURE__ */ t(_t, { name: "ios_share" }),
               variant: "text",
               children: m.export_csv_btn
             }
           ) }),
-          /* @__PURE__ */ t(vt, { onClick: U })
+          /* @__PURE__ */ t(wt, { onClick: U })
         ] })
       }
     ),
     /* @__PURE__ */ t(
       nt,
       {
-        ariaLabelClose: s.close_drawer_aria,
+        ariaLabelClose: c.close_drawer_aria,
         isOpen: !!G,
         onClose: () => U(""),
-        title: s.transaction_details_drawer_title,
-        children: G && /* @__PURE__ */ t(wt, { transaction: G })
+        title: c.transaction_details_drawer_title,
+        children: G && /* @__PURE__ */ t(vt, { transaction: G })
       }
     )
   ] });
 }, Gt = x(Bt), jt = ({ onBackClick: e, sx: d = {} }) => {
-  const { visibleAccounts: o } = dt(), { spending: l } = v(), { isCopyLoaded: r, isInitialized: a, setDisplayedDate: n, setSelectedAccounts: u } = R(), { onEvent: s } = yt(), { clientConfig: m } = V(), p = m?.master?.deep_link_params?.date_range, [h, w] = i.useState(!1);
-  i.useEffect(() => {
+  const { visibleAccounts: o } = dt(), { spending: r } = w(), { isCopyLoaded: i, isInitialized: s, setDisplayedDate: n, setSelectedAccounts: u } = R(), { onEvent: c } = yt(), { clientConfig: m } = V(), g = m?.master?.deep_link_params?.date_range, [h, v] = a.useState(!1);
+  a.useEffect(() => {
     u(o);
-  }, [o]), i.useEffect(() => {
-    p && Array.isArray(p) && p.length === 2 ? n(p[0], p[1]) : n(it(Z()), rt(Z())), w(!0), s(ot.SPENDING_VIEW);
+  }, [o]), a.useEffect(() => {
+    g && Array.isArray(g) && g.length === 2 ? n(g[0], g[1]) : n(it(Z()), rt(Z())), v(!0), c(ot.SPENDING_VIEW);
   }, []);
   const _ = (f) => {
     n(f[0], f[1]);
   };
-  return !r || !a || !h ? /* @__PURE__ */ t(P, {}) : /* @__PURE__ */ t(
+  return !i || !s || !h ? /* @__PURE__ */ t(P, {}) : /* @__PURE__ */ t(
     At,
     {
       accountOptions: o,
       calendarActions: { onRangeChanged: _ },
-      onAccountsFilterClick: () => s(ot.SPENDING_CLICK_FILTER),
+      onAccountsFilterClick: () => c(ot.SPENDING_CLICK_FILTER),
       onBackClick: e,
       sx: d,
-      title: l.title,
+      title: r.title,
       children: /* @__PURE__ */ t(M, { height: "calc(100dvh - 150px)", overflow: "scroll", width: "100%", children: /* @__PURE__ */ t(Gt, {}) })
     }
   );
-}, _e = x(jt);
+}, Ce = x(jt);
 export {
-  be as SpendingMiniWidget,
-  _e as SpendingWidget
+  _e as SpendingMiniWidget,
+  Ce as SpendingWidget
 };