@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

package/dist/transactions/TransactionWidget/index.es.js

@@ -0,0 +1,189 @@
+import { buildDynamicCopy as Tt } from "../../core/utils/Localization/index.es.js";
+import { useAccountStore as At, useAppConfig as ht, useEvent as St, useGlobalCopyStore as gt, useGlobalUiStore as yt, useTransactionStore as Dt, useUserStore as bt } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as wt } from "../../common/hooks/useScreenSize/index.es.js";
+import { useWidgetLoadTimer as Nt } from "../../common/hooks/useWidgetLoadTimer/index.es.js";
+import { useAriaLive as Lt } from "../../common/hooks/useAriaLive/index.es.js";
+import v from "../../common/components/drawer/Drawer/index.es.js";
+import { ANALYTICS_EVENTS as s } from "../../common/constants/Analytics/index.es.js";
+import { DEFAULT_TRANSACTION as Ot } from "../../core/constants/Transaction/index.es.js";
+import { exportTransactionsToCSV as Et } from "../../core/utils/TransactionUtils/index.es.js";
+import kt from "../../common/components/Loader/index.es.js";
+import { WidgetContainer as vt } from "../../common/components/WidgetContainer/index.es.js";
+import It from "../../common/components/ConnectDrawer/index.es.js";
+import Rt from "../../common/components/SearchBox/index.es.js";
+import { SkeletonLoader as xt } from "../../common/components/SkeletonLoader/index.es.js";
+import { useTransactionsUiStore as Mt } from "../context/hooks/index.es.js";
+import Wt from "../components/shared/TransactionList/index.es.js";
+import Ut from "../components/shared/TransactionTable/index.es.js";
+import { useCategoryUiStore as Vt } from "../../categories/context/hooks/index.es.js";
+import Bt from "../components/shared/TransactionDetails/index.es.js";
+import Gt from "../components/shared/transactiondetails/ManualTransactionDetails/index.es.js";
+import Ft from "../components/transactionwidget/AddAccountModal/index.es.js";
+import Kt from "../components/transactionwidget/actions/EditCategoryAction/index.es.js";
+import i from "react";
+import { observer as Pt } from "mobx-react-lite";
+import Ht from "@mui/material/Stack";
+import { endOfMonth as $t } from "date-fns/endOfMonth";
+import { startOfMonth as jt } from "date-fns/startOfMonth";
+import { startOfToday as h } from "date-fns/startOfToday";
+import { jsx as a, jsxs as I } from "react/jsx-runtime";
+import { useTheme as zt } from "@mui/material/styles";
+import S from "@mui/material/Box";
+import { getUnixTime as Xt } from "date-fns/getUnixTime";
+var R = 120, Yt = ({ onBackClick: x, onMenuClick: M, height: g = "100dvh", showInsights: u = !1, sx: W = {} }) => {
+  const { manualAccounts: U, refreshAccounts: V } = At(), { is_mobile_webview: B, clientConfig: G, config: F } = ht(), { setSearchValue: K } = Vt(), { onEvent: r } = St(), { common: y, transactions: o } = gt(), { displayedDateRange: f, isInitialized: c, selectedAccountGuids: D, setDisplayedDate: b } = yt(), { isDesktop: P, isTablet: H } = wt(), l = zt(), { addTransaction: $, filter: j, isTransactionDataLoaded: p, loadTransactionData: z, setFilter: w, sortedTransactions: N, sortedTransactionsWithSplits: X, tags: Y, detailedTransactions: q, updateTransaction: J } = Dt(), { clearExpandedSplits: Q, isAmountValid: Z, manualTransaction: d, searchValue: L, setSearchValue: tt, setShowInsights: at, updateManualTransaction: ot } = Mt(), { userProfile: et } = bt(), [_, e] = i.useState(""), [O, m] = i.useState(""), [nt, C] = i.useState(!1), [it, E] = i.useState(!1), { announce: rt, ariaLive: st } = Lt(), T = G?.transactions?.selected_account_guid;
+  Nt({
+    widgetName: "TransactionWidget",
+    isLoaded: p
+  }), i.useEffect(() => {
+    p || z().finally();
+    const t = jt(h()), Ct = $t(h());
+    b(t, Ct), r(s.TRANSACTIONS_VIEW);
+  }, []), i.useEffect(() => {
+    c && w({
+      accounts: T ? [T] : D,
+      dateRange: {
+        start: f.start,
+        end: f.end
+      },
+      searchTerm: L
+    });
+  }, [
+    c,
+    f,
+    D
+  ]), i.useEffect(() => {
+    at(u);
+  }, [u]), i.useEffect(() => {
+    c && rt(Tt(o.showing_transactions_count, N.length));
+  }, [c, N]);
+  const n = O ? q.find((t) => t.guid === O) : void 0, k = Z && !!d.payee && !!d.account_guid && !!d.category_guid, ct = (t) => {
+    Q(), b(t[0], t[1]);
+  }, lt = (t) => {
+    tt(t), w({
+      ...j,
+      searchTerm: t
+    }), r(s.TRANSACTIONS_CLICK_SEARCH, { search_term: t });
+  }, dt = () => {
+    Et(X, Y), r(s.TRANSACTIONS_CLICK_EXPORT);
+  }, mt = () => {
+    U.length > 0 ? (ot({
+      ...Ot,
+      date: Xt(h()),
+      user_guid: et?.user_guid || ""
+    }), e("addTransaction"), r(s.TRANSACTIONS_CLICK_ADD)) : (C(!0), r(s.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL));
+  }, ut = async () => {
+    k && await $(d), e("");
+  }, ft = () => {
+    C(!1), E(!0);
+  }, pt = async () => {
+    E(!1), await V();
+  }, _t = async () => {
+    n && !n.has_been_viewed && await J({
+      ...n,
+      has_been_viewed: !0
+    }), e("");
+  };
+  if (!c) return /* @__PURE__ */ a(kt, {});
+  const A = [];
+  return !B && (P || H) && A.push({
+    iconName: "open_in_new",
+    label: o.export_csv_btn,
+    onClick: dt
+  }), F.show_connections_widget_in_master && A.push({
+    iconName: "add",
+    label: o.add_transaction_btn,
+    onClick: mt
+  }), /* @__PURE__ */ I(vt, {
+    actions: A,
+    calendarActions: { onRangeChanged: ct },
+    hasDivider: !0,
+    onAccountsFilterClick: () => r(s.ACCOUNTS_CLICK_FILTER),
+    onBackClick: x,
+    onMenuClick: M,
+    showAccountFilter: !T,
+    sx: W,
+    title: o.transactions_title,
+    children: [
+      p ? /* @__PURE__ */ I(Ht, { children: [
+        st,
+        /* @__PURE__ */ a(S, { children: /* @__PURE__ */ a(Rt, {
+          onChange: lt,
+          placeholder: o.action_bar_search_placeholder,
+          searchValue: L
+        }) }),
+        /* @__PURE__ */ a(S, {
+          sx: {
+            [l.breakpoints.down("md")]: { display: "none" },
+            [l.breakpoints.up("md")]: { display: "block" }
+          },
+          children: /* @__PURE__ */ a(Ut, {
+            height: `calc(${g} - ${R}px)`,
+            onCategoryClick: (t) => {
+              m(t), e("category");
+            },
+            onRowClick: (t) => {
+              m(t), e("transaction"), r(s.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: t });
+            }
+          })
+        }),
+        /* @__PURE__ */ a(S, {
+          sx: {
+            [l.breakpoints.down("md")]: { display: "block" },
+            [l.breakpoints.up("md")]: { display: "none" }
+          },
+          children: /* @__PURE__ */ a(Wt, {
+            height: `calc(${g} - ${R}px)`,
+            onClick: (t) => {
+              m(t), e("transaction");
+            },
+            showInsights: u
+          })
+        })
+      ] }) : /* @__PURE__ */ a(xt, {
+        sx: { m: 48 },
+        variant: "list"
+      }),
+      /* @__PURE__ */ a(v, {
+        ariaLabelClose: y.close_aria,
+        isOpen: _ === "transaction" && !!n,
+        onClose: _t,
+        title: o.details_title,
+        children: n && /* @__PURE__ */ a(Bt, { transaction: n })
+      }),
+      n && _ === "category" && /* @__PURE__ */ a(Kt, {
+        onClose: () => {
+          K(""), e(""), m("");
+        },
+        transaction: n
+      }),
+      /* @__PURE__ */ a(v, {
+        ariaLabelClose: y.close_aria,
+        isOpen: _ === "addTransaction",
+        isPrimaryDisabled: !k,
+        onClose: () => e(""),
+        onPrimaryAction: ut,
+        title: o.add_transaction_title,
+        children: /* @__PURE__ */ a(Gt, {})
+      }),
+      /* @__PURE__ */ a(Ft, {
+        copy: { title: o.add_manual_account },
+        isOpen: nt,
+        onClose: () => {
+          C(!1);
+        },
+        onPrimaryAction: ft
+      }),
+      /* @__PURE__ */ a(It, {
+        onClose: pt,
+        showConnectWidget: it,
+        title: o.add_manual_account
+      })
+    ]
+  });
+}, Oa = Pt(Yt);
+export {
+  Oa as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/transactions/TransactionWidget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/transactions/TransactionWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { DateRange } from '@mui/x-date-pickers-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  SearchBox,\n  useAccountStore,\n  useAppConfig,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useScreenSize,\n  useTransactionStore,\n  useUserStore,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { WidgetProps } from '../core'\n\nimport { useTransactionsUiStore } from './context/hooks'\nimport { DEFAULT_TRANSACTION } from '../core/constants/Transaction'\nimport { exportTransactionsToCSV } from '../core/utils/TransactionUtils'\nimport ConnectDrawer from '../common/components/ConnectDrawer'\nimport ManualTransactionDetails from './components/shared/transactiondetails/ManualTransactionDetails'\nimport TransactionDetails from './components/shared/TransactionDetails'\nimport TransactionList from './components/shared/TransactionList'\nimport TransactionTable from './components/shared/TransactionTable'\nimport AddAccountModal from './components/transactionwidget/AddAccountModal'\nimport EditCategoryAction from './components/transactionwidget/actions/EditCategoryAction'\n\nimport { useCategoryUiStore } from '../categories'\nimport { useAriaLive } from '../common/hooks/useAriaLive'\nimport { SkeletonLoader } from '../common/components/SkeletonLoader'\nimport { buildDynamicCopy } from '../core/utils/Localization'\n\nconst HEADER_HEIGHT = 120\n\nenum Drawers {\n  AddTransaction = 'addTransaction',\n  Category = 'category',\n  Transaction = 'transaction',\n}\n\ninterface TransactionWidgetProps extends WidgetProps {\n  height?: string | number\n  showInsights?: boolean\n}\n\nconst TransactionWidget: React.FC<TransactionWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  height = '100dvh',\n  showInsights = false,\n  sx = {},\n}) => {\n  const { manualAccounts, refreshAccounts } = useAccountStore()\n  const { is_mobile_webview, clientConfig, config } = useAppConfig()\n  const { setSearchValue: setCategorySearchValue } = useCategoryUiStore()\n  const { onEvent } = useEvent()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n  const { displayedDateRange, isInitialized, selectedAccountGuids, setDisplayedDate } =\n    useGlobalUiStore()\n  const { isDesktop, isTablet } = useScreenSize()\n  const theme = useTheme()\n  const {\n    addTransaction,\n    filter,\n    isTransactionDataLoaded,\n    loadTransactionData,\n    setFilter,\n    sortedTransactions,\n    sortedTransactionsWithSplits,\n    tags,\n    detailedTransactions: transactions,\n    updateTransaction,\n  } = useTransactionStore()\n  const {\n    clearExpandedSplits,\n    isAmountValid,\n    manualTransaction,\n    searchValue,\n    setSearchValue,\n    setShowInsights,\n    updateManualTransaction,\n  } = useTransactionsUiStore()\n  const { userProfile } = useUserStore()\n\n  const [drawerOpen, setDrawerOpen] = React.useState('')\n  const [transactionGuid, setTransactionGuid] = React.useState('')\n\n  const [addManualAccountModalOpen, setAddManualAccountModalOpen] = React.useState(false)\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n\n  const { announce, ariaLive } = useAriaLive()\n\n  const selected_account_guid = clientConfig?.transactions?.selected_account_guid\n\n  useWidgetLoadTimer({\n    widgetName: 'TransactionWidget',\n    isLoaded: isTransactionDataLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    // Set the displayed date to the current month\n    const startDate = startOfMonth(startOfToday())\n    const endDate = endOfMonth(startOfToday())\n    setDisplayedDate(startDate, endDate)\n\n    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_VIEW)\n  }, [])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      // Update the filter whenever the display date or account filter changes\n      setFilter({\n        accounts: selected_account_guid ? [selected_account_guid] : selectedAccountGuids,\n        dateRange: { start: displayedDateRange.start, end: displayedDateRange.end },\n        searchTerm: searchValue,\n      })\n    }\n  }, [isInitialized, displayedDateRange, selectedAccountGuids])\n\n  React.useEffect(() => {\n    setShowInsights(showInsights)\n  }, [showInsights])\n\n  React.useEffect(() => {\n    if (isInitialized) {\n      announce(\n        buildDynamicCopy(copy.showing_transactions_count, sortedTransactions.length) as string,\n      )\n    }\n  }, [isInitialized, sortedTransactions])\n\n  const transaction = transactionGuid\n    ? transactions.find((transaction) => transaction.guid === transactionGuid)\n    : undefined\n\n  const isTransactionValid =\n    isAmountValid &&\n    Boolean(manualTransaction.payee) &&\n    Boolean(manualTransaction.account_guid) &&\n    Boolean(manualTransaction.category_guid)\n\n  const handleDateChanged = (range: DateRange<Date>) => {\n    clearExpandedSplits()\n    setDisplayedDate(range[0] as Date, range[1] as Date)\n  }\n\n  const handleSearch = (searchTerm: string) => {\n    setSearchValue(searchTerm)\n    setFilter({\n      ...filter,\n      searchTerm,\n    })\n    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_SEARCH, { search_term: searchTerm })\n  }\n\n  const handleExportCsvClick = () => {\n    exportTransactionsToCSV(sortedTransactionsWithSplits, tags)\n    onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_EXPORT)\n  }\n\n  const handleAddTransactionClick = () => {\n    if (manualAccounts.length > 0) {\n      updateManualTransaction({\n        ...DEFAULT_TRANSACTION,\n        date: getUnixTime(startOfToday()),\n        user_guid: userProfile?.user_guid || '',\n      })\n\n      setDrawerOpen(Drawers.AddTransaction)\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_ADD)\n    } else {\n      setAddManualAccountModalOpen(true)\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_ADD_MANUAL_ACCOUNT_MODAL)\n    }\n  }\n\n  const handleAddTransaction = async () => {\n    if (isTransactionValid) {\n      await addTransaction(manualTransaction)\n    }\n\n    setDrawerOpen('')\n  }\n\n  const handleAddManualAccountClick = () => {\n    setAddManualAccountModalOpen(false)\n    setShowConnectWidget(true)\n  }\n\n  const handleConnectWidgetClose = async () => {\n    setShowConnectWidget(false)\n    await refreshAccounts()\n  }\n\n  const handleTransactionDrawerClose = async () => {\n    // mark transaction as viewed\n    if (transaction && !transaction.has_been_viewed) {\n      await updateTransaction({ ...transaction, has_been_viewed: true })\n    }\n    setDrawerOpen('')\n  }\n\n  if (!isInitialized) {\n    return <Loader />\n  }\n\n  const actions = []\n\n  if (!is_mobile_webview && (isDesktop || isTablet)) {\n    actions.push({\n      iconName: 'open_in_new',\n      label: copy.export_csv_btn,\n      onClick: handleExportCsvClick,\n    })\n  }\n\n  if (config.show_connections_widget_in_master) {\n    actions.push({\n      iconName: 'add',\n      label: copy.add_transaction_btn,\n      onClick: handleAddTransactionClick,\n    })\n  }\n\n  return (\n    <WidgetContainer\n      actions={actions}\n      calendarActions={{\n        onRangeChanged: handleDateChanged,\n      }}\n      hasDivider={true}\n      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_FILTER)}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      showAccountFilter={!selected_account_guid}\n      sx={sx}\n      title={copy.transactions_title}\n    >\n      {!isTransactionDataLoaded ? (\n        <SkeletonLoader sx={{ m: 48 }} variant=\"list\" />\n      ) : (\n        <Stack>\n          {ariaLive}\n          <Box>\n            <SearchBox\n              onChange={handleSearch}\n              placeholder={copy.action_bar_search_placeholder}\n              searchValue={searchValue}\n            />\n          </Box>\n\n          <Box\n            sx={{\n              [theme.breakpoints.down('md')]: { display: 'none' },\n              [theme.breakpoints.up('md')]: { display: 'block' },\n            }}\n          >\n            <TransactionTable\n              height={`calc(${height} - ${HEADER_HEIGHT}px)`}\n              onCategoryClick={(guid: string) => {\n                setTransactionGuid(guid)\n                setDrawerOpen(Drawers.Category)\n              }}\n              onRowClick={(guid: string) => {\n                setTransactionGuid(guid)\n                setDrawerOpen(Drawers.Transaction)\n                onEvent(ANALYTICS_EVENTS.TRANSACTIONS_CLICK_DETAILS, { transaction_guid: guid })\n              }}\n            />\n          </Box>\n          <Box\n            sx={{\n              [theme.breakpoints.down('md')]: { display: 'block' },\n              [theme.breakpoints.up('md')]: { display: 'none' },\n            }}\n          >\n            <TransactionList\n              height={`calc(${height} - ${HEADER_HEIGHT}px)`}\n              onClick={(guid: string) => {\n                setTransactionGuid(guid)\n                setDrawerOpen(Drawers.Transaction)\n              }}\n              showInsights={showInsights}\n            />\n          </Box>\n        </Stack>\n      )}\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={drawerOpen === Drawers.Transaction && Boolean(transaction)}\n        onClose={handleTransactionDrawerClose}\n        title={copy.details_title}\n      >\n        {transaction && <TransactionDetails transaction={transaction} />}\n      </Drawer>\n      {transaction && drawerOpen === Drawers.Category && (\n        <EditCategoryAction\n          onClose={() => {\n            setCategorySearchValue('')\n            setDrawerOpen('')\n            setTransactionGuid('')\n          }}\n          transaction={transaction}\n        />\n      )}\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={drawerOpen === Drawers.AddTransaction}\n        isPrimaryDisabled={!isTransactionValid}\n        onClose={() => setDrawerOpen('')}\n        onPrimaryAction={handleAddTransaction}\n        title={copy.add_transaction_title}\n      >\n        <ManualTransactionDetails />\n      </Drawer>\n      <AddAccountModal\n        copy={{ title: copy.add_manual_account }}\n        isOpen={addManualAccountModalOpen}\n        onClose={() => {\n          setAddManualAccountModalOpen(false)\n        }}\n        onPrimaryAction={handleAddManualAccountClick}\n      />\n      <ConnectDrawer\n        onClose={handleConnectWidgetClose}\n        showConnectWidget={showConnectWidget}\n        title={copy.add_manual_account}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TransactionWidget)\n"],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+import { useEvent as b, useGlobalCopyStore as g, useTransactionStore as E } from "../../../../../common/context/hooks/index.es.js";
+import { useAriaLive as h } from "../../../../../common/hooks/useAriaLive/index.es.js";
+import { ANALYTICS_EVENTS as S } from "../../../../../common/constants/Analytics/index.es.js";
+import { ON_CLICK_EVENTS as v } from "../../../../constants/OnClickEvents/index.es.js";
+import r from "react";
+import { observer as x } from "mobx-react-lite";
+import R from "@mui/material/Stack";
+import { Icon as N, Text as y } from "@mxenabled/mxui";
+import L from "@mui/material/Button";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import A from "@mui/material/Box";
+import O from "@mui/material/IconButton";
+import B from "@mui/material/TextField";
+import D from "@mui/material/FormGroup";
+var k = ({ transaction: o, viewOnly: p = !1 }) => {
+  const { updateTransaction: m } = E(), { common: l, transactions: t } = g(), { onEvent: s } = b(), { announce: f, ariaLive: I } = h(), [n, c] = r.useState(!1), [i, u] = r.useState(""), d = r.useRef(null);
+  r.useEffect(() => {
+    n && (u(o.description), d?.current?.focus());
+  }, [n]);
+  const T = () => {
+    c(!0), s(v.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK), setTimeout(() => document.getElementById("transaction-description-input")?.focus(), 0);
+  }, _ = async () => {
+    s(S.TRANSACTION_DETAILS_CLICK_DESCRIPTION, { transaction_guid: o.guid }), await m({
+      ...o,
+      description: i
+    }), c(!1), f(`${t.payee_title}: ${i}`), setTimeout(() => document.getElementById("transaction-description-edit-button")?.focus(), 0);
+  };
+  return /* @__PURE__ */ a(A, {
+    className: "mx-txn-transaction-description",
+    children: [I, n ? /* @__PURE__ */ a(D, {
+      row: !0,
+      children: [/* @__PURE__ */ e(B, {
+        "aria-label": t.payee_title,
+        id: "transaction-description-input",
+        label: t.payee_title,
+        name: t.payee_title,
+        onChange: (C) => u(C.target.value),
+        ref: d,
+        slotProps: { htmlInput: { maxLength: 140 } },
+        sx: {
+          backgroundColor: "background.paper",
+          ".MuiOutlinedInput-root": {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
+          },
+          ".MuiOutlinedInput-input": { p: 11 },
+          width: 250
+        },
+        value: i
+      }), /* @__PURE__ */ e(L, {
+        disabled: !i,
+        onClick: _,
+        sx: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0
+        },
+        variant: "outlined",
+        children: l.save_button
+      })]
+    }) : /* @__PURE__ */ a(R, {
+      alignItems: "center",
+      direction: "row",
+      gap: 4,
+      sx: { minHeight: 44 },
+      children: [/* @__PURE__ */ e(y, {
+        bold: !0,
+        children: o.description
+      }), !p && /* @__PURE__ */ e(O, {
+        "aria-label": t.payee_edit,
+        id: "transaction-description-edit-button",
+        onClick: T,
+        sx: { color: "action.active" },
+        children: /* @__PURE__ */ e(N, {
+          name: "create",
+          size: 22
+        })
+      })]
+    })]
+  });
+}, Q = x(k);
+export {
+  Q as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/Description.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport FormGroup from '@mui/material/FormGroup'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport type { Transaction } from '../../../../core'\n\nimport {\n  ANALYTICS_EVENTS,\n  useEvent,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../../common'\nimport { useAriaLive } from '../../../../common/hooks/useAriaLive'\nimport { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'\n\ninterface DescriptionProps {\n  transaction: Transaction\n  viewOnly?: boolean\n}\n\nconst Description: React.FC<DescriptionProps> = ({ transaction, viewOnly = false }) => {\n  const { updateTransaction } = useTransactionStore()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n  const { onEvent } = useEvent()\n  const { announce, ariaLive } = useAriaLive()\n\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [description, setDescription] = React.useState('')\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    if (isEditing) {\n      setDescription(transaction.description)\n      inputRef?.current?.focus()\n    }\n  }, [isEditing])\n\n  const handleEdit = () => {\n    setIsEditing(true)\n    onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK)\n    setTimeout(() => document.getElementById(`transaction-description-input`)?.focus(), 0)\n  }\n\n  const handleSave = async () => {\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DESCRIPTION, {\n      transaction_guid: transaction.guid,\n    })\n    await updateTransaction({ ...transaction, description })\n    setIsEditing(false)\n    announce(`${copy.payee_title}: ${description}`)\n    setTimeout(() => document.getElementById(`transaction-description-edit-button`)?.focus(), 0)\n  }\n\n  return (\n    <Box className=\"mx-txn-transaction-description\">\n      {ariaLive}\n      {isEditing ? (\n        <FormGroup row={true}>\n          <TextField\n            aria-label={copy.payee_title}\n            id={`transaction-description-input`}\n            label={copy.payee_title}\n            name={copy.payee_title}\n            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDescription(e.target.value)}\n            ref={inputRef}\n            slotProps={{ htmlInput: { maxLength: 140 } }}\n            sx={{\n              backgroundColor: 'background.paper',\n              '.MuiOutlinedInput-root': { borderTopRightRadius: 0, borderBottomRightRadius: 0 },\n              '.MuiOutlinedInput-input': { p: 11 },\n              width: 250,\n            }}\n            value={description}\n          />\n          <Button\n            disabled={!description}\n            onClick={handleSave}\n            sx={{\n              borderTopLeftRadius: 0,\n              borderBottomLeftRadius: 0,\n            }}\n            variant=\"outlined\"\n          >\n            {commonCopy.save_button}\n          </Button>\n        </FormGroup>\n      ) : (\n        <Stack alignItems=\"center\" direction=\"row\" gap={4} sx={{ minHeight: 44 }}>\n          <Text bold={true}>{transaction.description}</Text>\n          {!viewOnly && (\n            <IconButton\n              aria-label={copy.payee_edit}\n              id={`transaction-description-edit-button`}\n              onClick={handleEdit}\n              sx={{ color: 'action.active' }}\n            >\n              <Icon name=\"create\" size={22} />\n            </IconButton>\n          )}\n        </Stack>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(Description)\n"],"mappings":";;;;;;;;;;;;;;AA4BA,IAAM,IAAA,CAA2C,EAAE,aAAA,GAAa,UAAA,IAAW,GAAA,MAAY;AACrF,QAAM,EAAE,mBAAA,EAAA,IAAsB,EAAoB,GAC5C,EAAE,QAAQ,GAAY,cAAc,EAAA,IAAS,EAAmB,GAChE,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,UAAA,GAAU,UAAA,EAAA,IAAa,EAAY,GAErC,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAa,CAAA,IAAkB,EAAM,SAAS,EAAE,GAEjD,IAAW,EAAM,OAAyB,IAAI;AAEpD,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,MACF,EAAe,EAAY,WAAW,GACtC,GAAU,SAAS,MAAM;AAAA,EAE7B,GAAG,CAAC,CAAS,CAAC;AAEd,QAAM,IAAA,MAAmB;AACvB,IAAA,EAAa,EAAI,GACjB,EAAQ,EAAgB,qCAAqC,GAC7D,WAAA,MAAiB,SAAS,eAAe,+BAA+B,GAAG,MAAM,GAAG,CAAC;AAAA,EACvF,GAEM,IAAa,YAAY;AAC7B,IAAA,EAAQ,EAAiB,uCAAuC,EAC9D,kBAAkB,EAAY,KAChC,CAAC,GACD,MAAM,EAAkB;AAAA,MAAE,GAAG;AAAA,MAAa,aAAA;AAAA,IAAY,CAAC,GACvD,EAAa,EAAK,GAClB,EAAS,GAAG,EAAK,WAAA,KAAgB,CAAA,EAAa,GAC9C,WAAA,MAAiB,SAAS,eAAe,qCAAqC,GAAG,MAAM,GAAG,CAAC;AAAA,EAC7F;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,WAAU;AAAA,cAAf,CACG,GACA,IACC,gBAAA,EAAC,GAAD;AAAA,MAAW,KAAK;AAAA,gBAAhB,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,cAAY,EAAK;AAAA,QACjB,IAAI;AAAA,QACJ,OAAO,EAAK;AAAA,QACZ,MAAM,EAAK;AAAA,QACX,UAAA,CAAW,MAA2C,EAAe,EAAE,OAAO,KAAK;AAAA,QACnF,KAAK;AAAA,QACL,WAAW,EAAE,WAAW,EAAE,WAAW,IAAI,EAAE;AAAA,QAC3C,IAAI;AAAA,UACF,iBAAiB;AAAA,UACjB,0BAA0B;AAAA,YAAE,sBAAsB;AAAA,YAAG,yBAAyB;AAAA,UAAE;AAAA,UAChF,2BAA2B,EAAE,GAAG,GAAG;AAAA,UACnC,OAAO;AAAA,QACT;AAAA,QACA,OAAO;AAAA,MACR,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,UAAU,CAAC;AAAA,QACX,SAAS;AAAA,QACT,IAAI;AAAA,UACF,qBAAqB;AAAA,UACrB,wBAAwB;AAAA,QAC1B;AAAA,QACA,SAAQ;AAAA,kBAEP,EAAW;AAAA,MACN,CAAA,CACC;AAAA,SAEX,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,WAAU;AAAA,MAAM,KAAK;AAAA,MAAG,IAAI,EAAE,WAAW,GAAG;AAAA,gBAAvE,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,kBAAO,EAAY;AAAA,MAAkB,CAAA,GAChD,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,QACE,cAAY,EAAK;AAAA,QACjB,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI,EAAE,OAAO,gBAAgB;AAAA,kBAE7B,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAK;AAAA,UAAS,MAAM;AAAA,QAAK,CAAA;AAAA,MACrB,CAAA,CAET;AAAA,MAEN;AAAA;AAET,GAEA,IAAe,EAAS,CAAW"}

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

