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

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

@@ -0,0 +1,90 @@
+import { DATE_FORMATS_INTL as p, formatDate as u } from "../../core/constants/DateFormats.es.js";
+import { useAppConfig as L, useGlobalCopyStore as S, useWidgetContainerProvider as I } from "../../common/context/hooks.es.js";
+import { getAccountStartingBalance as F } from "../../core/utils/AccountUtils.es.js";
+import N from "../../accounts/components/AccountListItem.es.js";
+import { useCashflowUiStore as R } from "../context/hooks.es.js";
+import j from "./DetailsFooter.es.js";
+import f, { ExpenseType as b } from "./DetailsExpenseRow.es.js";
+import h from "./DetailsExpenseHeader.es.js";
+import { recurrenceFilter as x } from "../util/Filters.es.js";
+import { observer as B } from "mobx-react-lite";
+import m from "@mui/material/Stack";
+import { Text as g } from "@mxenabled/mxui";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { getUnixTime as T } from "date-fns/getUnixTime";
+import G from "@mui/material/Divider";
+import l from "@mui/material/List";
+import _ from "@mui/material/ListItem";
+var M = () => {
+  const { availableWidth: D } = I(), { cashflow: A } = S(), { config: { display_available_balance_in_accounts: E } } = L(), { dateRange: i, selectedCashAccounts: y, upcomingExpenses: C, upcomingIncome: v } = R();
+  return /* @__PURE__ */ n(m, { children: [/* @__PURE__ */ n(m, {
+    direction: D < 400 ? "column" : "row",
+    justifyContent: "space-between",
+    children: [/* @__PURE__ */ e(g, {
+      bold: !0,
+      sx: {
+        fontSize: 15,
+        mb: 12
+      },
+      children: A.accounts_breakdown
+    }), /* @__PURE__ */ n(g, {
+      bold: !0,
+      sx: {
+        fontSize: 15,
+        mb: 12
+      },
+      children: [
+        u(i.start, p.FULL_MONTH_DAY),
+        " -",
+        " ",
+        u(i.end, p.FULL_MONTH_DAY)
+      ]
+    })]
+  }), /* @__PURE__ */ e(m, { children: y.map((r) => {
+    const a = v.filter(x(r, i)).sort((t, o) => T(t.expectedDate) - T(o.expectedDate)), s = C.filter(x(r, i)), c = a.reduce((t, o) => t + o.amount, 0), d = s.reduce((t, o) => t + o.amount, 0), w = F(r, E) + c - d;
+    return /* @__PURE__ */ n(l, {
+      sx: {
+        border: "1px solid",
+        borderColor: "neutral.light",
+        mb: 24,
+        borderRadius: 1
+      },
+      children: [
+        /* @__PURE__ */ e(N, {
+          account: r,
+          listItemProps: {
+            disableGutters: !1,
+            disablePadding: !1,
+            sx: {
+              borderTopRadius: 1,
+              pr: 24
+            }
+          }
+        }),
+        /* @__PURE__ */ e(G, {}),
+        a.length > 0 && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(l, {
+          subheader: /* @__PURE__ */ e(h, {
+            total: c,
+            type: b.INCOME
+          }),
+          sx: { width: "100%" },
+          children: a.map((t) => /* @__PURE__ */ e(f, { recurrence: t }, t.repeatingTransactionGuid))
+        }) }),
+        s.length > 0 && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(l, {
+          subheader: /* @__PURE__ */ e(h, {
+            total: d,
+            type: b.EXPENSE
+          }),
+          sx: { width: "100%" },
+          children: s.map((t) => /* @__PURE__ */ e(f, { recurrence: t }, t.repeatingTransactionGuid))
+        }) }),
+        /* @__PURE__ */ e(j, { remaining: w })
+      ]
+    }, r.guid);
+  }) })] });
+}, te = B(M);
+export {
+  te as default
+};
+
+//# sourceMappingURL=DetailsTab.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsTab.es.js","names":[],"sources":["../../../src/cashflow/components/DetailsTab.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport AccountListItem from '../../accounts/components/AccountListItem'\nimport DetailsFooter from './DetailsFooter'\nimport DetailsExpenseRow, { ExpenseType } from './DetailsExpenseRow'\nimport DetailsExpenseHeader from './DetailsExpenseHeader'\n\nimport { useAppConfig, useGlobalCopyStore, useWidgetContainerProvider } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { type Account, type Recurrence } from '../../core'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { recurrenceFilter } from '../util/Filters'\nimport { getAccountStartingBalance } from '../../core/utils/AccountUtils'\n\nconst DetailsTab = () => {\n  const { availableWidth } = useWidgetContainerProvider()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const {\n    config: { display_available_balance_in_accounts: useAvailable },\n  } = useAppConfig()\n  const { dateRange, selectedCashAccounts, upcomingExpenses, upcomingIncome } = useCashflowUiStore()\n\n  return (\n    <Stack>\n      <Stack direction={availableWidth < 400 ? 'column' : 'row'} justifyContent=\"space-between\">\n        <Text bold={true} sx={{ fontSize: 15, mb: 12 }}>\n          {customCopy.accounts_breakdown}\n        </Text>\n        <Text bold={true} sx={{ fontSize: 15, mb: 12 }}>\n          {formatDate(dateRange.start, DATE_FORMATS_INTL.FULL_MONTH_DAY)} -{' '}\n          {formatDate(dateRange.end, DATE_FORMATS_INTL.FULL_MONTH_DAY)}\n        </Text>\n      </Stack>\n\n      <Stack>\n        {selectedCashAccounts.map((account: Account) => {\n          const upcomingIncomeByAccount = upcomingIncome\n            .filter(recurrenceFilter(account, dateRange))\n            .sort((a, b) => getUnixTime(a.expectedDate) - getUnixTime(b.expectedDate))\n\n          const projectedExpensesByAccount = upcomingExpenses.filter(\n            recurrenceFilter(account, dateRange),\n          )\n\n          const incomeTotal = upcomingIncomeByAccount.reduce(\n            (acc: number, curr: Recurrence) => acc + curr.amount,\n            0,\n          )\n          const expenseTotal = projectedExpensesByAccount.reduce(\n            (acc, curr) => acc + curr.amount,\n            0,\n          )\n\n          const remainingBalance =\n            getAccountStartingBalance(account, useAvailable) + incomeTotal - expenseTotal\n\n          return (\n            <List\n              key={account.guid}\n              sx={{\n                border: '1px solid',\n                borderColor: 'neutral.light',\n                mb: 24,\n                borderRadius: 1,\n              }}\n            >\n              <AccountListItem\n                account={account}\n                listItemProps={{\n                  disableGutters: false,\n                  disablePadding: false,\n                  sx: { borderTopRadius: 1, pr: 24 },\n                }}\n              />\n              <Divider />\n              {/* Income */}\n              {upcomingIncomeByAccount.length > 0 && (\n                <ListItem>\n                  <List\n                    subheader={\n                      <DetailsExpenseHeader total={incomeTotal} type={ExpenseType.INCOME} />\n                    }\n                    sx={{ width: '100%' }}\n                  >\n                    {upcomingIncomeByAccount.map((r) => (\n                      <DetailsExpenseRow key={r.repeatingTransactionGuid} recurrence={r} />\n                    ))}\n                  </List>\n                </ListItem>\n              )}\n              {/* Expenses */}\n              {projectedExpensesByAccount.length > 0 && (\n                <ListItem>\n                  <List\n                    subheader={\n                      <DetailsExpenseHeader total={expenseTotal} type={ExpenseType.EXPENSE} />\n                    }\n                    sx={{ width: '100%' }}\n                  >\n                    {projectedExpensesByAccount.map((r) => (\n                      <DetailsExpenseRow key={r.repeatingTransactionGuid} recurrence={r} />\n                    ))}\n                  </List>\n                </ListItem>\n              )}\n              {/* Bottom row total */}\n              <DetailsFooter remaining={remainingBalance} />\n            </List>\n          )\n        })}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default observer(DetailsTab)\n"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+import { useGlobalCopyStore as t } from "../../common/context/hooks.es.js";
+import { CurrencyText as i } from "../../common/components/CurrencyText.es.js";
+import { observer as n } from "mobx-react-lite";
+import { Text as a } from "@mxenabled/mxui";
+import { Fragment as s, jsx as o, jsxs as m } from "react/jsx-runtime";
+import u from "@mui/material/Box";
+var f = ({ remaining: r }) => {
+  const { cashflow: e } = t();
+  return /* @__PURE__ */ m(s, { children: [
+    /* @__PURE__ */ o(u, { sx: {
+      borderRadius: "1px",
+      backgroundColor: r < 0 ? "error.main" : r > 0 ? "success.main" : "warning.main",
+      height: 6,
+      width: 6
+    } }),
+    /* @__PURE__ */ o(a, {
+      bold: !0,
+      sx: {
+        flexGrow: 1,
+        fontSize: 12
+      },
+      children: e.remaining_cash
+    }),
+    /* @__PURE__ */ o(i, {
+      amount: r,
+      bold: !0,
+      sx: { fontSize: 12 }
+    })
+  ] });
+}, g = n(f);
+export {
+  g as default
+};
+
+//# sourceMappingURL=RemainingCash.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemainingCash.es.js","names":[],"sources":["../../../src/cashflow/components/RemainingCash.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { CurrencyText } from '../../common'\n\ninterface RemainingCashProps {\n  remaining: number\n}\n\nconst RemainingCash = ({ remaining }: RemainingCashProps) => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  const getRemainingCashColor = () => {\n    if (remaining < 0) {\n      return 'error.main'\n    }\n    if (remaining > 0) {\n      return 'success.main'\n    }\n    return 'warning.main'\n  }\n\n  return (\n    <>\n      <Box\n        sx={{\n          borderRadius: '1px',\n          backgroundColor: getRemainingCashColor(),\n          height: 6,\n          width: 6,\n        }}\n      />\n      <Text bold={true} sx={{ flexGrow: 1, fontSize: 12 }}>\n        {customCopy.remaining_cash}\n      </Text>\n      <CurrencyText amount={remaining} bold={true} sx={{ fontSize: 12 }} />\n    </>\n  )\n}\n\nexport default observer(RemainingCash)\n"],"mappings":";;;;;;AAaA,IAAM,IAAA,CAAiB,EAAE,WAAA,EAAA,MAAoC;AAC3D,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB;AAYpD,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,MACF,cAAc;AAAA,MACd,iBAdF,IAAY,IACP,eAEL,IAAY,IACP,iBAEF;AAAA,MASD,QAAQ;AAAA,MACR,OAAO;AAAA,IACT,EACD,CAAA;AAAA,IACD,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAG,UAAU;AAAA,MAAG;AAAA,gBAC/C,EAAW;AAAA,IACR,CAAA;AAAA,IACN,gBAAA,EAAC,GAAD;AAAA,MAAc,QAAQ;AAAA,MAAW,MAAM;AAAA,MAAM,IAAI,EAAE,UAAU,GAAG;AAAA,IAAI,CAAA;AAAA,EACpE,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAAa"}

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

