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

package/dist/transactions/utils/buildDetailedTransactions/index.es.js

@@ -0,0 +1,35 @@
+import { TransactionStatus as _ } from "../../../common/types/Transaction/index.es.js";
+import { CategoryGuids as m } from "../../../common/constants/Category/index.es.js";
+const y = (o, r, d, s = []) => {
+  const c = r.reduce((e, t) => ({ ...e, [t.guid]: t }), {}), g = d.reduce((e, t) => ({ ...e, [t.guid]: t }), {}), i = s.reduce((e, t) => {
+    const { transaction_guid: u, tag_guid: n } = t;
+    if (!e[u])
+      return {
+        ...e,
+        [u]: [n]
+      };
+    const a = [...e[u], n];
+    return {
+      ...e,
+      [u]: a
+    };
+  }, {});
+  return o.map((e) => {
+    const t = c[e.account_guid], u = e.category_guid ? g[e.category_guid] : null, n = i[e.guid] ?? [];
+    return {
+      ...e,
+      account: t?.user_name || "Unknown",
+      accountIsClosed: t?.is_closed,
+      accountIsHidden: t?.is_hidden,
+      category: u?.name || "Uncategorized",
+      isIncome: e.top_level_category_guid === m.INCOME,
+      isPending: e.feed_status === _.PENDING,
+      number: t?.account_number || "",
+      payee: e.description,
+      tags: n
+    };
+  });
+};
+export {
+  y as buildDetailedTransactions
+};

package/dist/transactions/utils/exportTransactionsToCSV/index.es.js

@@ -0,0 +1,47 @@
+import { fromUnixTime as c } from "date-fns/fromUnixTime";
+import { CategoryGuidToName as u } from "../../../common/constants/Category/index.es.js";
+import { formatDate as p, DATE_FORMATS_INTL as m } from "../../../common/constants/DateFormats/index.es.js";
+import { TransactionType as g } from "../../../common/types/Transaction/index.es.js";
+function f(n) {
+  return new Set(
+    n.filter((e) => e.parent_guid !== void 0).map((e) => e.parent_guid)
+  );
+}
+function l(n) {
+  return n.reduce((e, t) => (t.parent_guid && (e[t.parent_guid] || (e[t.parent_guid] = []), e[t.parent_guid].push(t)), e), {});
+}
+function E(n, e) {
+  const t = f(e), i = l(e), o = /* @__PURE__ */ new Set(), a = [];
+  for (const r of n)
+    t.has(r.guid) ? (i[r.guid] ?? []).slice().sort((s, d) => Math.abs(d.amount) - Math.abs(s.amount)).forEach((s) => {
+      o.has(s.guid) || (a.push(s), o.add(s.guid));
+    }) : o.has(r.guid) || (a.push(r), o.add(r.guid));
+  return a;
+}
+const j = (n, e) => {
+  const t = h(T(n, e)), i = encodeURIComponent(t), o = document.createElement("a");
+  o.href = `data:attachment/csv;charset=utf-8,${i}`, o.download = "transactions.csv", document.body.appendChild(o), o.click(), document.body.removeChild(o);
+}, T = (n, e) => n.map((t) => ({
+  Date: p(c(t.date), m.YEAR_MONTH_DAY),
+  Description: _(t),
+  "Original Description": t.feed_description,
+  Amount: `${t.amount}`,
+  Type: t.transaction_type === g.CREDIT ? "Credit" : "Debit",
+  "Parent Category": u[t.top_level_category_guid || ""],
+  Category: t.category,
+  Account: t.account,
+  Tags: C(t, e),
+  Memo: t.memo
+})), h = (n) => {
+  const e = Object.keys(n[0]).join(",").concat(`\r
+`), t = n.map((i) => Object.values(i).join(",")).join(`\r
+`);
+  return e + t;
+}, _ = (n) => {
+  let e = n.parent_guid ? "Split: " : "";
+  return e += n.is_hidden ? "(Excluded) " : "", e += n.description, e;
+}, C = (n, e) => n.tags.map((t) => e.filter((o) => o.guid === t)[0]?.name ?? "").join(" ");
+export {
+  j as exportTransactionsToCSV,
+  E as flattenTransactionsWithSplits
+};

