@mx-cartographer/experiences 8.0.0-alpha.bb3 → 8.0.0-alpha.bb4

package/dist/spending/index.es.js

@@ -1,218 +1,38 @@
-import { jsxs as h, jsx as t, Fragment as mt } from "react/jsx-runtime";
-import p from "react";
-import { observer as v } from "mobx-react-lite";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import i from "react";
+import { observer as w } from "mobx-react-lite";
 import { startOfMonth as nt } from "date-fns/startOfMonth";
 import { endOfMonth as ot } from "date-fns/endOfMonth";
-import x from "@mui/material/Box";
-import C from "@mui/material/Stack";
-import N from "@mui/material/Tab";
+import v from "@mui/material/Box";
+import b from "@mui/material/Stack";
+import k from "@mui/material/Tab";
 import at from "@mui/material/Tabs";
-import ht from "@mui/material/styles/useTheme";
-import { b as V } from "../CategoryUtil-pZRIYOgN.mjs";
-import { b as S } from "../Category-CevNQ03n.mjs";
-import { Text as y, CategoryIcon as ft, CategoryIconVariants as yt } from "@mxenabled/mxui";
-import { f as w } from "../NumberFormatting-Buh7u8Oi.mjs";
-import { u as bt } from "../useAriaLive-B3_pRUio.mjs";
-import Ct from "@mui/material/Button";
-import { useTheme as it } from "@mui/material";
-import { u as I, b as R, m as z, d as rt, a as st, h as _t, g as St } from "../hooks-D6XlXHf4.mjs";
-import { u as lt } from "../useScreenSize-B6JyS_Lj.mjs";
-import { D as Tt } from "../Donut-oaQFlbit.mjs";
-import { L as F } from "../Loader-DUaFpDGv.mjs";
-import { M as Mt } from "../MiniWidgetContainer-D0gfmbaF.mjs";
-import { startOfToday as U } from "date-fns/startOfToday";
-import { T as Dt, a as xt } from "../TransactionDetails-oP1eSuiS.mjs";
-import wt from "@mui/material/Collapse";
-import B from "@mui/material/Divider";
-import q from "@mui/material/List";
-import J from "@mui/material/ListItem";
-import vt from "@mui/material/ListItemButton";
-import { D as Q } from "../Drawer-kEE73B87.mjs";
-import { A as Z, W as It } from "../WidgetContainer-BHWANqT4.mjs";
-const j = 5, Et = (n, c, r) => r.reduce((l, a) => {
-  if (a.total > 0) {
-    const i = n.find((s) => s.guid === a.category_guid);
-    if (!i) return l;
-    const o = i.parent_guid ?? i.guid, e = n.find((s) => s.guid === o);
-    if (!e) return l;
-    const d = {
-      guid: i.guid,
-      name: i.guid === o ? `General ${i.name}` : i.name,
-      color: V(e.guid, c),
-      amount: a.total
-    }, u = l.find((s) => s.guid === o);
-    u ? (u.amount += a.total, u.categoryTotals?.push(d)) : l.push({
-      guid: o,
-      name: e.name,
-      color: V(e.guid, c),
-      categoryTotals: [d],
-      amount: a.total
-    });
-  }
-  return l;
-}, []), ct = (n, c, r, l) => {
-  const a = Et(n, r, l), i = a.filter(
-    (s) => s.guid !== S.INCOME && s.guid !== S.INVESTMENTS && s.guid !== S.TRANSFER
-  ).sort((s, m) => m.amount - s.amount), o = i.reduce(
-    (s, m) => s + m.amount,
-    0
-  ), e = i.length > j ? j : i.length, d = i.slice(0, e), u = d.map((s) => ({
-    id: s.guid,
-    color: V(s.guid, r),
-    label: s.name,
-    value: s.amount / o * 100
-  }));
-  if (i.length > 5) {
-    const s = i.slice(j, a.length), m = s.reduce(
-      (T, g) => T + g.amount,
-      0
-    );
-    d.push({
-      guid: "other",
-      color: r.palette.categories.others || "",
-      name: c.saving_goal_other,
-      categoryTotals: s,
-      amount: m
-    }), u.push({
-      id: "other",
-      color: r.palette.categories.others || "",
-      label: c.saving_goal_other,
-      value: m / o * 100
-    });
-  }
-  return {
-    categoryData: d,
-    donutData: u,
-    totalAmount: o
-  };
-}, dt = (n, c, r) => {
-  const l = n.filter(
-    (e) => e.guid === S.INCOME || e.parent_guid === S.INCOME
-  ), a = c.filter((e) => l.some((d) => d.guid === e.category_guid)).sort((e, d) => e.total - d.total).map((e, d) => ({
-    guid: e.category_guid,
-    name: n.find((u) => u.guid === e.category_guid)?.name,
-    color: r[d],
-    categoryTotals: [],
-    amount: Math.abs(e.total)
-  })), i = a.reduce(
-    (e, d) => e + d.amount,
-    0
-  ), o = a.map((e) => ({
-    id: e.guid,
-    color: e.color,
-    label: e.name,
-    value: e.amount / i * 100
-  }));
-  return {
-    categoryData: a,
-    donutData: o,
-    totalAmount: i
-  };
-}, W = ({ amount: n, label: c }) => /* @__PURE__ */ h(C, { direction: "column", children: [
-  /* @__PURE__ */ t(y, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: c }),
-  /* @__PURE__ */ t(y, { variant: "XSmall", children: w(n, "0,0") })
-] }), At = ({
-  data: n,
-  isIncome: c = !1,
-  onSelected: r,
-  onViewTransactions: l,
-  selectedId: a,
-  size: i = 150,
-  totalLabel: o,
-  variant: e = "mini"
-}) => {
-  const { spending: d } = I(), u = it(), { isTablet: s } = lt(), { announce: m, ariaLive: T } = bt(), g = p.useMemo(
-    () => a ? n.categoryData.find((D) => D.guid === a) : void 0,
-    [a]
-  );
-  p.useEffect(() => {
-    if (g) {
-      const D = w(g.amount, "0,0");
-      m(`${g.name}: ${D}`);
-    }
-  }, [g, m]);
-  const b = p.useMemo(() => n.donutData.length > 0 ? n.donutData : [{ id: "0", color: u.palette.divider, value: 100 }], [n, u]), E = () => {
-    l?.(a);
-  }, _ = s ? 32 : 48;
-  return /* @__PURE__ */ h(mt, { children: [
-    T,
-    /* @__PURE__ */ t(Tt, { data: b, onClick: r, selectedId: a, size: i, children: /* @__PURE__ */ t(C, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ h(C, { alignItems: "center", justifyContent: "center", minHeight: i, minWidth: i, children: [
-      g && /* @__PURE__ */ h(
-        C,
-        {
-          alignItems: "center",
-          gap: e === "mini" ? 0 : 8,
-          mb: e === "mini" ? 0 : 8,
-          mt: e === "mini" ? 0 : -16,
-          sx: e === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
-          children: [
-            /* @__PURE__ */ t(
-              ft,
-              {
-                categoryGuid: c ? S.INCOME : g.guid,
-                size: e === "mini" ? 24 : _,
-                variant: yt.Transparent
-              }
-            ),
-            /* @__PURE__ */ t(
-              y,
-              {
-                color: "secondary",
-                noWrap: !0,
-                variant: e === "mini" ? "Tiny" : "Body",
-                children: g ? g.name : o
-              }
-            )
-          ]
-        }
-      ),
-      !g && e === "full" && /* @__PURE__ */ t(y, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: o }),
-      /* @__PURE__ */ t(y, { variant: e === "mini" ? "H2" : "H1", children: g ? w(g.amount, "0,0") : w(n.totalAmount, "0,0") }),
-      !g && e === "mini" && /* @__PURE__ */ t(y, { color: "secondary", noWrap: !0, variant: "Tiny", children: o }),
-      e === "full" && /* @__PURE__ */ t(
-        Ct,
-        {
-          "aria-label": `View ${g?.name || ""} Transactions`,
-          disabled: n.categoryData.length === 0,
-          onClick: E,
-          sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
-          variant: "text",
-          children: d.view_transactions
-        }
-      )
-    ] }) }) })
-  ] });
-}, O = v(At), tt = ({ data: n, onSelected: c, selectedId: r }) => {
-  const l = (a, i) => {
-    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), c(i));
-  };
-  return /* @__PURE__ */ t(C, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: n.categoryData.map((a) => /* @__PURE__ */ h(
-    C,
-    {
-      alignItems: "center",
-      "aria-label": a.name,
-      "aria-pressed": a.guid === r,
-      direction: "row",
-      gap: 8,
-      onClick: () => c(a.guid),
-      onKeyDown: (i) => l(i, a.guid),
-      role: "button",
-      sx: { cursor: "pointer" },
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ t(x, { borderRadius: 4, height: 8, sx: { backgroundColor: a.color }, width: 8 }),
-        /* @__PURE__ */ t(y, { bold: a.guid === r, variant: "XSmall", children: a.name })
-      ]
-    },
-    a.guid
-  )) });
-}, Lt = () => {
-  const n = ht(), { goals: c, spending: r } = I(), { selectedAccounts: l } = R(), {
-    categories: a,
-    dateRangeCategoryTotals: i,
-    dataRangeTotalsLoaded: o,
-    loadDateRangeCategoryTotals: e
-  } = z(), d = p.useMemo(
+import { useTheme as mt } from "@mui/material/styles";
+import { g as it, a as rt, S as G, b as q } from "../SpendingLegend-6FqtMcBV.mjs";
+import { Text as C, Icon as ht } from "@mxenabled/mxui";
+import { f as R } from "../NumberFormatting-DjTD0t3W.mjs";
+import { u as L, m as W, d as st, b as P, a as F, h as ct, g as ft, n as bt } from "../hooks-C41HAxM5.mjs";
+import { L as lt } from "../Loader-Ckqi9Rx6.mjs";
+import { M as _t } from "../MiniWidgetContainer-CKzf_Ira.mjs";
+import { startOfToday as J } from "date-fns/startOfToday";
+import yt from "@mui/material/Button";
+import { useTheme as Ct } from "@mui/material";
+import { e as St } from "../exportTransactionsToCSV-BgV_wTLT.mjs";
+import { T as Tt, a as Mt } from "../TransactionDetails-Bn0qY5Hw.mjs";
+import Dt from "@mui/material/Collapse";
+import z from "@mui/material/Divider";
+import Q from "@mui/material/List";
+import X from "@mui/material/ListItem";
+import xt from "@mui/material/ListItemButton";
+import { u as vt } from "../useScreenSize-B5afALev.mjs";
+import { D as Z } from "../Drawer-BF40nbsH.mjs";
+import { b as x } from "../Category-Ccoew_sA.mjs";
+import { A as tt, W as wt } from "../WidgetContainer-CDh9fjpR.mjs";
+const j = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column", children: [
+  /* @__PURE__ */ t(C, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: d }),
+  /* @__PURE__ */ t(C, { variant: "caption", children: R(n, "0,0") })
+] }), Lt = () => {
+  const n = mt(), { goals: d, spending: o } = L(), { categories: r, dateRangeCategoryTotals: a } = W(), c = i.useMemo(
     () => [
       n.palette.chartMono.chartMono5,
       n.palette.chartMono.chartMono4,
@@ -222,172 +42,172 @@ const j = 5, Et = (n, c, r) => r.reduce((l, a) => {
       n.palette.chartMono.chartMono6
     ],
     [n]
-  );
-  p.useEffect(() => {
-    e(
-      l,
-      nt(/* @__PURE__ */ new Date()),
-      ot(/* @__PURE__ */ new Date())
-    ).finally();
-  }, [l]);
-  const [u, s] = p.useState(""), [m, T] = p.useState(0), g = p.useMemo(
-    () => ct(a, c, n, i),
-    [a, i]
-  ), b = p.useMemo(
-    () => dt(a, i, d),
-    [a, i, d]
-  ), E = (D, L) => {
-    T(L), s("");
-  }, _ = (D) => {
-    s(u === D ? "" : D);
+  ), [e, l] = i.useState(""), [g, _] = i.useState(0), m = i.useMemo(
+    () => it(r, d, n, a),
+    [r, a]
+  ), p = i.useMemo(
+    () => rt(r, a, c),
+    [r, a, c]
+  ), A = (y, T) => {
+    _(T), l("");
+  }, f = (y) => {
+    l(e === y ? "" : y);
   };
-  return o ? /* @__PURE__ */ h(x, { width: "100%", children: [
-    /* @__PURE__ */ h(
+  return /* @__PURE__ */ s(v, { width: "100%", children: [
+    /* @__PURE__ */ s(
       at,
       {
-        "aria-label": r.mini_title,
-        onChange: E,
-        value: m,
+        "aria-label": o.mini_title,
+        onChange: A,
+        value: g,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ t(
-            N,
+            k,
             {
               "aria-controls": "spending-tabpanel",
               id: "spending-tab",
               label: /* @__PURE__ */ t(
-                W,
+                j,
                 {
-                  amount: g.totalAmount,
-                  label: r.spend_tab_title
+                  amount: m.totalAmount,
+                  label: o.spend_tab_title
                 }
               ),
-              tabIndex: m === 0 ? 0 : -1
+              tabIndex: g === 0 ? 0 : -1
             }
           ),
           /* @__PURE__ */ t(
-            N,
+            k,
             {
               "aria-controls": "income-tabpanel",
               id: "income-tab",
               label: /* @__PURE__ */ t(
-                W,
+                j,
                 {
-                  amount: b.totalAmount,
-                  label: r.income_tab_title
+                  amount: p.totalAmount,
+                  label: o.income_tab_title
                 }
               ),
-              tabIndex: m === 1 ? 0 : -1
+              tabIndex: g === 1 ? 0 : -1
             }
           )
         ]
       }
     ),
     /* @__PURE__ */ t(
-      x,
+      v,
       {
         "aria-labelledby": "spending-tab",
-        hidden: m !== 0,
+        hidden: g !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ h(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ s(b, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            O,
+            G,
             {
-              data: g,
-              onSelected: _,
-              selectedId: u,
-              totalLabel: r.total_spending
+              data: m,
+              onSelected: f,
+              selectedId: e,
+              totalLabel: o.total_spending
             }
           ),
-          /* @__PURE__ */ t(tt, { data: g, onSelected: _, selectedId: u })
+          /* @__PURE__ */ t(q, { data: m, onSelected: f, selectedId: e })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      x,
+      v,
       {
         "aria-labelledby": "income-tab",
-        hidden: m !== 1,
+        hidden: g !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ h(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ s(b, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            O,
+            G,
             {
-              data: b,
+              data: p,
               isIncome: !0,
-              onSelected: _,
-              selectedId: u,
-              totalLabel: r.total_income
+              onSelected: f,
+              selectedId: e,
+              totalLabel: o.total_income
             }
           ),
-          /* @__PURE__ */ t(tt, { data: b, onSelected: _, selectedId: u })
+          /* @__PURE__ */ t(q, { data: p, onSelected: f, selectedId: e })
         ] })
       }
     )
-  ] }) : /* @__PURE__ */ t(F, { height: 250 });
-}, Nt = v(Lt), Wt = ({ onPrimaryCtaClick: n, sx: c = {} }) => {
-  const { visibleAccounts: r } = rt(), { spending: l } = I(), { isCopyLoaded: a, isInitialized: i, setSelectedAccounts: o } = R();
-  return p.useEffect(() => {
-    o(r);
-  }, [r]), !a || !i ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(
-    Mt,
+  ] });
+}, At = w(Lt), It = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
+  const { isAccountDataLoaded: o, loadAccountData: r, visibleAccounts: a } = st(), { categoriesLoaded: c, loadCategories: e, loadDateRangeCategoryTotals: l } = W(), { spending: g } = L(), { isInitialized: _, selectedAccounts: m, setSelectedAccounts: p } = P();
+  return i.useEffect(() => {
+    o || r().finally(), c || e().finally();
+  }, []), i.useEffect(() => {
+    p(a);
+  }, [a]), i.useEffect(() => {
+    l(
+      m,
+      nt(/* @__PURE__ */ new Date()),
+      ot(/* @__PURE__ */ new Date())
+    ).finally();
+  }, [m]), _ ? /* @__PURE__ */ t(
+    _t,
     {
       className: "mx-exp-spending-miniwidget",
       onPrimaryCtaClick: n,
-      primaryCtaLabel: l.primary_cta,
-      sx: c,
-      title: l.mini_title,
-      children: /* @__PURE__ */ t(Nt, {})
+      primaryCtaLabel: g.primary_cta,
+      sx: { height: "100%", ...d },
+      title: g.mini_title,
+      children: /* @__PURE__ */ t(At, {})
     }
-  );
-}, be = v(Wt), Ot = ({
+  ) : /* @__PURE__ */ t(lt, {});
+}, me = w(It), Et = ({
   data: n,
-  onSelected: c,
-  selectedId: r = "",
-  title: l
+  onSelected: d,
+  selectedId: o = "",
+  title: r
 }) => {
-  const { spending: a } = I(), i = n.categoryData.find((o) => o.guid === r);
-  return /* @__PURE__ */ h(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
-    /* @__PURE__ */ t(y, { bold: !0, sx: { py: 12 }, children: `${l} ${a.by_category}` }),
-    /* @__PURE__ */ t(B, { "aria-hidden": "true" }),
-    /* @__PURE__ */ t(q, { children: n.categoryData.map((o) => /* @__PURE__ */ h(p.Fragment, { children: [
+  const { spending: a } = L(), c = n.categoryData.find((e) => e.guid === o);
+  return /* @__PURE__ */ s(b, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ t(C, { bold: !0, sx: { py: 12 }, children: `${r} ${a.by_category}` }),
+    /* @__PURE__ */ t(z, { "aria-hidden": "true" }),
+    /* @__PURE__ */ t(Q, { children: n.categoryData.map((e) => /* @__PURE__ */ s(i.Fragment, { children: [
       /* @__PURE__ */ t(
-        J,
+        X,
         {
           disableGutters: !0,
           disablePadding: !0,
           sx: {
             minHeight: 44
           },
-          children: /* @__PURE__ */ h(
-            vt,
+          children: /* @__PURE__ */ s(
+            xt,
             {
-              "aria-expanded": i?.guid === o.guid,
-              onClick: () => c(o.guid),
+              "aria-expanded": c?.guid === e.guid,
+              onClick: () => d(e.guid),
               sx: { minHeight: 44, px: 8, py: 0 },
               children: [
                 /* @__PURE__ */ t(
-                  x,
+                  v,
                   {
                     borderRadius: 4,
                     flexShrink: 0,
                     height: 8,
-                    sx: { backgroundColor: o.color, mr: 8 },
+                    sx: { backgroundColor: e.color, mr: 8 },
                     width: 8
                   }
                 ),
-                /* @__PURE__ */ h(
-                  C,
+                /* @__PURE__ */ s(
+                  b,
                   {
                     alignItems: "center",
                     direction: "row",
                     justifyContent: "space-between",
                     width: "100%",
                     children: [
-                      /* @__PURE__ */ t(y, { bold: r === o.guid, children: o.name }),
-                      /* @__PURE__ */ t(y, { bold: r === o.guid, variant: "Body", children: w(o.amount, "0,0") })
+                      /* @__PURE__ */ t(C, { bold: o === e.guid, children: e.name }),
+                      /* @__PURE__ */ t(C, { bold: o === e.guid, variant: "body1", children: R(e.amount, "0,0") })
                     ]
                   }
                 )
@@ -396,51 +216,51 @@ const j = 5, Et = (n, c, r) => r.reduce((l, a) => {
           )
         }
       ),
-      /* @__PURE__ */ t(B, {}),
-      o.categoryTotals && o.categoryTotals.length > 0 && /* @__PURE__ */ t(wt, { in: i?.guid === o.guid, unmountOnExit: !0, children: /* @__PURE__ */ h(q, { children: [
-        i?.categoryTotals?.map((e) => /* @__PURE__ */ t(
-          J,
+      /* @__PURE__ */ t(z, {}),
+      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(Dt, { in: c?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ s(Q, { children: [
+        c?.categoryTotals?.map((l) => /* @__PURE__ */ t(
+          X,
           {
             sx: {
               pl: 24,
               pr: 8,
               py: 0
             },
-            children: /* @__PURE__ */ h(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-              /* @__PURE__ */ h(y, { children: [
-                e.name,
+            children: /* @__PURE__ */ s(b, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ s(C, { children: [
+                l.name,
                 " "
               ] }),
-              /* @__PURE__ */ t(y, { children: w(e.amount, "0,0") })
+              /* @__PURE__ */ t(C, { children: R(l.amount, "0,0") })
             ] })
           },
-          e.guid
+          l.guid
         )),
-        /* @__PURE__ */ t(B, {})
+        /* @__PURE__ */ t(z, {})
       ] }) })
-    ] }, o.guid)) }),
-    /* @__PURE__ */ t(y, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${a.total}: ${w(n.totalAmount, "0,0")}` })
+    ] }, e.guid)) }),
+    /* @__PURE__ */ t(C, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${a.total}: ${R(n.totalAmount, "0,0")}` })
   ] });
-}, Rt = v(Ot), kt = ({
+}, Wt = w(Et), Nt = ({
   data: n,
-  onSelected: c,
-  onViewTransactions: r,
-  selectedId: l,
+  onSelected: d,
+  onViewTransactions: o,
+  selectedId: r,
   title: a
 }) => {
-  const { isDesktop: i, isMobile: o } = lt(), { isLoadingCategoryTotals: e } = z(), { spending: d } = I();
-  return /* @__PURE__ */ h(
-    C,
+  const { isDesktop: c, isMobile: e } = vt(), { isLoadingCategoryTotals: l } = W(), { spending: g } = L();
+  return /* @__PURE__ */ s(
+    b,
     {
-      alignItems: o ? "center" : "flex-start",
-      direction: o ? "column" : "row",
+      alignItems: e ? "center" : "flex-start",
+      direction: e ? "column" : "row",
       gap: { xs: 16, md: 64, xl: 100 },
       justifyContent: "center",
       pt: 50,
       px: 8,
       children: [
-        e && /* @__PURE__ */ t(
-          O,
+        l && /* @__PURE__ */ t(
+          G,
           {
             data: {
               categoryData: [],
@@ -450,173 +270,201 @@ const j = 5, Et = (n, c, r) => r.reduce((l, a) => {
             onSelected: () => {
             },
             selectedId: "",
-            size: i ? 400 : 300,
+            size: c ? 400 : 300,
             totalLabel: "Loading ...",
             variant: "full"
           }
         ),
-        !e && /* @__PURE__ */ t(
-          O,
+        !l && /* @__PURE__ */ t(
+          G,
           {
             data: n,
-            onSelected: c,
-            onViewTransactions: r,
-            selectedId: l,
-            size: i ? 400 : 300,
-            totalLabel: d.total_amount,
+            onSelected: d,
+            onViewTransactions: o,
+            selectedId: r,
+            size: c ? 400 : 300,
+            totalLabel: g.total_amount,
             variant: "full"
           }
         ),
-        /* @__PURE__ */ t(Rt, { data: n, onSelected: c, selectedId: l, title: a })
+        /* @__PURE__ */ t(Wt, { data: n, onSelected: d, selectedId: r, title: a })
       ]
     }
   );
-}, et = v(kt), $t = (n) => [
+}, et = w(Nt), Ot = (n) => [
   n.palette.chartMono.chartMono5,
   n.palette.chartMono.chartMono4,
   n.palette.chartMono.chartMono3,
   n.palette.chartMono.chartMono2,
   n.palette.chartMono.chartMono1,
   n.palette.chartMono.chartMono6
-], Gt = () => {
-  const n = it(), { clientConfig: c } = st(), { categories: r, dateRangeCategoryTotals: l, loadDateRangeCategoryTotals: a } = z(), { goals: i, spending: o } = I(), { displayedDateRange: e, selectedAccounts: d, selectedAccountGuids: u } = R(), { setFilter: s, sortedTransactions: m } = _t(), T = c?.master?.deep_link_params?.account_guids, g = c?.master?.deep_link_params?.view, [b, E] = p.useState(""), [_, D] = p.useState(g === "income" ? 1 : 0), [L, H] = p.useState(""), [gt, P] = p.useState(!1);
-  p.useEffect(() => {
-    a(
-      d,
-      e.start,
-      e.end
-    ).finally();
-  }, [d, e]);
-  const k = p.useMemo(
-    () => ct(r, i, n, l),
-    [r, l]
-  ), K = p.useMemo(
-    () => dt(r, l, $t(n)),
-    [r, l]
-  ), $ = p.useMemo(
-    () => m.find((f) => f.guid === L),
-    [L, m]
-  ), ut = (f, A) => {
-    D(A), E("");
-  }, X = (f) => {
-    E(b === f || f === "0" ? "" : f);
-  }, Y = (f) => {
-    const A = {
-      accounts: T || u,
-      dateRange: e
+], Rt = () => {
+  const n = Ct(), { is_mobile_webview: d } = F(), { clientConfig: o } = F(), { categories: r, dateRangeCategoryTotals: a } = W(), {
+    goals: c,
+    spending: e,
+    transactions: l
+  } = L(), { displayedDateRange: g, selectedAccountGuids: _ } = P(), {
+    setFilter: m,
+    sortedTransactions: p,
+    sortedTransactionsWithSplits: A,
+    tags: f
+  } = ct(), y = o?.master?.deep_link_params?.account_guids, T = o?.master?.deep_link_params?.view, [M, N] = i.useState(""), [D, S] = i.useState(T === "income" ? 1 : 0), [O, I] = i.useState(""), [dt, H] = i.useState(!1), $ = i.useMemo(
+    () => it(r, c, n, a),
+    [r, a]
+  ), K = i.useMemo(
+    () => rt(r, a, Ot(n)),
+    [r, a]
+  ), B = i.useMemo(
+    () => p.find((u) => u.guid === O),
+    [O, p]
+  ), gt = (u, E) => {
+    S(E), N("");
+  }, U = (u) => {
+    N(M === u || u === "0" ? "" : u);
+  }, Y = (u) => {
+    const E = {
+      accounts: y || _,
+      dateRange: g
     };
-    if (_ === 0)
-      if (f === "other") {
-        const M = k.categoryData.find((G) => G.guid === "other");
-        s({
-          ...A,
-          custom: (G) => !!M?.categoryTotals?.find((pt) => pt.guid === G.top_level_category_guid)
+    if (D === 0)
+      if (u === "other") {
+        const h = $.categoryData.find((V) => V.guid === "other");
+        m({
+          ...E,
+          custom: (V) => !!h?.categoryTotals?.find((ut) => ut.guid === V.top_level_category_guid)
         });
       } else
-        s({
-          ...A,
-          custom: (M) => f ? M.top_level_category_guid === f : M.top_level_category_guid !== S.INCOME && M.top_level_category_guid !== S.INVESTMENTS && M.top_level_category_guid !== S.TRANSFER,
-          showSplits: !!f
+        m({
+          ...E,
+          custom: (h) => u ? h.top_level_category_guid === u : h.top_level_category_guid !== x.INCOME && h.category_guid !== x.INCOME && h.top_level_category_guid !== x.INVESTMENTS && h.top_level_category_guid !== x.TRANSFER,
+          showSplits: !!u
         });
     else
-      s({
-        ...A,
-        custom: (M) => f ? M.category_guid === f : M.category_guid === S.INCOME || M.top_level_category_guid === S.INCOME
+      m({
+        ...E,
+        custom: (h) => u ? h.category_guid === u : h.category_guid === x.INCOME || h.top_level_category_guid === x.INCOME
       });
-    P(!0);
+    H(!0);
+  }, pt = () => {
+    St(A, f);
   };
-  return /* @__PURE__ */ h(x, { children: [
-    /* @__PURE__ */ h(at, { onChange: ut, value: _, variant: "fullWidth", children: [
+  return /* @__PURE__ */ s(v, { children: [
+    /* @__PURE__ */ s(at, { onChange: gt, value: D, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
-        N,
+        k,
         {
           label: /* @__PURE__ */ t(
-            W,
+            j,
             {
-              amount: k.totalAmount,
-              label: o.spend_tab_title
+              amount: $.totalAmount,
+              label: e.spend_tab_title
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        N,
+        k,
         {
           label: /* @__PURE__ */ t(
-            W,
+            j,
             {
               amount: K.totalAmount,
-              label: o.income_tab_title
+              label: e.income_tab_title
             }
           )
         }
       )
     ] }),
-    _ === 0 && /* @__PURE__ */ t(
+    D === 0 && /* @__PURE__ */ t(
       et,
       {
-        data: k,
-        onSelected: X,
+        data: $,
+        onSelected: U,
         onViewTransactions: Y,
-        selectedId: b,
-        title: o.spend_tab_title
+        selectedId: M,
+        title: e.spend_tab_title
       }
     ),
-    _ === 1 && /* @__PURE__ */ t(
+    D === 1 && /* @__PURE__ */ t(
       et,
       {
         data: K,
-        onSelected: X,
+        onSelected: U,
         onViewTransactions: Y,
-        selectedId: b,
-        title: o.income_tab_title
+        selectedId: M,
+        title: e.income_tab_title
       }
     ),
     /* @__PURE__ */ t(
-      Q,
+      Z,
       {
-        ariaLabelClose: o.close_drawer_aria,
-        isOpen: gt,
-        onClose: () => P(!1),
-        title: o.transactions_drawer_title,
-        children: /* @__PURE__ */ t(Dt, { onClick: H })
+        ariaLabelClose: e.close_drawer_aria,
+        isOpen: dt,
+        onClose: () => H(!1),
+        title: e.transactions_drawer_title,
+        children: /* @__PURE__ */ s(b, { children: [
+          !d && p.length > 0 && /* @__PURE__ */ t(b, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
+            yt,
+            {
+              onClick: pt,
+              startIcon: /* @__PURE__ */ t(ht, { name: "ios_share" }),
+              variant: "text",
+              children: l.export_csv_btn
+            }
+          ) }),
+          /* @__PURE__ */ t(Tt, { onClick: I })
+        ] })
       }
     ),
     /* @__PURE__ */ t(
-      Q,
+      Z,
       {
-        ariaLabelClose: o.close_drawer_aria,
-        isOpen: !!$,
-        onClose: () => H(""),
-        title: o.transaction_details_drawer_title,
-        children: $ && /* @__PURE__ */ t(xt, { transaction: $ })
+        ariaLabelClose: e.close_drawer_aria,
+        isOpen: !!B,
+        onClose: () => I(""),
+        title: e.transaction_details_drawer_title,
+        children: B && /* @__PURE__ */ t(Mt, { transaction: B })
       }
     )
   ] });
-}, Bt = v(Gt), jt = ({ onBackClick: n, sx: c = {} }) => {
-  const { visibleAccounts: r } = rt(), { spending: l } = I(), { isCopyLoaded: a, isInitialized: i, setDisplayedDate: o, setSelectedAccounts: e } = R(), { onEvent: d } = St(), { clientConfig: u } = st(), s = u?.master?.deep_link_params?.date_range, [m, T] = p.useState(!1);
-  p.useEffect(() => {
-    e(r);
-  }, [r]), p.useEffect(() => {
-    s && Array.isArray(s) && s.length === 2 ? o(s[0], s[1]) : o(nt(U()), ot(U())), T(!0), d(Z.SPENDING_VIEW);
-  }, []);
-  const g = (b) => {
-    o(b[0], b[1]);
+}, kt = w(Rt), Gt = ({ onBackClick: n, sx: d = {} }) => {
+  const { visibleAccounts: o, isAccountDataLoaded: r, loadAccountData: a } = st(), { categoriesLoaded: c, loadCategories: e, loadDateRangeCategoryTotals: l } = W(), { isTransactionDataLoaded: g, loadTransactionData: _ } = ct(), { spending: m } = L(), {
+    displayedDateRange: p,
+    isInitialized: A,
+    setDisplayedDate: f,
+    setSelectedAccounts: y,
+    selectedAccounts: T
+  } = P(), { onEvent: M } = ft(), { onLoad: N } = bt(), { clientConfig: D } = F(), S = D?.master?.deep_link_params?.date_range;
+  i.useEffect(() => {
+    S && Array.isArray(S) && S.length === 2 ? f(S[0], S[1]) : f(nt(J()), ot(J())), r || a().finally(), c || e().finally(), g || _().finally(), M(tt.SPENDING_VIEW);
+  }, []), i.useEffect(() => {
+    y(o);
+  }, [o]), i.useEffect(() => {
+    l(
+      T,
+      p.start,
+      p.end
+    ).finally(() => {
+      N?.("SpendingWidget");
+    });
+  }, [p, T]);
+  const O = (I) => {
+    f(I[0], I[1]);
   };
-  return !a || !i || !m ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(
-    It,
+  return A ? /* @__PURE__ */ t(
+    wt,
     {
-      accountOptions: r,
-      calendarActions: { onRangeChanged: g },
-      onAccountsFilterClick: () => d(Z.SPENDING_CLICK_FILTER),
+      accountOptions: o,
+      calendarActions: { onRangeChanged: O },
+      onAccountsFilterClick: () => M(tt.SPENDING_CLICK_FILTER),
       onBackClick: n,
-      sx: c,
-      title: l.title,
-      children: /* @__PURE__ */ t(x, { height: "calc(100dvh - 150px)", overflow: "scroll", width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
+      sx: d,
+      title: m.title,
+      children: /* @__PURE__ */ t(v, { height: "calc(100dvh - 150px)", overflow: "scroll", width: "100%", children: /* @__PURE__ */ t(kt, {}) })
     }
-  );
-}, Ce = v(jt);
+  ) : /* @__PURE__ */ t(lt, {});
+}, he = w(Gt);
 export {
-  be as SpendingMiniWidget,
-  Ce as SpendingWidget
+  me as SpendingMiniWidget,
+  he as SpendingWidget
 };