@mx-cartographer/experiences 6.26.18-alpha.mega1 → 6.26.18-alpha.mega3

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

@@ -0,0 +1,146 @@
+import { jsx as e, jsxs as n, Fragment as A } from "react/jsx-runtime";
+import l from "react";
+import { observer as G } from "mobx-react-lite";
+import L from "@mui/material/Box";
+import R from "@mui/material/Button";
+import v from "@mui/material/Divider";
+import o from "@mui/material/Stack";
+import M from "@mui/material/styles/useTheme";
+import { P as m, Icon as h, Text as a } from "@mxenabled/mxui";
+import { useCashflowUiStore as N } from "../../context/hooks/index.es.js";
+import W from "../RemainingCash/index.es.js";
+import { useWidgetContainerProvider as $, useAccountStore as z, useGlobalUiStore as D, useGlobalCopyStore as P, useUserStore as q, useRecurringTransactionsStore as F } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as O } from "../../../common/hooks/useScreenSize/index.es.js";
+import J from "../../../common/components/Loader/index.es.js";
+import K from "../../../common/components/InformationTooltip/index.es.js";
+import { CurrencyText as s } from "../../../common/components/CurrencyText/index.es.js";
+import { buildDynamicCopy as c } from "../../../common/utils/Localization/index.es.js";
+const Q = ({ onAddIncomeClick: u }) => {
+  const f = M(), { availableWidth: j } = $(), { isMobile: T } = O(), { visibleCashAccounts: b, visibleCashBalance: B } = z(), { selectedAccountGuids: i } = D(), { cashflow: t } = P(), { userProfile: X } = q(), {
+    daysUntilNextIncome: C,
+    expensesTilNextIncome: d,
+    selectedCashAccounts: y,
+    setNextIncome: k,
+    setSelectedCashAccounts: E,
+    setUpcomingExpenses: H
+  } = N(), { isDataLoaded: U, nextIncomeRecurrence: g, upcomingExpenses: w } = F();
+  l.useEffect(() => {
+    E(
+      b.filter((r) => i.includes(r.guid))
+    );
+  }, [b, i]), l.useEffect(() => {
+    g && k(g), H(w);
+  }, [g, w]);
+  const x = l.useMemo(
+    () => b.filter((r) => i.includes(r.guid)).reduce((r, S) => r + (S?.balance || 0), 0),
+    [i, w]
+  ), p = l.useMemo(
+    () => d.filter((r) => i.includes(r.accountGuid || "")).reduce((r, S) => r + S.amount, 0),
+    [i, d]
+  ), _ = l.useMemo(
+    () => x - p,
+    [x, p]
+  ), I = X?.has_completed_cash_flow_onboarding && !!u;
+  return U ? /* @__PURE__ */ e(L, { className: "mx-cashflow", pl: 16, pr: 16, pt: 16, children: j > 610 ? /* @__PURE__ */ n(
+    o,
+    {
+      border: `1px solid ${f.palette.border.light}`,
+      borderRadius: 1,
+      direction: "row",
+      justifyContent: "space-between",
+      px: 24,
+      children: [
+        /* @__PURE__ */ n(o, { pb: 14, pt: 12, children: [
+          /* @__PURE__ */ e(s, { amount: x, variant: "H2" }),
+          /* @__PURE__ */ e(m, { variant: "XSmall", whiteSpace: "nowrap", children: c(
+            t.total_cash_accounts,
+            y.length
+          ) })
+        ] }),
+        /* @__PURE__ */ e(o, { pt: 18, children: /* @__PURE__ */ e(h, { name: "remove" }) }),
+        /* @__PURE__ */ n(o, { pb: 14, pt: 12, children: [
+          /* @__PURE__ */ e(s, { amount: p, variant: "H2" }),
+          /* @__PURE__ */ e(m, { variant: "XSmall", whiteSpace: "nowrap", children: c(t.expenses_due, d.length) })
+        ] }),
+        /* @__PURE__ */ e(o, { pt: 18, children: /* @__PURE__ */ e(h, { name: "equal" }) }),
+        /* @__PURE__ */ n(o, { pb: 14, pr: 24, pt: 12, children: [
+          /* @__PURE__ */ e(s, { amount: _, variant: "H2" }),
+          /* @__PURE__ */ n(o, { alignItems: "center", direction: "row", gap: 8, children: [
+            /* @__PURE__ */ e(m, { variant: "XSmall", whiteSpace: "nowrap", children: t.available_to_spend }),
+            /* @__PURE__ */ e(K, { body: t.tooltip_body, title: t.tooltip_title })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(o, { borderLeft: `1px solid ${f.palette.border.light}`, pb: 12, pl: 24, pt: 12, children: I ? /* @__PURE__ */ n(A, { children: [
+          /* @__PURE__ */ e(a, { variant: "H2", children: c(t.days, C) }),
+          /* @__PURE__ */ e(m, { variant: "XSmall", whiteSpace: "nowrap", children: t.next_paycheck })
+        ] }) : /* @__PURE__ */ e(
+          R,
+          {
+            onClick: u,
+            startIcon: /* @__PURE__ */ e(h, { name: "add" }),
+            sx: { fontSize: 13, lineHeight: "initial" },
+            children: t.add_income
+          }
+        ) })
+      ]
+    }
+  ) : /* @__PURE__ */ n(o, { border: `1px solid ${f.palette.border.light}`, borderRadius: 1, children: [
+    /* @__PURE__ */ n(o, { direction: "row", justifyContent: "space-between", p: 16, children: [
+      /* @__PURE__ */ e(a, { variant: "Small", children: c(
+        t.total_cash_accounts,
+        y.length
+      ) }),
+      /* @__PURE__ */ e(s, { amount: B, bold: !0, variant: "XSmall" })
+    ] }),
+    /* @__PURE__ */ e(v, {}),
+    /* @__PURE__ */ n(o, { direction: "row", justifyContent: "space-between", p: 16, children: [
+      /* @__PURE__ */ e(a, { variant: "Small", children: c(t.expenses_due, d.length) }),
+      /* @__PURE__ */ e(s, { amount: p, bold: !0, symbol: "-", variant: "XSmall" })
+    ] }),
+    /* @__PURE__ */ e(v, {}),
+    /* @__PURE__ */ e(
+      o,
+      {
+        alignItems: "center",
+        bgcolor: "background.default",
+        direction: "row",
+        gap: 8,
+        height: 48,
+        justifyContent: "space-between",
+        px: 16,
+        sx: { borderBottomLeftRadius: 4, borderBottomRightRadius: 4 },
+        children: /* @__PURE__ */ e(W, { remaining: _ })
+      }
+    ),
+    /* @__PURE__ */ e(v, {}),
+    I ? /* @__PURE__ */ n(o, { direction: "row", justifyContent: "space-between", p: 16, children: [
+      /* @__PURE__ */ e(a, { variant: "Small", children: t.next_paycheck }),
+      /* @__PURE__ */ e(a, { bold: !0, variant: "XSmall", children: c(t.days, C) })
+    ] }) : /* @__PURE__ */ n(
+      o,
+      {
+        alignItems: "center",
+        direction: "row",
+        justifyContent: "space-between",
+        pl: 16,
+        pr: 2,
+        py: 2,
+        children: [
+          /* @__PURE__ */ e(a, { variant: "Small", children: t.next_paycheck }),
+          /* @__PURE__ */ e(
+            R,
+            {
+              onClick: u,
+              startIcon: /* @__PURE__ */ e(h, { name: "add" }),
+              sx: { fontSize: 13 },
+              children: t.add_income
+            }
+          )
+        ]
+      }
+    )
+  ] }) }) : /* @__PURE__ */ e(J, { height: T ? 210 : 120 });
+}, ue = G(Q);
+export {
+  ue as default
+};

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

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

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

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

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

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

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

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

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

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

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

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