package/dist/transactions/utils/sortAndFilterTransactions/index.es.js

@@ -0,0 +1,44 @@
+import { endOfToday as g } from "date-fns/endOfToday";
+import { format as h } from "date-fns/format";
+import { fromUnixTime as E } from "date-fns/fromUnixTime";
+import { getUnixTime as u } from "date-fns/getUnixTime";
+import { startOfMonth as D } from "date-fns/startOfMonth";
+import { startOfToday as M } from "date-fns/startOfToday";
+import { TABLE_CONST as N } from "../../../common/constants/Table/index.es.js";
+import { COLUMN_NAMES as _ } from "../../constants/TransactionsTable/index.es.js";
+import { formatDate as l, DATE_FORMATS_INTL as T, ORDINAL_DATE_FORMAT as S } from "../../../common/constants/DateFormats/index.es.js";
+const C = "uncategorized", H = (a, o, d, f, n, c) => {
+  const t = I(a, n, c), i = L(t, d, f);
+  return o.forEach((e) => {
+    const m = i.findIndex((s) => s.guid === e), p = c.filter((s) => s.parent_guid === e);
+    i.splice(m + 1, 0, ...p);
+  }), i;
+}, I = (a, o, d) => {
+  const {
+    accounts: f = [],
+    dateRange: n = { start: D(M()), end: g() },
+    custom: c = () => !0,
+    searchTerm: t = "",
+    showSplits: i = !1
+  } = a;
+  return d.filter((e) => i ? !e.has_been_split : !e.parent_guid).filter((e) => !!f.find((m) => m === e.account_guid)).filter((e) => e.date >= u(n.start) && e.date <= u(n.end)).filter(c).filter((e) => {
+    if (t === C && e.has_been_split)
+      return !1;
+    if (/^spl/i.test(t) && (e.has_been_split || e.parent_guid))
+      return !0;
+    const p = e.tags.some(
+      (A) => r(t, o.find((O) => O.guid === A)?.name)
+    ), s = E(e.date);
+    return r(t, e.payee) || r(t, e.feed_description) || r(t, e.category) || r(t, l(s, T.MONTH)) || r(t, l(s, T.DAY)) || r(t, l(s, T.FULL_MONTH_DAY)) || r(t, l(s, T.MONTH_DAY_YEAR)) || r(t, h(s, S)) || r(t, e.account) || r(t, `${e.amount}`) || r(t, e.memo) || p;
+  });
+}, L = (a, o, d) => [...a].sort((f, n) => {
+  const c = o, t = (f[c] || "") > (n[c] || "");
+  let i = t ? -1 : 1, e = t ? 1 : -1;
+  return (o === _.DATE || o === _.AMOUNT) && (i = t ? 1 : -1, e = t ? -1 : 1), d === N.ASC ? i : e;
+}), r = (a, o) => {
+  const d = a.toLowerCase().split(" "), f = o?.toString().toLowerCase() ?? "";
+  return d.every((n) => f.indexOf(n) > -1);
+};
+export {
+  H as sortAndFilterTransactions
+};

package/dist/trends/TrendsFullWidget/index.es.js

