@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

package/dist/cashflow/components/CashflowAmountHeading.es.js

@@ -0,0 +1,45 @@
+import { CurrencyText as e } from "../../common/components/CurrencyText.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+var g = ({ amount: o, isMobile: t = !1, isTotal: n = !1, label: m, symbol: c, tooltip: i }) => /* @__PURE__ */ d(a, {
+  bgcolor: n ? "background.default" : "transparent",
+  direction: t ? "row" : "column",
+  justifyContent: t ? "space-between" : "initial",
+  padding: t ? "14px 16px" : 0,
+  sx: {
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4
+  },
+  children: [
+    !t && /* @__PURE__ */ r(e, {
+      amount: o,
+      component: "h2",
+      variant: "h2"
+    }),
+    /* @__PURE__ */ d(a, {
+      alignItems: "center",
+      component: "span",
+      direction: "row",
+      gap: 8,
+      mt: 2,
+      children: [/* @__PURE__ */ r(p, {
+        bold: n,
+        variant: "body2",
+        children: m
+      }), i]
+    }),
+    t && /* @__PURE__ */ r(e, {
+      amount: o,
+      component: "h2",
+      symbol: c,
+      variant: "body2"
+    })
+  ]
+});
+export {
+  g as default
+};
+
+//# sourceMappingURL=CashflowAmountHeading.es.js.map

package/dist/cashflow/components/CashflowAmountHeading.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CashflowAmountHeading.es.js","names":[],"sources":["../../../src/cashflow/components/CashflowAmountHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CurrencyText } from '../../common/components/CurrencyText'\n\ninterface CashflowAmountHeadingProps {\n  amount: number\n  isMobile?: boolean\n  isTotal?: boolean\n  label: string\n  symbol?: string\n  tooltip?: React.ReactNode\n}\n\nconst CashflowAmountHeading: React.FC<CashflowAmountHeadingProps> = ({\n  amount,\n  isMobile = false,\n  isTotal = false,\n  label,\n  symbol,\n  tooltip,\n}) => {\n  return (\n    <Stack\n      bgcolor={isTotal ? 'background.default' : 'transparent'}\n      direction={isMobile ? 'row' : 'column'}\n      justifyContent={isMobile ? 'space-between' : 'initial'}\n      padding={isMobile ? '14px 16px' : 0}\n      sx={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}\n    >\n      {!isMobile && <CurrencyText amount={amount} component=\"h2\" variant=\"h2\" />}\n      <Stack alignItems=\"center\" component=\"span\" direction=\"row\" gap={8} mt={2}>\n        <Text bold={isTotal} variant=\"body2\">\n          {label}\n        </Text>\n        {tooltip}\n      </Stack>\n      {isMobile && <CurrencyText amount={amount} component=\"h2\" symbol={symbol} variant=\"body2\" />}\n    </Stack>\n  )\n}\n\nexport default CashflowAmountHeading\n"],"mappings":";;;;;AAiBA,IAAM,IAAA,CAA+D,EACnE,QAAA,GACA,UAAA,IAAW,IACX,SAAA,IAAU,IACV,OAAA,GACA,QAAA,GACA,SAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,SAAS,IAAU,uBAAuB;AAAA,EAC1C,WAAW,IAAW,QAAQ;AAAA,EAC9B,gBAAgB,IAAW,kBAAkB;AAAA,EAC7C,SAAS,IAAW,cAAc;AAAA,EAClC,IAAI;AAAA,IAAE,wBAAwB;AAAA,IAAG,yBAAyB;AAAA,EAAE;AAAA,YAL9D;AAAA,IAOG,CAAC,KAAY,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,WAAU;AAAA,MAAK,SAAQ;AAAA,IAAM,CAAA;AAAA,IACzE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,WAAU;AAAA,MAAO,WAAU;AAAA,MAAM,KAAK;AAAA,MAAG,IAAI;AAAA,gBAAxE,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAS,SAAQ;AAAA,kBAC1B;AAAA,MACG,CAAA,GACL,CACI;AAAA;IACN,KAAY,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,WAAU;AAAA,MAAa,QAAA;AAAA,MAAQ,SAAQ;AAAA,IAAS,CAAA;AAAA,EACtF"}

package/dist/cashflow/components/CashflowContent.es.js

@@ -0,0 +1,63 @@
+import { useEvent as d, useGlobalCopyStore as u } from "../../common/context/hooks.es.js";
+import { useScreenSize as p } from "../../common/hooks/useScreenSize.es.js";
+import s from "../../common/components/TabContentContainer.es.js";
+import b from "./DetailsTab.es.js";
+import x from "./SummaryTab.es.js";
+import n from "react";
+import { observer as w } from "mobx-react-lite";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import e from "@mui/material/Box";
+import m from "@mui/material/Tab";
+import C from "@mui/material/Tabs";
+var _ = () => {
+  const { cashflow: t } = u(), { isDesktop: r } = p(), { onEvent: i } = d(), [o, f] = n.useState(0), c = (v, h) => {
+    f(h);
+  };
+  return n.useEffect(() => {
+    i(o === 0 ? "cash_flow_summary" : "cash_flow_details");
+  }, [o]), /* @__PURE__ */ l(e, { children: [
+    /* @__PURE__ */ l(C, {
+      "aria-label": t.cashflow_summary_and_details,
+      centered: !0,
+      onChange: c,
+      textColor: "primary",
+      value: o,
+      variant: "fullWidth",
+      children: [/* @__PURE__ */ a(m, {
+        "aria-controls": "cashflow-tabpanel-0",
+        id: "cashflow-tab-0",
+        label: t.summary,
+        sx: { textTransform: "none" }
+      }), /* @__PURE__ */ a(m, {
+        "aria-controls": "cashflow-tabpanel-1",
+        id: "cashflow-tab-1",
+        label: t.details,
+        sx: { textTransform: "none" }
+      })]
+    }),
+    /* @__PURE__ */ a(e, { sx: { mb: 32 } }),
+    /* @__PURE__ */ a(s, {
+      index: 0,
+      name: "cashflow",
+      value: o,
+      children: /* @__PURE__ */ a(e, {
+        sx: { m: r ? 48 : 16 },
+        children: /* @__PURE__ */ a(x, {})
+      })
+    }),
+    /* @__PURE__ */ a(s, {
+      index: 1,
+      name: "cashflow",
+      value: o,
+      children: /* @__PURE__ */ a(e, {
+        sx: { m: r ? 48 : 16 },
+        children: /* @__PURE__ */ a(b, {})
+      })
+    })
+  ] });
+}, R = w(_);
+export {
+  R as default
+};
+
+//# sourceMappingURL=CashflowContent.es.js.map

package/dist/cashflow/components/CashflowContent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CashflowContent.es.js","names":[],"sources":["../../../src/cashflow/components/CashflowContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Tabs from '@mui/material/Tabs'\nimport Tab from '@mui/material/Tab'\n\nimport DetailsTab from './DetailsTab'\nimport SummaryTab from './SummaryTab'\nimport { TabContentContainer, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\n\nconst CashflowContent: React.FC = () => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const { isDesktop } = useScreenSize()\n  const { onEvent } = useEvent()\n\n  const [value, setValue] = React.useState(0)\n\n  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue)\n  }\n\n  React.useEffect(() => {\n    onEvent(value === 0 ? 'cash_flow_summary' : 'cash_flow_details')\n  }, [value])\n\n  return (\n    <Box>\n      <Tabs\n        aria-label={customCopy.cashflow_summary_and_details}\n        centered={true}\n        onChange={handleChange}\n        textColor=\"primary\"\n        value={value}\n        variant=\"fullWidth\"\n      >\n        <Tab\n          aria-controls=\"cashflow-tabpanel-0\"\n          id=\"cashflow-tab-0\"\n          label={customCopy.summary}\n          sx={{\n            textTransform: 'none',\n          }}\n        />\n        <Tab\n          aria-controls=\"cashflow-tabpanel-1\"\n          id=\"cashflow-tab-1\"\n          label={customCopy.details}\n          sx={{\n            textTransform: 'none',\n          }}\n        />\n      </Tabs>\n      <Box sx={{ mb: 32 }} />\n      <TabContentContainer index={0} name=\"cashflow\" value={value}>\n        <Box sx={{ m: isDesktop ? 48 : 16 }}>\n          <SummaryTab />\n        </Box>\n      </TabContentContainer>\n      <TabContentContainer index={1} name=\"cashflow\" value={value}>\n        <Box sx={{ m: isDesktop ? 48 : 16 }}>\n          <DetailsTab />\n        </Box>\n      </TabContentContainer>\n    </Box>\n  )\n}\n\nexport default observer(CashflowContent)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,IAAA,MAAkC;AACtC,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB,GAC9C,EAAE,WAAA,EAAA,IAAc,EAAc,GAC9B,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,CAAC,GAAO,CAAA,IAAY,EAAM,SAAS,CAAC,GAEpC,IAAA,CAAgB,GAA8B,MAAqB;AACvE,IAAA,EAAS,CAAQ;AAAA,EACnB;AAEA,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAQ,MAAU,IAAI,sBAAsB,mBAAmB;AAAA,EACjE,GAAG,CAAC,CAAK,CAAC,GAGR,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAW;AAAA,MACvB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAU;AAAA,MACH,OAAA;AAAA,MACP,SAAQ;AAAA,gBANV,CAQE,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAc;AAAA,QACd,IAAG;AAAA,QACH,OAAO,EAAW;AAAA,QAClB,IAAI,EACF,eAAe,OACjB;AAAA,MACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAc;AAAA,QACd,IAAG;AAAA,QACH,OAAO,EAAW;AAAA,QAClB,IAAI,EACF,eAAe,OACjB;AAAA,MACD,CAAA,CACG;AAAA;IACN,gBAAA,EAAC,GAAD,EAAK,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA;AAAA,IACtB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAkB,OAAA;AAAA,gBACpD,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,GAAG,IAAY,KAAK,GAAG;AAAA,kBAChC,gBAAA,EAAC,GAAD,CAAa,CAAA;AAAA,MACV,CAAA;AAAA,IACc,CAAA;AAAA,IACrB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAkB,OAAA;AAAA,gBACpD,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,GAAG,IAAY,KAAK,GAAG;AAAA,kBAChC,gBAAA,EAAC,GAAD,CAAa,CAAA;AAAA,MACV,CAAA;AAAA,IACc,CAAA;AAAA,EAClB,EAAA,CAAA;AAET,GAEA,IAAe,EAAS,CAAe"}