@@ -0,0 +1,258 @@
+import { DATE_FORMATS_INTL as C, formatDate as D } from "../../core/constants/DateFormats.es.js";
+import { useAppConfig as T, useGlobalCopyStore as M, useWidgetContainerProvider as N } from "../../common/context/hooks.es.js";
+import { getAccountStartingBalance as R } from "../../core/utils/AccountUtils.es.js";
+import { formatCurrency as u } from "../../core/utils/NumberFormatting.es.js";
+import L from "../../common/components/InformationTooltip.es.js";
+import { CurrencyText as b } from "../../common/components/CurrencyText.es.js";
+import { useCashflowUiStore as A } from "../context/hooks.es.js";
+import H from "./RemainingCash.es.js";
+import { recurrenceFilter as I } from "../util/Filters.es.js";
+import $ from "react";
+import { observer as B } from "mobx-react-lite";
+import l from "@mui/material/Stack";
+import { InstitutionLogo as j, Text as i } from "@mxenabled/mxui";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { alpha as F, useTheme as G } from "@mui/material/styles";
+import z from "@mui/material/Box";
+import h from "@mui/material/Divider";
+import k from "@mui/material/List";
+import O from "@mui/material/ListItem";
+import { DataGridPro as E } from "@mui/x-data-grid-pro";
+var P = () => {
+  const { availableWidth: y } = N(), o = G(), { cashflow: r } = M(), { config: { display_available_balance_in_accounts: x } } = T(), { dateRange: s, selectedCashAccounts: g, upcomingExpenses: _, upcomingIncome: v } = A(), S = [
+    {
+      field: "account",
+      flex: 1.5,
+      headerName: r.accounts,
+      renderCell: ({ value: { name: e, nickname: a, institution_guid: d, account_number: c } }) => {
+        const m = a || e;
+        return /* @__PURE__ */ n(l, {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 12,
+          children: [/* @__PURE__ */ t(j, {
+            alt: r.institution_logo,
+            institutionGuid: d || "",
+            size: 16
+          }), /* @__PURE__ */ t(i, {
+            variant: "body2",
+            children: `${m} ${c ? `*${c}` : ""}`
+          })]
+        });
+      }
+    },
+    {
+      field: "balance",
+      flex: 1,
+      headerName: r.balance,
+      type: "number",
+      renderCell: (e) => /* @__PURE__ */ t(i, {
+        color: o.palette.text.primary,
+        variant: "body2",
+        children: u(e.value, "0,0.00")
+      })
+    },
+    {
+      field: "income",
+      flex: 1,
+      headerName: r.projected_income,
+      type: "number",
+      renderCell: (e) => /* @__PURE__ */ t(i, {
+        color: o.palette.text.primary,
+        variant: "body2",
+        children: `+${u(e.value, "0,0.00")}`
+      })
+    },
+    {
+      field: "expenses",
+      flex: 1.1,
+      headerName: r.projected_expenses,
+      type: "number",
+      renderCell: (e) => /* @__PURE__ */ t(i, {
+        color: o.palette.text.primary,
+        variant: "body2",
+        children: `-${u(e.value, "0,0.00")}`
+      })
+    },
+    {
+      field: "remaining",
+      flex: 1,
+      headerName: r.remaining,
+      type: "number",
+      renderCell: (e) => {
+        const a = e.row.balance + e.row.income - e.row.expenses;
+        return /* @__PURE__ */ t(i, {
+          color: Math.sign(a) === -1 ? o.palette.error.main : o.palette.text.primary,
+          variant: "body2",
+          children: u(a, "0,0.00")
+        });
+      }
+    }
+  ], w = $.useMemo(() => g.map((e) => {
+    const a = _.filter(I(e, s)).reduce((p, f) => p + f.amount, 0), d = v.filter(I(e, s)).reduce((p, f) => p + f.amount, 0), c = R(e, x), m = c + d - a;
+    return {
+      account: e,
+      balance: c,
+      id: e.guid,
+      income: d,
+      expenses: a,
+      remaining: m
+    };
+  }), [
+    g,
+    _,
+    v,
+    x,
+    s
+  ]);
+  return /* @__PURE__ */ n(z, {
+    sx: { width: "100%" },
+    children: [/* @__PURE__ */ n(l, {
+      direction: y < 540 ? "column" : "row",
+      justifyContent: "space-between",
+      mb: 12,
+      children: [/* @__PURE__ */ n(l, {
+        alignItems: "center",
+        direction: "row",
+        gap: 8,
+        children: [/* @__PURE__ */ t(i, {
+          bold: !0,
+          sx: { fontSize: 15 },
+          children: r.cash_inflow_and_outflow
+        }), /* @__PURE__ */ t(L, {
+          body: r.table_tooltip_body,
+          title: r.table_tooltip_title
+        })]
+      }), /* @__PURE__ */ n(i, {
+        bold: !0,
+        sx: { fontSize: 15 },
+        children: [
+          D(s.start, C.FULL_MONTH_DAY),
+          " -",
+          " ",
+          D(s.end, C.FULL_MONTH_DAY)
+        ]
+      })]
+    }), y > 650 ? /* @__PURE__ */ t(E, {
+      columnHeaderHeight: 48,
+      columns: S,
+      density: "standard",
+      disableColumnMenu: !0,
+      disableRowSelectionOnClick: !0,
+      hideFooter: !0,
+      rowHeight: 48,
+      rows: w,
+      sx: {
+        border: "1px solid",
+        borderColor: "neutral.light",
+        borderRadius: 1,
+        "& .MuiDataGrid-columnHeader .MuiIconButton-root": {
+          color: o.palette.primary.main,
+          "&:hover": { backgroundColor: F(o.palette.primary.main, 0.1) }
+        },
+        "& .MuiDataGrid-columnHeaderTitle": {
+          fontFamily: o.typography.h3.fontFamily,
+          fontSize: o.typography.body2.fontSize
+        },
+        "& .MuiDataGrid-sortIcon": { color: o.palette.primary.main }
+      }
+    }) : w.map((e) => {
+      const { name: a, nickname: d, institution_guid: c, account_number: m } = e.account, p = d || a;
+      return /* @__PURE__ */ t(k, {
+        sx: {
+          border: "1px solid",
+          borderColor: "neutral.light",
+          borderRadius: 1,
+          marginBottom: 24
+        },
+        children: /* @__PURE__ */ t(O, {
+          sx: { minHeight: "auto" },
+          children: /* @__PURE__ */ n(l, {
+            width: "100%",
+            children: [
+              /* @__PURE__ */ n(l, {
+                alignItems: "center",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                px: 16,
+                py: 12,
+                children: [/* @__PURE__ */ n(l, {
+                  alignItems: "center",
+                  flexDirection: "row",
+                  gap: 8,
+                  width: "50%",
+                  children: [/* @__PURE__ */ t(j, {
+                    alt: r.institution_logo,
+                    institutionGuid: c || "",
+                    size: 16
+                  }), /* @__PURE__ */ t(i, {
+                    variant: "body2",
+                    children: `${p} ${m ? `*${m}` : ""}`
+                  })]
+                }), /* @__PURE__ */ t(b, {
+                  amount: e.balance,
+                  bold: !0,
+                  variant: "body2"
+                })]
+              }),
+              /* @__PURE__ */ t(h, { sx: { width: "100%" } }),
+              /* @__PURE__ */ n(l, {
+                alignItems: "center",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                px: 16,
+                py: 12,
+                children: [/* @__PURE__ */ t(i, {
+                  variant: "body2",
+                  children: r.projected_income
+                }), /* @__PURE__ */ t(b, {
+                  amount: e.income,
+                  bold: !0,
+                  symbol: "+",
+                  variant: "body2"
+                })]
+              }),
+              /* @__PURE__ */ t(h, { sx: { width: "100%" } }),
+              /* @__PURE__ */ n(l, {
+                alignItems: "center",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                px: 16,
+                py: 12,
+                children: [/* @__PURE__ */ t(i, {
+                  variant: "body2",
+                  children: r.projected_expenses
+                }), /* @__PURE__ */ t(b, {
+                  amount: e.expenses,
+                  bold: !0,
+                  symbol: "-",
+                  variant: "body2"
+                })]
+              }),
+              /* @__PURE__ */ t(h, { sx: { width: "100%" } }),
+              /* @__PURE__ */ t(l, {
+                alignItems: "center",
+                bgcolor: "background.default",
+                flexDirection: "row",
+                gap: 8,
+                justifyContent: "space-between",
+                px: 16,
+                py: 12,
+                sx: {
+                  borderBottomLeftRadius: "4px",
+                  borderBottomRightRadius: "4px"
+                },
+                children: /* @__PURE__ */ t(H, { remaining: e.remaining })
+              })
+            ]
+          })
+        })
+      }, e.id);
+    })]
+  });
+}, me = B(P);
+export {
+  me as default
+};
+
+//# sourceMappingURL=SummaryTab.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryTab.es.js","names":[],"sources":["../../../src/cashflow/components/SummaryTab.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 List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { alpha } from '@mui/material/styles'\n\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\n\nimport { InstitutionLogo, Text } from '@mxenabled/mxui'\n\nimport {\n  CurrencyText,\n  InformationTooltip,\n  useAppConfig,\n  useGlobalCopyStore,\n  useWidgetContainerProvider,\n} from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { type Account } from '../../core'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { recurrenceFilter } from '../util/Filters'\n\nimport RemainingCash from './RemainingCash'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { getAccountStartingBalance } from '../../core/utils/AccountUtils'\n\nconst SummaryTab = () => {\n  const { availableWidth } = useWidgetContainerProvider()\n  const theme = useTheme()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const {\n    config: { display_available_balance_in_accounts: useAvailable },\n  } = useAppConfig()\n  const { dateRange, selectedCashAccounts, upcomingExpenses, upcomingIncome } = useCashflowUiStore()\n\n  const columns: GridColDef[] = [\n    {\n      field: 'account',\n      flex: 1.5,\n      headerName: customCopy.accounts,\n      renderCell: ({ value: { name, nickname, institution_guid, account_number } }) => {\n        const accountName = nickname || name\n\n        return (\n          <Stack alignItems=\"center\" flexDirection=\"row\" gap={12}>\n            <InstitutionLogo\n              alt={customCopy.institution_logo}\n              institutionGuid={institution_guid || ''}\n              size={16}\n            />\n            <Text variant=\"body2\">{`${accountName} ${account_number ? `*${account_number}` : ''}`}</Text>\n          </Stack>\n        )\n      },\n    },\n    {\n      field: 'balance',\n      flex: 1,\n      headerName: customCopy.balance,\n      type: 'number',\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {formatCurrency(params.value, '0,0.00')}\n        </Text>\n      ),\n    },\n    {\n      field: 'income',\n      flex: 1,\n      headerName: customCopy.projected_income,\n      type: 'number',\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {`+${formatCurrency(params.value, '0,0.00')}`}\n        </Text>\n      ),\n    },\n    {\n      field: 'expenses',\n      flex: 1.1,\n      headerName: customCopy.projected_expenses,\n      type: 'number',\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {`-${formatCurrency(params.value, '0,0.00')}`}\n        </Text>\n      ),\n    },\n    {\n      field: 'remaining',\n      flex: 1,\n      headerName: customCopy.remaining,\n      type: 'number',\n      renderCell: (params) => {\n        const total = params.row.balance + params.row.income - params.row.expenses\n\n        return (\n          <Text\n            color={Math.sign(total) === -1 ? theme.palette.error.main : theme.palette.text.primary}\n            variant=\"body2\"\n          >\n            {formatCurrency(total, '0,0.00')}\n          </Text>\n        )\n      },\n    },\n  ]\n\n  const rows = React.useMemo(() => {\n    return selectedCashAccounts.map((account: Account) => {\n      const totalprojectedExpenses = upcomingExpenses\n        .filter(recurrenceFilter(account, dateRange))\n        .reduce((acc, curr) => acc + curr.amount, 0)\n\n      const totalProjectedIncome = upcomingIncome\n        .filter(recurrenceFilter(account, dateRange))\n        .reduce((acc, curr) => acc + curr.amount, 0)\n\n      const startingBalance = getAccountStartingBalance(account, useAvailable)\n      const remaining = startingBalance + totalProjectedIncome - totalprojectedExpenses\n\n      return {\n        account,\n        balance: startingBalance,\n        id: account.guid,\n        income: totalProjectedIncome,\n        expenses: totalprojectedExpenses,\n        remaining,\n      }\n    })\n  }, [selectedCashAccounts, upcomingExpenses, upcomingIncome, useAvailable, dateRange])\n\n  return (\n    <Box\n      sx={{\n        width: '100%',\n      }}\n    >\n      <Stack\n        direction={availableWidth < 540 ? 'column' : 'row'}\n        justifyContent=\"space-between\"\n        mb={12}\n      >\n        <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n          <Text\n            bold={true}\n            sx={{\n              fontSize: 15,\n            }}\n          >\n            {customCopy.cash_inflow_and_outflow}\n          </Text>\n          <InformationTooltip\n            body={customCopy.table_tooltip_body}\n            title={customCopy.table_tooltip_title}\n          />\n        </Stack>\n        <Text bold={true} sx={{ fontSize: 15 }}>\n          {formatDate(dateRange.start, DATE_FORMATS_INTL.FULL_MONTH_DAY)} -{' '}\n          {formatDate(dateRange.end, DATE_FORMATS_INTL.FULL_MONTH_DAY)}\n        </Text>\n      </Stack>\n      {availableWidth > 650 ? (\n        <DataGridPro\n          columnHeaderHeight={48}\n          columns={columns}\n          density=\"standard\"\n          disableColumnMenu={true}\n          disableRowSelectionOnClick={true}\n          hideFooter={true}\n          rowHeight={48}\n          rows={rows}\n          sx={{\n            border: '1px solid',\n            borderColor: 'neutral.light',\n            borderRadius: 1,\n            '& .MuiDataGrid-columnHeader .MuiIconButton-root': {\n              color: theme.palette.primary.main,\n              '&:hover': {\n                backgroundColor: alpha(theme.palette.primary.main, 0.1),\n              },\n            },\n            '& .MuiDataGrid-columnHeaderTitle': {\n              fontFamily: theme.typography.h3.fontFamily,\n              fontSize: theme.typography.body2.fontSize,\n            },\n            '& .MuiDataGrid-sortIcon': {\n              color: theme.palette.primary.main,\n            },\n          }}\n        />\n      ) : (\n        rows.map((row) => {\n          const { name, nickname, institution_guid, account_number } = row.account\n          const accountName = nickname || name\n\n          return (\n            <List\n              key={row.id}\n              sx={{\n                border: '1px solid',\n                borderColor: 'neutral.light',\n                borderRadius: 1,\n                marginBottom: 24,\n              }}\n            >\n              <ListItem sx={{ minHeight: 'auto' }}>\n                <Stack width=\"100%\">\n                  <Stack\n                    alignItems=\"center\"\n                    flexDirection=\"row\"\n                    justifyContent=\"space-between\"\n                    px={16}\n                    py={12}\n                  >\n                    <Stack alignItems=\"center\" flexDirection=\"row\" gap={8} width=\"50%\">\n                      <InstitutionLogo\n                        alt={customCopy.institution_logo}\n                        institutionGuid={institution_guid || ''}\n                        size={16}\n                      />\n                      <Text variant=\"body2\">{`${accountName} ${account_number ? `*${account_number}` : ''}`}</Text>\n                    </Stack>\n                    <CurrencyText amount={row.balance} bold={true} variant=\"body2\" />\n                  </Stack>\n                  <Divider sx={{ width: '100%' }} />\n                  <Stack\n                    alignItems=\"center\"\n                    flexDirection=\"row\"\n                    justifyContent=\"space-between\"\n                    px={16}\n                    py={12}\n                  >\n                    <Text variant=\"body2\">{customCopy.projected_income}</Text>\n                    <CurrencyText amount={row.income} bold={true} symbol=\"+\" variant=\"body2\" />\n                  </Stack>\n                  <Divider sx={{ width: '100%' }} />\n                  <Stack\n                    alignItems=\"center\"\n                    flexDirection=\"row\"\n                    justifyContent=\"space-between\"\n                    px={16}\n                    py={12}\n                  >\n                    <Text variant=\"body2\">{customCopy.projected_expenses}</Text>\n                    <CurrencyText amount={row.expenses} bold={true} symbol=\"-\" variant=\"body2\" />\n                  </Stack>\n                  <Divider sx={{ width: '100%' }} />\n                  <Stack\n                    alignItems=\"center\"\n                    bgcolor=\"background.default\"\n                    flexDirection=\"row\"\n                    gap={8}\n                    justifyContent=\"space-between\"\n                    px={16}\n                    py={12}\n                    sx={{ borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' }}\n                  >\n                    <RemainingCash remaining={row.remaining} />\n                  </Stack>\n                </Stack>\n              </ListItem>\n            </List>\n          )\n        })\n      )}\n    </Box>\n  )\n}\n\nexport default observer(SummaryTab)\n"],"mappings":"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"}

