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

package/dist/recurringtransactions/RecurringTransactionsMiniWidget/index.es.js

@@ -0,0 +1,37 @@
+import { jsx as t } from "react/jsx-runtime";
+import i from "react";
+import { observer as p } from "mobx-react-lite";
+import { endOfToday as g } from "date-fns/endOfToday";
+import { startOfToday as y } from "date-fns/startOfToday";
+import { subDays as b } from "date-fns/subDays";
+import { MiniWidgetContent as T } from "../components/MiniWidgetContent/index.es.js";
+import { useAccountStore as S, useGlobalCopyStore as C, useTransactionStore as R, useRecurringTransactionsStore as x, useGlobalUiStore as L } from "../../common/context/hooks/index.es.js";
+import n from "../../common/components/Loader/index.es.js";
+import A from "../../common/components/MiniWidgetContainer/index.es.js";
+const w = p(
+  ({ onPrimaryCtaClick: s, sx: a }) => {
+    const { accounts: c } = S(), { recurring: e } = C(), { setFilter: m } = R(), { isDataLoaded: u, loadRepeatingTransactions: d } = x(), { isCopyLoaded: f, isInitialized: r, setSelectedAccounts: l, selectedAccountGuids: o } = L();
+    return i.useEffect(() => {
+      r && l(c);
+    }, [r]), i.useEffect(() => {
+      o.length > 0 && (m({
+        dateRange: { start: b(y(), 90), end: g() },
+        accounts: o
+      }), d().finally());
+    }, [o]), !f || !r ? /* @__PURE__ */ t(n, {}) : /* @__PURE__ */ t(
+      A,
+      {
+        className: "mx-exp-recurring-transactions-miniwidget",
+        onPrimaryCtaClick: s,
+        primaryCtaLabel: e.primary_cta,
+        subTitle: e.sub_title,
+        sx: a,
+        title: e.mini_title,
+        children: u ? /* @__PURE__ */ t(T, {}) : /* @__PURE__ */ t(n, {})
+      }
+    );
+  }
+);
+export {
+  w as RecurringTransactionsMiniWidget
+};

package/dist/recurringtransactions/RecurringTransactionsWidget/index.es.js

