@mx-cartographer/experiences 9.2.4-alpha.al4 → 9.3.0-alph.bb2

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionTable.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionTable.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Paper from '@mui/material/Paper'\nimport { DataGridPro, GridCellParams, GridColDef } from '@mui/x-data-grid-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\n\nimport { useTransactionsUiStore } from '../../context/hooks'\n\nimport {\n  AccountCell,\n  AmountCell,\n  CategoryCell,\n  DateCell,\n  FlagCell,\n  HeaderCell,\n  PayeeCell,\n} from './transactiontable/cells'\n\ninterface TransactionTableProps {\n  height?: number | string\n  onCategoryClick?: (guid: string) => void\n  onRowClick?: (guid: string) => void\n}\n\nconst TransactionTable: React.FC<TransactionTableProps> = ({\n  height = '100dvh',\n  onCategoryClick,\n  onRowClick,\n}) => {\n  const { onEvent } = useEvent()\n  const { transactions: copy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { isLoading, sortedTransactions } = useTransactionStore()\n  const { clearExpandedSplits, toggleSplit } = useTransactionsUiStore()\n\n  React.useEffect(() => {\n    return () => clearExpandedSplits()\n  }, [])\n\n  const rows = React.useMemo(\n    () =>\n      sortedTransactions.map((transaction) => ({\n        id: transaction.guid,\n        isHovering: false,\n        ...transaction,\n      })),\n    [sortedTransactions],\n  )\n\n  const handleCellClick = ({ row: { id, guid, has_been_split }, field }: GridCellParams) => {\n    if (has_been_split) return toggleSplit(id)\n\n    if (field === 'category') {\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_TABLE_CLICK_CATEGORY, { guid })\n      return onCategoryClick?.(guid)\n    }\n\n    return onRowClick?.(guid)\n  }\n\n  const handleCellKeyDown = (params: GridCellParams, event: React.KeyboardEvent) => {\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    handleCellClick(params)\n  }\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'flag',\n      headerName: '',\n      minWidth: 32,\n      width: 32,\n      sortable: false,\n      renderCell: (params) => <FlagCell {...params} />,\n      renderHeader: () => <span aria-label={copy.transaction_status} />,\n    },\n    {\n      field: 'date',\n      headerName: copy.date_title,\n      width: 103,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (params.row.parent_guid ? null : <DateCell {...params} />),\n      sortingOrder: ['desc', 'asc'],\n    },\n    {\n      cellClassName: 'vertical-align-center',\n      field: 'payee',\n      headerName: copy.payee_title,\n      flex: 0.33,\n      renderHeader: HeaderCell,\n      renderCell: (params) => <PayeeCell {...params} excludedText={copy.is_excluded} />,\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'category',\n      headerName: copy.category_title,\n      flex: 0.25,\n      renderHeader: HeaderCell,\n      renderCell: (params) => <CategoryCell {...params} />,\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'account',\n      headerName: copy.account_title,\n      flex: 0.33,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (params.row.parent_guid ? null : <AccountCell {...params} />),\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'amount',\n      headerName: copy.amount_title,\n      flex: 0.25,\n      renderHeader: HeaderCell,\n      renderCell: AmountCell,\n      align: 'right',\n      headerAlign: 'right',\n      sortingOrder: ['asc', 'desc'],\n    },\n  ]\n\n  return (\n    <Paper sx={{ height: height, px: 24, width: '100%', boxShadow: 'none' }}>\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        getCellClassName={(params) => {\n          if (params.row.parent_guid) return 'split-row'\n          if (params.row.is_hidden) return 'excluded-row'\n          return ''\n        }}\n        hideFooter={true}\n        initialState={{ sorting: { sortModel: [{ field: 'date', sort: 'desc' }] } }}\n        loading={isLoading}\n        onCellClick={handleCellClick}\n        onCellKeyDown={handleCellKeyDown}\n        rows={rows}\n        slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n        sx={{\n          '& .split-row': {\n            bgcolor: 'background.default',\n          },\n          '& .excluded-row': {\n            bgcolor: 'grey.50',\n            color: 'text.secondary',\n          },\n        }}\n      />\n    </Paper>\n  )\n}\n\nexport default observer(TransactionTable)\n"],"mappings":"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"}

package/dist/transactions/components/shared/getEmbeddedInstanceSlotByBeatTemplates.es.js