package/dist/cashflow/components/onboarding/StepOne.es.js

@@ -0,0 +1,128 @@
+import { useCashflowStore as p, useGlobalCopyStore as d } from "../../../common/context/hooks.es.js";
+import "react";
+import { observer as h } from "mobx-react-lite";
+import n from "@mui/material/Stack";
+import { H2 as f, H3 as u, Icon as l, P as o } from "@mxenabled/mxui";
+import a from "@mui/material/Button";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+import c from "@mui/material/Box";
+var x = ({ handleNextStep: m }) => {
+  const { completeOnboarding: s } = p(), { cashflow: r } = d(), i = g();
+  return /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ e(f, {
+      pb: 12,
+      variant: "h1",
+      children: r.welcome_title
+    }),
+    /* @__PURE__ */ e(u, {
+      color: i.palette.primary.light,
+      pb: 8,
+      children: r.welcome_sub_title
+    }),
+    /* @__PURE__ */ e(o, {
+      pb: 32,
+      children: r.welcome_description
+    }),
+    /* @__PURE__ */ t(n, {
+      direction: "column",
+      mb: 32,
+      spacing: 32,
+      children: [
+        /* @__PURE__ */ t(o, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            fontSize: 18
+          },
+          children: [/* @__PURE__ */ e(c, {
+            bgcolor: i.palette.primary.lighter,
+            borderRadius: 1,
+            component: "span",
+            height: 44,
+            mr: 24,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            width: 44,
+            children: /* @__PURE__ */ e(l, {
+              color: "primary",
+              name: "currency_exchange"
+            })
+          }), r.bullet_one]
+        }),
+        /* @__PURE__ */ t(o, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            fontSize: 18
+          },
+          children: [/* @__PURE__ */ e(c, {
+            bgcolor: i.palette.primary.lighter,
+            borderRadius: 1,
+            component: "span",
+            height: 44,
+            mr: 24,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            width: 44,
+            children: /* @__PURE__ */ e(l, {
+              color: "primary",
+              name: "cardiology"
+            })
+          }), r.bullet_two]
+        }),
+        /* @__PURE__ */ t(o, {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            fontSize: 18
+          },
+          children: [/* @__PURE__ */ e(c, {
+            bgcolor: i.palette.primary.lighter,
+            borderRadius: 1,
+            component: "span",
+            height: 44,
+            mr: 24,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            },
+            width: 44,
+            children: /* @__PURE__ */ e(l, {
+              color: "primary",
+              name: "flare"
+            })
+          }), r.bullet_three]
+        })
+      ]
+    }),
+    /* @__PURE__ */ t(n, {
+      direction: "row",
+      spacing: 16,
+      children: [/* @__PURE__ */ e(a, {
+        onClick: m,
+        variant: "contained",
+        children: r.get_started_button
+      }), /* @__PURE__ */ e(a, {
+        onClick: s,
+        variant: "outlined",
+        children: r.skip_button
+      })]
+    })
+  ] });
+}, R = h(x);
+export {
+  R as default
+};
+
+//# sourceMappingURL=StepOne.es.js.map

