@mx-cartographer/experiences 6.26.0-alpha.sms7 → 6.26.1-alpha.mega1

package/dist/spending/index.es.js

@@ -0,0 +1,632 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import u from "react";
+import { observer as D } from "mobx-react-lite";
+import "bowser";
+import "date-fns/getUnixTime";
+import "date-fns/intlFormat";
+import { aK as b, b7 as V, aM as E, av as ot, b8 as U, a5 as mt, a7 as ht, b9 as q, aw as ft } from "../ConnectMiniWidget-CQWafYtQ.mjs";
+import "date-fns/addMonths";
+import "date-fns/addQuarters";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import "date-fns/getDay";
+import "date-fns/isBefore";
+import "date-fns/nextDay";
+import "date-fns/setDate";
+import { startOfToday as J } from "date-fns/startOfToday";
+import "date-fns/fromUnixTime";
+import "numeral";
+import { useTheme as nt } from "@mui/material";
+import yt from "@mui/material/Button";
+import { Text as h, CategoryIcon as Ct, CategoryIconVariants as _t } from "@mxenabled/mxui";
+import "@mui/material/Tooltip";
+import x from "@mui/material/Box";
+import "@mui/material/IconButton";
+import { b as v, d as R, h as z, L as F, f as at, M as bt, g as it, i as St, c as Tt } from "../Loader-CwdK8lfx.mjs";
+import Mt from "@mui/material/styles/useTheme";
+import "@mui/material/useMediaQuery";
+import "@mxenabled/cssinjs";
+import "date-fns/addDays";
+import "date-fns/eachDayOfInterval";
+import "date-fns/eachWeekOfInterval";
+import { endOfMonth as rt } from "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/isSameMonth";
+import { startOfMonth as st } from "date-fns/startOfMonth";
+import "date-fns/subMonths";
+import "@mui/material/Paper";
+import "@mxenabled/mx-icons";
+import "date-fns/isSameDay";
+import "date-fns/isWithinInterval";
+import "d3";
+import "@mui/material/styles";
+import "@mui/x-charts";
+import "@mui/x-charts/ChartsTooltip";
+import C from "@mui/material/Stack";
+import "date-fns/differenceInCalendarDays";
+import "date-fns/endOfToday";
+import "date-fns/endOfYear";
+import "date-fns/startOfYear";
+import "date-fns/subDays";
+import "date-fns/subYears";
+import "@mui/material/ButtonGroup";
+import N from "@mui/material/Tab";
+import ct from "@mui/material/Tabs";
+import "@mui/material/ToggleButton";
+import "@mui/material/ToggleButtonGroup";
+import "@mui/material/Dialog";
+import "@mui/material/DialogContent";
+import "@mui/material/Card";
+import "@mui/material/CardContent";
+import "@mui/material/CardHeader";
+import "uuid";
+import "@mui/material/FormControlLabel";
+import "@mui/material/Radio";
+import "@mui/material/Avatar";
+import Q from "@mui/material/ListItem";
+import "@mui/material/ListItemAvatar";
+import xt from "@mui/material/ListItemButton";
+import "@mui/material/ListItemText";
+import "@mui/material/ListItemIcon";
+import "@mui/material/MenuItem";
+import "@mui/material/TextField";
+import "@mui/material/Switch";
+import "mobx";
+import "posthog-js";
+import "date-fns/differenceInDays";
+import "@mui/x-data-grid-pro";
+import "date-fns";
+import j from "@mui/material/Divider";
+import Z from "@mui/material/List";
+import "date-fns/formatISO";
+import "date-fns/isAfter";
+import "date-fns/parseISO";
+import "date-fns/subQuarters";
+import "date-fns/lastDayOfMonth";
+import "date-fns/setDayOfYear";
+import "date-fns/addSeconds";
+import "date-fns/differenceInCalendarMonths";
+import "date-fns/getMonth";
+import "@mui/material/CircularProgress";
+import { D as Dt } from "../Donut-CGNFni9y.mjs";
+import vt from "@mui/material/Collapse";
+const B = 5, wt = (o, l, r) => r.reduce((i, c) => {
+  if (c.total > 0) {
+    const a = o.find((s) => s.guid === c.category_guid);
+    if (!a) return i;
+    const n = a.parent_guid ?? a.guid, e = o.find((s) => s.guid === n);
+    if (!e) return i;
+    const d = {
+      guid: a.guid,
+      name: a.guid === n ? `General ${a.name}` : a.name,
+      color: V(e.guid, l),
+      amount: c.total
+    }, g = i.find((s) => s.guid === n);
+    g ? (g.amount += c.total, g.categoryTotals?.push(d)) : i.push({
+      guid: n,
+      name: e.name,
+      color: V(e.guid, l),
+      categoryTotals: [d],
+      amount: c.total
+    });
+  }
+  return i;
+}, []), lt = (o, l, r, i) => {
+  const c = wt(o, r, i), a = c.filter(
+    (s) => s.guid !== b.INCOME && s.guid !== b.INVESTMENTS && s.guid !== b.TRANSFER
+  ).sort((s, p) => p.amount - s.amount), n = a.reduce(
+    (s, p) => s + p.amount,
+    0
+  ), e = a.length > B ? B : a.length, d = a.slice(0, e), g = d.map((s) => ({
+    id: s.guid,
+    color: V(s.guid, r),
+    label: s.name,
+    value: s.amount / n * 100
+  }));
+  if (a.length > 5) {
+    const s = a.slice(B, c.length), p = s.reduce(
+      (S, _) => S + _.amount,
+      0
+    );
+    d.push({
+      guid: "other",
+      color: r.palette.categories.others || "",
+      name: l.saving_goal_other,
+      categoryTotals: s,
+      amount: p
+    }), g.push({
+      id: "other",
+      color: r.palette.categories.others || "",
+      label: l.saving_goal_other,
+      value: p / n * 100
+    });
+  }
+  return {
+    categoryData: d,
+    donutData: g,
+    totalAmount: n
+  };
+}, dt = (o, l, r) => {
+  const i = o.filter(
+    (e) => e.guid === b.INCOME || e.parent_guid === b.INCOME
+  ), c = l.filter((e) => i.some((d) => d.guid === e.category_guid)).sort((e, d) => e.total - d.total).map((e, d) => ({
+    guid: e.category_guid,
+    name: o.find((g) => g.guid === e.category_guid)?.name,
+    color: r[d],
+    categoryTotals: [],
+    amount: Math.abs(e.total)
+  })), a = c.reduce(
+    (e, d) => e + d.amount,
+    0
+  ), n = c.map((e) => ({
+    id: e.guid,
+    color: e.color,
+    label: e.name,
+    value: e.amount / a * 100
+  }));
+  return {
+    categoryData: c,
+    donutData: n,
+    totalAmount: a
+  };
+}, O = ({ amount: o, label: l }) => /* @__PURE__ */ m(C, { direction: "column", children: [
+  /* @__PURE__ */ t(h, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: l }),
+  /* @__PURE__ */ t(h, { variant: "XSmall", children: E(o, "0,0") })
+] }), Et = ({
+  data: o,
+  isIncome: l = !1,
+  onSelected: r,
+  onViewTransactions: i,
+  selectedId: c,
+  size: a = 150,
+  totalLabel: n,
+  variant: e = "mini"
+}) => {
+  const { spending: d } = v(), g = nt(), { isTablet: s } = ot(), p = u.useMemo(
+    () => c ? o.categoryData.find((w) => w.guid === c) : void 0,
+    [c]
+  ), S = u.useMemo(() => o.donutData.length > 0 ? o.donutData : [{ id: "0", color: g.palette.divider, value: 100 }], [o, g]), _ = () => {
+    i?.(c);
+  }, f = s ? 32 : 48;
+  return /* @__PURE__ */ t(Dt, { data: S, onClick: r, selectedId: c, size: a, children: /* @__PURE__ */ t(C, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ m(C, { alignItems: "center", justifyContent: "center", minHeight: a, minWidth: a, children: [
+    p && /* @__PURE__ */ m(
+      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(
+            Ct,
+            {
+              categoryGuid: l ? b.INCOME : p.guid,
+              size: e === "mini" ? 24 : f,
+              variant: _t.Transparent
+            }
+          ),
+          /* @__PURE__ */ t(h, { color: "secondary", noWrap: !0, variant: e === "mini" ? "Tiny" : "Body", children: p ? p.name : n })
+        ]
+      }
+    ),
+    !p && e === "full" && /* @__PURE__ */ t(h, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: n }),
+    /* @__PURE__ */ t(h, { variant: e === "mini" ? "H2" : "H1", children: p ? E(p.amount, "0,0") : E(o.totalAmount, "0,0") }),
+    !p && e === "mini" && /* @__PURE__ */ t(h, { color: "secondary", noWrap: !0, variant: "Tiny", children: n }),
+    e === "full" && /* @__PURE__ */ t(
+      yt,
+      {
+        "aria-label": `View ${p?.name || ""} Transactions`,
+        disabled: o.categoryData.length === 0,
+        onClick: _,
+        sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+        variant: "text",
+        children: d.view_transactions
+      }
+    )
+  ] }) }) });
+}, W = D(Et), tt = ({ data: o, onSelected: l, selectedId: r }) => /* @__PURE__ */ t(C, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: o.categoryData.map((i) => /* @__PURE__ */ m(
+  C,
+  {
+    alignItems: "center",
+    "aria-label": i.name,
+    "aria-selected": i.guid === r,
+    direction: "row",
+    gap: 8,
+    onClick: () => l(i.guid),
+    role: "button",
+    sx: { cursor: "pointer" },
+    children: [
+      /* @__PURE__ */ t(x, { borderRadius: 4, height: 8, sx: { backgroundColor: i.color }, width: 8 }),
+      /* @__PURE__ */ t(h, { bold: i.guid === r, variant: "XSmall", children: i.name })
+    ]
+  },
+  i.guid
+)) }), It = () => {
+  const o = Mt(), { goals: l, spending: r } = v(), { selectedAccounts: i } = R(), {
+    categories: c,
+    dateRangeCategoryTotals: a,
+    dataRangeTotalsLoaded: n,
+    loadDateRangeCategoryTotals: e
+  } = z(), d = u.useMemo(
+    () => [
+      o.palette.chartMono.chartMono5,
+      o.palette.chartMono.chartMono4,
+      o.palette.chartMono.chartMono3,
+      o.palette.chartMono.chartMono2,
+      o.palette.chartMono.chartMono1,
+      o.palette.chartMono.chartMono6
+    ],
+    [o]
+  );
+  u.useEffect(() => {
+    e(
+      i,
+      st(/* @__PURE__ */ new Date()),
+      rt(/* @__PURE__ */ new Date())
+    ).finally();
+  }, [i]);
+  const [g, s] = u.useState(""), [p, S] = u.useState(0), _ = u.useMemo(
+    () => lt(c, l, o, a),
+    [c, a]
+  ), f = u.useMemo(
+    () => dt(c, a, d),
+    [c, a, d]
+  ), w = (I, L) => {
+    S(L), s("");
+  }, M = (I) => {
+    s(g === I ? "" : I);
+  };
+  return n ? /* @__PURE__ */ m(x, { width: "100%", children: [
+    /* @__PURE__ */ m(ct, { onChange: w, value: p, variant: "fullWidth", children: [
+      /* @__PURE__ */ t(
+        N,
+        {
+          label: /* @__PURE__ */ t(
+            O,
+            {
+              amount: _.totalAmount,
+              label: r.spend_tab_title
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(
+        N,
+        {
+          label: /* @__PURE__ */ t(
+            O,
+            {
+              amount: f.totalAmount,
+              label: r.income_tab_title
+            }
+          )
+        }
+      )
+    ] }),
+    p === 0 && /* @__PURE__ */ t(x, { children: /* @__PURE__ */ m(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+      /* @__PURE__ */ t(
+        W,
+        {
+          data: _,
+          onSelected: M,
+          selectedId: g,
+          totalLabel: r.total_spending
+        }
+      ),
+      /* @__PURE__ */ t(
+        tt,
+        {
+          data: _,
+          onSelected: M,
+          selectedId: g
+        }
+      )
+    ] }) }),
+    p === 1 && /* @__PURE__ */ t(x, { children: /* @__PURE__ */ m(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+      /* @__PURE__ */ t(
+        W,
+        {
+          data: f,
+          isIncome: !0,
+          onSelected: M,
+          selectedId: g,
+          totalLabel: r.total_income
+        }
+      ),
+      /* @__PURE__ */ t(tt, { data: f, onSelected: M, selectedId: g })
+    ] }) })
+  ] }) : /* @__PURE__ */ t(F, { height: 250 });
+}, At = D(It), Lt = ({ onPrimaryCtaClick: o, sx: l = {} }) => {
+  const { visibleAccounts: r } = at(), { spending: i } = v(), { isCopyLoaded: c, isInitialized: a, setSelectedAccounts: n } = R();
+  return u.useEffect(() => {
+    n(r);
+  }, [r]), !c || !a ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(
+    bt,
+    {
+      className: "mx-exp-spending-miniwidget",
+      onPrimaryCtaClick: o,
+      primaryCtaLabel: i.primary_cta,
+      sx: l,
+      title: i.mini_title,
+      children: /* @__PURE__ */ t(At, {})
+    }
+  );
+}, xo = D(Lt), Nt = ({
+  data: o,
+  onSelected: l,
+  selectedId: r = "",
+  title: i
+}) => {
+  const { spending: c } = v(), a = o.categoryData.find((n) => n.guid === r);
+  return /* @__PURE__ */ m(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ t(h, { bold: !0, sx: { py: 12 }, children: `${i} ${c.by_category}` }),
+    /* @__PURE__ */ t(j, { "aria-hidden": "true" }),
+    /* @__PURE__ */ t(Z, { children: o.categoryData.map((n) => /* @__PURE__ */ m(u.Fragment, { children: [
+      /* @__PURE__ */ t(
+        Q,
+        {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ m(
+            xt,
+            {
+              "aria-expanded": a?.guid === n.guid,
+              onClick: () => l(n.guid),
+              sx: { minHeight: 44, px: 8, py: 0 },
+              children: [
+                /* @__PURE__ */ t(
+                  x,
+                  {
+                    borderRadius: 4,
+                    flexShrink: 0,
+                    height: 8,
+                    sx: { backgroundColor: n.color, mr: 8 },
+                    width: 8
+                  }
+                ),
+                /* @__PURE__ */ m(
+                  C,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    children: [
+                      /* @__PURE__ */ t(h, { bold: r === n.guid, children: n.name }),
+                      /* @__PURE__ */ t(h, { bold: r === n.guid, variant: "Body", children: E(n.amount, "0,0") })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(j, {}),
+      n.categoryTotals && n.categoryTotals.length > 0 && /* @__PURE__ */ t(vt, { in: a?.guid === n.guid, unmountOnExit: !0, children: /* @__PURE__ */ m(Z, { children: [
+        a?.categoryTotals?.map((e) => /* @__PURE__ */ t(
+          Q,
+          {
+            sx: {
+              pl: 24,
+              pr: 8,
+              py: 0
+            },
+            children: /* @__PURE__ */ m(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ m(h, { children: [
+                e.name,
+                " "
+              ] }),
+              /* @__PURE__ */ t(h, { children: E(e.amount, "0,0") })
+            ] })
+          },
+          e.guid
+        )),
+        /* @__PURE__ */ t(j, {})
+      ] }) })
+    ] }, n.guid)) }),
+    /* @__PURE__ */ t(h, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${c.total}: ${E(o.totalAmount, "0,0")}` })
+  ] });
+}, Ot = D(Nt), Wt = ({
+  data: o,
+  onSelected: l,
+  onViewTransactions: r,
+  selectedId: i,
+  title: c
+}) => {
+  const { isDesktop: a, isMobile: n } = ot(), { isLoadingCategoryTotals: e } = z(), { spending: d } = v();
+  return /* @__PURE__ */ m(
+    C,
+    {
+      alignItems: n ? "center" : "flex-start",
+      direction: n ? "column" : "row",
+      gap: { xs: 16, md: 64, xl: 100 },
+      justifyContent: "center",
+      pt: 50,
+      px: 8,
+      children: [
+        e && /* @__PURE__ */ t(
+          W,
+          {
+            data: {
+              categoryData: [],
+              donutData: [],
+              totalAmount: 0
+            },
+            onSelected: () => {
+            },
+            selectedId: "",
+            size: a ? 400 : 300,
+            totalLabel: "Loading ...",
+            variant: "full"
+          }
+        ),
+        !e && /* @__PURE__ */ t(
+          W,
+          {
+            data: o,
+            onSelected: l,
+            onViewTransactions: r,
+            selectedId: i,
+            size: a ? 400 : 300,
+            totalLabel: d.total_amount,
+            variant: "full"
+          }
+        ),
+        /* @__PURE__ */ t(Ot, { data: o, onSelected: l, selectedId: i, title: c })
+      ]
+    }
+  );
+}, et = D(Wt), Rt = (o) => [
+  o.palette.chartMono.chartMono5,
+  o.palette.chartMono.chartMono4,
+  o.palette.chartMono.chartMono3,
+  o.palette.chartMono.chartMono2,
+  o.palette.chartMono.chartMono1,
+  o.palette.chartMono.chartMono6
+], Gt = () => {
+  const o = nt(), { clientConfig: l } = it(), { categories: r, dateRangeCategoryTotals: i, loadDateRangeCategoryTotals: c } = z(), { goals: a, spending: n } = v(), { displayedDateRange: e, selectedAccounts: d, selectedAccountGuids: g } = R(), { setFilter: s, sortedTransactions: p } = St(), S = l?.master?.deep_link_params?.account_guids, _ = l?.master?.deep_link_params?.view, [f, w] = u.useState(""), [M, I] = u.useState(_ === "income" ? 1 : 0), [L, H] = u.useState(""), [pt, P] = u.useState(!1);
+  u.useEffect(() => {
+    c(
+      d,
+      e.start,
+      e.end
+    ).finally();
+  }, [d, e]);
+  const G = u.useMemo(
+    () => lt(r, a, o, i),
+    [r, i]
+  ), K = u.useMemo(
+    () => dt(r, i, Rt(o)),
+    [r, i]
+  ), k = u.useMemo(
+    () => p.find((y) => y.guid === L),
+    [L, p]
+  ), gt = (y, A) => {
+    I(A), w("");
+  }, X = (y) => {
+    w(f === y || y === "0" ? "" : y);
+  }, Y = (y) => {
+    const A = {
+      accounts: S || g,
+      dateRange: e
+    };
+    if (M === 0)
+      if (y === "other") {
+        const T = G.categoryData.find(($) => $.guid === "other");
+        s({
+          ...A,
+          custom: ($) => !!T?.categoryTotals?.find((ut) => ut.guid === $.top_level_category_guid)
+        });
+      } else
+        s({
+          ...A,
+          custom: (T) => y ? T.top_level_category_guid === y : T.top_level_category_guid !== b.INCOME && T.top_level_category_guid !== b.INVESTMENTS && T.top_level_category_guid !== b.TRANSFER
+        });
+    else
+      s({
+        ...A,
+        custom: (T) => y ? T.category_guid === y : T.category_guid === b.INCOME || T.top_level_category_guid === b.INCOME
+      });
+    P(!0);
+  };
+  return /* @__PURE__ */ m(x, { children: [
+    /* @__PURE__ */ m(ct, { onChange: gt, value: M, variant: "fullWidth", children: [
+      /* @__PURE__ */ t(
+        N,
+        {
+          label: /* @__PURE__ */ t(
+            O,
+            {
+              amount: G.totalAmount,
+              label: n.spend_tab_title
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ t(
+        N,
+        {
+          label: /* @__PURE__ */ t(
+            O,
+            {
+              amount: K.totalAmount,
+              label: n.income_tab_title
+            }
+          )
+        }
+      )
+    ] }),
+    M === 0 && /* @__PURE__ */ t(
+      et,
+      {
+        data: G,
+        onSelected: X,
+        onViewTransactions: Y,
+        selectedId: f,
+        title: n.spend_tab_title
+      }
+    ),
+    M === 1 && /* @__PURE__ */ t(
+      et,
+      {
+        data: K,
+        onSelected: X,
+        onViewTransactions: Y,
+        selectedId: f,
+        title: n.income_tab_title
+      }
+    ),
+    /* @__PURE__ */ t(
+      U,
+      {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: pt,
+        onClose: () => P(!1),
+        title: n.transactions_drawer_title,
+        children: /* @__PURE__ */ t(mt, { onClick: H })
+      }
+    ),
+    /* @__PURE__ */ t(
+      U,
+      {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: !!k,
+        onClose: () => H(""),
+        title: n.transaction_details_drawer_title,
+        children: k && /* @__PURE__ */ t(ht, { transaction: k })
+      }
+    )
+  ] });
+}, kt = D(Gt), $t = ({ onBackClick: o, sx: l = {} }) => {
+  const { visibleAccounts: r } = at(), { spending: i } = v(), { isCopyLoaded: c, isInitialized: a, setDisplayedDate: n, setSelectedAccounts: e } = R(), { onEvent: d } = Tt(), { clientConfig: g } = it(), s = g?.master?.deep_link_params?.date_range, [p, S] = u.useState(!1);
+  u.useEffect(() => {
+    e(r);
+  }, [r]), u.useEffect(() => {
+    s && Array.isArray(s) && s.length === 2 ? n(s[0], s[1]) : n(st(J()), rt(J())), S(!0), d(q.SPENDING_VIEW);
+  }, []);
+  const _ = (f) => {
+    n(f[0], f[1]);
+  };
+  return !c || !a || !p ? /* @__PURE__ */ t(F, {}) : /* @__PURE__ */ t(
+    ft,
+    {
+      accountOptions: r,
+      calendarActions: { onRangeChanged: _ },
+      onAccountsFilterClick: () => d(q.SPENDING_CLICK_FILTER),
+      onBackClick: o,
+      sx: l,
+      title: i.title,
+      children: /* @__PURE__ */ t(x, { height: "calc(100dvh - 150px)", overflow: "scroll", width: "100%", children: /* @__PURE__ */ t(kt, {}) })
+    }
+  );
+}, Do = D($t);
+export {
+  xo as SpendingMiniWidget,
+  Do as SpendingWidget
+};
+//# sourceMappingURL=index.es.js.map