@@ -0,0 +1,25 @@
+import { buildChartData as l, buildDataSeries as o } from "../../utils/Transactions.es.js";
+import { TinyBarChart as s } from "../../../common/components/TinyBarChart.es.js";
+import { jsx as n } from "react/jsx-runtime";
+var c = { BILL_AMOUNT_NOT_STANDARD: "BillAmountNotStandard" }, T = (r, t) => {
+  if (t) if (t.template === c.BILL_AMOUNT_NOT_STANDARD) {
+    const a = t.data_series ? o(t.data_series) : [], e = l(a, t.payload?.merchant_name);
+    return {
+      instanceSlot: /* @__PURE__ */ n(s, {
+        color: (i) => i.palette.categories.billsUtilities,
+        data: e.slice(-3)
+      }),
+      dataSeries: a,
+      chartData: e,
+      callToAction: r.view_history
+    };
+  } else
+    return null;
+  return null;
+};
+export {
+  c as BeatTemplates,
+  T as getEmbeddedInstanceSlotByBeatTemplates
+};
+
+//# sourceMappingURL=getEmbeddedInstanceSlotByBeatTemplates.es.js.map

package/dist/transactions/components/shared/getEmbeddedInstanceSlotByBeatTemplates.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getEmbeddedInstanceSlotByBeatTemplates.es.js","names":[],"sources":["../../../../src/transactions/components/shared/getEmbeddedInstanceSlotByBeatTemplates.tsx"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport { TinyBarChart } from '../../../common/components/TinyBarChart'\nimport type { CommonCopy } from '../../../core/types/localization/CommonCopy'\nimport { type Beat } from '../../../insights/types/CommonBeat'\n\nimport { buildChartData, buildDataSeries, type ChartDataProps } from '../../utils/Transactions'\n\nexport const BeatTemplates = {\n  BILL_AMOUNT_NOT_STANDARD: 'BillAmountNotStandard',\n}\n\nexport const getEmbeddedInstanceSlotByBeatTemplates = (copy: CommonCopy, beat?: Beat) => {\n  if (beat) {\n    switch (beat.template) {\n      case BeatTemplates.BILL_AMOUNT_NOT_STANDARD: {\n        const dataSeries = beat.data_series\n          ? (buildDataSeries(beat.data_series) as ChartDataProps[])\n          : []\n        const chartData = buildChartData(dataSeries, beat.payload?.merchant_name)\n\n        return {\n          instanceSlot: (\n            <TinyBarChart\n              color={(theme: Theme) => {\n                return theme.palette.categories.billsUtilities\n              }}\n              data={chartData.slice(-3)}\n            />\n          ),\n          dataSeries,\n          chartData,\n          callToAction: copy.view_history,\n        }\n      }\n      default: {\n        return null\n      }\n    }\n  }\n  return null\n}\n"],"mappings":";;;AAQA,IAAa,IAAgB,EAC3B,0BAA0B,wBAC5B,GAEa,IAAA,CAA0C,GAAkB,MAAgB;AACvF,MAAI,EACF,KAAQ,EAAK,aACN,EAAc,0BAA0B;AAC3C,UAAM,IAAa,EAAK,cACnB,EAAgB,EAAK,WAAW,IACjC,CAAC,GACC,IAAY,EAAe,GAAY,EAAK,SAAS,aAAa;AAExE,WAAO;AAAA,MACL,cACE,gBAAA,EAAC,GAAD;AAAA,QACE,OAAA,CAAQ,MACC,EAAM,QAAQ,WAAW;AAAA,QAElC,MAAM,EAAU,MAAM,EAAE;AAAA,MACzB,CAAA;AAAA,MAEH,YAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAc,EAAK;AAAA,IACrB;AAAA,EACF;AAEE,WAAO;AAIb,SAAO;AACT"}

package/dist/transactions/components/shared/transactiondetails/Description.es.js

@@ -0,0 +1,85 @@
+import { useEvent as b, useGlobalCopyStore as g, useTransactionStore as E } from "../../../../common/context/hooks.es.js";
+import { useAriaLive as h } from "../../../../common/hooks/useAriaLive.es.js";
+import { ANALYTICS_EVENTS as S } from "../../../../common/constants/Analytics.es.js";
+import { ON_CLICK_EVENTS as v } from "../../../constants/OnClickEvents.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=Description.es.js.map

package/dist/transactions/components/shared/transactiondetails/Description.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Description.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.es.js

@@ -0,0 +1,49 @@
+import { useEvent as c, useGlobalCopyStore as s, useTransactionStore as g } from "../../../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as d } from "../../../../common/constants/Analytics.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=FlagTransaction.es.js.map

package/dist/transactions/components/shared/transactiondetails/FlagTransaction.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlagTransaction.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.es.js