package/dist/cashflow/components/onboarding/StepOne.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepOne.es.js","names":[],"sources":["../../../../src/cashflow/components/onboarding/StepOne.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 Stack from '@mui/material/Stack'\n\nimport { H2, H3, Icon, P } from '@mxenabled/mxui'\nimport { useTheme } from '@mui/material/styles'\nimport { useCashflowStore, useGlobalCopyStore } from '../../../common'\n\ninterface StepOneProps {\n  handleNextStep: () => void\n}\n\nconst StepOne: React.FC<StepOneProps> = ({ handleNextStep }) => {\n  const { completeOnboarding } = useCashflowStore()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n\n  return (\n    <Stack>\n      <H2 pb={12} variant=\"h1\">\n        {customCopy.welcome_title}\n      </H2>\n      <H3 color={theme.palette.primary.light} pb={8}>\n        {customCopy.welcome_sub_title}\n      </H3>\n      <P pb={32}>{customCopy.welcome_description}</P>\n      <Stack direction=\"column\" mb={32} spacing={32}>\n        <P sx={{ display: 'flex', alignItems: 'center', fontSize: 18 }}>\n          <Box\n            bgcolor={theme.palette.primary.lighter}\n            borderRadius={1}\n            component=\"span\"\n            height={44}\n            mr={24}\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}\n            width={44}\n          >\n            <Icon color=\"primary\" name=\"currency_exchange\" />\n          </Box>\n          {customCopy.bullet_one}\n        </P>\n        <P sx={{ display: 'flex', alignItems: 'center', fontSize: 18 }}>\n          <Box\n            bgcolor={theme.palette.primary.lighter}\n            borderRadius={1}\n            component=\"span\"\n            height={44}\n            mr={24}\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}\n            width={44}\n          >\n            <Icon color=\"primary\" name=\"cardiology\" />\n          </Box>\n          {customCopy.bullet_two}\n        </P>\n        <P sx={{ display: 'flex', alignItems: 'center', fontSize: 18 }}>\n          <Box\n            bgcolor={theme.palette.primary.lighter}\n            borderRadius={1}\n            component=\"span\"\n            height={44}\n            mr={24}\n            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}\n            width={44}\n          >\n            <Icon color=\"primary\" name=\"flare\" />\n          </Box>\n          {customCopy.bullet_three}\n        </P>\n      </Stack>\n      <Stack direction=\"row\" spacing={16}>\n        <Button onClick={handleNextStep} variant=\"contained\">\n          {customCopy.get_started_button}\n        </Button>\n        <Button onClick={completeOnboarding} variant=\"outlined\">\n          {customCopy.skip_button}\n        </Button>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default observer(StepOne)\n"],"mappings":"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"}

