@mx-cartographer/experiences 7.0.0-alpha.mega1 → 7.0.1-alpha.al0

package/dist/{TransactionStore-CeLdmVnC.mjs → TransactionStore-DSyXtPek.mjs}

@@ -11,12 +11,12 @@ import { fromUnixTime as u } from "date-fns/fromUnixTime";
 import { getUnixTime as h } from "date-fns/getUnixTime";
 import { isBefore as B } from "date-fns/isBefore";
 import { startOfMonth as R } from "date-fns/startOfMonth";
-import { startOfToday as G } from "date-fns/startOfToday";
+import { startOfToday as b } from "date-fns/startOfToday";
 import { subDays as Y } from "date-fns/subDays";
-import { O as n, a as b, T as F } from "./Transaction-CA0FW2Ij.mjs";
+import { O as n, a as G, T as F } from "./Transaction-CyqrHmAA.mjs";
 import { T as p } from "./TransactionApi-DbbcjI2L.mjs";
-import { c as W } from "./Category-5S6uwuXz.mjs";
-import { f as z } from "./exportTransactionsToCSV-CmwsKl2D.mjs";
+import { b as W } from "./Category-CevNQ03n.mjs";
+import { f as z } from "./exportTransactionsToCSV-BlVifaOG.mjs";
 import { format as k } from "date-fns/format";
 import { f as g, D as O, O as $ } from "./Dialog-CWW597AF.mjs";
 import { endOfMonth as X } from "date-fns/endOfMonth";