@@ -0,0 +1,157 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import s from "react";
+import { observer as q } from "mobx-react-lite";
+import { Icon as J } from "@mxenabled/mxui";
+import w from "@mui/material/Box";
+import h from "@mui/material/Stack";
+import R from "@mui/material/Button";
+import { addSeconds as Q } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as X } from "date-fns/differenceInCalendarMonths";
+import { getStackedLineChartData as Z } from "../utils/TrendsData/index.es.js";
+import { getTopLevelCategoryTotals as ee, isExpense as te, isIncome as oe } from "../utils/shared/index.es.js";
+import se from "../components/TrendsViewToggle/index.es.js";
+import ne from "../components/DateRangeText/index.es.js";
+import ae from "../components/TrendsTable/index.es.js";
+import re from "../components/TrendsDrawer/index.es.js";
+import { useEvent as ie, useAccountStore as ce, useCategoryStore as le, useTransactionStore as de, useTrendsStore as me, useGlobalUiStore as fe, useGlobalCopyStore as ge } from "../../common/context/hooks/index.es.js";
+import { StackedLineChart as ue } from "../../common/components/charts/StackedLineChart/index.es.js";
+import { useScreenSize as pe } from "../../common/hooks/useScreenSize/index.es.js";
+import Ce from "../../common/components/Loader/index.es.js";
+import he from "../../common/components/WidgetContainer/index.es.js";
+import { ANALYTICS_EVENTS as i } from "../../common/constants/Analytics/index.es.js";
+const Te = ({ onBackClick: y, sx: b }) => {
+  const { onEvent: a } = ie(), { isDesktop: v, isTablet: k, isMobile: m } = pe(), { visibleAccounts: f } = ce(), { loadMonthlyCategoryTotals: L, monthlyCategoryTotals: g, getCategoryName: T } = le(), { sortedTransactions: x } = de(), { selectedDateRange: t, setSelectedDateRange: I } = me(), { isCopyLoaded: H, isInitialized: u, selectedAccounts: S, setSelectedAccounts: N } = fe(), { trends: p } = ge(), [D, A] = s.useState(!1), [G, E] = s.useState(!1), [d, z] = s.useState("Chart"), [n, C] = s.useState(""), [O, V] = s.useState(window.innerHeight), M = O - (m ? 315 : 345);
+  s.useEffect(() => {
+    const e = () => V(window.innerHeight);
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), s.useEffect(() => {
+    N(f);
+  }, [f]), s.useEffect(() => {
+    u && L(
+      S,
+      t.start,
+      t.end
+    ).finally(() => {
+      A(!0);
+    });
+  }, [u, S, t]);
+  const _ = s.useMemo(() => {
+    if (!D) return { stackedDatasets: [], unstackedDatasets: [] };
+    const e = Z(
+      g,
+      t.start,
+      t.end
+    ), r = n.length ? e.filter(
+      (l) => l.top_level_category_guid === n || l.category_guid === n
+    ) : ee(e);
+    return {
+      stackedDatasets: r.filter(te),
+      unstackedDatasets: r.filter(oe)
+    };
+  }, [g, n, t]), W = (e, r) => {
+    z(r ?? d), a(i.TRENDS_CLICK_TOGGLE);
+  }, F = (e) => {
+    const r = Q(e?.[0], 1), l = e?.[1], Y = X(l, r);
+    I({ start: r, end: l }), a(i.TRENDS_CLICK_DATE, {
+      time_period: Y + "M"
+    });
+  }, K = () => {
+    a(i.TRENDS_CLICK_FILTER);
+  }, j = (e) => {
+    C(e);
+  }, $ = (e) => {
+    C(e), a(i.TRENDS_CLICK_LEGEND, { category: T(e) });
+  }, B = (e) => {
+    a(i.TRENDS_HOVER_LEGEND, { category: T(e) });
+  }, P = (e) => {
+    a(i.TRENDS_HOVER_AREA, { category: e });
+  }, U = (e) => {
+    a(i.TRENDS_HOVER_POINT, { category: e });
+  };
+  return !H || !u || !D ? /* @__PURE__ */ o(Ce, {}) : /* @__PURE__ */ c(
+    he,
+    {
+      accountOptions: f,
+      calendarActions: { onRangeChanged: F },
+      dateRange: t,
+      dateRangeVariant: "timeframebuttons",
+      onAccountsFilterClick: K,
+      onBackClick: y,
+      sx: b,
+      title: p.title,
+      children: [
+        /* @__PURE__ */ c(
+          h,
+          {
+            sx: {
+              // eslint-disable-next-line no-nested-ternary
+              px: v ? 48 : k ? 24 : 12
+            },
+            children: [
+              /* @__PURE__ */ c(
+                h,
+                {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  sx: { pb: m ? 12 : 24, pt: m ? 24 : 48 },
+                  children: [
+                    /* @__PURE__ */ o(
+                      ne,
+                      {
+                        selectedCategoryGuid: n,
+                        selectedDateRange: t
+                      }
+                    ),
+                    /* @__PURE__ */ o(se, { onTabChange: W, selectedTab: d })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ c(h, { alignItems: "center", flexDirection: "row", width: "100%", children: [
+                /* @__PURE__ */ o(w, { flexGrow: 1, children: n && /* @__PURE__ */ c(R, { onClick: () => C(""), sx: { p: 0, pr: 5 }, children: [
+                  /* @__PURE__ */ o(J, { name: "arrow_back" }),
+                  p.all_categories
+                ] }) }),
+                /* @__PURE__ */ o(R, { onClick: () => E(!0), sx: { px: 5 }, children: `${p.view_transactions} (${x.length})` })
+              ] }),
+              /* @__PURE__ */ c(w, { children: [
+                d === "Chart" && /* @__PURE__ */ o(
+                  ue,
+                  {
+                    availableHeight: M,
+                    onClickLegend: $,
+                    onHoverArea: P,
+                    onHoverLegend: B,
+                    onHoverPoint: U,
+                    stackedDatasets: _.stackedDatasets,
+                    unstackedDatasets: _.unstackedDatasets
+                  }
+                ),
+                d === "Table" && /* @__PURE__ */ o(
+                  ae,
+                  {
+                    monthlyCategoryTotals: g,
+                    onClickRow: j,
+                    selectedCategory: n,
+                    selectedDateRange: t
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          re,
+          {
+            categoryGuid: n,
+            dateRange: t,
+            isOpen: G,
+            onClose: () => E(!1)
+          }
+        )
+      ]
+    }
+  );
+}, Fe = q(Te);
+export {
+  Fe as default
+};

package/dist/trends/TrendsMicroWidget/index.es.js

@@ -0,0 +1,86 @@
+import { jsx as t, jsxs as A } from "react/jsx-runtime";
+import l from "react";
+import I from "@mui/material/Stack";
+import { subMonths as L } from "date-fns";
+import { observer as R } from "mobx-react-lite";
+import { TrendsMicroSpendingIncomeBox as u } from "../components/TrendsMicroSpendingIncomeBox/index.es.js";
+import { calculateRelativeChange as h } from "../utils/shared/index.es.js";
+import { getSpendingTotals as x, getIncomeTotals as v } from "../utils/SpendingData/index.es.js";
+import { ZeroStateMicroWidget as N } from "../ZeroStateMicroWidget/index.es.js";
+import { useAccountStore as w, useEvent as W, useCategoryStore as G, useGlobalCopyStore as P, useGlobalUiStore as k } from "../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as m } from "../../common/constants/Analytics/index.es.js";
+import j from "../../common/components/Loader/index.es.js";
+import z from "../../common/components/MicroWidgetContainer/index.es.js";
+const $ = R(({ onCtaClick: f }) => {
+  const { visibleAccounts: o } = w(), { onEvent: d } = W(), { monthlyCategoryTotals: a, loadMonthlyCategoryTotals: S, monthlyTotalsLoaded: T } = G(), n = {
+    start: L(/* @__PURE__ */ new Date(), 1),
+    end: /* @__PURE__ */ new Date()
+  }, { trends: e } = P(), { selectedAccounts: p, setSelectedAccounts: _, isInitialized: r } = k();
+  l.useEffect(() => {
+    _(o);
+  }, [o]), l.useEffect(() => {
+    r && S(p, n.start).then(() => {
+      d(m.TRENDS_LOAD_WIDGET, {
+        state: o?.length ? "default" : "zeroState"
+      });
+    });
+  }, [r, p]);
+  const { spendingData: C, incomeData: b } = l.useMemo(
+    () => ({
+      spendingData: x(a, n),
+      incomeData: v(a, n)
+    }),
+    [a, n]
+  ), [g, s] = C, [y, c] = b, D = h(s.y, g.y), E = h(c.y, y.y), i = r && !o?.length, M = () => {
+    d(
+      i ? m.TRENDS_CLICK_GET_STARTED : m.TRENDS_CLICK_VIEW_MORE
+    ), f();
+  };
+  return !T || !r ? /* @__PURE__ */ t(j, {}) : /* @__PURE__ */ t(
+    z,
+    {
+      className: "mx-trends-microwidget",
+      ctaLabel: e.micro_primary_cta_label,
+      onCTAClick: M,
+      subHeader: i ? void 0 : e.micro_subheader,
+      title: e.title,
+      children: i ? /* @__PURE__ */ t(N, {}) : /* @__PURE__ */ A(
+        I,
+        {
+          sx: {
+            alignItems: "stretch",
+            flexDirection: "row",
+            gap: 12
+          },
+          children: [
+            /* @__PURE__ */ t(
+              u,
+              {
+                percentage: D,
+                secondaryLabel: e.micro_secondary_label,
+                shouldDisplayPercentage: s.y !== 0 && g.y !== 0,
+                title: e.spending_label,
+                totalAmount: s.y,
+                transactionType: "spending"
+              }
+            ),
+            /* @__PURE__ */ t(
+              u,
+              {
+                percentage: E,
+                secondaryLabel: e.micro_secondary_label,
+                shouldDisplayPercentage: c.y !== 0 && y.y !== 0,
+                title: e.income_label,
+                totalAmount: c.y,
+                transactionType: "income"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  $ as TrendsMicroWidget
+};

package/dist/trends/TrendsMiniWidget/index.es.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import s from "react";
+import { observer as f } from "mobx-react-lite";
+import p from "../components/SpendingChart/index.es.js";
+import { useAccountStore as y, useCategoryStore as b, useGlobalStore as C, useGlobalCopyStore as S, useGlobalUiStore as g } from "../../common/context/hooks/index.es.js";
+import n from "../../common/components/Loader/index.es.js";
+import T from "../../common/components/MiniWidgetContainer/index.es.js";
+const h = ({ onPrimaryCtaClick: a, sx: c }) => {
+  const { visibleAccounts: r } = y(), { loadMonthlyCategoryTotals: l, monthlyTotalsLoaded: d } = b(), { isInitialized: e } = C(), { trends: o } = S(), { isCopyLoaded: m, selectedAccounts: i, setSelectedAccounts: u } = g();
+  return s.useEffect(() => {
+    u(r);
+  }, [r]), s.useEffect(() => {
+    e && l(i).finally();
+  }, [e, i]), !m || !e ? /* @__PURE__ */ t(n, {}) : /* @__PURE__ */ t(
+    T,
+    {
+      onPrimaryCtaClick: a,
+      primaryCtaLabel: o.primary_cta,
+      subTitle: o.sub_title,
+      sx: c,
+      title: o.mini_title,
+      children: d ? /* @__PURE__ */ t(p, {}) : /* @__PURE__ */ t(n, {})
+    }
+  );
+}, x = f(h);
+export {
+  x as default
+};

package/dist/trends/TrendsWidget/index.es.js

@@ -0,0 +1,173 @@
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { observer as X } from "mobx-react-lite";
+import r from "react";
+import { addSeconds as Z } from "date-fns/addSeconds";
+import { differenceInCalendarMonths as ee } from "date-fns/differenceInCalendarMonths";
+import D from "@mui/material/Box";
+import l from "@mui/material/Stack";
+import te from "@mui/material/Button";
+import { useTheme as oe } from "@mui/material/styles";
+import { Icon as ne } from "@mxenabled/mxui";
+import re from "../components/DateRangeText/index.es.js";
+import se from "../components/TrendsViewToggle/index.es.js";
+import ie from "../components/TrendsTable/index.es.js";
+import ae from "../components/CategoriesList/index.es.js";
+import ce from "../components/TrendsInsights/index.es.js";
+import le from "../components/CategoryDetailDrawer/index.es.js";
+import de from "../components/TrendsChartTotals/index.es.js";
+import { getCategoryColor as me } from "../../categories/util/CategoryUtil/index.es.js";
+import { useInsightsEnabled as ge } from "../../common/hooks/useInsightsEnabled/index.es.js";
+import { useEvent as ue, useAccountStore as fe, useCategoryStore as pe, useTransactionStore as he, useTrendsStore as Ce, useGlobalUiStore as ye, useGlobalCopyStore as Te } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as Se } from "../../common/hooks/useScreenSize/index.es.js";
+import _e from "../../common/components/Loader/index.es.js";
+import { EmptyState as be } from "../../common/components/EmptyState/index.es.js";
+import we from "../../common/components/WidgetContainer/index.es.js";
+import { ANALYTICS_EVENTS as C } from "../../common/constants/Analytics/index.es.js";
+const De = ({ onBackClick: E, onInsightCardClick: x, sx: L }) => {
+  const { onEvent: u } = ue(), I = oe(), { isLargeDesktop: v, isDesktop: R, isMobile: d } = Se(), { visibleAccounts: f } = fe(), { loadMonthlyCategoryTotals: A, monthlyCategoryTotals: i } = pe(), { setFilter: k, sortedTransactions: H } = he(), { selectedDateRange: n, setSelectedCategoryData: y, setSelectedDateRange: z } = Ce(), {
+    isCopyLoaded: G,
+    isInitialized: p,
+    selectedAccounts: T,
+    selectedAccountGuids: N,
+    setSelectedAccounts: W
+  } = ye(), { trends: a } = Te(), S = ge(), m = R || v, [B, F] = r.useState(!1), [g, M] = r.useState("Chart"), [h, _] = r.useState(""), [V, b] = r.useState(!1), [w, j] = r.useState(window.innerHeight), K = w - 208, O = w - (S ? 494 : 266);
+  r.useEffect(() => {
+    const e = () => j(window.innerHeight);
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), r.useEffect(() => {
+    W(f);
+  }, [f]), r.useEffect(() => {
+    p && A(
+      T,
+      n.start,
+      n.end
+    ).finally(() => {
+      F(!0);
+    });
+  }, [p, T, n]), r.useEffect(() => {
+    if (i.length !== 0) {
+      const e = {
+        accounts: N,
+        dateRange: { start: n.start, end: n.end }
+      };
+      k({
+        ...e,
+        custom: (t) => !!i.find(
+          (c) => c.top_level_category_guid === t.top_level_category_guid || c.category_guid === t.category_guid
+        )
+      });
+    }
+  }, [i]);
+  const U = (e) => {
+    const t = e;
+    t.color = me(t.guid, I), t.chartLabel = e.name === "Income" ? a.monthly_income : a.monthly_spending, y(t), b(!0);
+  }, Y = () => {
+    y(null), b(!1);
+  }, $ = (e, t) => {
+    M(t ?? g), u(C.TRENDS_CLICK_TOGGLE);
+  }, q = (e) => {
+    const t = Z(e?.[0], 1), c = e?.[1], Q = ee(c, t);
+    z({ start: t, end: c }), u(C.TRENDS_CLICK_DATE, {
+      time_period: Q + "M"
+    });
+  }, J = () => {
+    u(C.TRENDS_CLICK_FILTER);
+  }, P = (e) => {
+    _(e);
+  };
+  return !G || !p || !B ? /* @__PURE__ */ o(_e, {}) : i.length === 0 ? /* @__PURE__ */ o(
+    be,
+    {
+      header: "",
+      icon: "",
+      onClick: () => {
+      },
+      primaryButton: a.empty_state_primary,
+      subText: a.empty_state_sub_text
+    }
+  ) : /* @__PURE__ */ s(
+    we,
+    {
+      accountOptions: f,
+      calendarActions: { onRangeChanged: q },
+      dateRange: n,
+      dateRangeVariant: d ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: J,
+      onBackClick: E,
+      sx: L,
+      title: a.title,
+      children: [
+        /* @__PURE__ */ s(
+          l,
+          {
+            sx: {
+              px: d ? 0 : 48
+            },
+            children: [
+              /* @__PURE__ */ s(
+                l,
+                {
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
+                  children: [
+                    /* @__PURE__ */ o(
+                      re,
+                      {
+                        selectedCategoryGuid: h,
+                        selectedDateRange: n
+                      }
+                    ),
+                    /* @__PURE__ */ o(se, { onTabChange: $, selectedTab: g })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ o(l, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ o(D, { flexGrow: 1, children: h && /* @__PURE__ */ s(te, { onClick: () => _(""), sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ o(ne, { name: "arrow_back" }),
+                a.all_categories
+              ] }) }) }),
+              /* @__PURE__ */ s(l, { flexDirection: m ? "row" : "column", gap: m ? 48 : 16, children: [
+                /* @__PURE__ */ s(D, { sx: { width: m ? "68%" : "100%" }, children: [
+                  g === "Chart" && /* @__PURE__ */ o(
+                    de,
+                    {
+                      availableHeight: K,
+                      minHeight: 450,
+                      selectedDateRange: n,
+                      totals: i
+                    }
+                  ),
+                  g === "Table" && /* @__PURE__ */ o(
+                    ie,
+                    {
+                      height: "unset",
+                      monthlyCategoryTotals: i,
+                      onClickRow: P,
+                      selectedCategory: h,
+                      selectedDateRange: n
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ s(l, { gap: 16, sx: { width: m ? "32%" : "100%" }, children: [
+                  S && /* @__PURE__ */ o(ce, { onInsightCardClick: x }),
+                  /* @__PURE__ */ o(
+                    ae,
+                    {
+                      availableHeight: O,
+                      onListItemClick: U,
+                      transactions: H
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        V && /* @__PURE__ */ o(le, { onClose: Y })
+      ]
+    }
+  );
+}, Pe = X(De);
+export {
+  Pe as default
+};

package/dist/trends/ZeroStateMicroWidget/index.es.js

@@ -0,0 +1,19 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import e from "@mui/material/Stack";
+import { MultilineChart as n } from "@mxenabled/mx-icons";
+import { P as i } from "@mxenabled/mxui";
+import { observer as s } from "mobx-react-lite";
+import { useGlobalCopyStore as a } from "../../common/context/hooks/index.es.js";
+const h = s(() => {
+  const { trends: r } = a();
+  return /* @__PURE__ */ o(e, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ t(n, { size: 32 }),
+    /* @__PURE__ */ o(e, { children: [
+      /* @__PURE__ */ t(i, { fontWeight: 600, variant: "body1", children: r.zero_state_content_header }),
+      /* @__PURE__ */ t(i, { color: "text.secondary", variant: "subtitle2", children: r.zero_state_content_description })
+    ] })
+  ] });
+});
+export {
+  h as ZeroStateMicroWidget
+};

package/dist/trends/components/CategoriesList/index.es.js

@@ -0,0 +1,62 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { observer as v } from "mobx-react-lite";
+import a from "react";
+import D from "@mui/material/Collapse";
+import T from "@mui/material/Divider";
+import w from "@mui/material/List";
+import f from "@mui/material/Stack";
+import { H3 as B } from "@mxenabled/mxui";
+import { CollapseExpandListItem as V } from "../../../common/components/listitems/CollapseExpandListItem/index.es.js";
+import z from "../CategoriesListItem/index.es.js";
+import { useTrendsStore as F, useGlobalCopyStore as G } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as R } from "../../../common/hooks/useScreenSize/index.es.js";
+const Y = v(
+  ({ availableHeight: l = 0, onListItemClick: h, transactions: L }) => {
+    const { visibleListItems: s, collapsedListItems: r, setVisibleListLength: x } = F(), { isLargeDesktop: u, isDesktop: C } = R(), { trends: I } = G(), [n, c] = a.useState(!1), y = C || u;
+    a.useEffect(() => {
+      const t = Math.floor(l / 64) - 1, e = s.length + r.length;
+      t !== s.length && (x(y ? Math.max(t, 5) : 5), c(t >= e));
+    }, [l]);
+    const b = (t) => L.filter((e) => e.category_guid === t), m = ({ guid: t, name: e, amount: p }, d, S) => {
+      const E = s.length + (n ? r.length : 0), j = (S === r ? s.length + d : d) === E - 1, i = b(t), M = {
+        guid: t,
+        name: e,
+        amount: p,
+        transactions: i
+      };
+      return /* @__PURE__ */ g(a.Fragment, { children: [
+        /* @__PURE__ */ o(
+          z,
+          {
+            amount: p,
+            guid: t,
+            name: e,
+            onClick: i.length > 0 ? () => h(M) : void 0,
+            transactions: i
+          }
+        ),
+        /* @__PURE__ */ o(T, { sx: { ml: j ? 24 : 68 } })
+      ] }, t);
+    }, k = () => {
+      c(!n);
+    };
+    return /* @__PURE__ */ o(f, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ g(w, { children: [
+      /* @__PURE__ */ o(f, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ o(B, { children: I.categories }) }),
+      s.map((t, e) => m(t, e, s)),
+      /* @__PURE__ */ o(
+        D,
+        {
+          in: n,
+          sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
+          children: r.map(
+            (t, e) => m(t, e, r)
+          )
+        }
+      ),
+      r.length > 0 && /* @__PURE__ */ o(V, { isExpanded: n, onClick: k })
+    ] }) });
+  }
+);
+export {
+  Y as default
+};