@mx-cartographer/experiences 7.0.11-alpha.mega1 → 7.0.12

package/dist/TransactionDetails-DFDYdDae.mjs

@@ -0,0 +1,1280 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import { observer as b } from "mobx-react-lite";
+import { useVirtualizer as ve } from "@tanstack/react-virtual";
+import O from "@mui/material/Box";
+import ne from "@mui/material/Divider";
+import ae from "@mui/material/List";
+import { MerchantLogo as pe, Icon as f, Text as S, useTokens as J, CategoryIcon as Ce, CategoryIconVariants as we, IconWeight as L, P as se, H1 as fe, TextField as ge } from "@mxenabled/mxui";
+import z from "@mui/material/ListItemAvatar";
+import $ from "@mui/material/ListItemText";
+import C from "@mui/material/Stack";
+import { T as Le, L as Re, O as g, C as ke, b as Pe } from "./Transaction-Dns0Kuuy.mjs";
+import { G as Ge, f as v, u as I, e as w, k as be, a as Me } from "./hooks-DkUqN6JE.mjs";
+import { f as Q } from "./NumberFormatting-CtWHhyBX.mjs";
+import { Receipt as Ke, Delete as re, ChevronRight as $e, Cancel as oe, Search as Fe, Edit as ze, Flag as Be } from "@mxenabled/mx-icons";
+import { fromUnixTime as Y } from "date-fns/fromUnixTime";
+import { isSameDay as Ae } from "date-fns/isSameDay";
+import { h as He } from "./DateUtil-BcuH7ErC.mjs";
+import { L as Ne } from "./Loader-Dp1P2gNw.mjs";
+import { A as P } from "./WidgetContainer-BHhhVctF.mjs";
+import ee from "@mui/material/Paper";
+import le from "@mui/material/Button";
+import Ue from "@mui/material/FormGroup";
+import Z from "@mui/material/IconButton";
+import xe from "@mui/material/TextField";
+import Xe from "@mui/material/ToggleButton";
+import Ie from "@mui/material/styles/useTheme";
+import V from "@mui/material/Avatar";
+import B from "@mui/material/ListItem";
+import H from "@mui/material/ListItemButton";
+import U from "@mui/material/ListItemIcon";
+import { a as De } from "./CategorySelectorDrawer-BPvjZ-Xo.mjs";
+import { a as X, f as Ve, D as We } from "./Dialog-CWW597AF.mjs";
+import { b as ie } from "./Localization-2MODESHW.mjs";
+import { getUnixTime as Ye } from "date-fns/getUnixTime";
+import { D as ce } from "./Drawer-kEE73B87.mjs";
+import he from "@mui/material/InputAdornment";
+import je from "@mui/material/Checkbox";
+import me from "@mui/material/Grid";
+import { C as qe } from "./CurrencyInput-bEx2Mbd0.mjs";
+import Ze from "@mui/material/Switch";
+var q = /* @__PURE__ */ ((t) => (t[t.Category = 0] = "Category", t[t.Date = 1] = "Date", t[t.Memo = 2] = "Memo", t[t.Tags = 3] = "Tags", t))(q || {}), te = /* @__PURE__ */ ((t) => (t[t.SplitTransaction = 0] = "SplitTransaction", t[t.HideTransaction = 1] = "HideTransaction", t[t.MerchantLogo = 2] = "MerchantLogo", t))(te || {});
+const Je = [
+  0,
+  1,
+  2,
+  3
+  /* Tags */
+], Qe = [
+  0,
+  1,
+  2
+  /* MerchantLogo */
+], G = () => {
+  if (!d.useContext(Ge))
+    throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
+  return v().uiStore;
+};
+function et() {
+  return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
+}
+function tt(t) {
+  const r = et().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), n = window.parent || window.opener || !1;
+  return n && n.postMessage && r ? (n.postMessage(t, r), !0) : !1;
+}
+function nt(t) {
+  return tt({
+    metadata: { beat_guid: t },
+    mx: !0,
+    type: "mx/moneyDashboard/insightOnTransaction"
+  });
+}
+const at = ({ transaction: t, onClick: r }) => {
+  const { associatedBeats: n } = v(), { expandedSplits: s } = G(), { transactions: o } = I(), { showInsights: a } = G(), i = t.transaction_type === Le.CREDIT, l = d.useMemo(() => n.find((_) => _.associated_transaction_guid === t.guid), [n, t]);
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ c(
+      Re,
+      {
+        clickEventName: g.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: r ? () => r(t.guid) : void 0,
+        children: [
+          /* @__PURE__ */ e(z, { children: t.parent_guid && s.includes(t.parent_guid) ? /* @__PURE__ */ e(d.Fragment, {}) : /* @__PURE__ */ e(
+            pe,
+            {
+              categoryGuid: t.top_level_category_guid || "",
+              merchantGuid: t.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ c(C, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ c(C, { alignItems: "center", direction: "row", gap: 4, children: [
+                  t.is_flagged && /* @__PURE__ */ e(f, { fill: !0, name: "flag", size: 16, sx: { color: "warning.dark" } }),
+                  t.is_hidden && /* @__PURE__ */ e(f, { name: "visibility_off", size: 16 }),
+                  t.has_been_split && /* @__PURE__ */ e(f, { name: "call_split", size: 16 }),
+                  /* @__PURE__ */ e(S, { variant: "XSmall", children: t.has_been_split ? o.split_transaction_category_label : t.category })
+                ] }),
+                l && a && /* @__PURE__ */ e(
+                  S,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (_) => {
+                      _.stopPropagation(), _.preventDefault(), nt(l.guid);
+                    },
+                    variant: "XSmall",
+                    children: l.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ c(C, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ c(S, { bold: !0, variant: "Body", children: [
+                  t.is_hidden && o.hide_trnx_cancel_hidden_note,
+                  t.payee || t.description || t.feed_description
+                ] }),
+                /* @__PURE__ */ c(
+                  S,
+                  {
+                    bold: !0,
+                    color: i ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "Body",
+                    children: [
+                      i ? "+" : "",
+                      Q(t.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, rt = b(at), ot = ({
+  bgcolor: t = "background.default",
+  children: r
+}) => /* @__PURE__ */ e(O, { display: "inline-block", pb: 4, pl: 24, pt: 4, sx: { bgcolor: t }, children: /* @__PURE__ */ e(S, { bold: !0, variant: "XSmall", children: r }) }), it = ({ showIcon: t = !0, showSubtitle: r = !0 }) => {
+  const n = J(), { transactions: s } = I();
+  return /* @__PURE__ */ c(C, { alignItems: "center", gap: n.Spacing.Small, height: "auto", mt: n.Spacing.Large, children: [
+    t && /* @__PURE__ */ e(Ke, { color: "secondary", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(S, { bold: !0, color: "secondary", variant: "Small", children: s.zero_state_no_transactions }),
+    r && /* @__PURE__ */ e(S, { color: "secondary", variant: "XSmall", children: s.zero_state_there_are_no_transactions })
+  ] });
+}, st = b(it), Te = (t, r) => {
+  const n = Y(r[t].date), s = Y(r[t - 1]?.date);
+  return !Ae(n, s);
+}, lt = (t, r) => {
+  const n = Y(r[t].date), s = Y(r[t + 1]?.date);
+  return Ae(n, s);
+}, Se = 65, ye = 34, ct = ({
+  bgcolor: t,
+  filter: r,
+  height: n = "calc(100dvh - 36px)",
+  loader: s = /* @__PURE__ */ e(Ne, { label: "Loading", size: 40 }),
+  onClick: o,
+  showInsights: a = !1,
+  showLoader: i = !1,
+  showHiddenTransactions: l = !1,
+  width: _ = "100%",
+  zeroState: u = /* @__PURE__ */ e(st, {})
+}) => {
+  const { isLoading: m, sortedTransactions: p } = v(), h = d.useMemo(() => {
+    const x = r ? p.filter(r) : p;
+    return l ? x : x.filter((k) => !k.is_hidden);
+  }, [p, l]), { clearExpandedSplits: A, setShowInsights: T, toggleSplit: N } = G(), { onEvent: y } = w(), R = (x) => {
+    const k = h.find((W) => W.guid === x);
+    if (k?.has_been_split) {
+      N(k.guid);
+      return;
+    }
+    y(P.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: k?.account_guid,
+      transaction_guid: x
+    }), o?.(x);
+  }, M = d.useRef(null), K = ve({
+    count: h.length,
+    getScrollElement: () => M.current,
+    estimateSize: (x) => Se + (Te(x, h) ? ye : 0),
+    overscan: 5
+  });
+  return d.useEffect(() => K.measure(), [h]), d.useEffect(() => T(a), [a]), d.useEffect(() => () => A(), []), /* @__PURE__ */ e(ae, { sx: { width: _ }, children: /* @__PURE__ */ e(O, { height: n, overflow: "auto", ref: M, width: _, children: /* @__PURE__ */ c(
+    O,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        K.getVirtualItems().length === 0 ? "auto" : K.getTotalSize()
+      ),
+      position: "relative",
+      width: "100%",
+      children: [
+        (m || i) && s,
+        !m && !i && K.getVirtualItems().length === 0 && u,
+        !m && !i && K.getVirtualItems().length > 0 && K.getVirtualItems().map((x) => {
+          const k = h[x.index], W = Te(x.index, h), de = lt(x.index, h), _e = Se + (W ? ye : 0);
+          return /* @__PURE__ */ c(
+            O,
+            {
+              sx: {
+                height: _e,
+                position: "absolute",
+                transform: `translateY(${x.start}px)`,
+                width: "100%"
+              },
+              children: [
+                W && /* @__PURE__ */ e(ot, { bgcolor: t, children: He(k.date) }),
+                /* @__PURE__ */ e(rt, { onClick: R, transaction: k }),
+                /* @__PURE__ */ e(ne, { sx: { ml: de ? 24 : 0 } })
+              ]
+            },
+            k.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, On = b(ct), dt = ({ transaction: t }) => {
+  const { addOrUpdateTransactionRule: r, updateTransaction: n } = v(), { categories: s } = be(), { onEvent: o } = w(), { setShouldDisableDrawerScroll: a, updateManualTransaction: i } = G(), { transactions: l } = I(), [_, u] = d.useState(!1), [m, p] = d.useState(""), h = async (y) => {
+    await n({ ...t, category_guid: m }), y && await r(m, t), p(""), o(P.TRANSACTION_DETAILS_CLICK_CATEGORY, {
+      transaction_guid: t.guid
+    });
+  }, A = (y) => {
+    if (t.is_manual && !t.guid) {
+      const R = s.find((M) => M.guid === y);
+      i({
+        ...t,
+        category: R?.name,
+        category_guid: y,
+        top_level_category_guid: R?.parent_guid || y
+      });
+    } else
+      p(y);
+    T();
+  }, T = () => {
+    u(!1), a(!1);
+  }, N = d.useMemo(
+    () => s.find((y) => y.guid === m),
+    [m]
+  );
+  return /* @__PURE__ */ c(d.Fragment, { children: [
+    /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        onClick: () => {
+          o(g.ON_TRANSACTION_CATEGORY_CLICK), u(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ e(
+            Ce,
+            {
+              categoryGuid: t.top_level_category_guid,
+              size: 24,
+              sx: { color: "text.primary" },
+              variant: we.Transparent
+            }
+          ) }) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              primary: "Category",
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(S, { bold: !0, variant: "Body", children: t.category ?? l.actions_select_a_category })
+            }
+          ),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(f, { name: "chevron_right", weight: L.Dark }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      De,
+      {
+        initialSelected: t.category_guid,
+        onClose: T,
+        onSelect: A,
+        showDrawer: _,
+        title: l.actions_select_a_category
+      }
+    ),
+    /* @__PURE__ */ e(
+      X,
+      {
+        copy: {
+          title: ie(
+            l.actions_apply_to_all_transaction_types,
+            t.description
+          )
+        },
+        isOpen: !!m,
+        onClose: () => p(""),
+        onPrimaryAction: () => h(!0),
+        onSecondaryAction: () => h(!1),
+        primaryText: l.actions_apply_to_all,
+        secondaryText: l.actions_this_time_only,
+        children: /* @__PURE__ */ e(se, { variant: "Paragraph", children: ie(
+          l.actions_all_past_and_future,
+          t.description,
+          N?.name
+        ) })
+      }
+    )
+  ] });
+}, _t = ({ transaction: t }) => {
+  const r = J(), { onEvent: n } = w(), { updateTransaction: s } = v(), { updateManualTransaction: o } = G(), { common: a, transactions: i } = I(), [l, _] = d.useState(!1), [u, m] = d.useState(t.date), p = (A) => {
+    m(Ye(A));
+  }, h = async () => {
+    if (t.is_manual && !t.guid) {
+      o({ ...t, date: u }), _(!1);
+      return;
+    }
+    await s({ ...t, date: u }), n(P.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: t.guid }), _(!1);
+  };
+  return /* @__PURE__ */ c(O, { className: "mx-txn-date-action", children: [
+    /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        onClick: () => {
+          n(g.ON_TRANSACTION_DATE_CLICK), _(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ e(f, { name: "calendar_month", sx: { color: "text.primary" }, weight: L.Dark }) }) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              primary: i.date_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(S, { bold: !0, variant: "Body", children: Ve(Y(t.date), We.YEAR_MONTH_DAY) })
+            }
+          ),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(f, { name: "chevron_right", weight: L.Dark }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      ce,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: l,
+        onClose: () => _(!1),
+        onPrimaryAction: h,
+        primaryText: a.save_button,
+        secondaryText: a.cancel_button,
+        title: i.date_edit_title,
+        children: /* @__PURE__ */ e(C, { alignItems: "center", mt: r.Spacing.XXLarge, children: /* @__PURE__ */ e(
+          ke,
+          {
+            beginDate: Y(u),
+            copy: {
+              nextAria: i.date_next_aria,
+              prevAria: i.date_prev_aria,
+              today: a.date_range_picker.today
+            },
+            onDateSelected: p,
+            selectionType: Pe.Single
+          }
+        ) })
+      }
+    )
+  ] });
+}, ut = ({ transaction: t }) => {
+  const { onEvent: r } = w(), { removeTransaction: n } = v(), { setShouldDisableDrawerScroll: s } = G(), { common: o, transactions: a } = I(), [i, l] = d.useState(!1), _ = async () => {
+    await n(t.guid), r(g.ON_TRANSACTION_DELETE_DELETED);
+  };
+  return /* @__PURE__ */ c(O, { className: "mx-txn-delete", children: [
+    t && /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        onClick: () => {
+          r(g.ON_TRANSACTION_DELETE_CLICK), s(!0), l(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { variant: "rounded", children: /* @__PURE__ */ e(re, { color: "secondary", fontSize: "small" }) }) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              primary: a.manual_transaction_delete_title,
+              secondary: a.manual_transaction_delete_subtitle
+            }
+          ),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(re, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      X,
+      {
+        copy: { title: a.manual_transaction_delete_title },
+        isOpen: i,
+        onClose: () => {
+          s(!1), l(!1);
+        },
+        onPrimaryAction: _,
+        onSecondaryAction: () => r(g.ON_TRANSACTION_DELETE_CANCEL),
+        primaryText: o.delete_button,
+        secondaryText: o.cancel_button,
+        children: /* @__PURE__ */ e(S, { sx: { whiteSpace: "normal" }, variant: "Paragraph", children: a.manual_transaction_delete_description })
+      }
+    )
+  ] });
+}, mt = b(ut), pt = ({ transaction: t }) => {
+  const { onEvent: r } = w(), { updateTransaction: n } = v(), { setShouldDisableDrawerScroll: s } = G(), { common: o, transactions: a } = I(), [i, l] = d.useState(!1), _ = async () => {
+    await n({ ...t, merchant_guid: "" }), r(P.TRANSACTION_DETAILS_CLICK_DELETE_LOGO, {
+      transaction_guid: t.guid
+    });
+  };
+  return /* @__PURE__ */ c(O, { className: "mx-txn-delete-logo", children: [
+    t && /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        onClick: () => {
+          r(g.ON_TRANSACTION_DELETE_LOGO_CLICK), l(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ e(f, { name: "delete", sx: { color: "text.primary" }, weight: L.Dark }) }) }),
+          /* @__PURE__ */ e($, { primary: a.merchant_logo_title, secondary: a.merchant_logo_desc }),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(f, { name: "chevron_right", weight: L.Dark }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ c(
+      X,
+      {
+        copy: { title: a.merchant_logo_modal_title },
+        isOpen: i,
+        onClose: () => {
+          s(!1), l(!1);
+        },
+        onPrimaryAction: _,
+        onSecondaryAction: () => r(g.ON_TRANSACTION_DELETE_LOGO_CANCEL),
+        primaryText: o.delete_button,
+        secondaryText: o.cancel_button,
+        title: a.merchant_logo_modal_title,
+        children: [
+          /* @__PURE__ */ e(S, { sx: { whiteSpace: "normal" }, variant: "Paragraph", children: a.merchant_logo_modal_desc }),
+          /* @__PURE__ */ e(S, { bold: !0, sx: { whiteSpace: "normal" }, variant: "Paragraph", children: ` ${a.merchant_logo_modal_desc_bold}` })
+        ]
+      }
+    )
+  ] });
+}, gt = b(pt), ht = ({ transaction: t }) => {
+  const { onEvent: r } = w(), { updateTransaction: n } = v(), { setShouldDisableDrawerScroll: s } = G(), { common: o, transactions: a } = I(), [i, l] = d.useState(!1), _ = t.is_hidden, u = async () => {
+    await n({ ...t, is_hidden: !t.is_hidden }), r(
+      _ ? g.ON_TRANSACTION_UNHIDDEN : g.ON_TRANSACTION_HIDDEN
+    );
+  };
+  return /* @__PURE__ */ c(O, { className: "mx-txn-hide-transaction", children: [
+    t && /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        "aria-checked": _,
+        onClick: () => {
+          r(
+            _ ? g.ON_TRANSACTION_UNHIDE_CLICK : g.ON_TRANSACTION_HIDE_CLICK
+          ), r(
+            _ ? "transaction_details_click_unhide_transaction" : "transaction_details_click_hide_transaction",
+            {
+              transaction_guid: t.guid
+            }
+          ), l(!0);
+        },
+        role: "switch",
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: _ ? /* @__PURE__ */ e(
+            f,
+            {
+              name: "visibilityOff",
+              sx: { color: "text.primary" },
+              weight: L.Dark
+            }
+          ) : /* @__PURE__ */ e(f, { name: "visibility", sx: { color: "text.primary" }, weight: L.Dark }) }) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              primary: _ ? a.hide_trnx_subtitle_unhide_trnx : a.hide_trnx_subtitle_hide_trnx,
+              secondary: _ ? a.hide_trnx_desc_unhiding : a.hide_trnx_desc_hiding
+            }
+          ),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(
+            Ze,
+            {
+              checked: _,
+              id: "hide-transaction",
+              name: "hide-transaction",
+              tabIndex: -1
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      X,
+      {
+        copy: {
+          title: _ ? a.hide_trnx_subtitle_unhide_trnx : a.hide_trnx_subtitle_hide_trnx
+        },
+        isOpen: i,
+        onClose: () => {
+          s(!1), l(!1);
+        },
+        onPrimaryAction: u,
+        onSecondaryAction: () => r(
+          _ ? g.ON_TRANSACTION_UNHIDE_CANCEL_CLICK : g.ON_TRANSACTION_HIDE_CANCEL_CLICK
+        ),
+        primaryText: _ ? o.unhide_button : o.hide_button,
+        secondaryText: o.cancel_button,
+        children: /* @__PURE__ */ e(S, { truncate: !1, variant: "Paragraph", children: _ ? a.hide_trnx_desc_unhiding : a.hide_trnx_desc_hiding })
+      }
+    )
+  ] });
+}, Tt = b(ht), Ee = ({ transaction: t }) => {
+  const { amount: r, description: n, isIncome: s, merchant_guid: o, payee: a, top_level_category_guid: i } = t;
+  return /* @__PURE__ */ c(C, { className: "mx-txn-amount-header", direction: "row", gap: 12, px: 16, py: 24, children: [
+    /* @__PURE__ */ e(
+      pe,
+      {
+        categoryGuid: i || "",
+        merchantGuid: o || "",
+        size: 64
+      }
+    ),
+    /* @__PURE__ */ c(C, { overflow: "hidden'", children: [
+      /* @__PURE__ */ e(S, { bold: !0, mb: 4, truncate: !0, variant: "Body", children: n || a }),
+      /* @__PURE__ */ c(fe, { color: s ? "success.main" : "text.primary", truncate: !0, children: [
+        s ? "+" : "",
+        Q(r, "0,0.00")
+      ] })
+    ] })
+  ] });
+}, St = ({ transaction: t }) => {
+  const { onEvent: r } = w(), { updateTransaction: n } = v(), { updateManualTransaction: s } = G(), { common: o, transactions: a } = I(), [i, l] = d.useState(!1), [_, u] = d.useState("");
+  d.useEffect(() => {
+    i && u(t.memo ? t.memo : "");
+  }, [i]);
+  const m = async () => {
+    if (t.is_manual && !t.guid) {
+      s({ ...t, memo: _ }), l(!1);
+      return;
+    }
+    await n({ ...t, memo: _ }), r(P.TRANSACTION_DETAILS_CLICK_MEMO, { transaction_guid: t.guid }), l(!1);
+  };
+  return /* @__PURE__ */ c("div", { className: "mx-txn-memo-action", children: [
+    /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        onClick: () => {
+          r(g.ON_TRANSACTION_MEMO_CLICK), l(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ e(f, { name: "article", sx: { color: "text.primary" }, weight: L.Dark }) }) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              primary: a.memo_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(
+                S,
+                {
+                  bold: !0,
+                  sx: { overflowWrap: "break-word", whiteSpace: "wrap" },
+                  variant: "Body",
+                  children: t.memo ? t.memo : a.memo_desc
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(f, { name: "chevron_right", weight: L.Dark }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ c(
+      ce,
+      {
+        ariaLabelClose: o.close_aria,
+        isOpen: i,
+        onClose: () => l(!1),
+        onPrimaryAction: m,
+        title: a.memo_title,
+        children: [
+          /* @__PURE__ */ e(Ee, { transaction: t }),
+          /* @__PURE__ */ e(
+            xe,
+            {
+              "aria-label": a.memo_desc_aria,
+              focused: !0,
+              fullWidth: !0,
+              multiline: !0,
+              name: "memo",
+              onChange: (p) => u(p.target.value),
+              placeholder: a.memo_desc,
+              rows: 4,
+              sx: { px: 16 },
+              value: _
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, yt = b(St), Ct = ({
+  index: t,
+  onDeleteRow: r,
+  onCategoryChanged: n,
+  onUpdateAmount: s,
+  split: o
+}) => {
+  const a = J(), { onEvent: i } = w(), { transactions: l } = I(), [_, u] = d.useState(`${o.amount}`), [m, p] = d.useState(!1), h = t === 0, A = (T) => {
+    isNaN(Number(T)) || (u(T), s(t, Number(T)));
+  };
+  return /* @__PURE__ */ c(
+    O,
+    {
+      bgcolor: "background.paper",
+      className: "mx-txn-split-manager-row",
+      pb: a.Spacing.Tiny,
+      px: a.Spacing.XSmall,
+      children: [
+        /* @__PURE__ */ c(me, { alignItems: h ? "center" : "start", container: !0, children: [
+          /* @__PURE__ */ e(me, { item: !0, xs: 7, children: /* @__PURE__ */ c(C, { alignItems: "start", children: [
+            /* @__PURE__ */ e(
+              le,
+              {
+                endIcon: /* @__PURE__ */ e($e, {}),
+                onClick: () => p(!0),
+                startIcon: /* @__PURE__ */ e(Ce, { categoryGuid: o.top_level_category_guid }),
+                sx: { px: a.Spacing.Small, py: a.Spacing.XSmall },
+                children: o.category
+              }
+            ),
+            /* @__PURE__ */ e(O, { children: !o.category_guid && /* @__PURE__ */ c(
+              C,
+              {
+                color: "error.main",
+                direction: "row",
+                gap: a.Spacing.XSmall,
+                p: a.Spacing.Small,
+                children: [
+                  /* @__PURE__ */ e(oe, { sx: { fontSize: a.FontSize.Body } }),
+                  /* @__PURE__ */ e(S, { variant: "Small", children: l.split_transaction_errors_select_category })
+                ]
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ e(me, { item: !0, xs: 5, children: h ? /* @__PURE__ */ e("div", { className: "mx-txn-split-manager-row-top-container", children: /* @__PURE__ */ e(S, { children: Q(o.amount, "0,0.00") }) }) : /* @__PURE__ */ c(C, { alignItems: "start", children: [
+            /* @__PURE__ */ c(C, { alignItems: "start", direction: "row", gap: a.Spacing.XSmall, children: [
+              /* @__PURE__ */ e(
+                qe,
+                {
+                  amount: _,
+                  "aria-label": l.split_transaction_edit_split_amount,
+                  inputProps: {
+                    noValidate: !0
+                  },
+                  name: "split-amount-input",
+                  setAmount: A,
+                  sx: {
+                    ".MuiOutlinedInput-input": { p: a.Spacing.Small }
+                  },
+                  type: "number"
+                }
+              ),
+              /* @__PURE__ */ e(
+                Z,
+                {
+                  "aria-label": l.split_transaction_delete_split_btn,
+                  color: "secondary",
+                  onClick: () => {
+                    i(g.ON_TRANSACTION_SPLIT_DELETE_CLICK), r(t);
+                  },
+                  sx: { w: 44, h: 44 },
+                  children: /* @__PURE__ */ e(re, {})
+                }
+              )
+            ] }),
+            !_ && /* @__PURE__ */ c(
+              C,
+              {
+                color: "error.main",
+                direction: "row",
+                gap: a.Spacing.XSmall,
+                py: a.Spacing.Small,
+                children: [
+                  /* @__PURE__ */ e(oe, { sx: { fontSize: a.FontSize.Body } }),
+                  /* @__PURE__ */ e(S, { variant: "Small", children: l.split_transaction_errors_enter_an_amount })
+                ]
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ e(
+          De,
+          {
+            initialSelected: o.category_guid,
+            onClose: () => p(!1),
+            onSelect: (T) => {
+              n(t, T), p(!1);
+            },
+            showDrawer: m,
+            title: l.actions_select_a_category
+          }
+        )
+      ]
+    }
+  );
+}, ft = b(Ct), bt = ({
+  onAddSplit: t,
+  onCategoryChanged: r,
+  onDeleteSplit: n,
+  onUpdateAmount: s,
+  splits: o,
+  transaction: a
+}) => {
+  const i = J(), { transactions: l } = I(), { onEvent: _ } = w(), [u, m] = d.useState("");
+  return d.useEffect(() => {
+    m(o.length <= 1 ? l.split_transaction_errors_min_splits : ""), m(
+      o[0].amount < 0 ? ie(
+        l.split_transaction_errors_totals_must_equal_amount,
+        Q(a.amount, "0,0.00")
+      ) : ""
+    );
+  }, [o]), /* @__PURE__ */ c(O, { className: "mx-txn-split-manager", children: [
+    o.map((p, h) => /* @__PURE__ */ e(
+      ft,
+      {
+        index: h,
+        onCategoryChanged: r,
+        onDeleteRow: n,
+        onUpdateAmount: s,
+        split: p
+      },
+      h
+    )),
+    u && /* @__PURE__ */ c(
+      C,
+      {
+        color: "error.main",
+        direction: "row",
+        gap: i.Spacing.XSmall,
+        p: i.Spacing.Medium,
+        children: [
+          /* @__PURE__ */ e(oe, { sx: { fontSize: i.FontSize.Body } }),
+          /* @__PURE__ */ e(S, { variant: "Small", children: u })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(O, { p: i.Spacing.Medium, children: /* @__PURE__ */ e(
+      le,
+      {
+        "aria-label": l.split_transaction_add_split_btn,
+        onClick: () => {
+          _(g.ON_TRANSACTION_SPLIT_ADD_CLICK), t();
+        },
+        children: l.split_transaction_add_split_btn
+      }
+    ) })
+  ] });
+}, At = b(bt), Nt = ({ transaction: t }) => {
+  const { onEvent: r } = w(), { splitTransaction: n, unSplitTransaction: s } = v(), { common: o, transactions: a } = I(), { setShouldDisableDrawerScroll: i } = G(), { categories: l } = be(), _ = {
+    ...t,
+    amount: t.amount - 1,
+    guid: "",
+    has_been_split: !1,
+    parent_guid: t.guid
+  }, u = {
+    ...t,
+    amount: 1,
+    category_guid: void 0,
+    category: a.split_transaction_select_category_btn,
+    guid: "",
+    has_been_split: !1,
+    parent_guid: t.guid,
+    top_level_category_guid: void 0
+  }, [m, p] = d.useState(!1), [h, A] = d.useState(!1), [T, N] = d.useState([]), y = () => {
+    const D = [...T];
+    D.push({ ...u }), D[0].amount -= 1, N(D);
+  }, R = (D) => {
+    if (D > 0) {
+      const F = T[D], E = [...T];
+      E.splice(D, 1), E[0].amount += F.amount, N(E);
+    }
+  }, M = (D, F) => {
+    const E = [...T];
+    E[D].amount = F, E[0].amount = t.amount - E.reduce(
+      (j, ue, Oe) => j + (Oe !== 0 ? ue.amount : 0),
+      0
+    ), N(E);
+  }, K = (D, F) => {
+    const E = [...T], j = l.find((ue) => ue.guid === F);
+    j && (E[D] = {
+      ...E[D],
+      category_guid: F,
+      category: j.name,
+      top_level_category_guid: j.parent_guid || F
+    }, N(E));
+  }, x = () => {
+    if (t.parent_guid || t.has_been_split) {
+      A(!0);
+      return;
+    }
+    N([{ ..._ }, { ...u }]), r(P.TRANSACTION_DETAILS_CLICK_SPLIT, {
+      transaction_guid: t.guid
+    }), p(!0);
+  }, k = async () => {
+    r(g.ON_TRANSACTION_SPLIT_SAVE_CLICK), await n({ ...t, has_been_split: !0 }, T), p(!1);
+  }, W = async () => {
+    r(g.ON_TRANSACTION_SPLIT_CANCEL_CLICK), N([{ ..._ }, { ...u }]), p(!1);
+  }, de = async () => {
+    r(P.TRANSACTION_DETAILS_CLICK_UNSPLIT, {
+      transaction_guid: t.guid
+    });
+    const D = t.parent_guid ?? t.guid;
+    await s(D);
+  }, _e = d.useMemo(() => {
+    const D = T.some((E) => !E.category_guid), F = T.some((E) => E.amount <= 0);
+    return D || F;
+  }, [T]);
+  return /* @__PURE__ */ c(d.Fragment, { children: [
+    t && /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(H, { onClick: x, children: [
+      /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ e(f, { name: "call_split", sx: { color: "text.primary" }, weight: L.Dark }) }) }),
+      /* @__PURE__ */ e(
+        $,
+        {
+          primary: t.has_been_split || t.parent_guid ? a.split_transaction_unsplit_title : a.split_transaction_title,
+          secondary: t.has_been_split || t.parent_guid ? a.split_transaction_unsplit_subtitle : a.split_transaction_desc
+        }
+      ),
+      /* @__PURE__ */ e(U, { children: t.has_been_split || t.parent_guid ? /* @__PURE__ */ e(f, { name: "delete", weight: L.Dark }) : /* @__PURE__ */ e(f, { name: "chevron_right", weight: L.Dark }) })
+    ] }) }),
+    /* @__PURE__ */ c(
+      ce,
+      {
+        ariaLabelClose: o.close_aria,
+        isOpen: m,
+        isPrimaryDisabled: _e,
+        onClose: W,
+        onPrimaryAction: k,
+        primaryText: o.save_button,
+        secondaryText: o.cancel_button,
+        title: a.split_transaction_title,
+        children: [
+          /* @__PURE__ */ e(Ee, { transaction: t }),
+          /* @__PURE__ */ e(
+            At,
+            {
+              onAddSplit: y,
+              onCategoryChanged: K,
+              onDeleteSplit: R,
+              onUpdateAmount: M,
+              splits: T,
+              transaction: t
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      X,
+      {
+        copy: { title: a.split_transaction_unsplit_title },
+        isOpen: h,
+        onClose: () => {
+          i(!1), A(!1);
+        },
+        onPrimaryAction: de,
+        onSecondaryAction: () => {
+          r(g.ON_TRANSACTION_UNSPLIT_CANCEL);
+        },
+        primaryText: o.delete_button,
+        secondaryText: o.cancel_button,
+        children: /* @__PURE__ */ e(se, { variant: "Paragraph", children: ie(
+          a.split_transaction_unsplit_description,
+          t.description
+        ) })
+      }
+    )
+  ] });
+}, xt = b(Nt), It = () => {
+  const t = Ie(), { onEvent: r } = w(), { addTag: n } = v(), { transactions: s } = I(), [o, a] = d.useState(!1), [i, l] = d.useState(""), [_, u] = d.useState(""), m = d.useRef(null);
+  d.useEffect(() => {
+    o && m?.current?.focus();
+  }, [o]);
+  const p = () => {
+    r(
+      o ? g.ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK : g.ON_TRANSACTION_TAGS_TAG_ADD_CLICK
+    ), o || l(""), a(!o);
+  }, h = async () => {
+    r(g.ON_TRANSACTION_TAGS_TAG_ADDED), await n(i), a(!1);
+  };
+  return d.useEffect(() => {
+    u(i.length > 40 ? s.tags_error_name_must_be_40_chars : "");
+  }, [i]), /* @__PURE__ */ c(O, { className: "mx-txn-tag-manager-header", children: [
+    /* @__PURE__ */ c(
+      C,
+      {
+        alignItems: "center",
+        bgcolor: t.palette.background.default,
+        direction: "row",
+        justifyContent: "space-between",
+        px: 24,
+        py: 16,
+        children: [
+          /* @__PURE__ */ e(S, { bold: !0, children: s.tags_your_tags }),
+          /* @__PURE__ */ e(
+            le,
+            {
+              "aria-expanded": o,
+              "aria-label": s.tags_add_tag_btn_aria,
+              onClick: p,
+              children: s.tags_add_tag_btn
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ c(
+      X,
+      {
+        copy: { title: s.tags_add_tag_btn },
+        isOpen: o,
+        onClose: () => a(!1),
+        onPrimaryAction: h,
+        onSecondaryAction: () => a(!1),
+        children: [
+          /* @__PURE__ */ e(
+            ge,
+            {
+              "aria-label": s.tags_placeholder,
+              name: "add-tag",
+              onChange: (A) => l(A.target.value),
+              placeholder: s.tags_placeholder,
+              sx: { width: "100%" },
+              value: i
+            }
+          ),
+          /* @__PURE__ */ e(se, { id: "add-tag-error", sx: { color: "error.main" }, variant: "ParagraphSmall", children: _ })
+        ]
+      }
+    )
+  ] });
+}, Dt = b(It), Et = ({ onSearchValueChanged: t, searchValue: r }) => {
+  const { common: n, transactions: s } = I(), o = J(), a = /* @__PURE__ */ e(
+    Z,
+    {
+      "aria-label": s.tags_cancel_search || "Search",
+      onClick: () => t(""),
+      children: /* @__PURE__ */ e(oe, {})
+    }
+  );
+  return /* @__PURE__ */ e(O, { className: "mx-txn-tag-manager-search", px: o.Spacing.Large, py: o.Spacing.Medium, children: /* @__PURE__ */ e(
+    ge,
+    {
+      InputProps: {
+        startAdornment: /* @__PURE__ */ e(he, { position: "start", children: /* @__PURE__ */ e(Fe, { color: "disabled" }) }),
+        endAdornment: /* @__PURE__ */ e(he, { position: "end", sx: { padding: 0 }, children: r ? a : null })
+      },
+      "aria-label": n.search_aria,
+      name: "search",
+      onChange: (i) => t(i.target.value),
+      placeholder: n.search_placeholder,
+      sx: { bgcolor: "background.paper", width: "100%" },
+      value: r
+    }
+  ) });
+}, Ot = b(Et), vt = ({ onTagChecked: t, selectedTags: r, tag: n }) => {
+  const { onEvent: s } = w(), { removeTag: o, updateTag: a } = v(), { common: i, transactions: l } = I(), [_, u] = d.useState(!1), [m, p] = d.useState(!1), [h, A] = d.useState(""), [T, N] = d.useState(""), y = async () => {
+    s(g.ON_TRANSACTION_TAGS_TAG_EDIT_SAVED), n && await a({ ...n, name: h }), u(!1);
+  }, R = async () => {
+    s(g.ON_TRANSACTION_TAGS_TAG_DELETED), await o(n.guid), p(!1);
+  };
+  d.useEffect(() => {
+    N(h.length > 40 ? l.tags_error_name_must_be_40_chars : "");
+  }, [h]);
+  const M = () => {
+    s(g.ON_TRANSACTION_TAGS_TAG_EDIT_CLICK), A(n.name), u(!0);
+  }, K = () => {
+    s(g.ON_TRANSACTION_TAGS_TAG_DELETE_CLICK), p(!0);
+  };
+  return /* @__PURE__ */ c(
+    B,
+    {
+      className: "mx-txn-transaction-manager-row",
+      disableGutters: !0,
+      disablePadding: !0,
+      secondaryAction: !n.is_default_tag && /* @__PURE__ */ c(C, { direction: "row", children: [
+        /* @__PURE__ */ e(
+          Z,
+          {
+            "aria-label": `Edit ${n.name} tag`,
+            color: "secondary",
+            onClick: M,
+            children: /* @__PURE__ */ e(ze, { color: "secondary" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          Z,
+          {
+            "aria-label": `Delete ${n.name} tag`,
+            color: "secondary",
+            onClick: K,
+            children: /* @__PURE__ */ e(re, { color: "secondary" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ c(
+          H,
+          {
+            "aria-checked": r.includes(n.guid),
+            onClick: () => t(n.guid),
+            role: "checkbox",
+            children: [
+              /* @__PURE__ */ e(U, { sx: { ml: 0 }, children: /* @__PURE__ */ e(je, { checked: r.includes(n.guid), edge: "start", tabIndex: -1 }) }),
+              /* @__PURE__ */ e($, { children: n.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ c(
+          X,
+          {
+            copy: { title: "Update tag name" },
+            isOpen: _,
+            onClose: () => u(!1),
+            onPrimaryAction: y,
+            onSecondaryAction: () => u(!1),
+            children: [
+              /* @__PURE__ */ e(
+                ge,
+                {
+                  "aria-describedby": T ? "update-tag-error" : void 0,
+                  "aria-label": l.tags_update_the_tag_name,
+                  name: "update-tag",
+                  onChange: (x) => A(x.target.value),
+                  placeholder: "Tag name",
+                  sx: { width: "100%" },
+                  value: h
+                }
+              ),
+              /* @__PURE__ */ e(se, { id: "update-tag-error", sx: { color: "error.main" }, variant: "ParagraphSmall", children: T })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          X,
+          {
+            copy: { title: l.tags_delete_title },
+            isOpen: m,
+            onClose: () => p(!1),
+            onPrimaryAction: R,
+            onSecondaryAction: () => s(g.ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK),
+            primaryText: i.delete_button,
+            secondaryText: i.cancel_button,
+            children: /* @__PURE__ */ e(S, { truncate: !1, children: l.tags_deleting_this_tag_will_remove_it })
+          }
+        )
+      ]
+    }
+  );
+}, wt = b(vt), Lt = ({ selectedTags: t, onTagChecked: r }) => {
+  const { tags: n } = v(), [s, o] = d.useState(""), a = n.filter(
+    (i) => i.name.toLowerCase().includes(s.toLowerCase())
+  );
+  return /* @__PURE__ */ c("div", { className: "mx-txn-tag-manager", children: [
+    /* @__PURE__ */ e(
+      Ot,
+      {
+        onSearchValueChanged: (i) => o(i),
+        searchValue: s
+      }
+    ),
+    /* @__PURE__ */ e(Dt, {}),
+    /* @__PURE__ */ e(ee, { sx: { boxShadow: "none" }, children: /* @__PURE__ */ e(ae, { children: a.map((i) => /* @__PURE__ */ c(d.Fragment, { children: [
+      /* @__PURE__ */ e(wt, { onTagChecked: r, selectedTags: t, tag: i }),
+      /* @__PURE__ */ e(ne, { sx: { ml: 24 } })
+    ] }, i.guid)) }) })
+  ] });
+}, Rt = b(Lt), kt = ({ transaction: t }) => {
+  const { onEvent: r } = w(), { tags: n, updateTaggings: s, updateTransaction: o } = v(), { common: a, transactions: i } = I(), { updateManualTransaction: l } = G(), [_, u] = d.useState(!1), [m, p] = d.useState(t.tags);
+  d.useEffect(() => {
+    p(t.tags);
+  }, [_, t]);
+  const h = (N) => {
+    const y = [...m], R = m.indexOf(N);
+    R >= 0 ? y.splice(R, 1) : y.push(N), p(y);
+  }, A = async () => {
+    if (t.is_manual && !t.guid) {
+      l({ ...t, tags: m }), u(!1);
+      return;
+    }
+    await s(m, t.guid), await o({ ...t, tags: m }), r(P.TRANSACTION_DETAILS_CLICK_TAGS, { transaction_guid: t.guid }), u(!1);
+  }, T = d.useMemo(
+    () => t.tags.map(
+      (N, y, R) => `${n.find((M) => M.guid === N)?.name}${y < R.length - 1 ? " / " : ""}`
+    ),
+    [n, t]
+  );
+  return /* @__PURE__ */ c(d.Fragment, { children: [
+    /* @__PURE__ */ e(B, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ c(
+      H,
+      {
+        onClick: () => {
+          r(g.ON_TRANSACTION_TAGS_CLICK), u(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(V, { sx: { bgcolor: "border.light" }, variant: "rounded", children: /* @__PURE__ */ e(f, { name: "local_offer", sx: { color: "text.primary" }, weight: L.Dark }) }) }),
+          /* @__PURE__ */ e(
+            $,
+            {
+              primary: i.tags_title,
+              primaryTypographyProps: { variant: "XSmall" },
+              secondary: /* @__PURE__ */ e(S, { bold: !0, variant: "Body", children: t.tags?.length > 0 ? T : i.tags_desc })
+            }
+          ),
+          /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(f, { name: "chevron_right", weight: L.Dark }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      ce,
+      {
+        ariaLabelClose: a.close_aria,
+        isOpen: _,
+        onClose: () => u(!1),
+        onPrimaryAction: A,
+        primaryText: a.save_button,
+        secondaryText: a.cancel_button,
+        title: i.tags_title,
+        children: /* @__PURE__ */ e(Rt, { onTagChecked: h, selectedTags: m })
+      }
+    )
+  ] });
+}, Pt = b(kt), Gt = ({ transaction: t }) => {
+  const { updateTransaction: r } = v(), { common: n, transactions: s } = I(), { onEvent: o } = w(), [a, i] = d.useState(!1), [l, _] = d.useState(""), u = d.useRef(null);
+  d.useEffect(() => {
+    a && (_(t.description), u?.current?.focus());
+  }, [a]);
+  const m = async () => {
+    o(P.TRANSACTION_DETAILS_CLICK_DESCRIPTION, {
+      transaction_guid: t.guid
+    }), await r({ ...t, description: l }), i(!1);
+  };
+  return /* @__PURE__ */ e(O, { className: "mx-txn-transaction-description", children: a ? /* @__PURE__ */ c(Ue, { row: !0, children: [
+    /* @__PURE__ */ e(
+      xe,
+      {
+        "aria-label": s.description_add_a_subcategory,
+        name: "add-subcategory",
+        onChange: (p) => _(p.target.value),
+        ref: u,
+        sx: {
+          backgroundColor: "background.paper",
+          ".MuiOutlinedInput-root": { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+          ".MuiOutlinedInput-input": { p: 11 },
+          width: 250
+        },
+        value: l
+      }
+    ),
+    /* @__PURE__ */ e(
+      le,
+      {
+        disabled: !l,
+        onClick: m,
+        sx: { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 },
+        variant: "outlined",
+        children: n.save_button
+      }
+    )
+  ] }) : /* @__PURE__ */ c(C, { alignItems: "center", direction: "row", gap: 4, children: [
+    /* @__PURE__ */ e(S, { bold: !0, children: t.description }),
+    /* @__PURE__ */ e(
+      Z,
+      {
+        "aria-label": s.description_edit_transaction_name,
+        onClick: () => {
+          i(!0), o(g.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK);
+        },
+        sx: { color: "action.active" },
+        children: /* @__PURE__ */ e(f, { name: "create", size: 22 })
+      }
+    )
+  ] }) });
+}, Mt = b(Gt), Kt = ({ transaction: t }) => {
+  const { updateTransaction: r } = v(), { transactions: n } = I(), { onEvent: s } = w(), o = Ie(), a = async () => {
+    s(P.TRANSACTION_DETAILS_CLICK_FLAG, { transaction_guid: t.guid }), await r({ ...t, is_flagged: !t.is_flagged });
+  };
+  return /* @__PURE__ */ e("div", { className: "mx-txn-transaction-flag", children: /* @__PURE__ */ e(
+    Xe,
+    {
+      "aria-label": n.flag_btn_aria,
+      "aria-pressed": t.is_flagged,
+      color: "warning",
+      onClick: a,
+      selected: t.is_flagged,
+      sx: {
+        borderRadius: 6,
+        color: o.palette.secondary.main,
+        "&.Mui-selected": {
+          color: o.palette.common.white,
+          backgroundColor: o.palette.warning.dark,
+          ":hover": {
+            color: o.palette.common.white,
+            backgroundColor: o.palette.warning.main
+          }
+        },
+        ":hover": {
+          color: o.palette.warning.contrastText,
+          backgroundColor: o.palette.warning.light
+        }
+      },
+      value: "flagged",
+      children: /* @__PURE__ */ e(Be, { color: "inherit" })
+    }
+  ) });
+}, $t = b(Kt), Ft = ({
+  bottomActions: t = Qe,
+  topActions: r = Je,
+  transaction: n
+}) => {
+  const { isCopyLoaded: s } = Me(), o = n?.number && n.number.length > 4, { onEvent: a } = w();
+  return d.useEffect(
+    () => a(P.TRANSACTION_DETAILS_VIEW, { transaction_guid: n.guid }),
+    []
+  ), s ? /* @__PURE__ */ e(O, { className: "mx-txn-transaction-details", width: "100%", children: n && /* @__PURE__ */ c(C, { children: [
+    /* @__PURE__ */ c(C, { gap: 12, p: 24, children: [
+      /* @__PURE__ */ e(ee, { elevation: 2, sx: { width: 64 }, children: /* @__PURE__ */ e(
+        pe,
+        {
+          categoryGuid: n.top_level_category_guid || "",
+          merchantGuid: n.merchant_guid || "",
+          size: 64
+        }
+      ) }),
+      /* @__PURE__ */ e(Mt, { transaction: n }),
+      /* @__PURE__ */ c(C, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ c(fe, { color: n.isIncome ? "success.main" : "text.primary", children: [
+          n.isIncome ? "+" : "",
+          Q(n.amount, "0,0.00")
+        ] }),
+        /* @__PURE__ */ e($t, { transaction: n })
+      ] }),
+      /* @__PURE__ */ c(C, { bgcolor: "background.highlight", borderRadius: "12px", gap: 4, p: 8, children: [
+        /* @__PURE__ */ e(S, { bold: !0, children: `${n.account}
+                ${o ? n.number : "•".repeat(4).concat(n.number ?? "")}` }),
+        /* @__PURE__ */ e(S, { bold: !0, color: "secondary", variant: "Tiny", children: n.feed_description })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(ee, { square: !0, sx: { boxShadow: "none" }, children: /* @__PURE__ */ e(ae, { children: r.map((i, l) => /* @__PURE__ */ c(d.Fragment, { children: [
+      i === q.Category && /* @__PURE__ */ e(dt, { transaction: n }),
+      i === q.Date && /* @__PURE__ */ e(_t, { transaction: n }),
+      i === q.Memo && /* @__PURE__ */ e(yt, { transaction: n }),
+      i === q.Tags && /* @__PURE__ */ e(Pt, { transaction: n }),
+      /* @__PURE__ */ e(ne, { variant: l < r.length - 1 ? "inset" : "fullWidth" })
+    ] }, i)) }) }),
+    /* @__PURE__ */ e(S, { bold: !0, mb: 8, ml: 26, mt: 16, variant: "Body", children: "Actions" }),
+    /* @__PURE__ */ e(ee, { square: !0, sx: { boxShadow: "none" }, children: /* @__PURE__ */ c(ae, { children: [
+      t.map((i, l) => /* @__PURE__ */ c(d.Fragment, { children: [
+        i === te.SplitTransaction && /* @__PURE__ */ e(xt, { transaction: n }),
+        i === te.HideTransaction && /* @__PURE__ */ e(Tt, { transaction: n }),
+        i === te.MerchantLogo && /* @__PURE__ */ e(gt, { transaction: n }),
+        /* @__PURE__ */ e(ne, { variant: l < t.length - 1 ? "inset" : "fullWidth" })
+      ] }, i)),
+      n.is_manual && !n.parent_guid && !n.has_been_split && /* @__PURE__ */ e(mt, { transaction: n })
+    ] }) })
+  ] }) }) : /* @__PURE__ */ e(Ne, {});
+}, vn = b(Ft);
+export {
+  te as B,
+  dt as C,
+  _t as D,
+  yt as M,
+  ot as S,
+  On as T,
+  vn as a,
+  rt as b,
+  Pt as c,
+  q as d,
+  G as u
+};