package/dist/cashflow/components/onboarding/StepTwo.es.js

@@ -0,0 +1,26 @@
+import { useGlobalCopyStore as t } from "../../../common/context/hooks.es.js";
+import { CASHFLOW_IMAGES as i } from "../../constants/CashflowImages.es.js";
+import e from "react";
+import { observer as a } from "mobx-react-lite";
+import { H2 as m, P as l } from "@mxenabled/mxui";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+var n = () => {
+  const { cashflow: o } = t();
+  return /* @__PURE__ */ p(e.Fragment, { children: [
+    /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("img", {
+      alt: "Loading",
+      src: i.CASHFLOW_LOADING_ANIMATION
+    }) }),
+    /* @__PURE__ */ r(m, {
+      pb: 12,
+      variant: "h1",
+      children: o.loading_title
+    }),
+    /* @__PURE__ */ r(l, { children: o.loading_description })
+  ] });
+}, S = a(n);
+export {
+  S as default
+};
+
+//# sourceMappingURL=StepTwo.es.js.map

package/dist/cashflow/components/onboarding/StepTwo.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTwo.es.js","names":[],"sources":["../../../../src/cashflow/components/onboarding/StepTwo.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { H2, P } from '@mxenabled/mxui'\nimport { useGlobalCopyStore } from '../../../common'\n\nimport { CASHFLOW_IMAGES } from '../../constants/CashflowImages'\n\nconst StepTwo: React.FC = () => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  return (\n    <React.Fragment>\n      <div>\n        <img alt=\"Loading\" src={CASHFLOW_IMAGES.CASHFLOW_LOADING_ANIMATION} />\n      </div>\n      <H2 pb={12} variant=\"h1\">\n        {customCopy.loading_title}\n      </H2>\n      <P>{customCopy.loading_description}</P>\n    </React.Fragment>\n  )\n}\n\nexport default observer(StepTwo)\n"],"mappings":";;;;;;AAQA,IAAM,IAAA,MAA0B;AAC9B,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB;AAEpD,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,OAAD,EAAA,UACE,gBAAA,EAAC,OAAD;AAAA,MAAK,KAAI;AAAA,MAAU,KAAK,EAAgB;AAAA,IAA6B,CAAA,EAClE,CAAA;AAAA,IACL,gBAAA,EAAC,GAAD;AAAA,MAAI,IAAI;AAAA,MAAI,SAAQ;AAAA,gBACjB,EAAW;AAAA,IACV,CAAA;AAAA,IACJ,gBAAA,EAAC,GAAD,EAAA,UAAI,EAAW,oBAAuB,CAAA;AAAA,EACxB,EAAA,CAAA;AAEpB,GAEA,IAAe,EAAS,CAAO"}