@@ -0,0 +1,151 @@
+import { useAccountStore as I, useGlobalCopyStore as k } from "../../../../common/context/hooks.es.js";
+import { TransactionType as l } from "../../../../core/types/Transaction.es.js";
+import { formatCurrency as M } from "../../../../core/utils/NumberFormatting.es.js";
+import S from "../../../../common/components/CurrencyInput.es.js";
+import s from "../../../../common/components/SelectionBox.es.js";
+import { useTransactionsUiStore as w } from "../../../context/hooks.es.js";
+import E from "./actions/CategoryAction.es.js";
+import q from "./actions/DateAction.es.js";
+import B from "./actions/MemoAction.es.js";
+import R from "./actions/TagsAction.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: "",
+                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=ManualTransactionDetails.es.js.map

package/dist/transactions/components/shared/transactiondetails/ManualTransactionDetails.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualTransactionDetails.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: '', 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.es.js

@@ -0,0 +1,39 @@
+import { formatCurrency as u } from "../../../../core/utils/NumberFormatting.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=TransactionAmountHeader.es.js.map

package/dist/transactions/components/shared/transactiondetails/TransactionAmountHeader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionAmountHeader.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"}

package/dist/transactions/components/shared/transactiondetails/TransactionDetailsView.es.js

@@ -0,0 +1,82 @@
+import { DATE_FORMATS_INTL as p, formatDate as g } from "../../../../core/constants/DateFormats.es.js";
+import { useGlobalCopyStore as u, useTransactionStore as f } from "../../../../common/context/hooks.es.js";
+import { fromUnixUTC as y } from "../../../../core/utils/DateUtil.es.js";
+import c from "react";
+import { observer as _ } from "mobx-react-lite";
+import { CategoryIcon as h, CategoryIconVariants as x, Icon as s, Text as i } from "@mxenabled/mxui";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import v from "@mui/material/Divider";
+import b from "@mui/material/List";
+import T from "@mui/material/ListItem";
+import I from "@mui/material/ListItemText";
+import A from "@mui/material/Avatar";
+import D from "@mui/material/ListItemAvatar";
+var m = (t, e, o, l = !0, n = "inset") => l ? /* @__PURE__ */ d(c.Fragment, { children: [/* @__PURE__ */ d(T, {
+  disableGutters: !0,
+  disablePadding: !0,
+  children: [/* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(A, {
+    sx: { bgcolor: "neutral.light" },
+    variant: "rounded",
+    children: t
+  }) }), /* @__PURE__ */ r(I, {
+    primary: e,
+    secondary: o,
+    slotProps: { primary: {
+      variant: "caption",
+      fontSize: 11,
+      fontWeight: "normal"
+    } }
+  })]
+}), /* @__PURE__ */ r(v, { variant: n })] }) : null, L = ({ transaction: t }) => {
+  const { transactions: e } = u(), { tags: o } = f(), l = c.useMemo(() => {
+    const n = new Map(o.map((a) => [a.guid, a.name]));
+    return t.tags.map((a) => n.get(a)).filter(Boolean).join(" / ");
+  }, [o, t.tags]);
+  return /* @__PURE__ */ d(b, {
+    sx: { "& .MuiListItem-root": {
+      px: 24,
+      py: 12
+    } },
+    children: [
+      m(/* @__PURE__ */ r(h, {
+        categoryGuid: t.top_level_category_guid,
+        size: 24,
+        sx: { color: "text.primary" },
+        variant: x.Transparent
+      }), e.category_title, /* @__PURE__ */ r(i, {
+        bold: !0,
+        variant: "body1",
+        children: t.category ?? e.actions_select_a_category
+      })),
+      m(/* @__PURE__ */ r(s, {
+        name: "calendar_month",
+        sx: { color: "text.primary" }
+      }), e.date_title, /* @__PURE__ */ r(i, {
+        bold: !0,
+        variant: "body1",
+        children: g(y(t.date), p.YEAR_MONTH_DAY)
+      })),
+      m(/* @__PURE__ */ r(s, {
+        name: "article",
+        sx: { color: "text.primary" }
+      }), e.memo_title, /* @__PURE__ */ r(i, {
+        bold: !0,
+        variant: "body1",
+        children: t.memo ?? e.memo_desc
+      }), !!t.memo, t.tags?.length > 0 ? "inset" : "fullWidth"),
+      m(/* @__PURE__ */ r(s, {
+        name: "local_offer",
+        sx: { color: "text.primary" }
+      }), e.tags_title, /* @__PURE__ */ r(i, {
+        bold: !0,
+        variant: "body1",
+        children: t.tags?.length ? l : e.tags_desc
+      }), !!t.tags?.length, "fullWidth")
+    ]
+  });
+}, F = _(L);
+export {
+  F as default
+};
+
+//# sourceMappingURL=TransactionDetailsView.es.js.map