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

package/dist/transactions/components/shared/TransactionDetails/actions/TagsAction/index.es.js

@@ -0,0 +1,75 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import a from "react";
+import { observer as x } from "mobx-react-lite";
+import v from "@mui/material/Avatar";
+import L from "@mui/material/ListItem";
+import b from "@mui/material/ListItemAvatar";
+import N from "@mui/material/ListItemButton";
+import E from "@mui/material/ListItemIcon";
+import O from "@mui/material/ListItemText";
+import { Icon as f, IconWeight as T, Text as k } from "@mxenabled/mxui";
+import { useTransactionsUiStore as w } from "../../../../../context/hooks/index.es.js";
+import { ON_CLICK_EVENTS as D } from "../../../../../constants/OnClickEvents/index.es.js";
+import G from "../../../../tagmanager/TagManager/index.es.js";
+import { useEvent as K, useTransactionStore as M, useGlobalCopyStore as P } from "../../../../../../common/context/hooks/index.es.js";
+import R from "../../../../../../common/components/drawer/Drawer/index.es.js";
+import { ANALYTICS_EVENTS as $ } from "../../../../../../common/constants/Analytics/index.es.js";
+const j = ({ transaction: e }) => {
+  const { onEvent: l } = K(), { tags: g, updateTaggings: h, updateTransaction: _ } = M(), { common: m, transactions: c } = P(), { updateManualTransaction: C } = w(), [d, s] = a.useState(!1), [o, p] = a.useState(e.tags);
+  a.useEffect(() => {
+    p(e.tags);
+  }, [d, e]);
+  const S = (i) => {
+    const r = [...o], n = o.indexOf(i);
+    n >= 0 ? r.splice(n, 1) : r.push(i), p(r);
+  }, I = async () => {
+    if (e.is_manual && !e.guid) {
+      C({ ...e, tags: o }), s(!1);
+      return;
+    }
+    await h(o, e.guid), await _({ ...e, tags: o }), l($.TRANSACTION_DETAILS_CLICK_TAGS, { transaction_guid: e.guid }), s(!1);
+  }, y = a.useMemo(
+    () => e.tags.map(
+      (i, r, n) => `${g.find((A) => A.guid === i)?.name}${r < n.length - 1 ? " / " : ""}`
+    ),
+    [g, e]
+  );
+  return /* @__PURE__ */ u(a.Fragment, { children: [
+    /* @__PURE__ */ t(L, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ u(
+      N,
+      {
+        onClick: () => {
+          l(D.ON_TRANSACTION_TAGS_CLICK), s(!0);
+        },
+        children: [
+          /* @__PURE__ */ t(b, { children: /* @__PURE__ */ t(v, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ t(f, { name: "local_offer", sx: { color: "text.primary" }, weight: T.Dark }) }) }),
+          /* @__PURE__ */ t(
+            O,
+            {
+              primary: c.tags_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ t(k, { bold: !0, variant: "Body", children: e.tags?.length > 0 ? y : c.tags_desc })
+            }
+          ),
+          /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(f, { name: "chevron_right", weight: T.Dark }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      R,
+      {
+        ariaLabelClose: m.close_aria,
+        isOpen: d,
+        onClose: () => s(!1),
+        onPrimaryAction: I,
+        primaryText: m.save_button,
+        secondaryText: m.cancel_button,
+        title: c.tags_title,
+        children: /* @__PURE__ */ t(G, { onTagChecked: S, selectedTags: o })
+      }
+    )
+  ] });
+}, re = x(j);
+export {
+  re as default
+};

package/dist/transactions/components/shared/TransactionDetails/index.es.js

@@ -0,0 +1,79 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import d from "react";
+import { observer as a } from "mobx-react-lite";
+import b from "@mui/material/Box";
+import f from "@mui/material/Divider";
+import s from "@mui/material/List";
+import p from "@mui/material/Paper";
+import m from "@mui/material/Stack";
+import { MerchantLogo as _, H1 as x, Text as n } from "@mxenabled/mxui";
+import { TopActions as t, BottomActions as u, DEFAULT_BOTTOM_ACTIONS as S, DEFAULT_TOP_ACTIONS as y } from "../../../constants/Actions/index.es.js";
+import D from "../transactiondetails/Description/index.es.js";
+import v from "../transactiondetails/FlagTransaction/index.es.js";
+import L from "../transactiondetails/actions/CategoryAction/index.es.js";
+import C from "../transactiondetails/actions/DateAction/index.es.js";
+import E from "../transactiondetails/actions/MemoAction/index.es.js";
+import I from "../transactiondetails/actions/TagsAction/index.es.js";
+import N from "../transactiondetails/actions/SplitAction/index.es.js";
+import w from "../transactiondetails/actions/HideAction/index.es.js";
+import F from "../transactiondetails/actions/DeleteLogoAction/index.es.js";
+import O from "../transactiondetails/actions/DeleteAction/index.es.js";
+import { useGlobalUiStore as M, useEvent as B } from "../../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as j } from "../../../../common/constants/Analytics/index.es.js";
+import G from "../../../../common/components/Loader/index.es.js";
+import { formatCurrency as H } from "../../../../common/utils/NumberFormatting/index.es.js";
+const R = ({
+  bottomActions: h = S,
+  topActions: c = y,
+  transaction: e
+}) => {
+  const { isCopyLoaded: g } = M(), T = e?.number && e.number.length > 4, { onEvent: A } = B();
+  return d.useEffect(
+    () => A(j.TRANSACTION_DETAILS_VIEW, { transaction_guid: e.guid }),
+    []
+  ), g ? /* @__PURE__ */ r(b, { className: "mx-txn-transaction-details", width: "100%", children: e && /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ i(m, { gap: 12, p: 24, children: [
+      /* @__PURE__ */ r(p, { elevation: 2, sx: { width: 64 }, children: /* @__PURE__ */ r(
+        _,
+        {
+          categoryGuid: e.top_level_category_guid || "",
+          merchantGuid: e.merchant_guid || "",
+          size: 64
+        }
+      ) }),
+      /* @__PURE__ */ r(D, { transaction: e }),
+      /* @__PURE__ */ i(m, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ i(x, { color: e.isIncome ? "success.main" : "text.primary", children: [
+          e.isIncome ? "+" : "",
+          H(e.amount, "0,0.00")
+        ] }),
+        /* @__PURE__ */ r(v, { transaction: e })
+      ] }),
+      /* @__PURE__ */ i(m, { bgcolor: "background.highlight", borderRadius: "12px", gap: 4, p: 8, children: [
+        /* @__PURE__ */ r(n, { bold: !0, children: `${e.account}
+                ${T ? e.number : "•".repeat(4).concat(e.number ?? "")}` }),
+        /* @__PURE__ */ r(n, { bold: !0, color: "secondary", variant: "Tiny", children: e.feed_description })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(p, { square: !0, sx: { boxShadow: "none" }, children: /* @__PURE__ */ r(s, { children: c.map((o, l) => /* @__PURE__ */ i(d.Fragment, { children: [
+      o === t.Category && /* @__PURE__ */ r(L, { transaction: e }),
+      o === t.Date && /* @__PURE__ */ r(C, { transaction: e }),
+      o === t.Memo && /* @__PURE__ */ r(E, { transaction: e }),
+      o === t.Tags && /* @__PURE__ */ r(I, { transaction: e }),
+      /* @__PURE__ */ r(f, { variant: l < c.length - 1 ? "inset" : "fullWidth" })
+    ] }, o)) }) }),
+    /* @__PURE__ */ r(n, { bold: !0, mb: 8, ml: 26, mt: 16, variant: "Body", children: "Actions" }),
+    /* @__PURE__ */ r(p, { square: !0, sx: { boxShadow: "none" }, children: /* @__PURE__ */ i(s, { children: [
+      h.map((o, l) => /* @__PURE__ */ i(d.Fragment, { children: [
+        o === u.SplitTransaction && /* @__PURE__ */ r(N, { transaction: e }),
+        o === u.HideTransaction && /* @__PURE__ */ r(w, { transaction: e }),
+        o === u.MerchantLogo && /* @__PURE__ */ r(F, { transaction: e }),
+        /* @__PURE__ */ r(f, { variant: l < h.length - 1 ? "inset" : "fullWidth" })
+      ] }, o)),
+      e.is_manual && !e.parent_guid && !e.has_been_split && /* @__PURE__ */ r(O, { transaction: e })
+    ] }) })
+  ] }) }) : /* @__PURE__ */ r(G, {});
+}, ue = a(R);
+export {
+  ue as default
+};

package/dist/transactions/components/shared/TransactionList/TransactionRow/index.es.js

@@ -0,0 +1,84 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import p from "react";
+import { observer as g } from "mobx-react-lite";
+import h from "@mui/material/ListItemAvatar";
+import y from "@mui/material/ListItemText";
+import s from "@mui/material/Stack";
+import { MerchantLogo as T, Icon as a, Text as t } from "@mxenabled/mxui";
+import { postInsightOnTransaction as b } from "../../../../../common/utils/PostMessage/index.es.js";
+import { ON_CLICK_EVENTS as I } from "../../../../constants/OnClickEvents/index.es.js";
+import { useTransactionsUiStore as _ } from "../../../../context/hooks/index.es.js";
+import { ListItemWrapper as v } from "../../../../../common/components/ListItemWrapper/index.es.js";
+import { useTransactionStore as x, useGlobalCopyStore as C } from "../../../../../common/context/hooks/index.es.js";
+import { TransactionType as S } from "../../../../../common/types/Transaction/index.es.js";
+import { formatCurrency as w } from "../../../../../common/utils/NumberFormatting/index.es.js";
+const L = ({ transaction: e, onClick: d }) => {
+  const { associatedBeats: c } = x(), { expandedSplits: u } = _(), { transactions: l } = C(), { showInsights: f } = _(), m = e.transaction_type === S.CREDIT, n = p.useMemo(() => c.find((o) => o.associated_transaction_guid === e.guid), [c, e]);
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ i(
+      v,
+      {
+        clickEventName: I.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: d ? () => d(e.guid) : void 0,
+        children: [
+          /* @__PURE__ */ r(h, { children: e.parent_guid && u.includes(e.parent_guid) ? /* @__PURE__ */ r(p.Fragment, {}) : /* @__PURE__ */ r(
+            T,
+            {
+              categoryGuid: e.top_level_category_guid || "",
+              merchantGuid: e.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ r(
+            y,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ i(s, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ i(s, { alignItems: "center", direction: "row", gap: 4, children: [
+                  e.is_flagged && /* @__PURE__ */ r(a, { fill: !0, name: "flag", size: 16, sx: { color: "warning.dark" } }),
+                  e.is_hidden && /* @__PURE__ */ r(a, { name: "visibility_off", size: 16 }),
+                  e.has_been_split && /* @__PURE__ */ r(a, { name: "call_split", size: 16 }),
+                  /* @__PURE__ */ r(t, { variant: "XSmall", children: e.has_been_split ? l.split_transaction_category_label : e.category })
+                ] }),
+                n && f && /* @__PURE__ */ r(
+                  t,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (o) => {
+                      o.stopPropagation(), o.preventDefault(), b(n.guid);
+                    },
+                    variant: "XSmall",
+                    children: n.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ i(s, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ i(t, { bold: !0, variant: "Body", children: [
+                  e.is_hidden && l.hide_trnx_cancel_hidden_note,
+                  e.payee || e.description || e.feed_description
+                ] }),
+                /* @__PURE__ */ i(
+                  t,
+                  {
+                    bold: !0,
+                    color: m ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "Body",
+                    children: [
+                      m ? "+" : "",
+                      w(e.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, F = g(L);
+export {
+  F as default
+};

package/dist/transactions/components/shared/TransactionList/ZeroState/index.es.js

@@ -0,0 +1,17 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { observer as c } from "mobx-react-lite";
+import i from "@mui/icons-material/ReceiptOutlined";
+import l from "@mui/material/Stack";
+import { useTokens as m, Text as e } from "@mxenabled/mxui";
+import { useGlobalCopyStore as p } from "../../../../../common/context/hooks/index.es.js";
+const S = ({ showIcon: a = !0, showSubtitle: n = !0 }) => {
+  const t = m(), { transactions: r } = p();
+  return /* @__PURE__ */ s(l, { alignItems: "center", gap: t.Spacing.Small, height: "auto", mt: t.Spacing.Large, children: [
+    a && /* @__PURE__ */ o(i, { color: "secondary", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ o(e, { bold: !0, color: "secondary", variant: "Small", children: r.zero_state_no_transactions }),
+    n && /* @__PURE__ */ o(e, { color: "secondary", variant: "XSmall", children: r.zero_state_there_are_no_transactions })
+  ] });
+}, x = c(S);
+export {
+  x as default
+};

package/dist/transactions/components/shared/TransactionList/index.es.js

@@ -0,0 +1,82 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import n from "react";
+import { observer as z } from "mobx-react-lite";
+import { useVirtualizer as N } from "@tanstack/react-virtual";
+import m from "@mui/material/Box";
+import O from "@mui/material/Divider";
+import H from "@mui/material/List";
+import { useTransactionsUiStore as k } from "../../../context/hooks/index.es.js";
+import w from "../../../../common/components/SubheaderRow/index.es.js";
+import U from "../transactionlist/TransactionRow/index.es.js";
+import W from "../transactionlist/ZeroState/index.es.js";
+import { shouldShowDate as h, hasInsetBorder as j } from "../../../utils/Transactions/index.es.js";
+import { fromUnixToDayOfWeekAndDate as B } from "../../../../common/utils/DateUtil/index.es.js";
+import { useTransactionStore as G, useEvent as Y } from "../../../../common/context/hooks/index.es.js";
+import $ from "../../../../common/components/Loader/index.es.js";
+import { ANALYTICS_EVENTS as y } from "../../../../common/constants/Analytics/index.es.js";
+const g = 65, T = 34, K = ({
+  bgcolor: S,
+  height: x = "calc(100dvh - 36px)",
+  loader: E = /* @__PURE__ */ r($, { label: "Loading", size: 40 }),
+  onClick: _,
+  showInsights: f = !1,
+  showLoader: a = !1,
+  showHiddenTransactions: u = !1,
+  width: I = "100%",
+  zeroState: v = /* @__PURE__ */ r(W, {})
+}) => {
+  const { isLoading: c, sortedTransactions: l } = G(), e = n.useMemo(() => u ? l : l.filter((t) => !t.is_hidden), [l, u]), { clearExpandedSplits: A, setShowInsights: C, toggleSplit: R } = k(), { onEvent: D } = Y(), L = (t) => {
+    const o = e.find((s) => s.guid === t);
+    if (o?.has_been_split) {
+      R(o.guid);
+      return;
+    }
+    D(y.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: o?.account_guid,
+      transaction_guid: t
+    }), _?.(t);
+  }, d = n.useRef(null), i = N({
+    count: e.length,
+    getScrollElement: () => d.current,
+    estimateSize: (t) => g + (h(t, e) ? T : 0),
+    overscan: 5
+  });
+  return n.useEffect(() => i.measure(), [e]), n.useEffect(() => C(f), [f]), n.useEffect(() => () => A(), []), /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(m, { height: x, overflow: "auto", ref: d, width: I, children: /* @__PURE__ */ p(
+    m,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        i.getVirtualItems().length === 0 ? "auto" : i.getTotalSize()
+      ),
+      position: "relative",
+      width: "100%",
+      children: [
+        (c || a) && E,
+        !c && !a && i.getVirtualItems().length === 0 && v,
+        !c && !a && i.getVirtualItems().length > 0 && i.getVirtualItems().map((t) => {
+          const o = e[t.index], s = h(t.index, e), V = j(t.index, e), b = g + (s ? T : 0);
+          return /* @__PURE__ */ p(
+            m,
+            {
+              sx: {
+                height: b,
+                position: "absolute",
+                transform: `translateY(${t.start}px)`,
+                width: "100%"
+              },
+              children: [
+                s && /* @__PURE__ */ r(w, { bgcolor: S, children: B(o.date) }),
+                /* @__PURE__ */ r(U, { onClick: L, transaction: o }),
+                /* @__PURE__ */ r(O, { sx: { ml: V ? 24 : 0 } })
+              ]
+            },
+            o.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, ct = z(K);
+export {
+  ct as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/AccountCell/index.es.js

@@ -0,0 +1,9 @@
+import { jsxs as t } from "react/jsx-runtime";
+import { Text as e } from "@mxenabled/mxui";
+const c = (o) => /* @__PURE__ */ t(e, { tabIndex: o.tabIndex, variant: "Small", children: [
+  `${o.row.account}`,
+  o.row.number && ` | ${o.row.number}`
+] });
+export {
+  c as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/AmountCell/index.es.js

@@ -0,0 +1,20 @@
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import d from "@mui/material/Stack";
+import { Text as n } from "@mxenabled/mxui";
+import { useTransactionsUiStore as f } from "../../../../../context/hooks/index.es.js";
+import { useTransactionStore as u } from "../../../../../../common/context/hooks/index.es.js";
+import { TransactionType as p } from "../../../../../../common/types/Transaction/index.es.js";
+import { formatCurrency as x } from "../../../../../../common/utils/NumberFormatting/index.es.js";
+const C = (t) => {
+  const { associatedBeats: s } = u(), { showInsights: a } = f(), { amount: e, transaction_type: c } = t.row, o = s.find((m) => m.associated_transaction_guid === t.row.guid), r = c === p.CREDIT;
+  return /* @__PURE__ */ i(d, { alignItems: "flex-end", tabIndex: t.tabIndex, children: [
+    /* @__PURE__ */ i(n, { color: r ? "success.main" : "text.primary", variant: "Small", children: [
+      r ? "+" : "",
+      x(e, "0,0.00")
+    ] }),
+    o && a && /* @__PURE__ */ l(n, { bold: !0, color: "primary.light", variant: "XSmall", children: o.short_title })
+  ] });
+};
+export {
+  C as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/CategoryCell/index.es.js

@@ -0,0 +1,29 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import a from "react";
+import { observer as l } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import { Icon as r, Text as m } from "@mxenabled/mxui";
+import { useGlobalCopyStore as p } from "../../../../../../common/context/hooks/index.es.js";
+const _ = (e) => {
+  const { transactions: s } = p(), [n, o] = a.useState(!1);
+  return /* @__PURE__ */ i(
+    c,
+    {
+      alignItems: "center",
+      direction: "row",
+      gap: 8,
+      height: "100%",
+      onMouseEnter: () => o(!0),
+      onMouseLeave: () => o(!1),
+      width: "100%",
+      children: [
+        e.row.has_been_split && /* @__PURE__ */ t(r, { name: "call_split", size: 16 }),
+        /* @__PURE__ */ t(m, { tabIndex: e.tabIndex, variant: "Small", children: e.row.has_been_split ? s.split_transaction_category_label : e.row.category }),
+        !e.row.has_been_split && n && /* @__PURE__ */ t(r, { name: "edit", sx: { color: "action.active" } })
+      ]
+    }
+  );
+}, x = l(_);
+export {
+  x as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/DateCell/index.es.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { fromUnixTime as o } from "date-fns/fromUnixTime";
+import { Text as e } from "@mxenabled/mxui";
+import { formatDate as m, DATE_FORMATS_INTL as a } from "../../../../../../common/constants/DateFormats/index.es.js";
+const x = (t) => /* @__PURE__ */ r(e, { tabIndex: t.tabIndex, variant: "Small", children: m(o(t.row.date), a.MONTH_DAY) });
+export {
+  x as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/FlagCell/index.es.js

@@ -0,0 +1,38 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+import { observer as f } from "mobx-react-lite";
+import { useTheme as g } from "@mui/material/styles";
+import { Icon as s } from "@mxenabled/mxui";
+import { useGlobalCopyStore as h } from "../../../../../../common/context/hooks/index.es.js";
+const p = (e) => {
+  const r = g(), { transactions: t } = h(), { is_flagged: l, is_hidden: o, has_been_viewed: n, parent_guid: a } = e.row, d = !n && !!!a;
+  return /* @__PURE__ */ c(
+    m,
+    {
+      "aria-label": o ? t.is_hidden : t.is_flagged,
+      tabIndex: e.tabIndex,
+      children: [
+        l && /* @__PURE__ */ i(s, { fill: !0, name: "flag", size: 16, sx: { color: "warning.dark" } }),
+        !l && o && /* @__PURE__ */ i(s, { name: "visibility_off", size: 16 }),
+        d && /* @__PURE__ */ i(
+          "svg",
+          {
+            "data-testid": "svg",
+            style: {
+              display: "inline-block",
+              height: 16,
+              fill: r.palette.primary.light,
+              verticalAlign: "middle",
+              width: 16
+            },
+            viewBox: "0 0 512 512",
+            children: /* @__PURE__ */ i("circle", { cx: "256", cy: "256", r: "60" })
+          }
+        )
+      ]
+    }
+  );
+}, C = f(p);
+export {
+  C as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/HeaderCell/index.es.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Text as t } from "@mxenabled/mxui";
+const l = (e) => /* @__PURE__ */ r(t, { fontWeight: 600, variant: "Small", children: e.colDef.headerName });
+export {
+  l as default
+};

package/dist/transactions/components/shared/TransactionTable/cells/PayeeCell/index.es.js

@@ -0,0 +1,16 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import o from "@mui/material/Stack";
+import { MerchantLogo as i, Text as n } from "@mxenabled/mxui";
+const l = (e) => /* @__PURE__ */ r(o, { alignItems: "center", direction: "row", gap: 8, children: [
+  /* @__PURE__ */ t(
+    i,
+    {
+      categoryGuid: e.row.top_level_category_guid || "",
+      merchantGuid: e.row.merchant_guid || ""
+    }
+  ),
+  /* @__PURE__ */ t(n, { tabIndex: e.tabIndex, variant: "Small", children: e.row.payee })
+] });
+export {
+  l as default
+};

package/dist/transactions/components/shared/TransactionTable/index.es.js

@@ -0,0 +1,110 @@
+import { jsx as r } from "react/jsx-runtime";
+import i from "react";
+import { observer as x } from "mobx-react-lite";
+import w from "@mui/material/Paper";
+import { DataGridPro as y } from "@mui/x-data-grid-pro";
+import { useTransactionsUiStore as _ } from "../../../context/hooks/index.es.js";
+import H from "../transactiontable/cells/FlagCell/index.es.js";
+import t from "../transactiontable/cells/HeaderCell/index.es.js";
+import N from "../transactiontable/cells/DateCell/index.es.js";
+import S from "../transactiontable/cells/PayeeCell/index.es.js";
+import T from "../transactiontable/cells/CategoryCell/index.es.js";
+import O from "../transactiontable/cells/AccountCell/index.es.js";
+import v from "../transactiontable/cells/AmountCell/index.es.js";
+import { useGlobalCopyStore as P, useGlobalUiStore as k, useTransactionStore as A } from "../../../../common/context/hooks/index.es.js";
+import F from "../../../../common/components/Loader/index.es.js";
+const G = ({
+  height: n = "100dvh",
+  onCategoryClick: d,
+  onRowClick: s
+}) => {
+  const { transactions: o } = P(), { isCopyLoaded: c } = k(), { isLoading: m, sortedTransactions: l } = A(), { clearExpandedSplits: f, toggleSplit: u } = _();
+  i.useEffect(() => () => f(), []);
+  const p = i.useMemo(
+    () => l.map((e) => ({
+      id: e.guid,
+      isHovering: !1,
+      ...e
+    })),
+    [l]
+  ), g = ({ row: { id: e, guid: a, has_been_split: h }, field: b }) => h ? u(e) : b === "category" ? d?.(a) : s?.(a);
+  if (!c)
+    return /* @__PURE__ */ r(F, {});
+  const C = [
+    {
+      field: "flag",
+      headerName: "",
+      minWidth: 32,
+      width: 32,
+      sortable: !1,
+      renderCell: (e) => /* @__PURE__ */ r(H, { ...e }),
+      renderHeader: () => /* @__PURE__ */ r("span", { "aria-label": o.transaction_status, role: "presentation" })
+    },
+    {
+      field: "date",
+      headerName: o.date_title,
+      width: 103,
+      renderHeader: t,
+      renderCell: (e) => e.row.parent_guid ? null : /* @__PURE__ */ r(N, { ...e }),
+      sortingOrder: ["desc", "asc"]
+    },
+    {
+      cellClassName: "vertical-align-center",
+      field: "payee",
+      headerName: o.payee_title,
+      flex: 0.33,
+      renderHeader: t,
+      renderCell: S,
+      sortingOrder: ["asc", "desc"]
+    },
+    {
+      field: "category",
+      headerName: o.category_title,
+      flex: 0.25,
+      renderHeader: t,
+      renderCell: (e) => /* @__PURE__ */ r(T, { ...e }),
+      sortingOrder: ["asc", "desc"]
+    },
+    {
+      field: "account",
+      headerName: o.account_title,
+      flex: 0.33,
+      renderHeader: t,
+      renderCell: (e) => e.row.parent_guid ? null : /* @__PURE__ */ r(O, { ...e }),
+      sortingOrder: ["asc", "desc"]
+    },
+    {
+      field: "amount",
+      headerName: o.amount_title,
+      flex: 0.25,
+      renderHeader: t,
+      renderCell: v,
+      align: "right",
+      headerAlign: "right",
+      sortingOrder: ["asc", "desc"]
+    }
+  ];
+  return /* @__PURE__ */ r(w, { sx: { height: n, px: 24, width: "100%", boxShadow: "none" }, children: /* @__PURE__ */ r(
+    y,
+    {
+      columns: C,
+      disableColumnFilter: !0,
+      disableColumnMenu: !0,
+      getCellClassName: (e) => e.row.parent_guid ? "split-row" : "",
+      hideFooter: !0,
+      initialState: { sorting: { sortModel: [{ field: "date", sort: "desc" }] } },
+      loading: m,
+      onCellClick: g,
+      rows: p,
+      slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
+      sx: {
+        "& .split-row": {
+          bgcolor: "background.default"
+        }
+      }
+    }
+  ) });
+}, Q = x(G);
+export {
+  Q as default
+};

package/dist/transactions/components/splitmanager/SplitManager/index.es.js

@@ -0,0 +1,69 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import s from "react";
+import { observer as C } from "mobx-react-lite";
+import p from "@mui/material/Box";
+import g from "@mui/material/Button";
+import x from "@mui/icons-material/Cancel";
+import b from "@mui/material/Stack";
+import { useTokens as h, Text as y } from "@mxenabled/mxui";
+import E from "../SplitRow/index.es.js";
+import { ON_CLICK_EVENTS as N } from "../../../constants/OnClickEvents/index.es.js";
+import { useGlobalCopyStore as T, useEvent as I } from "../../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as k } from "../../../../common/utils/Localization/index.es.js";
+import { formatCurrency as v } from "../../../../common/utils/NumberFormatting/index.es.js";
+const D = ({
+  onAddSplit: c,
+  onCategoryChanged: l,
+  onDeleteSplit: _,
+  onUpdateAmount: f,
+  splits: t,
+  transaction: u
+}) => {
+  const r = h(), { transactions: n } = T(), { onEvent: S } = I(), [a, i] = s.useState("");
+  return s.useEffect(() => {
+    i(t.length <= 1 ? n.split_transaction_errors_min_splits : ""), i(
+      t[0].amount < 0 ? k(
+        n.split_transaction_errors_totals_must_equal_amount,
+        v(u.amount, "0,0.00")
+      ) : ""
+    );
+  }, [t]), /* @__PURE__ */ m(p, { className: "mx-txn-split-manager", children: [
+    t.map((d, e) => /* @__PURE__ */ o(
+      E,
+      {
+        index: e,
+        onCategoryChanged: l,
+        onDeleteRow: _,
+        onUpdateAmount: f,
+        split: d
+      },
+      e
+    )),
+    a && /* @__PURE__ */ m(
+      b,
+      {
+        color: "error.main",
+        direction: "row",
+        gap: r.Spacing.XSmall,
+        p: r.Spacing.Medium,
+        children: [
+          /* @__PURE__ */ o(x, { sx: { fontSize: r.FontSize.Body } }),
+          /* @__PURE__ */ o(y, { variant: "Small", children: a })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(p, { p: r.Spacing.Medium, children: /* @__PURE__ */ o(
+      g,
+      {
+        "aria-label": n.split_transaction_add_split_btn,
+        onClick: () => {
+          S(N.ON_TRANSACTION_SPLIT_ADD_CLICK), c();
+        },
+        children: n.split_transaction_add_split_btn
+      }
+    ) })
+  ] });
+}, P = C(D);
+export {
+  P as default
+};