package/dist/cashflow/constants/CashflowImages.es.js

@@ -0,0 +1,9 @@
+var o = "https://content.moneydesktop.com/storage/MD_Assets/md/cashflow", A = {
+  CASHFLOW_ONBOARDING: `${o}/cashflow-onboarding.png`,
+  CASHFLOW_LOADING_ANIMATION: `${o}/loading-animation.gif`
+};
+export {
+  A as CASHFLOW_IMAGES
+};
+
+//# sourceMappingURL=CashflowImages.es.js.map

package/dist/cashflow/constants/CashflowImages.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CashflowImages.es.js","names":[],"sources":["../../../src/cashflow/constants/CashflowImages.ts"],"sourcesContent":["const ASSETS_URL = 'https://content.moneydesktop.com/storage/MD_Assets/md/cashflow'\n\nexport const CASHFLOW_IMAGES = {\n  CASHFLOW_ONBOARDING: `${ASSETS_URL}/cashflow-onboarding.png`,\n  CASHFLOW_LOADING_ANIMATION: `${ASSETS_URL}/loading-animation.gif`,\n}\n"],"mappings":"AAAA,IAAM,IAAa,kEAEN,IAAkB;AAAA,EAC7B,qBAAqB,GAAG,CAAA;AAAA,EACxB,4BAA4B,GAAG,CAAA;AACjC"}