package/dist/cashflow/components/CashflowHeading.es.js

@@ -0,0 +1,101 @@
+import { buildDynamicCopy as _ } from "../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as B, useGlobalUiStore as G, useRecurringTransactionsStore as z, useWidgetContainerProvider as R } from "../../common/context/hooks.es.js";
+import U from "../../common/components/drawer/Drawer.es.js";
+import j from "../../common/components/InformationTooltip.es.js";
+import { ManageIncome as k } from "../../recurringtransactions/components/shared/recurringsettings/ManageIncome.es.js";
+import { useCashflowUiStore as E } from "../context/hooks.es.js";
+import i from "./CashflowAmountHeading.es.js";
+import F from "react";
+import { observer as L } from "mobx-react-lite";
+import x from "@mui/material/Stack";
+import { Icon as M, Text as c } from "@mxenabled/mxui";
+import { isBefore as O } from "date-fns/isBefore";
+import W from "@mui/material/Button";
+import { Fragment as P, jsx as o, jsxs as l } from "react/jsx-runtime";
+import { isAfter as $ } from "date-fns/isAfter";
+import m from "@mui/material/Divider";
+import { isToday as q } from "date-fns/isToday";
+var C = (r, t) => (n) => n.accountGuid && r.includes(n.accountGuid) && (q(n.expectedDate) || $(n.expectedDate, t.start)) && O(n.expectedDate, t.end), J = () => {
+  const { availableWidth: r } = R(), { cashflow: t } = B(), { isDataLoaded: n } = z(), { selectedAccountGuids: d } = G(), { dateRange: u, income: S, selectedCashAccounts: v, selectedCashBalance: y, upcomingExpenses: I, upcomingIncome: w } = E(), [D, p] = F.useState(!1), f = I.filter(C(d, u)), H = w.filter(C(d, u)), h = y, g = f.reduce((a, s) => a + s.amount, 0), b = H.reduce((a, s) => a + s.amount, 0), T = h - g + b, A = n && S.length > 0, e = r < 725;
+  return /* @__PURE__ */ l(x, {
+    sx: {
+      mx: e ? 16 : 0,
+      my: e ? 24 : 42
+    },
+    children: [/* @__PURE__ */ l(x, {
+      border: e ? "1px solid" : "none",
+      borderColor: "neutral.light",
+      borderRadius: 2,
+      flexDirection: e ? "column" : "row",
+      gap: e ? 0 : 24,
+      justifyContent: "center",
+      children: [
+        /* @__PURE__ */ o(i, {
+          amount: h,
+          isMobile: e,
+          label: _(t.cash_and_bank, v.length)
+        }),
+        e && /* @__PURE__ */ o(m, {}),
+        A ? /* @__PURE__ */ l(P, { children: [!e && /* @__PURE__ */ o(c, {
+          sx: {
+            fontSize: 25,
+            lineHeight: 1
+          },
+          children: "+"
+        }), /* @__PURE__ */ o(i, {
+          amount: b,
+          isMobile: e,
+          label: t.to_be_received,
+          symbol: e ? "+" : void 0
+        })] }) : /* @__PURE__ */ o(W, {
+          onClick: () => p(!0),
+          startIcon: /* @__PURE__ */ o(M, { name: "add" }),
+          sx: { fontSize: 13 },
+          children: t.add_income
+        }),
+        e ? /* @__PURE__ */ o(m, {}) : /* @__PURE__ */ o(c, {
+          sx: {
+            fontSize: 25,
+            lineHeight: 1
+          },
+          children: "-"
+        }),
+        /* @__PURE__ */ o(i, {
+          amount: g,
+          isMobile: e,
+          label: _(t.to_be_paid_out, f.length),
+          symbol: e ? "-" : void 0
+        }),
+        e ? /* @__PURE__ */ o(m, {}) : /* @__PURE__ */ o(c, {
+          sx: {
+            fontSize: 25,
+            lineHeight: 1
+          },
+          children: "="
+        }),
+        /* @__PURE__ */ o(i, {
+          amount: T,
+          isMobile: e,
+          isTotal: e,
+          label: t.remaining_cash,
+          tooltip: /* @__PURE__ */ o(j, {
+            body: t.remaining_income_tooltip_body,
+            title: t.remaining_income_tooltip_title
+          })
+        })
+      ]
+    }), /* @__PURE__ */ o(U, {
+      ariaLabelClose: t.close_manage_income_aria,
+      isOpen: D,
+      onClose: () => p(!1),
+      shouldShowHeaderBorders: !1,
+      title: t.manage_income,
+      children: /* @__PURE__ */ o(k, {})
+    })]
+  });
+}, me = L(J);
+export {
+  me as default
+};
+
+//# sourceMappingURL=CashflowHeading.es.js.map