@@ -352,7 +352,7 @@ const j = ({
       accountIsHidden: s?.is_hidden,
       category: l?.name || "Uncategorized",
       isIncome: c.top_level_category_guid === W.INCOME,
-      isPending: c.feed_status === b.PENDING,
+      isPending: c.feed_status === G.PENDING,
       number: s?.account_number || "",
       payee: c.description,
       tags: I
@@ -367,7 +367,7 @@ const j = ({
 }, tt = (S, t, a) => {
   const {
     accounts: e = [],
-    dateRange: A = { start: R(G()), end: D() },
+    dateRange: A = { start: R(b()), end: D() },
     custom: _ = () => !0,
     searchTerm: i = "",
     showSplits: c = !1
@@ -397,7 +397,7 @@ const j = ({
   description: "",
   duplicate: !1,
   feed_description: "",
-  feed_status: b.POSTED,
+  feed_status: G.POSTED,
   feed_transaction_date: 0,
   has_been_split: !1,
   has_been_viewed: !1,
@@ -465,7 +465,7 @@ class mt {
   api = new p("/", "");
   beatApi = new f("/", "");
   associatedBeats = [];
-  cachedStartDate = Y(G(), 90);
+  cachedStartDate = Y(b(), 90);
   filter = {};
   isLoading = !0;
   rawTransactions = [];

package/dist/TrendsStore-DR8etTL2.mjs

@@ -0,0 +1,547 @@
+import M, { useState as J, useEffect as K, useRef as ve } from "react";
+import { m as Se, u as _e, l as Q } from "./hooks-02T565vf.mjs";
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import A from "@mui/material/Box";
+import T from "@mui/material/Stack";
+import { useTheme as U } from "@mui/material/styles";
+import { LineChart as Me } from "@mui/x-charts";
+import { u as Z } from "./useScreenSize-B6JyS_Lj.mjs";
+import { u as Te } from "./useDimensions-27p2evRx.mjs";
+import { observer as De } from "mobx-react-lite";
+import Le from "@mui/material/Card";
+import Ae from "@mui/material/CardContent";
+import P from "@mui/material/Divider";
+import X from "@mui/material/Grid";
+import { CategoryIcon as Re, Text as S } from "@mxenabled/mxui";
+import { b as Ie } from "./Localization-2MODESHW.mjs";
+import { C as O } from "./CurrencyText-YUhH2caW.mjs";
+import { useTheme as we, Card as He, CardContent as Ee, Box as ke } from "@mui/material";
+import { f as R, D as I } from "./Dialog-CWW597AF.mjs";
+import Ge from "@mui/material/Button";
+import { C as L, b as Ne, c as Be } from "./Category-CevNQ03n.mjs";
+import { f as z } from "./NumberFormatting-CtWHhyBX.mjs";
+import Oe from "@mui/material/ListItem";
+import $e from "@mui/material/ListItemButton";
+import V from "@mui/material/ListItemIcon";
+import We from "@mui/material/ListItemText";
+import { makeAutoObservable as je } from "mobx";
+import { addSeconds as Fe } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as Ye } from "date-fns/differenceInCalendarMonths";
+import { endOfMonth as q } from "date-fns/endOfMonth";
+import { subMonths as Pe } from "date-fns/subMonths";
+const Et = () => {
+  const { isInitialized: o, appDataStore: t } = Se(), [r, a] = J(!1);
+  return K(() => {
+    o && t.clientInsightProfile?.is_enabled && a(!0);
+  }, [o, t.clientInsightProfile]), r;
+}, ee = ({ categoryGuid: o, topLevelCategoryGuid: t }) => {
+  const { categories: r } = _e(), { getCategoryName: a } = Q(), n = a(o);
+  return /* @__PURE__ */ f(T, { alignItems: "center", direction: "column", gap: "8", justifyContent: "center", mb: 4, children: [
+    /* @__PURE__ */ s(
+      A,
+      {
+        "aria-label": Ie(r.category_icon_label_aria, n),
+        mb: 4,
+        role: "img",
+        children: /* @__PURE__ */ s(Re, { categoryGuid: t })
+      }
+    ),
+    /* @__PURE__ */ s(S, { variant: "Body", children: n })
+  ] });
+}, Xe = ({
+  categoryGuids: { guid: o, topLevelGuid: t },
+  hoveredAreaData: r,
+  cursorPosition: a,
+  chartContainerRef: n
+}) => {
+  const i = U(), c = ve(null), [h, g] = J({ x: a.x, y: a.y });
+  if (K(() => {
+    (() => {
+      const u = c.current, x = n.current;
+      if (!u || !x) return;
+      const y = u.getBoundingClientRect(), C = x.getBoundingClientRect();
+      let p = a.x, v = a.y;
+      p + y.width * 2 > C.right ? p = a.x - y.width : p - y.width < C.left && (p = a.x), v + y.height * 2 > C.bottom && (v = a.y - y.height), g({ x: p, y: v });
+    })();
+  }, [a, n]), !r) return null;
+  const b = r.reduce((d, u) => d + u.y, 0);
+  return /* @__PURE__ */ s(
+    Le,
+    {
+      ref: c,
+      sx: {
+        position: "absolute",
+        top: h.y,
+        left: h.x,
+        width: 250,
+        pointerEvents: "none"
+      },
+      children: /* @__PURE__ */ f(Ae, { children: [
+        /* @__PURE__ */ f(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+          /* @__PURE__ */ s(ee, { categoryGuid: o, topLevelCategoryGuid: t }),
+          /* @__PURE__ */ s(S, { variant: "Small", children: `${r.length}-month total` }),
+          /* @__PURE__ */ s(O, { amount: b, bold: !0, formatString: "0,0", variant: "body2" })
+        ] }),
+        /* @__PURE__ */ s(P, { sx: { my: 16, width: "100%" } }),
+        /* @__PURE__ */ s(X, { container: !0, children: r.map((d, u) => /* @__PURE__ */ f(M.Fragment, { children: [
+          u > 0 && u % 3 === 0 && /* @__PURE__ */ s(P, { sx: { my: 16, width: "100%" } }),
+          /* @__PURE__ */ s(X, { item: !0, xs: 4, children: /* @__PURE__ */ f(A, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+            /* @__PURE__ */ s(S, { color: i.palette.text.secondary, variant: "XSmall", children: d.x }),
+            /* @__PURE__ */ s(
+              O,
+              {
+                amount: d.y,
+                bold: !0,
+                formatString: "0,0",
+                variant: "Body"
+              }
+            )
+          ] }) })
+        ] }, u)) })
+      ] })
+    }
+  );
+}, ze = De(Xe), Ve = ({
+  categoryGuids: { guid: o, topLevelGuid: t },
+  itemData: { dataIndex: r },
+  series: a,
+  xData: n
+}) => {
+  const i = we(), c = a.data[r], h = n[r];
+  return c === void 0 || !h ? null : /* @__PURE__ */ s(He, { sx: { pt: 4, px: 8 }, children: /* @__PURE__ */ s(Ee, { children: /* @__PURE__ */ f(ke, { alignItems: "center", display: "flex", flexDirection: "column", children: [
+    /* @__PURE__ */ s(ee, { categoryGuid: o, topLevelCategoryGuid: t }),
+    /* @__PURE__ */ s(S, { color: i.palette.text.secondary, variant: "Small", children: R(h, I.MONTH_SHORT_YEAR) }),
+    /* @__PURE__ */ s(O, { amount: String(c), bold: !0, formatString: "0,0", variant: "Body" })
+  ] }) }) });
+}, qe = ({
+  sx: o,
+  categoryGuids: t,
+  hoveredLegend: r,
+  legendRef: a,
+  onHoverLegend: n,
+  onClickLegend: i
+}) => {
+  const { isMobile: c } = Z(), { getCategoryName: h } = Q();
+  return /* @__PURE__ */ s(
+    T,
+    {
+      direction: "row",
+      flexWrap: "wrap",
+      gap: c ? 2 : 6,
+      justifyContent: "start",
+      ref: a,
+      sx: o,
+      children: t.map(({ guid: g, top_level_guid: b }) => {
+        const d = r === g, u = L[g], x = L[b], y = u ?? x ?? L.default, C = y + "33";
+        return /* @__PURE__ */ f(
+          Ge,
+          {
+            onClick: () => i(g),
+            onMouseEnter: () => n(g),
+            onMouseLeave: () => n(null),
+            sx: {
+              color: "text.primary",
+              fontWeight: "normal",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingX: 8,
+              paddingY: 4,
+              borderRadius: 1,
+              opacity: d ? 1 : 0.7
+            },
+            children: [
+              /* @__PURE__ */ s(
+                A,
+                {
+                  sx: {
+                    width: 16,
+                    height: 16,
+                    marginRight: c ? 5 : 10,
+                    borderRadius: "2px",
+                    backgroundColor: r ? d ? y : C : y
+                  }
+                }
+              ),
+              /* @__PURE__ */ s(S, { variant: "Body", children: h(g) })
+            ]
+          },
+          g
+        );
+      })
+    }
+  );
+}, kt = ({
+  onHoverArea: o,
+  onHoverPoint: t,
+  onHoverLegend: r,
+  onClickLegend: a,
+  stackedDatasets: n,
+  unstackedDatasets: i = [],
+  availableHeight: c = 0,
+  minimumHeight: h = 350
+}) => {
+  const g = U(), { isMobile: b } = Z(), [d, { height: u }] = Te(), x = M.useRef(null), [y, C] = M.useState(0);
+  M.useEffect(() => {
+    const e = Math.max(c - u, h);
+    C(e);
+  }, [c, u]);
+  const [p, v] = M.useState(null), [te, w] = M.useState({
+    hoveredSeriesId: null,
+    hoveredAreaData: null,
+    isAreaHovered: !1,
+    cursorPos: { x: 0, y: 0 }
+  }), { hoveredSeriesId: D, hoveredAreaData: $, isAreaHovered: oe, cursorPos: H } = te, W = oe && D && $, j = !W, G = [...n, ...i], re = G[0]?.dataset.length ?? 0, N = G.flatMap((e) => e.dataset.map((l) => l.x)), ae = G.flatMap((e) => e.dataset.map((l) => l.y)), ne = n[0]?.dataset?.map(
+    (e, l) => n.reduce((m, _) => m + _.dataset[l]?.y || 0, 0)
+  ) ?? [0], se = Math.max(...ne), ie = Math.max(
+    ...i.flatMap((e) => e.dataset.map((l) => l.y))
+  ), le = Math.floor(Math.min(...ae) / 100) * 100, ce = Math.ceil(Math.max(se, ie) / 100) * 100, E = n.map((e, l) => ({
+    id: `stacked-${l}`,
+    guid: e.category_guid,
+    top_level_guid: e.top_level_category_guid,
+    area: !0,
+    color: n[l].category_color ?? g.palette.primary.main,
+    data: e.dataset.map((m) => m.y),
+    label: n[l].category_name,
+    stack: "total",
+    type: "line",
+    highlightScope: { highlight: "item" },
+    valueFormatter: (m) => z(m, "0,0")
+  })), F = i.map((e, l) => ({
+    id: `unstacked-${l}`,
+    guid: e.category_guid,
+    top_level_guid: e.top_level_category_guid,
+    area: !1,
+    color: e.category_color,
+    data: e.dataset.map((m) => m.y),
+    label: e.category_name,
+    type: "line",
+    valueFormatter: (m) => z(m, "0,0")
+  })), Y = [...E, ...F], de = [
+    ...E.map(({ guid: e, top_level_guid: l }) => ({
+      guid: e,
+      top_level_guid: l
+    })),
+    ...F.map(({ guid: e, top_level_guid: l }) => ({
+      guid: e,
+      top_level_guid: l
+    }))
+  ], k = (e) => {
+    const m = e.startsWith("stacked-") ? n[parseInt(e.split("-")[1])] : i[parseInt(e.split("-")[1])];
+    return {
+      guid: m?.category_guid,
+      topLevelGuid: m?.top_level_category_guid
+    };
+  }, ue = (e) => {
+    v(e), r?.(e ?? "");
+  }, me = (e) => {
+    a?.(e ?? "");
+  }, ge = () => {
+    const e = k(String(D)).guid;
+    e && a?.(e);
+  }, he = (e) => {
+    const l = String(e?.seriesId), m = k(l).guid, _ = Y.find((B) => B.id === l), fe = _ && e?.dataIndex !== void 0, xe = _ && e?.dataIndex === void 0;
+    if (fe)
+      w({
+        hoveredSeriesId: l,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: H
+      }), t?.(m);
+    else if (xe) {
+      const B = _?.data.map((be, Ce) => ({
+        x: N[Ce],
+        y: be
+      })) ?? [];
+      w({
+        hoveredSeriesId: l,
+        hoveredAreaData: B,
+        isAreaHovered: !0,
+        cursorPos: H
+      }), o?.(m);
+    } else
+      w({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: !1,
+        cursorPos: H
+      });
+  }, pe = (e) => {
+    const l = e.currentTarget.getBoundingClientRect();
+    w((m) => ({
+      ...m,
+      cursorPos: {
+        x: e.clientX - l.left,
+        y: e.clientY - l.top
+      }
+    }));
+  }, ye = {
+    p: 4,
+    "& .MuiBarLabel-root": {
+      fontSize: 10,
+      fontWeight: 600
+    },
+    "& .MuiAreaElement-root": {
+      opacity: 0.4,
+      transition: "opacity 0.3s ease"
+    },
+    "& .MuiAreaElement-root:hover": {
+      opacity: 1
+    },
+    '& [class*="MuiLineElement-series-unstacked-"]': {
+      strokeWidth: 3
+    },
+    ...p && E.reduce((e, l, m) => {
+      const _ = `.MuiAreaElement-series-stacked-${m}`;
+      return e[_] = {
+        opacity: E[m].guid === p ? 0.9 : 0.2
+      }, e;
+    }, {})
+  };
+  return /* @__PURE__ */ s(A, { onMouseMove: pe, ref: x, style: { position: "relative" }, children: /* @__PURE__ */ f(
+    T,
+    {
+      direction: { xs: "column", md: "column" },
+      spacing: { xs: 0, md: 4 },
+      sx: { width: "100%", position: "relative" },
+      children: [
+        /* @__PURE__ */ s(
+          Me,
+          {
+            height: y,
+            margin: { bottom: 50 },
+            onAreaClick: ge,
+            onHighlightChange: he,
+            series: Y,
+            skipAnimation: !0,
+            slotProps: {
+              legend: {
+                hidden: !0
+              }
+            },
+            slots: {
+              itemContent: (e) => j && D ? /* @__PURE__ */ s(
+                Ve,
+                {
+                  categoryGuids: k(D),
+                  xData: N,
+                  ...e
+                }
+              ) : null
+            },
+            sx: ye,
+            tooltip: {
+              trigger: j ? "item" : "none"
+            },
+            xAxis: [
+              {
+                data: N,
+                scaleType: "time",
+                valueFormatter: (e) => R(e, I.MONTH_SHORT_YEAR),
+                tickNumber: re
+                // How many ticks to show on the x-axis
+              }
+            ],
+            yAxis: [
+              {
+                min: le,
+                max: ce || 100
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          qe,
+          {
+            categoryGuids: de,
+            hoveredLegend: p,
+            legendRef: d,
+            onClickLegend: me,
+            onHoverLegend: ue,
+            sx: { px: b ? 0 : 24 }
+          }
+        ),
+        W && /* @__PURE__ */ s(
+          ze,
+          {
+            categoryGuids: k(D),
+            chartContainerRef: x,
+            cursorPosition: H,
+            hoveredAreaData: $.map((e) => ({
+              ...e,
+              x: R(e.x, I.MONTH_SHORT_YEAR)
+            }))
+          }
+        )
+      ]
+    }
+  ) });
+}, Gt = ({
+  onClick: o,
+  leftIcon: t,
+  rightIcon: r,
+  title: a,
+  subtitle: n,
+  rightContent: i,
+  titleBold: c = !0,
+  rightContentBold: h = !0
+}) => {
+  const g = /* @__PURE__ */ f(M.Fragment, { children: [
+    t && /* @__PURE__ */ s(V, { sx: { ml: 0 }, children: t }),
+    /* @__PURE__ */ s(We, { children: /* @__PURE__ */ f(
+      T,
+      {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          marginLeft: 12
+        },
+        children: [
+          /* @__PURE__ */ f(T, { sx: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ s(S, { bold: c, variant: "body1", children: a }),
+            n && /* @__PURE__ */ s(S, { variant: "caption", children: n })
+          ] }),
+          /* @__PURE__ */ f(T, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
+            i && /* @__PURE__ */ s(S, { bold: h, display: "flex", variant: "body1", children: i }),
+            r && /* @__PURE__ */ s(V, { children: r })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ s(Oe, { sx: { bgcolor: "background.paper" }, children: o ? /* @__PURE__ */ s(
+    $e,
+    {
+      onClick: o,
+      sx: {
+        py: 14
+      },
+      children: g
+    }
+  ) : /* @__PURE__ */ s(
+    T,
+    {
+      sx: {
+        py: 14,
+        px: 24,
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      children: g
+    }
+  ) });
+}, Je = (o) => L[o] ?? L.default, Ke = (o) => Be[o];
+function Qe(o, t) {
+  const r = [], a = new Date(o);
+  for (; a <= t; ) {
+    const n = a.getFullYear(), i = String(a.getMonth() + 1).padStart(2, "0");
+    r.push(+`${n}${i}`), a.setMonth(a.getMonth() + 1);
+  }
+  return r;
+}
+const Ue = (o) => o.reduce((r, a) => {
+  const n = {
+    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: i, category_guid: c } = n;
+  return r[c] || (r[c] = []), r[c].push(n), i !== c && (r[i] || (r[i] = []), r[i].push(n)), r;
+}, {}), Nt = (o, t, r) => {
+  const a = Ue(o), n = Qe(t, r);
+  return Object.entries(a).map(([c, h]) => {
+    const g = h[0].top_level_category_guid, b = n.map((d) => {
+      const u = h.filter((p) => p.year_month === d).reduce((p, v) => p + Math.abs(v.amount), 0), x = Number(String(d).slice(0, 4)), y = Number(String(d).slice(4));
+      return { x: new Date(x, y - 1), y: u };
+    }).sort((d, u) => d.x.getTime() - u.x.getTime());
+    return {
+      top_level_category_guid: g,
+      category_guid: c,
+      category_name: Ke(c),
+      category_color: Je(g),
+      dataset: b
+    };
+  });
+}, Bt = (o, t) => {
+  const r = typeof o == "string" ? parseFloat(o.replace(/[^0-9.-]+/g, "")) : o, a = typeof t == "string" ? parseFloat(t.replace(/[^0-9.-]+/g, "")) : t;
+  return (r || 0) - (a || 0);
+}, Ze = (o, t) => {
+  const r = o.subCategories.filter((i) => i.currentAmount !== 0), a = o.totalMonthlyAmounts.slice(-t), n = (i) => i.substring(0, 3) + " " + i.slice(-4);
+  return a.map((i) => {
+    const c = n(i.label), h = r.map((d) => {
+      const u = d.monthlyAmounts.slice(-t).find((x) => n(x.label) === c);
+      return {
+        label: d.name,
+        amount: Math.abs(u?.amount || 0),
+        header: c
+      };
+    }), g = o.monthlyAmounts.slice(-t).find((d) => n(d.label) === c);
+    return [{
+      label: o.name,
+      amount: Math.abs(g?.amount || 0),
+      header: c
+    }, ...h].sort((d, u) => u.amount - d.amount);
+  });
+}, et = (o, t) => {
+  const r = o ? o.totalMonthlyAmounts.slice(-t).map((n) => ({
+    x: n.label.substring(0, 3),
+    y: Math.abs(n.amount)
+  })) : [], a = o ? Ze(o, t) : [];
+  return { monthlyAmounts: r, tooltipLabels: a };
+}, tt = (o) => o.slice().filter(
+  (t) => t.totalAmount !== 0 && t.isTransfer === !1 && t.guid !== Ne.INVESTMENTS
+).sort((t, r) => Math.abs(r.totalAmount) - Math.abs(t.totalAmount));
+class Ot {
+  globalStore;
+  selectedCategoryData = null;
+  selectedDateRange;
+  visibleListLength = 5;
+  constructor(t) {
+    this.globalStore = t, this.selectedDateRange = {
+      start: Fe(q(Pe(/* @__PURE__ */ new Date(), 6)), 1),
+      end: q(/* @__PURE__ */ new Date())
+    }, je(this);
+  }
+  setSelectedCategoryData = (t) => {
+    this.selectedCategoryData = t;
+  };
+  setSelectedDateRange = (t) => {
+    this.selectedDateRange = t;
+  };
+  setVisibleListLength = (t) => {
+    this.visibleListLength = t;
+  };
+  get sortedDetailedCategoriesWithTransactions() {
+    return tt(
+      this.globalStore.categoryStore.detailedCategoriesWithTransactions
+    );
+  }
+  get selectedDateRangeMonthCount() {
+    return Ye(this.selectedDateRange.end, this.selectedDateRange.start) + 1;
+  }
+  get selectedDateRangeMonthRange() {
+    const t = R(this.selectedDateRange.start, I.MONTH_LONG), r = R(this.selectedDateRange.end, I.MONTH_LONG);
+    return `${t} - ${r}`;
+  }
+  get visibleCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(0, this.visibleListLength);
+  }
+  get collapsedCategories() {
+    return this.sortedDetailedCategoriesWithTransactions.slice(this.visibleListLength);
+  }
+  get categoryDetailsChartData() {
+    return et(
+      this.selectedCategoryData,
+      this.selectedDateRangeMonthCount
+    );
+  }
+}
+export {
+  Gt as L,
+  kt as S,
+  Ot as T,
+  Bt as a,
+  Nt as g,
+  Et as u
+};