package/dist/cashflow/context/hooks.es.js

@@ -0,0 +1,12 @@
+import { GlobalDataContext as t } from "../../common/context/GlobalDataProvider.es.js";
+import { useCashflowStore as o } from "../../common/context/hooks.es.js";
+import e from "react";
+var s = () => {
+  if (!e.useContext(t)) throw new Error("useCashflowUiStore() must be used within the GlobalDataContext");
+  return o().uiStore;
+};
+export {
+  s as useCashflowUiStore
+};
+
+//# sourceMappingURL=hooks.es.js.map

package/dist/cashflow/context/hooks.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.es.js","names":[],"sources":["../../../src/cashflow/context/hooks.tsx"],"sourcesContent":["import React from 'react'\nimport { GlobalDataContext, useCashflowStore } from '../../common'\n\nexport const useCashflowUiStore = () => {\n  const context = React.useContext(GlobalDataContext)\n\n  if (!context) {\n    throw new Error('useCashflowUiStore() must be used within the GlobalDataContext')\n  }\n\n  return useCashflowStore().uiStore\n}\n"],"mappings":";;;AAGA,IAAa,IAAA,MAA2B;AAGtC,MAAI,CAFY,EAAM,WAAW,CAE5B,EACH,OAAM,IAAI,MAAM,gEAAgE;AAGlF,SAAO,EAAiB,EAAE;AAC5B"}