package/dist/cashflow/components/CashflowHeading.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CashflowHeading.es.js","names":[],"sources":["../../../src/cashflow/components/CashflowHeading.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { isAfter } from 'date-fns/isAfter'\nimport { isBefore } from 'date-fns/isBefore'\nimport { isToday } from 'date-fns/isToday'\n\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  InformationTooltip,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useWidgetContainerProvider,\n} from '../../common'\nimport { type Recurrence } from '../../core'\n\nimport { ManageIncome } from '../../recurringtransactions'\n\nimport CashflowAmountHeading from './CashflowAmountHeading'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\n// This filter only includes activities that have an account guid that matches an account guid\n// in the given list of accountGuids and is within the given date range\nconst recurrenceAccountFilter =\n  (accountGuids: string[], dateRange: { start: Date; end: Date }) => (r: Recurrence) =>\n    r.accountGuid &&\n    accountGuids.includes(r.accountGuid) &&\n    (isToday(r.expectedDate) || isAfter(r.expectedDate, dateRange.start)) &&\n    isBefore(r.expectedDate, dateRange.end)\n\nconst CashflowHeading: React.FC = () => {\n  const { availableWidth } = useWidgetContainerProvider()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  const { isDataLoaded } = useRecurringTransactionsStore()\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const {\n    dateRange,\n    income,\n    selectedCashAccounts,\n    selectedCashBalance,\n    upcomingExpenses,\n    upcomingIncome,\n  } = useCashflowUiStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  // Plain derivations: observer tracks the observable reads, so no useMemo is\n  // needed. The account-scoped balance is a store computed (selectedCashBalance).\n  const filteredExpenses = upcomingExpenses.filter(\n    recurrenceAccountFilter(selectedAccountGuids, dateRange),\n  )\n\n  const filteredIncome = upcomingIncome.filter(\n    recurrenceAccountFilter(selectedAccountGuids, dateRange),\n  )\n\n  const cashBalance = selectedCashBalance\n\n  const totalUpcomingExpenses = filteredExpenses.reduce((acc, curr) => acc + curr.amount, 0)\n  const totalUpcomingIncome = filteredIncome.reduce((acc, curr) => acc + curr.amount, 0)\n  const availableToSpend = cashBalance - totalUpcomingExpenses + totalUpcomingIncome\n\n  const hasRecurringIncome = isDataLoaded && income.length > 0\n  const isMobile = availableWidth < 725\n\n  return (\n    <Stack sx={{ mx: isMobile ? 16 : 0, my: isMobile ? 24 : 42 }}>\n      <Stack\n        border={isMobile ? '1px solid' : 'none'}\n        borderColor=\"neutral.light\"\n        borderRadius={2}\n        flexDirection={isMobile ? 'column' : 'row'}\n        gap={isMobile ? 0 : 24}\n        justifyContent=\"center\"\n      >\n        <CashflowAmountHeading\n          amount={cashBalance}\n          isMobile={isMobile}\n          label={buildDynamicCopy(customCopy.cash_and_bank, selectedCashAccounts.length) as string}\n        />\n\n        {isMobile && <Divider />}\n        {hasRecurringIncome ? (\n          <>\n            {!isMobile && <Text sx={{ fontSize: 25, lineHeight: 1 }}>+</Text>}\n            <CashflowAmountHeading\n              amount={totalUpcomingIncome}\n              isMobile={isMobile}\n              label={customCopy.to_be_received}\n              symbol={isMobile ? '+' : undefined}\n            />\n          </>\n        ) : (\n          <Button\n            onClick={() => setIsOpen(true)}\n            startIcon={<Icon name=\"add\" />}\n            sx={{ fontSize: 13 }}\n          >\n            {customCopy.add_income}\n          </Button>\n        )}\n\n        {isMobile ? <Divider /> : <Text sx={{ fontSize: 25, lineHeight: 1 }}>-</Text>}\n\n        <CashflowAmountHeading\n          amount={totalUpcomingExpenses}\n          isMobile={isMobile}\n          label={buildDynamicCopy(customCopy.to_be_paid_out, filteredExpenses.length) as string}\n          symbol={isMobile ? '-' : undefined}\n        />\n\n        {isMobile ? <Divider /> : <Text sx={{ fontSize: 25, lineHeight: 1 }}>=</Text>}\n\n        <CashflowAmountHeading\n          amount={availableToSpend}\n          isMobile={isMobile}\n          isTotal={isMobile}\n          label={customCopy.remaining_cash}\n          tooltip={\n            <InformationTooltip\n              body={customCopy.remaining_income_tooltip_body}\n              title={customCopy.remaining_income_tooltip_title}\n            />\n          }\n        />\n      </Stack>\n\n      <Drawer\n        ariaLabelClose={customCopy.close_manage_income_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        shouldShowHeaderBorders={false}\n        title={customCopy.manage_income}\n      >\n        <ManageIncome />\n      </Drawer>\n    </Stack>\n  )\n}\n\nexport default observer(CashflowHeading)\n"],"mappings":"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"}

