@mx-cartographer/experiences 6.26.18-alpha.mega1 → 6.26.18-alpha.mega3

package/dist/spending/components/Spending/index.es.js

@@ -0,0 +1,141 @@
+import { jsxs as E, jsx as o } from "react/jsx-runtime";
+import s from "react";
+import { observer as U } from "mobx-react-lite";
+import W from "@mui/material/Box";
+import G from "@mui/material/Tab";
+import $ from "@mui/material/Tabs";
+import { useTheme as q } from "@mui/material";
+import z from "../../../transactions/components/shared/TransactionList/index.es.js";
+import H from "../../../transactions/components/shared/TransactionDetails/index.es.js";
+import { getSpendingData as J, getIncomeData as K } from "../../utils/SpendingData/index.es.js";
+import O from "../SpendingChart/index.es.js";
+import R from "../SpendingTabLabel/index.es.js";
+import { useAppConfig as P, useCategoryStore as Q, useGlobalCopyStore as X, useGlobalUiStore as Y, useTransactionStore as Z } from "../../../common/context/hooks/index.es.js";
+import A from "../../../common/components/drawer/Drawer/index.es.js";
+import { CategoryGuids as i } from "../../../common/constants/Category/index.es.js";
+const tt = (a) => [
+  a.palette.chartMono.chartMono5,
+  a.palette.chartMono.chartMono4,
+  a.palette.chartMono.chartMono3,
+  a.palette.chartMono.chartMono2,
+  a.palette.chartMono.chartMono1,
+  a.palette.chartMono.chartMono6
+], et = () => {
+  const a = q(), { clientConfig: h } = P(), { categories: c, dateRangeCategoryTotals: l, loadDateRangeCategoryTotals: N } = Q(), { goals: x, spending: n } = X(), { displayedDateRange: d, selectedAccounts: S, selectedAccountGuids: B } = Y(), { setFilter: u, sortedTransactions: T } = Z(), C = h?.master?.deep_link_params?.account_guids, L = h?.master?.deep_link_params?.view, [g, b] = s.useState(""), [p, V] = s.useState(L === "income" ? 1 : 0), [y, M] = s.useState(""), [k, v] = s.useState(!1);
+  s.useEffect(() => {
+    N(
+      S,
+      d.start,
+      d.end
+    ).finally();
+  }, [S, d]);
+  const m = s.useMemo(
+    () => J(c, x, a, l),
+    [c, l]
+  ), w = s.useMemo(
+    () => K(c, l, tt(a)),
+    [c, l]
+  ), _ = s.useMemo(
+    () => T.find((t) => t.guid === y),
+    [y, T]
+  ), F = (t, r) => {
+    V(r), b("");
+  }, D = (t) => {
+    b(g === t || t === "0" ? "" : t);
+  }, I = (t) => {
+    const r = {
+      accounts: C || B,
+      dateRange: d
+    };
+    if (p === 0)
+      if (t === "other") {
+        const e = m.categoryData.find((f) => f.guid === "other");
+        u({
+          ...r,
+          custom: (f) => !!e?.categoryTotals?.find((j) => j.guid === f.top_level_category_guid)
+        });
+      } else
+        u({
+          ...r,
+          custom: (e) => t ? e.top_level_category_guid === t : e.top_level_category_guid !== i.INCOME && e.top_level_category_guid !== i.INVESTMENTS && e.top_level_category_guid !== i.TRANSFER,
+          showSplits: !!t
+        });
+    else
+      u({
+        ...r,
+        custom: (e) => t ? e.category_guid === t : e.category_guid === i.INCOME || e.top_level_category_guid === i.INCOME
+      });
+    v(!0);
+  };
+  return /* @__PURE__ */ E(W, { children: [
+    /* @__PURE__ */ E($, { onChange: F, value: p, variant: "fullWidth", children: [
+      /* @__PURE__ */ o(
+        G,
+        {
+          label: /* @__PURE__ */ o(
+            R,
+            {
+              amount: m.totalAmount,
+              label: n.spend_tab_title
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(
+        G,
+        {
+          label: /* @__PURE__ */ o(
+            R,
+            {
+              amount: w.totalAmount,
+              label: n.income_tab_title
+            }
+          )
+        }
+      )
+    ] }),
+    p === 0 && /* @__PURE__ */ o(
+      O,
+      {
+        data: m,
+        onSelected: D,
+        onViewTransactions: I,
+        selectedId: g,
+        title: n.spend_tab_title
+      }
+    ),
+    p === 1 && /* @__PURE__ */ o(
+      O,
+      {
+        data: w,
+        onSelected: D,
+        onViewTransactions: I,
+        selectedId: g,
+        title: n.income_tab_title
+      }
+    ),
+    /* @__PURE__ */ o(
+      A,
+      {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: k,
+        onClose: () => v(!1),
+        title: n.transactions_drawer_title,
+        children: /* @__PURE__ */ o(z, { onClick: M })
+      }
+    ),
+    /* @__PURE__ */ o(
+      A,
+      {
+        ariaLabelClose: n.close_drawer_aria,
+        isOpen: !!_,
+        onClose: () => M(""),
+        title: n.transaction_details_drawer_title,
+        children: _ && /* @__PURE__ */ o(H, { transaction: _ })
+      }
+    )
+  ] });
+}, ht = U(et);
+export {
+  ht as default
+};

package/dist/spending/components/SpendingChart/index.es.js

@@ -0,0 +1,61 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { observer as g } from "mobx-react-lite";
+import u from "@mui/material/Stack";
+import s from "../SpendingDonut/index.es.js";
+import c from "../SpendingList/index.es.js";
+import { useScreenSize as f } from "../../../common/hooks/useScreenSize/index.es.js";
+import { useCategoryStore as S, useGlobalCopyStore as x } from "../../../common/context/hooks/index.es.js";
+const C = ({
+  data: o,
+  onSelected: n,
+  onViewTransactions: l,
+  selectedId: e,
+  title: p
+}) => {
+  const { isDesktop: r, isMobile: a } = f(), { isLoadingCategoryTotals: i } = S(), { spending: m } = x();
+  return /* @__PURE__ */ d(
+    u,
+    {
+      alignItems: a ? "center" : "flex-start",
+      direction: a ? "column" : "row",
+      gap: { xs: 16, md: 64, xl: 100 },
+      justifyContent: "center",
+      pt: 50,
+      px: 8,
+      children: [
+        i && /* @__PURE__ */ t(
+          s,
+          {
+            data: {
+              categoryData: [],
+              donutData: [],
+              totalAmount: 0
+            },
+            onSelected: () => {
+            },
+            selectedId: "",
+            size: r ? 400 : 300,
+            totalLabel: "Loading ...",
+            variant: "full"
+          }
+        ),
+        !i && /* @__PURE__ */ t(
+          s,
+          {
+            data: o,
+            onSelected: n,
+            onViewTransactions: l,
+            selectedId: e,
+            size: r ? 400 : 300,
+            totalLabel: m.total_amount,
+            variant: "full"
+          }
+        ),
+        /* @__PURE__ */ t(c, { data: o, onSelected: n, selectedId: e, title: p })
+      ]
+    }
+  );
+}, k = g(C);
+export {
+  k as default
+};

package/dist/spending/components/SpendingDonut/index.es.js

@@ -0,0 +1,69 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import u from "react";
+import { observer as T } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import { CategoryIcon as S, CategoryIconVariants as j, Text as r } from "@mxenabled/mxui";
+import w from "@mui/material/Button";
+import { useTheme as k } from "@mui/material";
+import { useGlobalCopyStore as G } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as H } from "../../../common/hooks/useScreenSize/index.es.js";
+import I from "../../../common/components/charts/Donut/index.es.js";
+import { CategoryGuids as M } from "../../../common/constants/Category/index.es.js";
+import { formatCurrency as d } from "../../../common/utils/NumberFormatting/index.es.js";
+const V = ({
+  data: e,
+  isIncome: p = !1,
+  onSelected: g,
+  onViewTransactions: f,
+  selectedId: i,
+  size: m = 150,
+  totalLabel: s,
+  variant: n = "mini"
+}) => {
+  const { spending: h } = G(), a = k(), { isTablet: y } = H(), o = u.useMemo(
+    () => i ? e.categoryData.find((D) => D.guid === i) : void 0,
+    [i]
+  ), x = u.useMemo(() => e.donutData.length > 0 ? e.donutData : [{ id: "0", color: a.palette.divider, value: 100 }], [e, a]), C = () => {
+    f?.(i);
+  }, b = y ? 32 : 48;
+  return /* @__PURE__ */ t(I, { data: x, onClick: g, selectedId: i, size: m, children: /* @__PURE__ */ t(c, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ l(c, { alignItems: "center", justifyContent: "center", minHeight: m, minWidth: m, children: [
+    o && /* @__PURE__ */ l(
+      c,
+      {
+        alignItems: "center",
+        gap: n === "mini" ? 0 : 8,
+        mb: n === "mini" ? 0 : 8,
+        mt: n === "mini" ? 0 : -16,
+        sx: n === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
+        children: [
+          /* @__PURE__ */ t(
+            S,
+            {
+              categoryGuid: p ? M.INCOME : o.guid,
+              size: n === "mini" ? 24 : b,
+              variant: j.Transparent
+            }
+          ),
+          /* @__PURE__ */ t(r, { color: "secondary", noWrap: !0, variant: n === "mini" ? "Tiny" : "Body", children: o ? o.name : s })
+        ]
+      }
+    ),
+    !o && n === "full" && /* @__PURE__ */ t(r, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: s }),
+    /* @__PURE__ */ t(r, { variant: n === "mini" ? "H2" : "H1", children: o ? d(o.amount, "0,0") : d(e.totalAmount, "0,0") }),
+    !o && n === "mini" && /* @__PURE__ */ t(r, { color: "secondary", noWrap: !0, variant: "Tiny", children: s }),
+    n === "full" && /* @__PURE__ */ t(
+      w,
+      {
+        "aria-label": `View ${o?.name || ""} Transactions`,
+        disabled: e.categoryData.length === 0,
+        onClick: C,
+        sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+        variant: "text",
+        children: h.view_transactions
+      }
+    )
+  ] }) }) });
+}, F = T(V);
+export {
+  F as default
+};

package/dist/spending/components/SpendingLegend/index.es.js

@@ -0,0 +1,25 @@
+import { jsx as o, jsxs as i } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+import n from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+const p = ({ data: t, onSelected: e, selectedId: a }) => /* @__PURE__ */ o(n, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: t.categoryData.map((r) => /* @__PURE__ */ i(
+  n,
+  {
+    alignItems: "center",
+    "aria-label": r.name,
+    "aria-selected": r.guid === a,
+    direction: "row",
+    gap: 8,
+    onClick: () => e(r.guid),
+    role: "button",
+    sx: { cursor: "pointer" },
+    children: [
+      /* @__PURE__ */ o(d, { borderRadius: 4, height: 8, sx: { backgroundColor: r.color }, width: 8 }),
+      /* @__PURE__ */ o(l, { bold: r.guid === a, variant: "XSmall", children: r.name })
+    ]
+  },
+  r.guid
+)) });
+export {
+  p as default
+};