@@ -0,0 +1,67 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import n from "react";
+import { observer as T } from "mobx-react-lite";
+import { endOfMonth as I } from "date-fns/endOfMonth";
+import { endOfToday as A } from "date-fns/endOfToday";
+import { startOfMonth as E } from "date-fns/startOfMonth";
+import { startOfToday as N } from "date-fns/startOfToday";
+import { subDays as O } from "date-fns/subDays";
+import i from "@mui/material/Skeleton";
+import _ from "@mui/material/Stack";
+import { RecurringSettings as w } from "../components/shared/RecurringSettings/index.es.js";
+import { RecurringTransactions as L } from "../components/RecurringTransactions/index.es.js";
+import { useAccountStore as y, useGlobalCopyStore as b, useGlobalUiStore as v, useRecurringTransactionsStore as D, useTransactionStore as G, useEvent as k } from "../../common/context/hooks/index.es.js";
+import x from "../../common/components/Loader/index.es.js";
+import F from "../../common/components/WidgetContainer/index.es.js";
+import { ANALYTICS_EVENTS as d } from "../../common/constants/Analytics/index.es.js";
+import U from "../../common/components/drawer/Drawer/index.es.js";
+const et = T(({ onBackClick: m, sx: l = {} }) => {
+  const { accounts: o } = y(), { recurring: e } = b(), { isCopyLoaded: f, isInitialized: r, selectedAccountGuids: u, setSelectedAccounts: p } = v(), { isDataLoaded: S, loadRepeatingTransactions: g, setDateRange: R } = D(), { setFilter: h } = G(), { onEvent: s } = k(), [C, a] = n.useState(!1);
+  return n.useEffect(() => {
+    p(o);
+  }, [o]), n.useEffect(() => {
+    r && (h({
+      dateRange: { start: O(N(), 90), end: A() },
+      accounts: u
+    }), R({ start: E(/* @__PURE__ */ new Date()), end: I(/* @__PURE__ */ new Date()) }), g().finally());
+  }, [r]), f ? /* @__PURE__ */ c(
+    F,
+    {
+      accountOptions: o,
+      actions: [
+        {
+          label: e.settings,
+          iconName: "settings",
+          onClick: () => {
+            a(!0), s(d.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
+          }
+        }
+      ],
+      onAccountsFilterClick: () => s(d.RECURRING_TRANSACTIONS_CLICK_FILTER),
+      onBackClick: m,
+      sx: l,
+      title: e.title,
+      children: [
+        r && S ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ c(_, { direction: "column", p: 48, spacing: 24, children: [
+          /* @__PURE__ */ t(i, { height: 100, variant: "rounded", width: "100%" }),
+          /* @__PURE__ */ t(i, { height: 100, variant: "rounded", width: "100%" }),
+          /* @__PURE__ */ t(i, { height: 600, variant: "rounded", width: "100%" })
+        ] }),
+        /* @__PURE__ */ t(
+          U,
+          {
+            ariaLabelClose: e.close_drawer_aria,
+            isOpen: C,
+            onClose: () => a(!1),
+            shouldShowHeaderBorders: !1,
+            title: e.settings,
+            children: /* @__PURE__ */ t(w, {})
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ t(x, {});
+});
+export {
+  et as RecurringTransactionsWidget
+};

package/dist/recurringtransactions/ZeroStateMicroWidget/index.es.js

@@ -0,0 +1,19 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import o from "@mui/material/Stack";
+import { CurrencyExchange as n } from "@mxenabled/mx-icons";
+import { P as i } from "@mxenabled/mxui";
+import { observer as c } from "mobx-react-lite";
+import { useGlobalCopyStore as s } from "../../common/context/hooks/index.es.js";
+const g = c(() => {
+  const { recurring: t } = s();
+  return /* @__PURE__ */ e(o, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ r(n, { size: 32 }),
+    /* @__PURE__ */ e(o, { children: [
+      /* @__PURE__ */ r(i, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ r(i, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+    ] })
+  ] });
+});
+export {
+  g as ZeroStateMicroWidget
+};

package/dist/recurringtransactions/api/RepeatingTransactionsApi/index.es.js

@@ -0,0 +1,18 @@
+import { Fetch as a } from "../../../common/utils/Fetch/index.es.js";
+import { ApiEndpoints as e } from "../../../common/constants/ApiEndpoints/index.es.js";
+class r {
+  fetchInstance;
+  constructor(t, n) {
+    this.fetchInstance = new a(t, n);
+  }
+  addRepeatingTransaction = async (t) => this.fetchInstance.post(e.REPEATING_TRANSACTIONS, t).then((n) => n.repeating_transaction);
+  getRepeatingTransactions = async () => this.fetchInstance.get(e.REPEATING_TRANSACTIONS).then((t) => t.repeating_transactions);
+  updateRepeatingTransaction = async (t) => this.fetchInstance.put(
+    `${e.REPEATING_TRANSACTIONS}/${t.guid}`,
+    t
+  ).then((n) => n.repeating_transaction);
+  deleteRepeatingTransaction = async (t) => this.fetchInstance.delete(`${e.REPEATING_TRANSACTIONS}/${t}`).then((n) => n);
+}
+export {
+  r as RepeatingTransactionsApi
+};

package/dist/recurringtransactions/components/MiniWidgetContent/index.es.js

@@ -0,0 +1,32 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { observer as a } from "mobx-react-lite";
+import l from "@mui/material/Divider";
+import u from "@mui/material/Stack";
+import { RecurrenceCalendar as p } from "../recurrencecalendar/RecurrenceCalendar/index.es.js";
+import { RecurrenceList as d } from "../RecurrenceList/index.es.js";
+import { useGlobalCopyStore as f, useWidgetContainerProvider as y, useRecurringTransactionsStore as D } from "../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as x } from "../../../common/utils/Localization/index.es.js";
+import { formatDate as v, DATE_FORMATS_INTL as R } from "../../../common/constants/DateFormats/index.es.js";
+const A = a(() => {
+  const { recurring: i } = f(), { availableWidth: o } = y(), { selectedDay: e, selectedDayRecurrences: c, setSelectedDay: n, upcomingRecurrences: s } = D(), r = o < 750;
+  return /* @__PURE__ */ m(u, { flexDirection: r ? "column" : "row", width: "100%", children: [
+    /* @__PURE__ */ t(p, {}),
+    !r && /* @__PURE__ */ t(l, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
+    /* @__PURE__ */ t(
+      d,
+      {
+        isMini: !0,
+        onResetClick: e ? () => n(e) : void 0,
+        recurrences: c || s.slice(0, 5),
+        sx: { width: r ? "100%" : "calc(100% - 336px)", mt: 12 },
+        title: e ? x(
+          i.day_transactions,
+          v(e, R.MONTH_DAY)
+        ) : i.upcoming_activity
+      }
+    )
+  ] });
+});
+export {
+  A as MiniWidgetContent
+};

package/dist/recurringtransactions/components/PaymentSchedule/index.es.js

@@ -0,0 +1,100 @@
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import w from "react";
+import { getDayOfYear as O } from "date-fns/getDayOfYear";
+import { setDayOfYear as E } from "date-fns/setDayOfYear";
+import { startOfToday as M } from "date-fns/startOfToday";
+import g from "@mui/material/Stack";
+import { AdapterDateFns as A } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { DatePicker as T } from "@mui/x-date-pickers";
+import { LocalizationProvider as Y } from "@mui/x-date-pickers/LocalizationProvider";
+import { Select as n } from "../../../common/components/Select/index.es.js";
+import { useGlobalCopyStore as x } from "../../../common/context/hooks/index.es.js";
+import { Frequency as r } from "../../../common/types/RepeatingTransaction/index.es.js";
+import { formatOrdinal as C } from "../../../common/utils/NumberFormatting/index.es.js";
+const F = ({
+  frequency: t,
+  firstDay: y,
+  secondDay: i,
+  onFrequencyChange: _,
+  onFirstDayChange: d,
+  onSecondDayChange: h
+}) => {
+  const { recurring: e } = x(), m = w.useMemo(
+    () => [
+      { id: r.EveryWeek, label: e.frequency_every_week },
+      { id: r.EveryOtherWeek, label: e.frequency_every_other_week },
+      { id: r.TwiceAMonth, label: e.frequency_twice_a_month },
+      { id: r.EveryMonth, label: e.frequency_every_month },
+      { id: r.EveryOtherMonth, label: e.frequency_every_other_month },
+      { id: r.EveryQuarter, label: e.frequency_every_quarter },
+      { id: r.EveryOtherQuarter, label: e.frequency_every_other_quarter },
+      { id: r.EveryYear, label: e.frequency_every_year }
+    ],
+    [e]
+  ), s = [
+    { id: 0, label: e.weekday_sunday },
+    { id: 1, label: e.weekday_monday },
+    { id: 2, label: e.weekday_tuesday },
+    { id: 3, label: e.weekday_wednesday },
+    { id: 4, label: e.weekday_thursday },
+    { id: 5, label: e.weekday_friday },
+    { id: 6, label: e.weekday_saturday }
+  ], l = [...Array(31).keys()].map((o) => ({
+    id: o + 1,
+    label: C(o + 1)
+  }));
+  l[30].label += ` (${e.last_day_of_month})`;
+  const c = l.slice(0, 15), f = l.slice(14), p = t === r.EveryWeek || t === r.EveryOtherWeek, v = t === r.TwiceAMonth || t === r.EveryMonth || t === r.EveryOtherMonth || t === r.EveryQuarter || t === r.EveryOtherQuarter, b = E(M(), y), u = (o) => {
+    o && d(O(o));
+  };
+  return /* @__PURE__ */ k(g, { gap: 24, sx: { m: 24 }, children: [
+    /* @__PURE__ */ a(
+      n,
+      {
+        label: e.frequency,
+        onChange: _,
+        options: m,
+        value: t
+      }
+    ),
+    p && /* @__PURE__ */ a(
+      n,
+      {
+        label: e.day_of_the_week,
+        onChange: d,
+        options: s,
+        value: y
+      }
+    ),
+    v && /* @__PURE__ */ a(
+      n,
+      {
+        label: t === r.TwiceAMonth ? e.first_day_of_the_month : e.day_of_the_month,
+        onChange: d,
+        options: t === r.TwiceAMonth ? c : l,
+        value: y
+      }
+    ),
+    t === r.TwiceAMonth && /* @__PURE__ */ a(
+      n,
+      {
+        label: e.second_day_of_the_month,
+        onChange: h,
+        options: f,
+        value: i || 0
+      }
+    ),
+    t === r.EveryYear && /* @__PURE__ */ a(Y, { dateAdapter: A, children: /* @__PURE__ */ a(
+      T,
+      {
+        disablePast: !0,
+        label: e.next_payment_date,
+        onChange: u,
+        value: b
+      }
+    ) })
+  ] });
+};
+export {
+  F as PaymentSchedule
+};

package/dist/recurringtransactions/components/RecurrenceBadges/index.es.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Schedule as l, MonetizationOn as t, Cancel as s, CheckCircle as d } from "@mxenabled/mx-icons";
+import n from "../../../common/components/IconBacking/index.es.js";
+const c = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2
+}, i = (o) => o ? { margin: "0 0 -6px -4px" } : void 0, m = ({ isOffset: o = !1, size: e = 16 }) => /* @__PURE__ */ r(n, { size: e, sx: { ...i(o) }, children: /* @__PURE__ */ r(l, { color: "primary", filled: !0, sx: { fontSize: e, ...c } }) }), g = ({ isOffset: o = !1, size: e = 16 }) => /* @__PURE__ */ r(n, { size: e, sx: { ...i(o) }, children: /* @__PURE__ */ r(
+  t,
+  {
+    filled: !0,
+    sx: { color: "categories.income", fontSize: e, ...c }
+  }
+) }), p = ({ isOffset: o = !1, size: e = 16 }) => /* @__PURE__ */ r(n, { size: e, sx: { ...i(o) }, children: /* @__PURE__ */ r(s, { color: "error", filled: !0, sx: { fontSize: e, ...c } }) }), u = ({ isOffset: o = !1, size: e = 16 }) => /* @__PURE__ */ r(n, { size: e, sx: { ...i(o) }, children: /* @__PURE__ */ r(d, { color: "success", filled: !0, sx: { fontSize: e, ...c } }) });
+export {
+  g as IncomeBadge,
+  p as MissedBadge,
+  u as PaidBadge,
+  m as UpcomingExpenseBadge
+};

package/dist/recurringtransactions/components/RecurrenceList/index.es.js

@@ -0,0 +1,69 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import m from "react";
+import { observer as _ } from "mobx-react-lite";
+import v from "@mui/material/Button";
+import l from "@mui/material/Divider";
+import f from "@mui/material/List";
+import D from "@mui/material/ListItem";
+import A from "@mui/material/ListSubheader";
+import h from "@mui/material/Stack";
+import { Text as c } from "@mxenabled/mxui";
+import { groupRecurrencesByDate as F } from "../../util/RecurringTransactions/index.es.js";
+import { RecurrenceRow as x } from "../RecurrenceRow/index.es.js";
+import { useGlobalCopyStore as L } from "../../../common/context/hooks/index.es.js";
+import { formatDate as R, DATE_FORMATS_INTL as S } from "../../../common/constants/DateFormats/index.es.js";
+const K = _(
+  ({
+    recurrences: t,
+    isMini: i = !1,
+    onResetClick: a,
+    onRecurrenceClick: p,
+    sx: u = {},
+    title: d
+  }) => {
+    const { recurring: s } = L(), b = m.useMemo(() => F(t), [t]);
+    return /* @__PURE__ */ o(h, { sx: { gap: 8, mt: 4, ...u }, children: [
+      d && /* @__PURE__ */ o(
+        h,
+        {
+          sx: { alignItems: "top", direction: "row", justifyContent: "space-between", px: 24 },
+          children: [
+            /* @__PURE__ */ r(c, { bold: !0, variant: "body1", children: d }),
+            a && /* @__PURE__ */ r(v, { onClick: a, sx: { mt: -12 }, variant: "text", children: s.reset })
+          ]
+        }
+      ),
+      t.length === 0 ? /* @__PURE__ */ r(c, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: s.no_activities }) : /* @__PURE__ */ r(f, { children: i ? t.map((e, n) => /* @__PURE__ */ o(m.Fragment, { children: [
+        /* @__PURE__ */ r(
+          x,
+          {
+            isMini: i,
+            onRecurrenceClick: p,
+            recurrence: e
+          }
+        ),
+        /* @__PURE__ */ r(l, { sx: { mx: 24 } })
+      ] }, `recurrence-${n}`)) : b.map((e, n) => /* @__PURE__ */ o(m.Fragment, { children: [
+        /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
+          f,
+          {
+            subheader: /* @__PURE__ */ r(A, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ r(c, { bold: !0, variant: "caption", children: R(e.date, S.DAY_OF_WEEK_MONTH_DAY) }) }),
+            sx: { width: "100%" },
+            children: e.recurrences.map((g, y) => /* @__PURE__ */ r(m.Fragment, { children: /* @__PURE__ */ r(
+              x,
+              {
+                isMini: i,
+                onRecurrenceClick: p,
+                recurrence: g
+              }
+            ) }, `day-recurrence-${y}`))
+          }
+        ) }, e.id),
+        /* @__PURE__ */ r(l, { sx: { mx: 24 } })
+      ] }, `recurrence-${n}`)) })
+    ] });
+  }
+);
+export {
+  K as RecurrenceList
+};