@@ -0,0 +1,49 @@
+import { useEvent as c, useGlobalCopyStore as s, useTransactionStore as g } from "../../../../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as d } from "../../../../../common/constants/Analytics/index.es.js";
+import "react";
+import { observer as p } from "mobx-react-lite";
+import { Flag as f } from "@mxenabled/mx-icons";
+import { jsx as e } from "react/jsx-runtime";
+import { alpha as i, useTheme as u } from "@mui/material/styles";
+import h from "@mui/material/ToggleButton";
+var T = ({ transaction: r }) => {
+  const { updateTransaction: n } = g(), { transactions: t } = s(), { onEvent: m } = c(), o = u(), a = o.palette.mode === "dark", l = async () => {
+    m(d.TRANSACTION_DETAILS_CLICK_FLAG, { transaction_guid: r.guid }), await n({
+      ...r,
+      is_flagged: !r.is_flagged
+    });
+  };
+  return /* @__PURE__ */ e("div", {
+    className: "mx-txn-transaction-flag",
+    children: /* @__PURE__ */ e(h, {
+      "aria-label": t.flag_btn_aria,
+      "aria-pressed": r.is_flagged,
+      color: a ? "primary" : "warning",
+      onClick: l,
+      selected: r.is_flagged,
+      sx: {
+        borderRadius: 6,
+        color: a ? "common.white" : "secondary.main",
+        "&.Mui-selected": {
+          color: a ? "primary.main" : "common.white",
+          backgroundColor: a ? i(o.palette.primary.main, 0.25) : "warning.dark",
+          ":hover": {
+            color: a ? "primary.main" : "common.white",
+            backgroundColor: a ? i(o.palette.primary.main, 0.2) : "warning.main"
+          }
+        },
+        ":hover": {
+          color: a ? "common.white" : "warning.contrastText",
+          backgroundColor: a ? i(o.palette.primary.main, 0.2) : "warning.light"
+        }
+      },
+      value: "flagged",
+      children: /* @__PURE__ */ e(f, { color: "inherit" })
+    })
+  });
+}, S = p(T);
+export {
+  S as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/FlagTransaction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ToggleButton from '@mui/material/ToggleButton'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { Flag as FlagOutlinedIcon } from '@mxenabled/mx-icons'\n\nimport type { Transaction } from '../../../../core'\n\nimport {\n  ANALYTICS_EVENTS,\n  useEvent,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../../common'\n\ninterface FlagTransactionProps {\n  transaction: Transaction\n}\n\nconst FlagTransaction: React.FC<FlagTransactionProps> = ({ transaction }) => {\n  const { updateTransaction } = useTransactionStore()\n  const { transactions: copy } = useGlobalCopyStore()\n  const { onEvent } = useEvent()\n\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const handleFlagTransaction = async () => {\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_FLAG, { transaction_guid: transaction.guid })\n    await updateTransaction({ ...transaction, is_flagged: !transaction.is_flagged })\n  }\n\n  return (\n    <div className=\"mx-txn-transaction-flag\">\n      <ToggleButton\n        aria-label={copy.flag_btn_aria}\n        aria-pressed={transaction.is_flagged}\n        color={isDarkMode ? 'primary' : 'warning'}\n        onClick={handleFlagTransaction}\n        selected={transaction.is_flagged}\n        sx={{\n          borderRadius: 6,\n          color: isDarkMode ? 'common.white' : 'secondary.main',\n          '&.Mui-selected': {\n            color: isDarkMode ? 'primary.main' : 'common.white',\n            backgroundColor: isDarkMode ? alpha(theme.palette.primary.main, 0.25) : 'warning.dark',\n            ':hover': {\n              color: isDarkMode ? 'primary.main' : 'common.white',\n              backgroundColor: isDarkMode ? alpha(theme.palette.primary.main, 0.2) : 'warning.main',\n            },\n          },\n          ':hover': {\n            color: isDarkMode ? 'common.white' : 'warning.contrastText',\n            backgroundColor: isDarkMode ? alpha(theme.palette.primary.main, 0.2) : 'warning.light',\n          },\n        }}\n        value=\"flagged\"\n      >\n        <FlagOutlinedIcon color=\"inherit\" />\n      </ToggleButton>\n    </div>\n  )\n}\nexport default observer(FlagTransaction)\n"],"mappings":";;;;;;;;AAqBA,IAAM,IAAA,CAAmD,EAAE,aAAA,EAAA,MAAkB;AAC3E,QAAM,EAAE,mBAAA,EAAA,IAAsB,EAAoB,GAC5C,EAAE,cAAc,EAAA,IAAS,EAAmB,GAC5C,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,IAAQ,EAAS,GACjB,IAAa,EAAM,QAAQ,SAAS,QAEpC,IAAwB,YAAY;AACxC,IAAA,EAAQ,EAAiB,gCAAgC,EAAE,kBAAkB,EAAY,KAAK,CAAC,GAC/F,MAAM,EAAkB;AAAA,MAAE,GAAG;AAAA,MAAa,YAAY,CAAC,EAAY;AAAA,IAAW,CAAC;AAAA,EACjF;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cACb,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAK;AAAA,MACjB,gBAAc,EAAY;AAAA,MAC1B,OAAO,IAAa,YAAY;AAAA,MAChC,SAAS;AAAA,MACT,UAAU,EAAY;AAAA,MACtB,IAAI;AAAA,QACF,cAAc;AAAA,QACd,OAAO,IAAa,iBAAiB;AAAA,QACrC,kBAAkB;AAAA,UAChB,OAAO,IAAa,iBAAiB;AAAA,UACrC,iBAAiB,IAAa,EAAM,EAAM,QAAQ,QAAQ,MAAM,IAAI,IAAI;AAAA,UACxE,UAAU;AAAA,YACR,OAAO,IAAa,iBAAiB;AAAA,YACrC,iBAAiB,IAAa,EAAM,EAAM,QAAQ,QAAQ,MAAM,GAAG,IAAI;AAAA,UACzE;AAAA,QACF;AAAA,QACA,UAAU;AAAA,UACR,OAAO,IAAa,iBAAiB;AAAA,UACrC,iBAAiB,IAAa,EAAM,EAAM,QAAQ,QAAQ,MAAM,GAAG,IAAI;AAAA,QACzE;AAAA,MACF;AAAA,MACA,OAAM;AAAA,gBAEN,gBAAA,EAAC,GAAD,EAAkB,OAAM,UAAW,CAAA;AAAA,IACvB,CAAA;AAAA,EACX,CAAA;AAET,GACA,IAAe,EAAS,CAAe"}

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

@@ -0,0 +1,151 @@
+import { useAccountStore as I, useGlobalCopyStore as k } from "../../../../../common/context/hooks/index.es.js";
+import { TransactionType as l } from "../../../../../core/types/Transaction/index.es.js";
+import { formatCurrency as M } from "../../../../../core/utils/NumberFormatting/index.es.js";
+import S from "../../../../../common/components/CurrencyInput/index.es.js";
+import s from "../../../../../common/components/SelectionBox/index.es.js";
+import { useTransactionsUiStore as w } from "../../../../context/hooks/index.es.js";
+import E from "../actions/CategoryAction/index.es.js";
+import q from "../actions/DateAction/index.es.js";
+import B from "../actions/MemoAction/index.es.js";
+import R from "../actions/TagsAction/index.es.js";
+import c from "react";
+import { observer as N } from "mobx-react-lite";
+import u from "@mui/material/Stack";
+import { TextField as _ } from "@mxenabled/mxui";
+import { ExpandMore as P } from "@mxenabled/mx-icons";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+import V from "@mui/material/Divider";
+import j from "@mui/material/MenuItem";
+import G from "@mui/material/RadioGroup";
+var L = () => {
+  const { visibleAccounts: m } = I(), { common: r, transactions: o } = k(), { manualTransaction: e, setIsAmountValid: d, updateManualTransaction: i } = w(), [b, f] = c.useState(""), [h, g] = c.useState(""), y = c.useMemo(() => m.filter((t) => t.is_manual), [m]).map((t) => ({
+    label: `${t.name} | ${M(t.balance, "0,0.00")}`,
+    value: t.guid
+  })), x = {
+    error_amount_is_invalid: r.currency_input.error_amount_is_invalid,
+    error_amount_must_be_equal_to: r.currency_input.error_amount_must_be_equal_to,
+    error_amount_must_be_less_than_or_equal_to: r.currency_input.error_amount_must_be_less_than_or_equal_to,
+    enter_amount: r.currency_input.enter_amount
+  }, v = (t) => {
+    f(t), i({
+      ...e,
+      amount: Number(t)
+    });
+  }, T = (t, D) => {
+    i({
+      ...e,
+      transaction_type: Number(D)
+    });
+  }, C = (t) => {
+    g(t), i({
+      ...e,
+      payee: t,
+      description: t
+    });
+  }, A = (t) => {
+    i({
+      ...e,
+      account_guid: t
+    });
+  };
+  return /* @__PURE__ */ n(p, {
+    className: "mx-txn-manual-transaction-details",
+    children: [
+      /* @__PURE__ */ n(u, {
+        gap: 40,
+        mx: 24,
+        my: 32,
+        children: [
+          /* @__PURE__ */ n(u, {
+            direction: "row",
+            sx: {
+              flexDirection: {
+                xs: "column",
+                sm: "row"
+              },
+              gap: {
+                xs: 40,
+                sm: 8
+              }
+            },
+            children: [/* @__PURE__ */ a(S, {
+              allowDecimals: !0,
+              amount: b,
+              ariaLabel: o.amount_title,
+              copy: x,
+              label: o.amount_title,
+              setAmount: v,
+              setHasValidInput: d,
+              sx: { bgcolor: "background.paper" },
+              type: "number"
+            }), /* @__PURE__ */ a(G, {
+              name: "TransactionType",
+              onChange: T,
+              row: !0,
+              children: /* @__PURE__ */ n(u, {
+                alignItems: "center",
+                direction: "row",
+                children: [/* @__PURE__ */ a(s, {
+                  checked: e.transaction_type === l.CREDIT,
+                  label: o.manual_transaction_credit_button_label,
+                  sx: { ml: {
+                    xs: 0,
+                    sm: 8
+                  } },
+                  tooltip: o.manual_transaction_credit_button_tooltip,
+                  value: l.CREDIT
+                }), /* @__PURE__ */ a(s, {
+                  checked: e.transaction_type === l.DEBIT,
+                  label: o.manual_transaction_debit_button_label,
+                  tooltip: o.manual_transaction_debit_button_tooltip,
+                  value: l.DEBIT
+                })]
+              })
+            })]
+          }),
+          /* @__PURE__ */ a(_, {
+            label: o.payee_title,
+            name: "payee",
+            onChange: (t) => C(t.target.value),
+            sx: { bgcolor: "background.paper" },
+            value: h
+          }),
+          /* @__PURE__ */ a(_, {
+            label: o.manual_transaction_select_an_account,
+            onChange: (t) => A(t.target.value),
+            placeholder: o.manual_transaction_select,
+            select: !0,
+            slotProps: {
+              inputLabel: { shrink: !0 },
+              select: {
+                defaultValue: -1,
+                IconComponent: P
+              }
+            },
+            sx: { bgcolor: "background.paper" },
+            children: y.map((t) => /* @__PURE__ */ a(j, {
+              value: t.value,
+              children: t.label
+            }, t.value))
+          })
+        ]
+      }),
+      /* @__PURE__ */ a(V, { light: !0 }),
+      /* @__PURE__ */ n(p, {
+        bgcolor: "background.paper",
+        children: [
+          /* @__PURE__ */ a(E, { transaction: e }),
+          /* @__PURE__ */ a(q, { transaction: e }),
+          /* @__PURE__ */ a(B, { transaction: e }),
+          /* @__PURE__ */ a(R, { transaction: e })
+        ]
+      })
+    ]
+  });
+}, lt = N(L);
+export {
+  lt as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/ManualTransactionDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport MenuItem from '@mui/material/MenuItem'\nimport RadioGroup from '@mui/material/RadioGroup'\nimport Stack from '@mui/material/Stack'\n\nimport { TextField } from '@mxenabled/mxui'\nimport { ExpandMore as ExpandMoreIcon } from '@mxenabled/mx-icons'\n\nimport {\n  CurrencyInput,\n  SelectionBox,\n  useAccountStore,\n  useGlobalCopyStore,\n} from '../../../../common'\nimport { TransactionType } from '../../../../core'\n\nimport { useTransactionsUiStore } from '../../../context/hooks'\n\nimport { CategoryAction, DateAction, MemoAction, TagsAction } from './actions'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ntype ManualAccount = {\n  label: string\n  value: string\n}\nconst ManualTransactionDetails = () => {\n  const { visibleAccounts: accounts } = useAccountStore()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n  const { manualTransaction, setIsAmountValid, updateManualTransaction } = useTransactionsUiStore()\n\n  const [amount, setAmount] = React.useState('')\n  const [payee, setPayee] = React.useState('')\n\n  const manualAccounts = React.useMemo(\n    () => accounts.filter((account) => account.is_manual),\n    [accounts],\n  ).map((account) => {\n    return {\n      label: `${account.name} | ${formatCurrency(account.balance, '0,0.00')}`,\n      value: account.guid,\n    } as ManualAccount\n  })\n\n  const currencyCopy = {\n    error_amount_is_invalid: commonCopy.currency_input.error_amount_is_invalid,\n    error_amount_must_be_equal_to: commonCopy.currency_input.error_amount_must_be_equal_to,\n    error_amount_must_be_less_than_or_equal_to:\n      commonCopy.currency_input.error_amount_must_be_less_than_or_equal_to,\n    enter_amount: commonCopy.currency_input.enter_amount,\n  }\n\n  const handleAmountChanged = (amount: string) => {\n    setAmount(amount)\n    updateManualTransaction({ ...manualTransaction, amount: Number(amount) })\n  }\n\n  const handleTransactionTypeChanged = (_event: React.ChangeEvent<HTMLElement>, value: string) => {\n    updateManualTransaction({ ...manualTransaction, transaction_type: Number(value) })\n  }\n\n  const handlePayeeChanged = (payee: string) => {\n    setPayee(payee)\n    updateManualTransaction({ ...manualTransaction, payee, description: payee })\n  }\n\n  const handleAccountChanged = (guid: string) => {\n    updateManualTransaction({ ...manualTransaction, account_guid: guid })\n  }\n\n  return (\n    <Box className=\"mx-txn-manual-transaction-details\">\n      <Stack gap={40} mx={24} my={32}>\n        <Stack\n          direction=\"row\"\n          sx={{ flexDirection: { xs: 'column', sm: 'row' }, gap: { xs: 40, sm: 8 } }}\n        >\n          <CurrencyInput\n            allowDecimals={true}\n            amount={amount}\n            ariaLabel={copy.amount_title}\n            copy={currencyCopy}\n            label={copy.amount_title}\n            setAmount={handleAmountChanged}\n            setHasValidInput={setIsAmountValid}\n            sx={{ bgcolor: 'background.paper' }}\n            type=\"number\"\n          />\n          <RadioGroup name=\"TransactionType\" onChange={handleTransactionTypeChanged} row={true}>\n            <Stack alignItems=\"center\" direction=\"row\">\n              <SelectionBox\n                checked={manualTransaction.transaction_type === TransactionType.CREDIT}\n                label={copy.manual_transaction_credit_button_label}\n                sx={{ ml: { xs: 0, sm: 8 } }}\n                tooltip={copy.manual_transaction_credit_button_tooltip}\n                value={TransactionType.CREDIT}\n              />\n              <SelectionBox\n                checked={manualTransaction.transaction_type === TransactionType.DEBIT}\n                label={copy.manual_transaction_debit_button_label}\n                tooltip={copy.manual_transaction_debit_button_tooltip}\n                value={TransactionType.DEBIT}\n              />\n            </Stack>\n          </RadioGroup>\n        </Stack>\n\n        <TextField\n          label={copy.payee_title}\n          name=\"payee\"\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handlePayeeChanged(e.target.value)}\n          sx={{ bgcolor: 'background.paper' }}\n          value={payee}\n        />\n\n        <TextField\n          label={copy.manual_transaction_select_an_account}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n            handleAccountChanged(e.target.value)\n          }\n          placeholder={copy.manual_transaction_select}\n          select={true}\n          slotProps={{\n            inputLabel: { shrink: true },\n            select: { defaultValue: -1, IconComponent: ExpandMoreIcon },\n          }}\n          sx={{ bgcolor: 'background.paper' }}\n        >\n          {manualAccounts.map((account) => (\n            <MenuItem key={account.value} value={account.value}>\n              {account.label}\n            </MenuItem>\n          ))}\n        </TextField>\n      </Stack>\n      <Divider light={true} />\n      <Box bgcolor=\"background.paper\">\n        <CategoryAction transaction={manualTransaction} />\n        <DateAction transaction={manualTransaction} />\n        <MemoAction transaction={manualTransaction} />\n        <TagsAction transaction={manualTransaction} />\n      </Box>\n    </Box>\n  )\n}\n\nexport default observer(ManualTransactionDetails)\n"],"mappings":"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"}

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

@@ -0,0 +1,39 @@
+import { formatCurrency as u } from "../../../../../core/utils/NumberFormatting/index.es.js";
+import "react";
+import t from "@mui/material/Stack";
+import { MerchantLogo as s, P as p, Text as l } from "@mxenabled/mxui";
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+var _ = ({ transaction: a }) => {
+  const { amount: i, description: n, isIncome: e, merchant_guid: c, payee: m, top_level_category_guid: d } = a;
+  return /* @__PURE__ */ r(t, {
+    className: "mx-txn-amount-header",
+    direction: "row",
+    gap: 12,
+    px: 16,
+    py: 24,
+    children: [/* @__PURE__ */ o(s, {
+      categoryGuid: d || "",
+      merchantGuid: c || "",
+      size: 64
+    }), /* @__PURE__ */ r(t, {
+      overflow: "hidden'",
+      children: [/* @__PURE__ */ o(l, {
+        bold: !0,
+        mb: 4,
+        truncate: !0,
+        variant: "body1",
+        children: n || m
+      }), /* @__PURE__ */ r(p, {
+        color: e ? "success.main" : "text.primary",
+        truncate: !0,
+        variant: "h1",
+        children: [e ? "+" : "", u(i, "0,0.00")]
+      })]
+    })]
+  });
+};
+export {
+  _ as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/TransactionAmountHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\n\nimport type { Transaction } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionAmountHeaderProps {\n  transaction: Transaction\n}\n\nconst TransactionAmountHeader: React.FC<TransactionAmountHeaderProps> = ({ transaction }) => {\n  const { amount, description, isIncome, merchant_guid, payee, top_level_category_guid } =\n    transaction\n\n  return (\n    <Stack className=\"mx-txn-amount-header\" direction=\"row\" gap={12} px={16} py={24}>\n      <MerchantLogo\n        categoryGuid={top_level_category_guid || ''}\n        merchantGuid={merchant_guid || ''}\n        size={64}\n      />\n      <Stack overflow=\"hidden'\">\n        <Text bold={true} mb={4} truncate={true} variant=\"body1\">\n          {description || payee}\n        </Text>\n        <P color={isIncome ? 'success.main' : 'text.primary'} truncate={true} variant=\"h1\">\n          {isIncome ? '+' : ''}\n          {formatCurrency(amount, '0,0.00')}\n        </P>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default TransactionAmountHeader\n"],"mappings":";;;;;AAaA,IAAM,IAAA,CAAmE,EAAE,aAAA,EAAA,MAAkB;AAC3F,QAAM,EAAE,QAAA,GAAQ,aAAA,GAAa,UAAA,GAAU,eAAA,GAAe,OAAA,GAAO,yBAAA,EAAA,IAC3D;AAEF,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAuB,WAAU;AAAA,IAAM,KAAK;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,cAA7E,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAc,KAA2B;AAAA,MACzC,cAAc,KAAiB;AAAA,MAC/B,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAO,UAAS;AAAA,gBAAhB,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI;AAAA,QAAG,UAAU;AAAA,QAAM,SAAQ;AAAA,kBAC9C,KAAe;AAAA,MACZ,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAO,IAAW,iBAAiB;AAAA,QAAgB,UAAU;AAAA,QAAM,SAAQ;AAAA,kBAA9E,CACG,IAAW,MAAM,IACjB,EAAe,GAAQ,QAAQ,CAC/B;AAAA,QACE;AAAA,MACF;AAAA;AAEX"}