package/dist/cashflow/components/CashflowWidgetContent.es.js

@@ -0,0 +1,167 @@
+import { buildDynamicCopy as i } from "../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as _, useGlobalUiStore as S, useRecurringTransactionsStore as T, useWidgetContainerProvider as j } from "../../common/context/hooks.es.js";
+import { useScreenSize as R } from "../../common/hooks/useScreenSize.es.js";
+import I from "../../common/components/Loader.es.js";
+import k from "../../common/components/InformationTooltip.es.js";
+import { CurrencyText as n } from "../../common/components/CurrencyText.es.js";
+import { useCashflowUiStore as B } from "../context/hooks.es.js";
+import G from "./RemainingCash.es.js";
+import { observer as L } from "mobx-react-lite";
+import t from "@mui/material/Stack";
+import { Icon as v, P as c, Text as a } from "@mxenabled/mxui";
+import { Fragment as W, jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useTheme as D } from "@mui/material/styles";
+import N from "@mui/material/Box";
+import m from "@mui/material/Divider";
+var U = () => {
+  const d = D(), { availableWidth: w } = j(), { isMobile: x } = R(), { selectedAccountGuids: y } = S(), { cashflow: o } = _(), { daysUntilNextIncome: u, expensesTilNextIncome: l, selectedCashAccounts: b, selectedCashBalance: p } = B(), { isDataLoaded: g } = T(), s = l.filter((h) => y.includes(h.accountGuid || "")).reduce((h, C) => h + C.amount, 0), f = p - s;
+  return g ? /* @__PURE__ */ e(N, {
+    className: "mx-cashflow",
+    pl: 16,
+    pr: 16,
+    pt: 16,
+    children: w > 710 ? /* @__PURE__ */ r(t, {
+      border: `1px solid ${d.palette.divider}`,
+      borderRadius: 1,
+      direction: "row",
+      justifyContent: "space-between",
+      px: 24,
+      children: [
+        /* @__PURE__ */ r(t, {
+          pb: 14,
+          pt: 12,
+          children: [/* @__PURE__ */ e(n, {
+            amount: p,
+            variant: "h2"
+          }), /* @__PURE__ */ e(c, {
+            variant: "caption",
+            whiteSpace: "nowrap",
+            children: i(o.total_cash_accounts, b.length)
+          })]
+        }),
+        /* @__PURE__ */ e(t, {
+          pt: 18,
+          children: /* @__PURE__ */ e(v, { name: "remove" })
+        }),
+        /* @__PURE__ */ r(t, {
+          pb: 14,
+          pt: 12,
+          children: [/* @__PURE__ */ e(n, {
+            amount: s,
+            variant: "h2"
+          }), /* @__PURE__ */ e(c, {
+            variant: "caption",
+            whiteSpace: "nowrap",
+            children: i(o.expenses_due, l.length)
+          })]
+        }),
+        /* @__PURE__ */ e(t, {
+          pt: 18,
+          children: /* @__PURE__ */ e(v, { name: "equal" })
+        }),
+        /* @__PURE__ */ r(t, {
+          pb: 14,
+          pr: 24,
+          pt: 12,
+          children: [/* @__PURE__ */ e(n, {
+            amount: f,
+            variant: "h2"
+          }), /* @__PURE__ */ r(t, {
+            alignItems: "center",
+            direction: "row",
+            gap: 8,
+            children: [/* @__PURE__ */ e(c, {
+              variant: "caption",
+              whiteSpace: "nowrap",
+              children: o.available_to_spend
+            }), /* @__PURE__ */ e(k, {
+              body: o.tooltip_body,
+              title: o.tooltip_title
+            })]
+          })]
+        }),
+        /* @__PURE__ */ e(t, {
+          borderLeft: `1px solid ${d.palette.divider}`,
+          pb: 12,
+          pl: 24,
+          pt: 12,
+          children: /* @__PURE__ */ r(W, { children: [/* @__PURE__ */ e(a, {
+            variant: "h2",
+            children: i(o.days, u)
+          }), /* @__PURE__ */ e(c, {
+            variant: "caption",
+            whiteSpace: "nowrap",
+            children: o.next_paycheck
+          })] })
+        })
+      ]
+    }) : /* @__PURE__ */ r(t, {
+      border: `1px solid ${d.palette.divider}`,
+      borderRadius: 1,
+      children: [
+        /* @__PURE__ */ r(t, {
+          direction: "row",
+          justifyContent: "space-between",
+          p: 16,
+          children: [/* @__PURE__ */ e(a, {
+            variant: "body2",
+            children: i(o.total_cash_accounts, b.length)
+          }), /* @__PURE__ */ e(n, {
+            amount: p,
+            bold: !0,
+            variant: "caption"
+          })]
+        }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ r(t, {
+          direction: "row",
+          justifyContent: "space-between",
+          p: 16,
+          children: [/* @__PURE__ */ e(a, {
+            variant: "body2",
+            children: i(o.expenses_due, l.length)
+          }), /* @__PURE__ */ e(n, {
+            amount: s,
+            bold: !0,
+            symbol: "-",
+            variant: "caption"
+          })]
+        }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ e(t, {
+          alignItems: "center",
+          bgcolor: "background.default",
+          direction: "row",
+          gap: 8,
+          height: 48,
+          justifyContent: "space-between",
+          px: 16,
+          sx: {
+            borderBottomLeftRadius: 4,
+            borderBottomRightRadius: 4
+          },
+          children: /* @__PURE__ */ e(G, { remaining: f })
+        }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ r(t, {
+          direction: "row",
+          justifyContent: "space-between",
+          p: 16,
+          children: [/* @__PURE__ */ e(a, {
+            variant: "body2",
+            children: o.next_paycheck
+          }), /* @__PURE__ */ e(a, {
+            bold: !0,
+            variant: "caption",
+            children: i(o.days, u)
+          })]
+        })
+      ]
+    })
+  }) : /* @__PURE__ */ e(I, { height: x ? 210 : 120 });
+}, Y = L(U);
+export {
+  Y as default
+};
+
+//# sourceMappingURL=CashflowWidgetContent.es.js.map

package/dist/cashflow/components/CashflowWidgetContent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CashflowWidgetContent.es.js","names":[],"sources":["../../../src/cashflow/components/CashflowWidgetContent.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, P, Text } from '@mxenabled/mxui'\n\nimport {\n  InformationTooltip,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useWidgetContainerProvider,\n} from '../../common'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { CurrencyText } from '../../common'\nimport RemainingCash from './RemainingCash'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nconst CashflowWidgetContent = () => {\n  const theme = useTheme()\n  const { availableWidth } = useWidgetContainerProvider()\n  const { isMobile } = useScreenSize()\n\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const { daysUntilNextIncome, expensesTilNextIncome, selectedCashAccounts, selectedCashBalance } =\n    useCashflowUiStore()\n  const { isDataLoaded } = useRecurringTransactionsStore()\n\n  // Plain derivations: observer tracks the observable reads and re-renders\n  // correctly even when arrays are mutated in place by MobX. The account-scoped\n  // balance is a store computed (selectedCashBalance).\n  const filteredExpenseTotal = expensesTilNextIncome\n    .filter((expense) => selectedAccountGuids.includes(expense.accountGuid || ''))\n    .reduce((acc, curr) => acc + curr.amount, 0)\n\n  const availableToSpend = selectedCashBalance - filteredExpenseTotal\n\n  if (!isDataLoaded) {\n    return <Loader height={isMobile ? 210 : 120} />\n  }\n\n  return (\n    <Box className=\"mx-cashflow\" pl={16} pr={16} pt={16}>\n      {availableWidth > 710 ? (\n        <Stack\n          border={`1px solid ${theme.palette.divider}`}\n          borderRadius={1}\n          direction=\"row\"\n          justifyContent=\"space-between\"\n          px={24}\n        >\n          <Stack pb={14} pt={12}>\n            <CurrencyText amount={selectedCashBalance} variant=\"h2\" />\n            <P variant=\"caption\" whiteSpace=\"nowrap\">\n              {\n                buildDynamicCopy(\n                  customCopy.total_cash_accounts,\n                  selectedCashAccounts.length,\n                ) as string\n              }\n            </P>\n          </Stack>\n\n          <Stack pt={18}>\n            <Icon name=\"remove\" />\n          </Stack>\n\n          <Stack pb={14} pt={12}>\n            <CurrencyText amount={filteredExpenseTotal} variant=\"h2\" />\n            <P variant=\"caption\" whiteSpace=\"nowrap\">\n              {buildDynamicCopy(customCopy.expenses_due, expensesTilNextIncome.length) as string}\n            </P>\n          </Stack>\n\n          <Stack pt={18}>\n            <Icon name=\"equal\" />\n          </Stack>\n\n          <Stack pb={14} pr={24} pt={12}>\n            <CurrencyText amount={availableToSpend} variant=\"h2\" />\n            <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n              <P variant=\"caption\" whiteSpace=\"nowrap\">\n                {customCopy.available_to_spend}\n              </P>\n              <InformationTooltip body={customCopy.tooltip_body} title={customCopy.tooltip_title} />\n            </Stack>\n          </Stack>\n\n          <Stack borderLeft={`1px solid ${theme.palette.divider}`} pb={12} pl={24} pt={12}>\n            <>\n              <Text variant=\"h2\">\n                {buildDynamicCopy(customCopy.days, daysUntilNextIncome) as string}\n              </Text>\n              <P variant=\"caption\" whiteSpace=\"nowrap\">\n                {customCopy.next_paycheck}\n              </P>\n            </>\n          </Stack>\n        </Stack>\n      ) : (\n        <Stack border={`1px solid ${theme.palette.divider}`} borderRadius={1}>\n          <Stack direction=\"row\" justifyContent=\"space-between\" p={16}>\n            <Text variant=\"body2\">\n              {\n                buildDynamicCopy(\n                  customCopy.total_cash_accounts,\n                  selectedCashAccounts.length,\n                ) as string\n              }\n            </Text>\n            <CurrencyText amount={selectedCashBalance} bold={true} variant=\"caption\" />\n          </Stack>\n\n          <Divider />\n\n          <Stack direction=\"row\" justifyContent=\"space-between\" p={16}>\n            <Text variant=\"body2\">\n              {buildDynamicCopy(customCopy.expenses_due, expensesTilNextIncome.length) as string}\n            </Text>\n            <CurrencyText amount={filteredExpenseTotal} bold={true} symbol=\"-\" variant=\"caption\" />\n          </Stack>\n\n          <Divider />\n\n          <Stack\n            alignItems=\"center\"\n            bgcolor=\"background.default\"\n            direction=\"row\"\n            gap={8}\n            height={48}\n            justifyContent=\"space-between\"\n            px={16}\n            sx={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}\n          >\n            <RemainingCash remaining={availableToSpend} />\n          </Stack>\n          <Divider />\n          <Stack direction=\"row\" justifyContent=\"space-between\" p={16}>\n            <Text variant=\"body2\">{customCopy.next_paycheck}</Text>\n            <Text bold={true} variant=\"caption\">\n              {buildDynamicCopy(customCopy.days, daysUntilNextIncome) as string}\n            </Text>\n          </Stack>\n        </Stack>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(CashflowWidgetContent)\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAM,IAAA,MAA8B;AAClC,QAAM,IAAQ,EAAS,GACjB,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAChD,EAAE,UAAA,EAAA,IAAa,EAAc,GAE7B,EAAE,sBAAA,EAAA,IAAyB,EAAiB,GAC5C,EAAE,UAAU,EAAA,IAAe,EAAmB,GAC9C,EAAE,qBAAA,GAAqB,uBAAA,GAAuB,sBAAA,GAAsB,qBAAA,EAAA,IACxE,EAAmB,GACf,EAAE,cAAA,EAAA,IAAiB,EAA8B,GAKjD,IAAuB,EAC1B,OAAA,CAAQ,MAAY,EAAqB,SAAS,EAAQ,eAAe,EAAE,CAAC,EAC5E,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,QAAQ,CAAC,GAEvC,IAAmB,IAAsB;AAE/C,SAAK,IAKH,gBAAA,EAAC,GAAD;AAAA,IAAK,WAAU;AAAA,IAAc,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,cAC9C,IAAiB,MAChB,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,aAAa,EAAM,QAAQ,OAAA;AAAA,MACnC,cAAc;AAAA,MACd,WAAU;AAAA,MACV,gBAAe;AAAA,MACf,IAAI;AAAA,gBALN;AAAA,QAOE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,UAAI,IAAI;AAAA,oBAAnB,CACE,gBAAA,EAAC,GAAD;AAAA,YAAc,QAAQ;AAAA,YAAqB,SAAQ;AAAA,UAAM,CAAA,GACzD,gBAAA,EAAC,GAAD;AAAA,YAAG,SAAQ;AAAA,YAAU,YAAW;AAAA,sBAE5B,EACE,EAAW,qBACX,EAAqB,MACvB;AAAA,UAED,CAAA,CACE;AAAA;QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,oBACT,gBAAA,EAAC,GAAD,EAAM,MAAK,SAAU,CAAA;AAAA,QAChB,CAAA;AAAA,QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,UAAI,IAAI;AAAA,oBAAnB,CACE,gBAAA,EAAC,GAAD;AAAA,YAAc,QAAQ;AAAA,YAAsB,SAAQ;AAAA,UAAM,CAAA,GAC1D,gBAAA,EAAC,GAAD;AAAA,YAAG,SAAQ;AAAA,YAAU,YAAW;AAAA,sBAC7B,EAAiB,EAAW,cAAc,EAAsB,MAAM;AAAA,UACtE,CAAA,CACE;AAAA;QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,oBACT,gBAAA,EAAC,GAAD,EAAM,MAAK,QAAS,CAAA;AAAA,QACf,CAAA;AAAA,QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,UAAI,IAAI;AAAA,UAAI,IAAI;AAAA,oBAA3B,CACE,gBAAA,EAAC,GAAD;AAAA,YAAc,QAAQ;AAAA,YAAkB,SAAQ;AAAA,UAAM,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,YAAO,YAAW;AAAA,YAAS,WAAU;AAAA,YAAM,KAAK;AAAA,sBAAhD,CACE,gBAAA,EAAC,GAAD;AAAA,cAAG,SAAQ;AAAA,cAAU,YAAW;AAAA,wBAC7B,EAAW;AAAA,YACX,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,cAAoB,MAAM,EAAW;AAAA,cAAc,OAAO,EAAW;AAAA,YAAgB,CAAA,CAChF;AAAA,YACF;AAAA;QAEP,gBAAA,EAAC,GAAD;AAAA,UAAO,YAAY,aAAa,EAAM,QAAQ,OAAA;AAAA,UAAW,IAAI;AAAA,UAAI,IAAI;AAAA,UAAI,IAAI;AAAA,oBAC3E,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBACX,EAAiB,EAAW,MAAM,CAAmB;AAAA,UAClD,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAG,SAAQ;AAAA,YAAU,YAAW;AAAA,sBAC7B,EAAW;AAAA,UACX,CAAA,CACH,EAAA,CAAA;AAAA,QACG,CAAA;AAAA,MACF;AAAA,SAEP,gBAAA,EAAC,GAAD;AAAA,MAAO,QAAQ,aAAa,EAAM,QAAQ,OAAA;AAAA,MAAW,cAAc;AAAA,gBAAnE;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAO,WAAU;AAAA,UAAM,gBAAe;AAAA,UAAgB,GAAG;AAAA,oBAAzD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAEV,EACE,EAAW,qBACX,EAAqB,MACvB;AAAA,UAEE,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAc,QAAQ;AAAA,YAAqB,MAAM;AAAA,YAAM,SAAQ;AAAA,UAAW,CAAA,CACrE;AAAA;QAEP,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,QAEV,gBAAA,EAAC,GAAD;AAAA,UAAO,WAAU;AAAA,UAAM,gBAAe;AAAA,UAAgB,GAAG;AAAA,oBAAzD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBACX,EAAiB,EAAW,cAAc,EAAsB,MAAM;AAAA,UACnE,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAc,QAAQ;AAAA,YAAsB,MAAM;AAAA,YAAM,QAAO;AAAA,YAAI,SAAQ;AAAA,UAAW,CAAA,CACjF;AAAA;QAEP,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,QAEV,gBAAA,EAAC,GAAD;AAAA,UACE,YAAW;AAAA,UACX,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,gBAAe;AAAA,UACf,IAAI;AAAA,UACJ,IAAI;AAAA,YAAE,wBAAwB;AAAA,YAAG,yBAAyB;AAAA,UAAE;AAAA,oBAE5D,gBAAA,EAAC,GAAD,EAAe,WAAW,EAAmB,CAAA;AAAA,QACxC,CAAA;AAAA,QACP,gBAAA,EAAC,GAAD,CAAU,CAAA;AAAA,QACV,gBAAA,EAAC,GAAD;AAAA,UAAO,WAAU;AAAA,UAAM,gBAAe;AAAA,UAAgB,GAAG;AAAA,oBAAzD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAS,EAAW;AAAA,UAAoB,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB,EAAiB,EAAW,MAAM,CAAmB;AAAA,UAClD,CAAA,CACD;AAAA;MACF;AAAA;EAEN,CAAA,IA3GE,gBAAA,EAAC,GAAD,EAAQ,QAAQ,IAAW,MAAM,IAAM,CAAA;AA6GlD,GAEA,IAAe,EAAS,CAAqB"}

package/dist/cashflow/components/DetailsExpenseHeader.es.js

@@ -0,0 +1,37 @@
+import { useGlobalCopyStore as n } from "../../common/context/hooks.es.js";
+import { formatCurrency as p } from "../../core/utils/NumberFormatting.es.js";
+import { ExpenseType as t } from "./DetailsExpenseRow.es.js";
+import "react";
+import { observer as a } from "mobx-react-lite";
+import { Text as i } from "@mxenabled/mxui";
+import { Fragment as l, jsx as s, jsxs as e } from "react/jsx-runtime";
+import f from "@mui/material/Divider";
+import d from "@mui/material/ListSubheader";
+var c = ({ total: m, type: r }) => {
+  const { cashflow: o } = n();
+  return /* @__PURE__ */ e(l, { children: [/* @__PURE__ */ e(d, {
+    sx: {
+      alignItems: "center",
+      backgroundColor: "background.highlight",
+      display: "flex",
+      justifyContent: "space-between",
+      pb: 4,
+      pt: 12,
+      px: 24
+    },
+    children: [/* @__PURE__ */ s(i, {
+      bold: !0,
+      sx: { fontSize: 12 },
+      children: r === t.EXPENSE ? o.expenses : o.income
+    }), /* @__PURE__ */ e(i, {
+      bold: !0,
+      sx: { fontSize: 13 },
+      children: [r === t.EXPENSE ? "-" : "+", p(m, "0,0.00")]
+    })]
+  }), /* @__PURE__ */ s(f, {})] });
+}, j = a(c);
+export {
+  j as default
+};
+
+//# sourceMappingURL=DetailsExpenseHeader.es.js.map

package/dist/cashflow/components/DetailsExpenseHeader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsExpenseHeader.es.js","names":[],"sources":["../../../src/cashflow/components/DetailsExpenseHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport ListSubheader from '@mui/material/ListSubheader'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { ExpenseType } from './DetailsExpenseRow'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface DetailsExpenseHeaderProps {\n  total: number\n  type: ExpenseType\n}\n\nconst DetailsExpenseHeader: React.FC<DetailsExpenseHeaderProps> = ({ total, type }) => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  return (\n    <>\n      <ListSubheader\n        sx={{\n          alignItems: 'center',\n          backgroundColor: 'background.highlight',\n          display: 'flex',\n          justifyContent: 'space-between',\n          pb: 4,\n          pt: 12,\n          px: 24,\n        }}\n      >\n        <Text bold={true} sx={{ fontSize: 12 }}>\n          {type === ExpenseType.EXPENSE ? customCopy.expenses : customCopy.income}\n        </Text>\n        <Text bold={true} sx={{ fontSize: 13 }}>\n          {type === ExpenseType.EXPENSE ? '-' : '+'}\n          {formatCurrency(total, '0,0.00')}\n        </Text>\n      </ListSubheader>\n      <Divider />\n    </>\n  )\n}\n\nexport default observer(DetailsExpenseHeader)\n"],"mappings":";;;;;;;;;AAiBA,IAAM,IAAA,CAA6D,EAAE,OAAA,GAAO,MAAA,EAAA,MAAW;AACrF,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB;AAEpD,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,cATF,CAWE,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,IAAI,EAAE,UAAU,GAAG;AAAA,gBAClC,MAAS,EAAY,UAAU,EAAW,WAAW,EAAW;AAAA,IAC7D,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,IAAI,EAAE,UAAU,GAAG;AAAA,gBAArC,CACG,MAAS,EAAY,UAAU,MAAM,KACrC,EAAe,GAAO,QAAQ,CAC3B;AAAA,MACO;AAAA,MACf,gBAAA,EAAC,GAAD,CAAU,CAAA,CACV,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAAoB"}

package/dist/cashflow/components/DetailsExpenseRow.es.js

@@ -0,0 +1,57 @@
+import { DATE_FORMATS_INTL as i, formatDate as m } from "../../core/constants/DateFormats.es.js";
+import { CurrencyText as n } from "../../common/components/CurrencyText.es.js";
+import "react";
+import { observer as a } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import { Text as r } from "@mxenabled/mxui";
+import { Fragment as l, jsx as e, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/material/Divider";
+import x from "@mui/material/ListItem";
+var T = /* @__PURE__ */ (function(t) {
+  return t.EXPENSE = "expense", t.INCOME = "income", t;
+})({}), p = ({ recurrence: t }) => /* @__PURE__ */ o(l, { children: [/* @__PURE__ */ o(x, {
+  sx: {
+    display: "flex",
+    alignItems: "center",
+    gap: 16,
+    px: 24,
+    py: 12
+  },
+  children: [
+    /* @__PURE__ */ o(f, {
+      alignItems: "center",
+      height: 32,
+      width: 32,
+      children: [/* @__PURE__ */ e(r, {
+        bold: !0,
+        sx: { fontSize: 11 },
+        children: m(t.expectedDate, i.MONTH)
+      }), /* @__PURE__ */ e(r, {
+        bold: !0,
+        sx: { fontSize: 11 },
+        children: m(t.expectedDate, i.DAY)
+      })]
+    }),
+    /* @__PURE__ */ e(r, {
+      sx: {
+        flexGrow: 1,
+        fontSize: 13
+      },
+      children: t.name
+    }),
+    /* @__PURE__ */ e(n, {
+      amount: t.amount,
+      bold: !0,
+      sx: {
+        textAlign: "right",
+        fontSize: 13
+      }
+    })
+  ]
+}), /* @__PURE__ */ e(s, {})] }), b = a(p);
+export {
+  T as ExpenseType,
+  b as default
+};
+
+//# sourceMappingURL=DetailsExpenseRow.es.js.map

package/dist/cashflow/components/DetailsExpenseRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsExpenseRow.es.js","names":[],"sources":["../../../src/cashflow/components/DetailsExpenseRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { type Recurrence } from '../../core'\nimport { CurrencyText } from '../../common'\n\nexport enum ExpenseType {\n  EXPENSE = 'expense',\n  INCOME = 'income',\n}\n\ninterface DetailsExpenseRowType {\n  recurrence: Recurrence\n}\n\nconst DetailsExpenseRow: React.FC<DetailsExpenseRowType> = ({ recurrence }) => {\n  return (\n    <>\n      <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 16, px: 24, py: 12 }}>\n        <Stack alignItems=\"center\" height={32} width={32}>\n          <Text bold={true} sx={{ fontSize: 11 }}>\n            {formatDate(recurrence.expectedDate, DATE_FORMATS_INTL.MONTH)}\n          </Text>\n          <Text bold={true} sx={{ fontSize: 11 }}>\n            {formatDate(recurrence.expectedDate, DATE_FORMATS_INTL.DAY)}\n          </Text>\n        </Stack>\n        <Text sx={{ flexGrow: 1, fontSize: 13 }}>{recurrence.name}</Text>\n        <CurrencyText\n          amount={recurrence.amount}\n          bold={true}\n          sx={{ textAlign: 'right', fontSize: 13 }}\n        />\n      </ListItem>\n      <Divider />\n    </>\n  )\n}\n\nexport default observer(DetailsExpenseRow)\n"],"mappings":";;;;;;;;;AAaA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,UAAA,WACA,EAAA,SAAA;AACF,GAAA,CAAA,CAAA,GAMM,IAAA,CAAsD,EAAE,YAAA,EAAA,MAE1D,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,EAAU,IAAI;AAAA,IAAE,SAAS;AAAA,IAAQ,YAAY;AAAA,IAAU,KAAK;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,EAAG;AAAA,YAA/E;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,QAAQ;AAAA,MAAI,OAAO;AAAA,gBAA9C,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI,EAAE,UAAU,GAAG;AAAA,kBAClC,EAAW,EAAW,cAAc,EAAkB,KAAK;AAAA,MACxD,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI,EAAE,UAAU,GAAG;AAAA,kBAClC,EAAW,EAAW,cAAc,EAAkB,GAAG;AAAA,MACtD,CAAA,CACD;AAAA;IACP,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAG,UAAU;AAAA,MAAG;AAAA,gBAAI,EAAW;AAAA,IAAW,CAAA;AAAA,IAChE,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAW;AAAA,MACnB,MAAM;AAAA,MACN,IAAI;AAAA,QAAE,WAAW;AAAA,QAAS,UAAU;AAAA,MAAG;AAAA,IACxC,CAAA;AAAA,EACO;IACV,gBAAA,EAAC,GAAD,CAAU,CAAA,CACV,EAAA,CAAA,GAIN,IAAe,EAAS,CAAiB"}

package/dist/cashflow/components/DetailsFooter.es.js

@@ -0,0 +1,21 @@
+import r from "./RemainingCash.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import i from "@mui/material/ListItem";
+var m = ({ remaining: o }) => /* @__PURE__ */ t(i, {
+  sx: {
+    alignItems: "center",
+    backgroundColor: "background.highlight",
+    display: "flex",
+    gap: 12,
+    padding: "12px 24px",
+    borderBottomLeftRadius: "3px",
+    borderBottomRightRadius: "3px",
+    minHeight: "auto"
+  },
+  children: /* @__PURE__ */ t(r, { remaining: o })
+});
+export {
+  m as default
+};
+
+//# sourceMappingURL=DetailsFooter.es.js.map

package/dist/cashflow/components/DetailsFooter.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsFooter.es.js","names":[],"sources":["../../../src/cashflow/components/DetailsFooter.tsx"],"sourcesContent":["import ListItem from '@mui/material/ListItem'\n\nimport RemainingCash from './RemainingCash'\n\ninterface DetailsFooterProps {\n  remaining: number\n}\n\nconst DetailsFooter = ({ remaining }: DetailsFooterProps) => {\n  return (\n    <ListItem\n      sx={{\n        alignItems: 'center',\n        backgroundColor: 'background.highlight',\n        display: 'flex',\n        gap: 12,\n        padding: '12px 24px',\n        borderBottomLeftRadius: '3px',\n        borderBottomRightRadius: '3px',\n        minHeight: 'auto',\n      }}\n    >\n      <RemainingCash remaining={remaining} />\n    </ListItem>\n  )\n}\n\nexport default DetailsFooter\n"],"mappings":";;;AAQA,IAAM,IAAA,CAAiB,EAAE,WAAA,EAAA,MAErB,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,IACzB,WAAW;AAAA,EACb;AAAA,YAEA,gBAAA,EAAC,GAAD,EAA0B,WAAA,EAAY,CAAA;AAC9B,CAAA"}