package/dist/recurringtransactions/components/RecurrenceRow/index.es.js

@@ -0,0 +1,149 @@
+import { jsxs as e, jsx as i, Fragment as _ } from "react/jsx-runtime";
+import w from "react";
+import G from "@mui/material/ListItem";
+import M from "@mui/material/ListItemAvatar";
+import O from "@mui/material/ListItemButton";
+import R from "@mui/material/ListItemText";
+import n from "@mui/material/Stack";
+import { CheckCircle as S, Cancel as v } from "@mxenabled/mx-icons";
+import { MerchantLogo as k, Text as r, InstitutionLogo as A } from "@mxenabled/mxui";
+import { getFrequencyLabel as I } from "../../util/RecurringTransactions/index.es.js";
+import { IncomeBadge as N, UpcomingExpenseBadge as P, PaidBadge as B, MissedBadge as j } from "../RecurrenceBadges/index.es.js";
+import { RecurringTransactionDetails as U } from "../RecurringTransactionDetails/index.es.js";
+import { useGlobalCopyStore as z, useRecurringTransactionsStore as F } from "../../../common/context/hooks/index.es.js";
+import { RecurrenceType as f, RecurrenceStatus as a } from "../../../common/types/RepeatingTransaction/index.es.js";
+import { formatCurrency as H } from "../../../common/utils/NumberFormatting/index.es.js";
+import Y from "../../../common/components/drawer/Drawer/index.es.js";
+import { buildDynamicCopy as c } from "../../../common/utils/Localization/index.es.js";
+import { formatDate as p, DATE_FORMATS_INTL as u } from "../../../common/constants/DateFormats/index.es.js";
+const E = (t) => {
+  if (t.type === f.Income)
+    return /* @__PURE__ */ i(N, {});
+  switch (t.status) {
+    case a.Missed:
+      return /* @__PURE__ */ i(j, {});
+    case a.Paid:
+      return /* @__PURE__ */ i(B, {});
+    default:
+      return /* @__PURE__ */ i(P, {});
+  }
+}, W = (t, o) => {
+  switch (t.status) {
+    case a.Paid:
+      return t.expectedDate ? c(
+        o.paid_on,
+        p(
+          t.occurredOnDate || t.expectedDate,
+          u.MONTH_DAY
+        )
+      ) : o.paid;
+    case a.Missed:
+      return c(
+        o.missed_on,
+        p(t.expectedDate, u.MONTH_DAY)
+      );
+    case a.Upcoming:
+      return c(
+        o.upcoming_on,
+        p(t.expectedDate, u.MONTH_DAY)
+      );
+    default:
+      return o.unknown;
+  }
+}, ct = ({
+  recurrence: t,
+  isMini: o = !1,
+  onRecurrenceClick: C = () => {
+  },
+  showOrdinal: D = !1
+}) => {
+  const { recurring: s } = z(), { repeatingTransactions: g } = F(), [T, m] = w.useState(!1), d = w.useMemo(
+    () => g.find((L) => L.guid === t.repeatingTransactionGuid),
+    [t, g]
+  ), h = t.type === f.Income, y = t.status === a.Paid, x = t.status === a.Missed, b = t.status === a.Upcoming;
+  let l = s.paid?.toLowerCase();
+  return x ? l = s.missed?.toLowerCase() : b && (l = D ? I(s, d || {}, !0) : I(s, d || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
+  /* @__PURE__ */ e(G, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ e(O, { onClick: () => {
+      m(!0), C(t);
+    }, children: [
+      /* @__PURE__ */ i(M, { children: /* @__PURE__ */ i(
+        k,
+        {
+          categoryGuid: t.categoryGuid,
+          merchantGuid: t.merchantGuid
+        }
+      ) }),
+      /* @__PURE__ */ i(R, { children: /* @__PURE__ */ e(
+        n,
+        {
+          direction: "row",
+          gap: 4,
+          sx: { justifyContent: "space-between", textOverflow: "ellipsis", textWrap: "nowrap" },
+          children: [
+            /* @__PURE__ */ e(n, { direction: "column", width: "50%", children: [
+              /* @__PURE__ */ i(r, { bold: !0, variant: "body1", children: t.name }),
+              /* @__PURE__ */ i(n, { alignItems: "center", direction: "row", gap: 6, children: o ? /* @__PURE__ */ e(n, { direction: "row", gap: 4, children: [
+                E(t),
+                /* @__PURE__ */ i(r, { variant: "caption", children: W(t, s) })
+              ] }) : /* @__PURE__ */ e(_, { children: [
+                t.institutionGuid && /* @__PURE__ */ i(
+                  A,
+                  {
+                    alt: t.institutionName,
+                    institutionGuid: t.institutionGuid,
+                    size: 12
+                  }
+                ),
+                /* @__PURE__ */ i(r, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ e(n, { alignItems: "flex-end", width: "100%", children: [
+              /* @__PURE__ */ e(r, { bold: !0, color: h ? "success.main" : "text.primary", variant: "body1", children: [
+                h ? "+" : "",
+                H(t.amount, "0,0.00")
+              ] }),
+              !o && /* @__PURE__ */ e(
+                n,
+                {
+                  direction: "row",
+                  sx: {
+                    alignItems: "center",
+                    gap: 6,
+                    justifyContent: "flex-end",
+                    textTransform: "uppercase",
+                    width: "100%"
+                  },
+                  children: [
+                    y && /* @__PURE__ */ i(S, { color: "success", filled: !0, size: 12 }),
+                    x && /* @__PURE__ */ i(v, { color: "error", filled: !0, size: 12 }),
+                    /* @__PURE__ */ i(r, { bold: !0, color: "text.secondary", variant: "caption", children: l })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ i(
+      Y,
+      {
+        ariaLabelClose: s.close_drawer_aria,
+        isOpen: T,
+        onClose: () => m(!1),
+        title: t.type === f.Income ? s.income_details : s.expense_details,
+        children: d && /* @__PURE__ */ i(
+          U,
+          {
+            onDeleted: () => m(!1),
+            recurringTransaction: d
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  ct as RecurrenceRow
+};

package/dist/recurringtransactions/components/RecurringStatus/index.es.js

@@ -0,0 +1,42 @@
+import { jsxs as i, jsx as r, Fragment as v } from "react/jsx-runtime";
+import x from "react";
+import { observer as y } from "mobx-react-lite";
+import l from "@mui/material/Box";
+import s from "@mui/material/Stack";
+import w from "@mui/material/styles/useTheme";
+import { Text as o } from "@mxenabled/mxui";
+import S from "../../../common/components/charts/StatusBar/index.es.js";
+import { useScreenSize as C } from "../../../common/hooks/useScreenSize/index.es.js";
+import { useGlobalCopyStore as $ } from "../../../common/context/hooks/index.es.js";
+import { formatCurrency as n } from "../../../common/utils/NumberFormatting/index.es.js";
+const I = y(
+  ({ expected: e, isExpense: h = !0, missed: t, paid: c, title: d, total: b, upcoming: f }) => {
+    const u = w(), { isSmallMobile: a } = C(), { recurring: m } = $(), g = x.useMemo(() => {
+      const p = [{ color: u.palette.success.main, percentage: `${c / e}` }];
+      return t && p.push({ color: u.palette.error.main, percentage: `${t / e}` }), p;
+    }, [c, e, t]);
+    return /* @__PURE__ */ i(s, { sx: { px: 24 }, children: [
+      /* @__PURE__ */ i(s, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
+        /* @__PURE__ */ r(o, { bold: !0, variant: "body1", children: `${d} (${b})` }),
+        /* @__PURE__ */ r(o, { bold: !0, color: h ? "text.primary" : "success.main", variant: "body1", children: `${h ? "-" : "+"}${n(e, "0,0.00")}` })
+      ] }),
+      /* @__PURE__ */ r(S, { data: g, height: 12 }),
+      /* @__PURE__ */ i(s, { sx: { alignItems: "center", flexDirection: "row", gap: 2, my: 8 }, children: [
+        /* @__PURE__ */ r(l, { sx: { bgcolor: "success.main", height: 8, mr: 8, width: 8 } }),
+        !a && /* @__PURE__ */ r(o, { bold: !0, variant: "body2", children: n(c, "0,0.00") }),
+        /* @__PURE__ */ r(o, { variant: "caption", children: m.paid?.toLowerCase() }),
+        t !== void 0 && /* @__PURE__ */ i(v, { children: [
+          /* @__PURE__ */ r(l, { sx: { bgcolor: "error.main", height: 8, ml: 16, mr: 8, width: 8 } }),
+          !a && /* @__PURE__ */ r(o, { bold: !0, variant: "body2", children: n(t, "0,0.00") }),
+          /* @__PURE__ */ r(o, { variant: "caption", children: m.missed?.toLowerCase() })
+        ] }),
+        /* @__PURE__ */ r(l, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
+        !a && /* @__PURE__ */ r(o, { bold: !0, variant: "body2", children: n(f, "0,0.00") }),
+        /* @__PURE__ */ r(o, { variant: "caption", children: m.upcoming })
+      ] })
+    ] });
+  }
+);
+export {
+  I as RecurringStatus
+};