package/dist/spending/components/SpendingList/index.es.js

@@ -0,0 +1,96 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import f from "react";
+import { observer as y } from "mobx-react-lite";
+import x from "@mui/material/Box";
+import b from "@mui/material/Collapse";
+import l from "@mui/material/Divider";
+import p from "@mui/material/List";
+import g from "@mui/material/ListItem";
+import c from "@mui/material/Stack";
+import { Text as i } from "@mxenabled/mxui";
+import C from "@mui/material/ListItemButton";
+import { useGlobalCopyStore as w } from "../../../common/context/hooks/index.es.js";
+import { formatCurrency as m } from "../../../common/utils/NumberFormatting/index.es.js";
+const j = ({
+  data: n,
+  onSelected: u,
+  selectedId: e = "",
+  title: h
+}) => {
+  const { spending: s } = w(), d = n.categoryData.find((r) => r.guid === e);
+  return /* @__PURE__ */ t(c, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ o(i, { bold: !0, sx: { py: 12 }, children: `${h} ${s.by_category}` }),
+    /* @__PURE__ */ o(l, { "aria-hidden": "true" }),
+    /* @__PURE__ */ o(p, { children: n.categoryData.map((r) => /* @__PURE__ */ t(f.Fragment, { children: [
+      /* @__PURE__ */ o(
+        g,
+        {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ t(
+            C,
+            {
+              "aria-expanded": d?.guid === r.guid,
+              onClick: () => u(r.guid),
+              sx: { minHeight: 44, px: 8, py: 0 },
+              children: [
+                /* @__PURE__ */ o(
+                  x,
+                  {
+                    borderRadius: 4,
+                    flexShrink: 0,
+                    height: 8,
+                    sx: { backgroundColor: r.color, mr: 8 },
+                    width: 8
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  c,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    children: [
+                      /* @__PURE__ */ o(i, { bold: e === r.guid, children: r.name }),
+                      /* @__PURE__ */ o(i, { bold: e === r.guid, variant: "Body", children: m(r.amount, "0,0") })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ o(l, {}),
+      r.categoryTotals && r.categoryTotals.length > 0 && /* @__PURE__ */ o(b, { in: d?.guid === r.guid, unmountOnExit: !0, children: /* @__PURE__ */ t(p, { children: [
+        d?.categoryTotals?.map((a) => /* @__PURE__ */ o(
+          g,
+          {
+            sx: {
+              pl: 24,
+              pr: 8,
+              py: 0
+            },
+            children: /* @__PURE__ */ t(c, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              /* @__PURE__ */ t(i, { children: [
+                a.name,
+                " "
+              ] }),
+              /* @__PURE__ */ o(i, { children: m(a.amount, "0,0") })
+            ] })
+          },
+          a.guid
+        )),
+        /* @__PURE__ */ o(l, {})
+      ] }) })
+    ] }, r.guid)) }),
+    /* @__PURE__ */ o(i, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${s.total}: ${m(n.totalAmount, "0,0")}` })
+  ] });
+}, E = y(j);
+export {
+  E as default
+};

package/dist/spending/components/SpendingTabLabel/index.es.js

@@ -0,0 +1,11 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import a from "@mui/material/Stack";
+import { Text as o } from "@mxenabled/mxui";
+import { formatCurrency as i } from "../../../common/utils/NumberFormatting/index.es.js";
+const f = ({ amount: t, label: n }) => /* @__PURE__ */ e(a, { direction: "column", children: [
+  /* @__PURE__ */ r(o, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: n }),
+  /* @__PURE__ */ r(o, { variant: "XSmall", children: i(t, "0,0") })
+] });
+export {
+  f as default
+};

package/dist/spending/index.es.js

@@ -0,0 +1,6 @@
+import { default as i } from "./SpendingMiniWidget/index.es.js";
+import { default as n } from "./SpendingWidget/index.es.js";
+export {
+  i as SpendingMiniWidget,
+  n as SpendingWidget
+};

package/dist/spending/utils/SpendingData/index.es.js

@@ -0,0 +1,86 @@
+import { getCategoryColor as p } from "../../../categories/util/CategoryUtil/index.es.js";
+import { CategoryGuids as c } from "../../../common/constants/Category/index.es.js";
+const m = 5, y = (s, l, g) => g.reduce((u, n) => {
+  if (n.total > 0) {
+    const a = s.find((o) => o.guid === n.category_guid);
+    if (!a) return u;
+    const r = a.parent_guid ?? a.guid, t = s.find((o) => o.guid === r);
+    if (!t) return u;
+    const e = {
+      guid: a.guid,
+      name: a.guid === r ? `General ${a.name}` : a.name,
+      color: p(t.guid, l),
+      amount: n.total
+    }, i = u.find((o) => o.guid === r);
+    i ? (i.amount += n.total, i.categoryTotals?.push(e)) : u.push({
+      guid: r,
+      name: t.name,
+      color: p(t.guid, l),
+      categoryTotals: [e],
+      amount: n.total
+    });
+  }
+  return u;
+}, []), T = (s, l, g, u) => {
+  const n = y(s, g, u), a = n.filter(
+    (o) => o.guid !== c.INCOME && o.guid !== c.INVESTMENTS && o.guid !== c.TRANSFER
+  ).sort((o, d) => d.amount - o.amount), r = a.reduce(
+    (o, d) => o + d.amount,
+    0
+  ), t = a.length > m ? m : a.length, e = a.slice(0, t), i = e.map((o) => ({
+    id: o.guid,
+    color: p(o.guid, g),
+    label: o.name,
+    value: o.amount / r * 100
+  }));
+  if (a.length > 5) {
+    const o = a.slice(m, n.length), d = o.reduce(
+      (f, h) => f + h.amount,
+      0
+    );
+    e.push({
+      guid: "other",
+      color: g.palette.categories.others || "",
+      name: l.saving_goal_other,
+      categoryTotals: o,
+      amount: d
+    }), i.push({
+      id: "other",
+      color: g.palette.categories.others || "",
+      label: l.saving_goal_other,
+      value: d / r * 100
+    });
+  }
+  return {
+    categoryData: e,
+    donutData: i,
+    totalAmount: r
+  };
+}, E = (s, l, g) => {
+  const u = s.filter(
+    (t) => t.guid === c.INCOME || t.parent_guid === c.INCOME
+  ), n = l.filter((t) => u.some((e) => e.guid === t.category_guid)).sort((t, e) => t.total - e.total).map((t, e) => ({
+    guid: t.category_guid,
+    name: s.find((i) => i.guid === t.category_guid)?.name,
+    color: g[e],
+    categoryTotals: [],
+    amount: Math.abs(t.total)
+  })), a = n.reduce(
+    (t, e) => t + e.amount,
+    0
+  ), r = n.map((t) => ({
+    id: t.guid,
+    color: t.color,
+    label: t.name,
+    value: t.amount / a * 100
+  }));
+  return {
+    categoryData: n,
+    donutData: r,
+    totalAmount: a
+  };
+};
+export {
+  E as getIncomeData,
+  T as getSpendingData
+};