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

package/dist/TrendsStore-_mRaFUdf.mjs

@@ -0,0 +1,182 @@
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import x from "react";
+import S from "@mui/material/ListItem";
+import R from "@mui/material/ListItemButton";
+import f from "@mui/material/ListItemIcon";
+import A from "@mui/material/ListItemText";
+import h from "@mui/material/Stack";
+import { Text as y } from "@mxenabled/mxui";
+import { makeAutoObservable as N } from "mobx";
+import { addSeconds as v } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as w } from "date-fns/differenceInCalendarMonths";
+import { endOfMonth as D } from "date-fns/endOfMonth";
+import { subMonths as I } from "date-fns/subMonths";
+import { b as E, a as _, c as O } from "./Category-Ccoew_sA.mjs";
+import { f as L, a as T } from "./Dialog-CDV0kKxj.mjs";
+const rt = ({
+  onClick: e,
+  leftIcon: t,
+  rightIcon: o,
+  title: a,
+  subtitle: r,
+  rightContent: n,
+  titleBold: s = !0,
+  rightContentBold: m = !0
+}) => {
+  const c = /* @__PURE__ */ d(x.Fragment, { children: [
+    t && /* @__PURE__ */ l(f, { sx: { ml: 0 }, children: t }),
+    /* @__PURE__ */ l(A, { children: /* @__PURE__ */ d(
+      h,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          marginLeft: 12
+        },
+        children: [
+          /* @__PURE__ */ d(h, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ l(y, { bold: s, variant: "body1", children: a }),
+            r && /* @__PURE__ */ l(y, { variant: "caption", children: r })
+          ] }),
+          /* @__PURE__ */ d(h, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
+            n && /* @__PURE__ */ l(y, { bold: m, display: "flex", variant: "body1", children: n }),
+            o && /* @__PURE__ */ l(f, { children: o })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ l(S, { sx: { bgcolor: "background.paper" }, children: e ? /* @__PURE__ */ l(
+    R,
+    {
+      onClick: e,
+      sx: {
+        py: 14
+      },
+      children: c
+    }
+  ) : /* @__PURE__ */ l(
+    h,
+    {
+      sx: {
+        py: 14,
+        px: 24,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: c
+    }
+  ) });
+}, W = (e) => _[e] ?? _.default, F = (e) => O[e];
+function G(e, t) {
+  const o = [], a = new Date(e);
+  for (; a <= t; ) {
+    const r = a.getFullYear(), n = String(a.getMonth() + 1).padStart(2, "0");
+    o.push(+`${r}${n}`), a.setMonth(a.getMonth() + 1);
+  }
+  return o;
+}
+const $ = (e) => e.reduce((o, a) => {
+  const r = {
+    top_level_category_guid: a.top_level_category_guid,
+    category_guid: a.category_guid,
+    amount: a.total,
+    year_month: a.year_month
+  }, { top_level_category_guid: n, category_guid: s } = r;
+  return o[s] || (o[s] = []), o[s].push(r), n !== s && (o[n] || (o[n] = []), o[n].push(r)), o;
+}, {}), nt = (e, t, o) => {
+  const a = $(e), r = G(t, o);
+  return Object.entries(a).map(([s, m]) => {
+    const c = m[0].top_level_category_guid, b = r.map((i) => {
+      const g = m.filter((p) => p.year_month === i).reduce((p, C) => p + Math.abs(C.amount), 0), u = Number(String(i).slice(0, 4)), M = Number(String(i).slice(4));
+      return { x: new Date(u, M - 1), y: g };
+    }).sort((i, g) => i.x.getTime() - g.x.getTime());
+    return {
+      top_level_category_guid: c,
+      category_guid: s,
+      category_name: F(s),
+      category_color: W(c),
+      dataset: b
+    };
+  });
+}, st = (e, t) => {
+  const o = typeof e == "string" ? parseFloat(e.replace(/[^0-9.-]+/g, "")) : e, a = typeof t == "string" ? parseFloat(t.replace(/[^0-9.-]+/g, "")) : t;
+  return (o || 0) - (a || 0);
+}, j = (e, t) => {
+  const o = e.subCategories.filter((n) => n.currentAmount !== 0), a = e.totalMonthlyAmounts.slice(-t), r = (n) => n.substring(0, 3) + " " + n.slice(-4);
+  return a.map((n) => {
+    const s = r(n.label), m = o.map((i) => {
+      const g = i.monthlyAmounts.slice(-t).find((u) => r(u.label) === s);
+      return {
+        label: i.name,
+        amount: Math.abs(g?.amount || 0),
+        header: s
+      };
+    }), c = e.monthlyAmounts.slice(-t).find((i) => r(i.label) === s);
+    return [{
+      label: e.name,
+      amount: Math.abs(c?.amount || 0),
+      header: s
+    }, ...m].sort((i, g) => g.amount - i.amount);
+  });
+}, k = (e, t) => {
+  const o = e ? e.totalMonthlyAmounts.slice(-t).map((r) => ({
+    x: r.label.substring(0, 3),
+    y: Math.abs(r.amount)
+  })) : [], a = e ? j(e, t) : [];
+  return { monthlyAmounts: o, tooltipLabels: a };
+}, H = (e) => e.slice().filter(
+  (t) => t.totalAmount !== 0 && t.isTransfer === !1 && t.guid !== E.INVESTMENTS
+).sort((t, o) => Math.abs(o.totalAmount) - Math.abs(t.totalAmount));
+class it {
+  globalStore;
+  selectedCategoryData = null;
+  selectedDateRange;
+  visibleListLength = 5;
+  constructor(t) {
+    this.globalStore = t, this.selectedDateRange = {
+      start: v(D(I(/* @__PURE__ */ new Date(), 6)), 1),
+      end: D(/* @__PURE__ */ new Date())
+    }, N(this);
+  }
+  setSelectedCategoryData = (t) => {
+    this.selectedCategoryData = t;
+  };
+  setSelectedDateRange = (t) => {
+    this.selectedDateRange = t;
+  };
+  setVisibleListLength = (t) => {
+    this.visibleListLength = t;
+  };
+  get sortedDetailedCategoriesWithTransactions() {
+    return H(
+      this.globalStore.categoryStore.detailedCategoriesWithTransactions
+    );
+  }
+  get selectedDateRangeMonthCount() {
+    return w(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+  }
+  get selectedDateRangeMonthRange() {
+    const t = L(this.selectedDateRange.start, T.MONTH_LONG), o = L(this.selectedDateRange.end, T.MONTH_LONG);
+    return `${t} - ${o}`;
+  }
+  get visibleCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
+  }
+  get collapsedCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength);
+  }
+  get categoryDetailsChartData() {
+    return k(
+      this.selectedCategoryData,
+      this.selectedDateRangeMonthCount
+    );
+  }
+}
+export {
+  rt as L,
+  it as T,
+  st as a,
+  nt as g
+};

package/dist/{User-BQUxBeZV.mjs → User-BklmOUSd.mjs}

@@ -1,44 +1,44 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { jsxs as g, jsx as e } from "react/jsx-runtime";
 import A from "react";
-import { css as p } from "@mxenabled/cssinjs";
+import { css as R } from "@mxenabled/cssinjs";
 import { addDays as b } from "date-fns/addDays";
-import { addMonths as B } from "date-fns/addMonths";
-import { eachDayOfInterval as P } from "date-fns/eachDayOfInterval";
-import { eachWeekOfInterval as $ } from "date-fns/eachWeekOfInterval";
-import { endOfMonth as U } from "date-fns/endOfMonth";
-import { format as y } from "date-fns/format";
-import { isBefore as j } from "date-fns/isBefore";
-import { isSameMonth as W } from "date-fns/isSameMonth";
-import { startOfMonth as V } from "date-fns/startOfMonth";
+import { addMonths as w } from "date-fns/addMonths";
+import { eachDayOfInterval as H } from "date-fns/eachDayOfInterval";
+import { eachWeekOfInterval as B } from "date-fns/eachWeekOfInterval";
+import { endOfMonth as P } from "date-fns/endOfMonth";
+import { format as k } from "date-fns/format";
+import { isBefore as $ } from "date-fns/isBefore";
+import { isSameMonth as U } from "date-fns/isSameMonth";
+import { startOfMonth as j } from "date-fns/startOfMonth";
 import { startOfToday as f } from "date-fns/startOfToday";
-import { subMonths as F } from "date-fns/subMonths";
-import E from "@mui/material/Button";
-import Y from "@mui/material/Paper";
-import { useTokens as v, H2 as z, Text as G } from "@mxenabled/mxui";
-import { ChevronLeft as X, ChevronRight as Z } from "@mxenabled/mx-icons";
-import { f as q, D as J } from "./Dialog-CWW597AF.mjs";
+import { subMonths as W } from "date-fns/subMonths";
+import S from "@mui/material/Button";
+import V from "@mui/material/Paper";
+import { H2 as F, Text as y } from "@mxenabled/mxui";
+import { ChevronLeft as Y, ChevronRight as z } from "@mxenabled/mx-icons";
+import { f as X, a as Z } from "./Dialog-CDV0kKxj.mjs";
 import { isSameDay as T } from "date-fns/isSameDay";
-import { isWithinInterval as Q } from "date-fns/isWithinInterval";
-import nn from "@mui/material/styles/useTheme";
-import k from "@mui/material/ListItem";
-import an from "@mui/material/ListItemButton";
-import { g as tn } from "./hooks-D6XlXHf4.mjs";
-var on = /* @__PURE__ */ ((n) => (n[n.CREDIT = 1] = "CREDIT", n[n.DEBIT = 2] = "DEBIT", n))(on || {}), en = /* @__PURE__ */ ((n) => (n[n.POSTED = 1] = "POSTED", n[n.PENDING = 2] = "PENDING", n))(en || {});
-const rn = ({ copy: n, date: a, onNextClick: o, onPreviousClick: r }) => {
-  const c = v(), l = cn(c);
-  return /* @__PURE__ */ h("div", { className: `mx-cmn-calendar-header ${l}`, children: [
-    /* @__PURE__ */ e(z, { className: "mx-cmn-calendar-header-title", variant: "H3", children: q(a, J.MONTH_YEAR) }),
-    /* @__PURE__ */ h("div", { className: "mx-cmn-calendar-header-button-container", children: [
-      /* @__PURE__ */ e(E, { "aria-label": n.prevAria, onClick: r, children: /* @__PURE__ */ e(X, { size: 24 }) }),
-      /* @__PURE__ */ e(E, { "aria-label": n.nextAria, onClick: o, children: /* @__PURE__ */ e(Z, { size: 24 }) })
+import { isWithinInterval as q } from "date-fns/isWithinInterval";
+import { useTheme as J } from "@mui/material/styles";
+import u from "@mui/material/ListItem";
+import Q from "@mui/material/ListItemButton";
+import { g as nn } from "./hooks-C41HAxM5.mjs";
+var an = /* @__PURE__ */ ((n) => (n[n.CREDIT = 1] = "CREDIT", n[n.DEBIT = 2] = "DEBIT", n))(an || {}), tn = /* @__PURE__ */ ((n) => (n[n.POSTED = 1] = "POSTED", n[n.PENDING = 2] = "PENDING", n))(tn || {});
+const on = ({ copy: n, date: a, onNextClick: o, onPreviousClick: r }) => {
+  const i = en();
+  return /* @__PURE__ */ g("div", { className: `mx-cmn-calendar-header ${i}`, children: [
+    /* @__PURE__ */ e(F, { className: "mx-cmn-calendar-header-title", variant: "h3", children: X(a, Z.MONTH_YEAR) }),
+    /* @__PURE__ */ g("div", { className: "mx-cmn-calendar-header-button-container", children: [
+      /* @__PURE__ */ e(S, { "aria-label": n.prevAria, onClick: r, children: /* @__PURE__ */ e(Y, { size: 24 }) }),
+      /* @__PURE__ */ e(S, { "aria-label": n.nextAria, onClick: o, children: /* @__PURE__ */ e(z, { size: 24 }) })
     ] })
   ] });
-}, cn = (n) => p({
+}, en = () => R({
   alignItems: "center",
   display: "flex",
-  marginBottom: n.Spacing.Medium,
-  marginRight: -n.Spacing.Medium,
-  paddingLeft: n.Spacing.XSmall,
+  marginBottom: 16,
+  marginRight: -16,
+  paddingLeft: 8,
   "& .mx-cmn-calendar-header-title": {
     flexGrow: 1
   },
@@ -46,44 +46,44 @@ const rn = ({ copy: n, date: a, onNextClick: o, onPreviousClick: r }) => {
     display: "flex",
     gap: 4
   }
-}), sn = ({ beginDate: n, date: a, endDate: o, isInMonth: r, onClick: c }) => {
-  const l = nn(), S = Tn(l), g = n && o && Q(a, { start: n, end: o }) && !T(a, n) && !T(a, o), s = n && o && T(n, a) && !T(n, o), N = o && n && T(o, a) && !T(n, o), i = n && T(n, a) || o && T(o, a), C = T(a, f());
+}), rn = ({ beginDate: n, date: a, endDate: o, isInMonth: r, onClick: i }) => {
+  const C = J(), L = cn(C), c = n && o && q(a, { start: n, end: o }) && !T(a, n) && !T(a, o), N = n && o && T(n, a) && !T(n, o), l = o && n && T(o, a) && !T(n, o), s = n && T(n, a) || o && T(o, a), O = T(a, f());
   return /* @__PURE__ */ e(
     "div",
     {
       className: `
         mx-cmn-calendar-day
-        ${S}
+        ${L}
         ${r ? "" : "mx-cmn-out-of-month"}
-        ${g ? "mx-cmn-date-interval" : ""}
+        ${c ? "mx-cmn-date-interval" : ""}
       `,
       children: /* @__PURE__ */ e(
-        E,
+        S,
         {
           className: `
           mx-cmn-calendar-day-button
-          ${s ? "mx-cmn-range-start" : ""}
-          ${N ? "mx-cmn-range-end" : ""}
+          ${N ? "mx-cmn-range-start" : ""}
+          ${l ? "mx-cmn-range-end" : ""}
         `,
-          color: i ? "primary" : "secondary",
-          onClick: () => c(a),
-          variant: i ? "contained" : "text",
+          color: s ? "primary" : "secondary",
+          onClick: () => i(a),
+          variant: s ? "contained" : "text",
           children: /* @__PURE__ */ e(
-            G,
+            y,
             {
               className: `
             mx-cmn-calendar-day-text
-            ${i ? "mx-cmn-day-selected" : ""}
-            ${C ? "mx-cmn-today" : ""}`,
-              variant: "Small",
-              children: y(a, "d")
+            ${s ? "mx-cmn-day-selected" : ""}
+            ${O ? "mx-cmn-today" : ""}`,
+              variant: "body2",
+              children: k(a, "d")
             }
           )
         }
       )
     }
   );
-}, Tn = (n) => p({
+}, cn = (n) => R({
   height: I,
   width: I,
   display: "flex",
@@ -128,72 +128,72 @@ const rn = ({ copy: n, date: a, onNextClick: o, onPreviousClick: r }) => {
       paddingBottom: 5
     }
   }
-}), ln = 340, I = 44;
-var Cn = /* @__PURE__ */ ((n) => (n.None = "None", n.Single = "Single", n.Range = "Range", n))(Cn || {});
-const Nn = ({
+}), sn = 340, I = 44;
+var Tn = /* @__PURE__ */ ((n) => (n.None = "None", n.Single = "Single", n.Range = "Range", n))(Tn || {});
+const bn = ({
   copy: n,
   beginDate: a = void 0,
   endDate: o = void 0,
   onDateSelected: r,
-  onRangeSelected: c,
-  selectionType: l = "Single"
+  onRangeSelected: i,
+  selectionType: C = "Single"
   /* Single */
 }) => {
-  const S = v(), g = mn(S), [s, N] = A.useState(f), [i, C] = A.useState(a), [R, _] = A.useState(o);
+  const L = ln(), [c, N] = A.useState(f), [l, s] = A.useState(a), [O, m] = A.useState(o);
   A.useEffect(() => {
-    C(a), _(o), a && N(a);
+    s(a), m(o), a && N(a);
   }, [a, o]);
-  const D = A.useMemo(() => {
-    const t = $({ start: V(s), end: U(s) }), m = [];
+  const p = A.useMemo(() => {
+    const t = B({ start: j(c), end: P(c) }), _ = [];
     for (let d = 0; d < t.length; d++) {
-      const O = t[d], u = P({ start: O, end: b(O, 6) }), x = [];
-      for (let L = 0; L < u.length; L++)
-        x.push(u[L]);
-      m.push(x);
+      const E = t[d], D = H({ start: E, end: b(E, 6) }), x = [];
+      for (let h = 0; h < D.length; h++)
+        x.push(D[h]);
+      _.push(x);
     }
-    return m;
-  }, [s]), K = (t) => {
-    if (l !== "None") {
-      if (l === "Single") {
-        C(t), r?.(t);
+    return _;
+  }, [c]), v = (t) => {
+    if (C !== "None") {
+      if (C === "Single") {
+        s(t), r?.(t);
         return;
       }
-      !i || R ? (C(t), _(void 0)) : j(t, i) ? (_(i), C(t), c?.(t, i)) : (_(t), c?.(i, t));
+      !l || O ? (s(t), m(void 0)) : $(t, l) ? (m(l), s(t), i?.(t, l)) : (m(t), i?.(l, t));
     }
-  }, M = () => {
+  }, G = () => {
     const t = f();
-    N(t), l !== "None" && (C(t), l === "Single" ? r?.(t) : (_(t), c?.(t, t)));
-  }, w = () => {
-    N(B(s, 1));
-  }, H = () => {
-    N(F(s, 1));
+    N(t), C !== "None" && (s(t), C === "Single" ? r?.(t) : (m(t), i?.(t, t)));
+  }, K = () => {
+    N(w(c, 1));
+  }, M = () => {
+    N(W(c, 1));
   };
-  return /* @__PURE__ */ e("div", { className: `mx-cmn-calendar ${g}`, children: /* @__PURE__ */ h(Y, { sx: { boxShadow: "none" }, children: [
+  return /* @__PURE__ */ e("div", { className: `mx-cmn-calendar ${L}`, children: /* @__PURE__ */ g(V, { sx: { boxShadow: "none" }, children: [
     /* @__PURE__ */ e(
-      rn,
+      on,
       {
         copy: n,
-        date: s,
-        onNextClick: w,
-        onPreviousClick: H
+        date: c,
+        onNextClick: K,
+        onPreviousClick: M
       }
     ),
-    /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-header-row", children: D[0].map((t, m) => /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-header-cell", children: /* @__PURE__ */ e(G, { bold: !0, variant: "Small", children: y(t, "EEEEE") }) }, m)) }),
-    D.map((t, m) => /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-week", children: t.map((d, O) => /* @__PURE__ */ e(
-      sn,
+    /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-header-row", children: p[0].map((t, _) => /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-header-cell", children: /* @__PURE__ */ e(y, { bold: !0, variant: "body2", children: k(t, "EEEEE") }) }, _)) }),
+    p.map((t, _) => /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-week", children: t.map((d, E) => /* @__PURE__ */ e(
+      rn,
       {
-        beginDate: i,
+        beginDate: l,
         date: d,
-        endDate: R,
-        isInMonth: W(d, s),
-        onClick: K
+        endDate: O,
+        isInMonth: U(d, c),
+        onClick: v
       },
-      O
-    )) }, `w-${m}`)),
-    /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-today-container", children: /* @__PURE__ */ e(E, { onClick: M, size: "small", variant: "text", children: n.today }) })
+      E
+    )) }, `w-${_}`)),
+    /* @__PURE__ */ e("div", { className: "mx-cmn-calendar-today-container", children: /* @__PURE__ */ e(S, { onClick: G, size: "small", variant: "text", children: n.today }) })
   ] }) });
-}, mn = (n) => p({
-  width: ln,
+}, ln = () => R({
+  width: sn,
   "& .MuiPaper-root": {
     paddingLeft: 24,
     paddingRight: 24,
@@ -224,7 +224,7 @@ const Nn = ({
   },
   "& .mx-cmn-calendar-today-container": {
     display: "block",
-    marginTop: n.Spacing.Medium,
+    marginTop: 16,
     textAlign: "center",
     width: "100%",
     "& > .MuiButton-root": {
@@ -233,23 +233,23 @@ const Nn = ({
       marginRight: "auto"
     }
   }
-}), Bn = Nn, Pn = ({
+}), wn = ({
   children: n,
   clickEventName: a,
   onClick: o,
   sx: r = {}
 }) => {
-  const { onEvent: c } = tn();
-  return o ? /* @__PURE__ */ e(k, { sx: { bgcolor: "background.paper", ...r }, children: /* @__PURE__ */ e(
-    an,
+  const { onEvent: i } = nn();
+  return o ? /* @__PURE__ */ e(u, { sx: { bgcolor: "background.paper", ...r }, children: /* @__PURE__ */ e(
+    Q,
     {
       onClick: () => {
-        a && c(a), o();
+        a && i(a), o();
       },
       children: n
     }
   ) }) : /* @__PURE__ */ e(
-    k,
+    u,
     {
       disableGutters: !1,
       disablePadding: !1,
@@ -257,7 +257,7 @@ const Nn = ({
       children: n
     }
   );
-}, $n = {
+}, Hn = {
   ON_TRANSACTION_CATEGORY_CLICK: "onTransactionCategoryClick",
   ON_TRANSACTION_CATEGORY_CHANGED: "onTransactionCategoryChanged",
   ON_TRANSACTION_MANUAL_ADD_CLICK: "onTransactionManualAddClick",
@@ -301,13 +301,13 @@ const Nn = ({
   ON_TRANSACTION_UNHIDE_CANCEL_CLICK: "onTransactionUnHideCancelClick",
   ON_TRANSACTION_UNSPLIT: "onTransactionUnsplit",
   ON_TRANSACTION_UNSPLIT_CANCEL: "onTransactionUnsplitCancel"
-}, Un = (n, a) => !!n.find((o) => o.feature_name === a)?.is_enabled;
+}, Bn = (n, a) => !!n.find((o) => o.feature_name === a)?.is_enabled;
 export {
-  Bn as C,
-  Pn as L,
-  $n as O,
-  on as T,
-  en as a,
-  Cn as b,
-  Un as i
+  bn as C,
+  wn as L,
+  Hn as O,
+  an as T,
+  tn as a,
+  Tn as b,
+  Bn as i
 };