@mx-cartographer/experiences 6.26.33-alpha.mm0 → 7.0.0-alpha.mega1

package/dist/recurringtransactions/index.es.js

@@ -0,0 +1,879 @@
+import { jsx as e, jsxs as o, Fragment as K } from "react/jsx-runtime";
+import h from "react";
+import { observer as T } from "mobx-react-lite";
+import { endOfMonth as z } from "date-fns/endOfMonth";
+import { endOfToday as ce } from "date-fns/endOfToday";
+import { startOfMonth as k } from "date-fns/startOfMonth";
+import { startOfToday as le } from "date-fns/startOfToday";
+import { subDays as de } from "date-fns/subDays";
+import re from "@mui/material/Skeleton";
+import c from "@mui/material/Stack";
+import { R as He } from "../RecurringSettings-D_HnMYZP.mjs";
+import { M as An } from "../RecurringSettings-D_HnMYZP.mjs";
+import { addMonths as ze } from "date-fns/addMonths";
+import { subMonths as Be } from "date-fns/subMonths";
+import { isBefore as Ue } from "date-fns/isBefore";
+import oe from "@mui/material/Unstable_Grid2";
+import be from "@mui/material/IconButton";
+import Re from "@mui/material/Tab";
+import Fe from "@mui/material/Tabs";
+import { Schedule as je, MonetizationOn as Ke, Cancel as ve, CheckCircle as Me, ChevronLeft as Ye, ChevronRight as Ve, CurrencyExchange as Xe } from "@mxenabled/mx-icons";
+import { Text as p, MerchantLogo as ue, InstitutionLogo as Ze, H3 as qe, P as ae } from "@mxenabled/mxui";
+import { getWeeksInMonth as Te } from "date-fns/getWeeksInMonth";
+import me from "@mui/material/styles/useTheme";
+import { AdapterDateFns as Je } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { DateCalendar as Qe } from "@mui/x-date-pickers/DateCalendar";
+import { LocalizationProvider as et } from "@mui/x-date-pickers/LocalizationProvider";
+import { isSameDay as tt } from "date-fns/isSameDay";
+import nt from "@mui/material/Badge";
+import { PickersDay as it } from "@mui/x-date-pickers/PickersDay";
+import { I as Y } from "../IconBacking-B9oC6uL2.mjs";
+import { u as D, a as V, f as v, g as X, c as pe, n as ge, p as rt } from "../hooks-30y_BLwc.mjs";
+import { c as M, a as R, g as De, f as ot } from "../RepeatingTransaction-BPWfaB3f.mjs";
+import { T as P } from "../RecurringTransactionsStore-BKLD3OWo.mjs";
+import { R as Gn } from "../RecurringTransactionsStore-BKLD3OWo.mjs";
+import { A as _, W as at } from "../WidgetContainer-DWCusxYI.mjs";
+import st from "@mui/material/Button";
+import se from "@mui/material/Divider";
+import Se from "@mui/material/List";
+import Le from "@mui/material/ListItem";
+import ct from "@mui/material/ListSubheader";
+import lt from "@mui/material/ListItemAvatar";
+import dt from "@mui/material/ListItemButton";
+import ut from "@mui/material/ListItemText";
+import { a as mt } from "../ManageIncome-ndMuhJMG.mjs";
+import { b as On, M as kn, S as Wn } from "../ManageIncome-ndMuhJMG.mjs";
+import { f as L } from "../NumberFormatting-CtWHhyBX.mjs";
+import { D as Ae } from "../Drawer-kEE73B87.mjs";
+import { b as N } from "../Localization-2MODESHW.mjs";
+import { f as A, D as E } from "../Dialog-CWW597AF.mjs";
+import O from "@mui/material/Box";
+import { S as Ee } from "../StatusBar-BK_uYHAB.mjs";
+import { u as Ge } from "../useScreenSize-B6JyS_Lj.mjs";
+import { L as j } from "../Loader-Dp1P2gNw.mjs";
+import { M as pt } from "../MiniWidgetContainer-BoOp-A05.mjs";
+import { u as gt } from "../useDimensions-27p2evRx.mjs";
+import { M as ht } from "../MicroWidgetContainer-CsvHLYKX.mjs";
+const Z = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2
+}, q = (t) => t ? { margin: "0 0 -6px -4px" } : void 0, he = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(je, { color: "primary", filled: !0, sx: { fontSize: n, ...Z } }) }), fe = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(
+  Ke,
+  {
+    filled: !0,
+    sx: { color: "categories.income", fontSize: n, ...Z }
+  }
+) }), xe = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(ve, { color: "error", filled: !0, sx: { fontSize: n, ...Z } }) }), ye = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(Me, { color: "success", filled: !0, sx: { fontSize: n, ...Z } }) }), ft = T(
+  ({ day: t, outsideCurrentMonth: n, ...i }) => {
+    const { recurring: a } = D(), { selectedAccountGuids: r } = V(), { recurrences: l, setSelectedDay: u } = v(), s = h.useMemo(
+      () => l.filter((d) => r.includes(d.accountGuid)),
+      [r, l]
+    ).filter(
+      (d) => tt(d.occurredOnDate || d.expectedDate, t)
+    ), m = s.some(
+      (d) => d.type !== M.Income && d.status === R.Upcoming
+    ), f = s.some(
+      (d) => d.type !== M.Income && d.status === R.Missed
+    ), x = s.some(
+      (d) => d.type !== M.Income && d.status === R.Paid
+    ), b = s.some((d) => d.type === M.Income), y = (m ? 1 : 0) + (f ? 1 : 0) + (x ? 1 : 0) + (b ? 1 : 0);
+    return /* @__PURE__ */ e(
+      nt,
+      {
+        badgeContent: s.length > 0 && /* @__PURE__ */ o(K, { children: [
+          f && /* @__PURE__ */ e(xe, { isOffset: !0 }),
+          x && /* @__PURE__ */ e(ye, { isOffset: !0 }),
+          m && /* @__PURE__ */ e(he, { isOffset: !0 }),
+          b && /* @__PURE__ */ e(fe, { isOffset: !0 })
+        ] }),
+        overlap: "circular",
+        sx: {
+          "& .MuiBadge-badge": {
+            padding: 0,
+            marginRight: `${(y - 1) * 6 + 1}px`,
+            flexWrap: "nowrap"
+          }
+        },
+        children: /* @__PURE__ */ e(
+          it,
+          {
+            "aria-label": `
+          ${x && a.paid}, 
+          ${f && a.missed}, 
+          ${m && a.upcoming}, 
+          ${b && a.income}`,
+            day: t,
+            onClick: () => u(t),
+            outsideCurrentMonth: n,
+            sx: {
+              "&.MuiPickersDay-root": {
+                ...n && {
+                  color: "text.disabled"
+                }
+              }
+            },
+            ...i
+          }
+        )
+      }
+    );
+  }
+), F = ({ icon: t, label: n }) => /* @__PURE__ */ o(c, { alignItems: "center", flexDirection: "row", sx: { gap: 6 }, children: [
+  /* @__PURE__ */ e(t, {}),
+  /* @__PURE__ */ e(p, { variant: "XSmall", children: n })
+] }), xt = T(() => {
+  const { recurring: t } = D();
+  return /* @__PURE__ */ o(
+    c,
+    {
+      alignItems: "center",
+      "aria-hidden": !0,
+      flexDirection: "row",
+      gap: 16,
+      justifyContent: "center",
+      mt: 12,
+      children: [
+        /* @__PURE__ */ e(F, { icon: he, label: t.expense }),
+        /* @__PURE__ */ e(F, { icon: fe, label: t.income }),
+        /* @__PURE__ */ e(F, { icon: xe, label: t.missed }),
+        /* @__PURE__ */ e(F, { icon: ye, label: t.paid })
+      ]
+    }
+  );
+}), Ie = 58, Ne = T(() => {
+  const t = me(), { onEvent: n } = X(), { selectedDay: i, setDateRange: a } = v(), [r, l] = h.useState(
+    Te(/* @__PURE__ */ new Date()) * P + Ie
+  ), u = (s) => {
+    l(Te(s) * P + Ie), a({
+      start: k(s),
+      end: z(s)
+    }), n(_.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT);
+  }, g = /* @__PURE__ */ e(
+    Qe,
+    {
+      minDate: k(/* @__PURE__ */ new Date()),
+      onMonthChange: u,
+      showDaysOutsideCurrentMonth: !0,
+      slots: {
+        day: ft
+      },
+      sx: {
+        "& .MuiPickersArrowSwitcher-button": {
+          color: "primary.main",
+          "&:disabled": {
+            color: "action.disabled"
+          }
+        },
+        "& .MuiButtonBase-root.MuiPickersDay-root": {
+          borderRadius: "4px",
+          "&:focus, &:hover": {
+            borderRadius: "4px"
+          }
+        },
+        "& .MuiPickersCalendarHeader-root": {
+          mt: 0,
+          pl: 16,
+          pr: 8
+        },
+        "& .MuiPickersCalendarHeader-label": {
+          fontSize: t.typography.Body.fontSize,
+          fontWeight: 600
+        },
+        "& .MuiDayCalendar-slideTransition": {
+          minHeight: r
+        },
+        "&.MuiDateCalendar-root": {
+          minHeight: r + P
+        },
+        "& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel": {
+          height: P,
+          width: P,
+          margin: 0
+        },
+        "& .MuiDayCalendar-weekDayLabel": {
+          fontFamily: t.typography.h3.fontFamily,
+          fontSize: t.typography.body2.fontSize
+        }
+      },
+      value: i,
+      views: ["day"]
+    }
+  );
+  return /* @__PURE__ */ e(c, { justifyContent: "center", children: /* @__PURE__ */ o(et, { dateAdapter: Je, children: [
+    i && g,
+    !i && g,
+    /* @__PURE__ */ e(xt, {})
+  ] }) });
+}), yt = (t) => {
+  if (t.type === M.Income)
+    return /* @__PURE__ */ e(fe, {});
+  switch (t.status) {
+    case R.Missed:
+      return /* @__PURE__ */ e(xe, {});
+    case R.Paid:
+      return /* @__PURE__ */ e(ye, {});
+    default:
+      return /* @__PURE__ */ e(he, {});
+  }
+}, Ct = (t, n) => {
+  switch (t.status) {
+    case R.Paid:
+      return t.expectedDate ? N(
+        n.paid_on,
+        A(
+          t.occurredOnDate || t.expectedDate,
+          E.MONTH_DAY
+        )
+      ) : n.paid;
+    case R.Missed:
+      return N(
+        n.missed_on,
+        A(t.expectedDate, E.MONTH_DAY)
+      );
+    case R.Upcoming:
+      return N(
+        n.upcoming_on,
+        A(t.expectedDate, E.MONTH_DAY)
+      );
+    default:
+      return n.unknown;
+  }
+}, we = ({
+  recurrence: t,
+  isMini: n = !1,
+  onRecurrenceClick: i = () => {
+  },
+  showOrdinal: a = !1
+}) => {
+  const { recurring: r } = D(), { repeatingTransactions: l } = v(), [u, g] = h.useState(!1), s = h.useMemo(
+    () => l.find((S) => S.guid === t.repeatingTransactionGuid),
+    [t, l]
+  ), m = t.type === M.Income, f = t.status === R.Paid, x = t.status === R.Missed, b = t.status === R.Upcoming;
+  let y = r.paid?.toLowerCase();
+  return x ? y = r.missed?.toLowerCase() : b && (y = a ? De(r, s || {}, !0) : De(r, s || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
+  /* @__PURE__ */ o(Le, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ o(dt, { onClick: () => {
+      g(!0), i(t);
+    }, children: [
+      /* @__PURE__ */ e(lt, { children: /* @__PURE__ */ e(
+        ue,
+        {
+          categoryGuid: t.categoryGuid,
+          merchantGuid: t.merchantGuid
+        }
+      ) }),
+      /* @__PURE__ */ e(ut, { children: /* @__PURE__ */ o(
+        c,
+        {
+          direction: "row",
+          gap: 4,
+          sx: { justifyContent: "space-between", textOverflow: "ellipsis", textWrap: "nowrap" },
+          children: [
+            /* @__PURE__ */ o(c, { direction: "column", width: "50%", children: [
+              /* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: t.name }),
+              /* @__PURE__ */ e(c, { alignItems: "center", direction: "row", gap: 6, children: n ? /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
+                yt(t),
+                /* @__PURE__ */ e(p, { variant: "caption", children: Ct(t, r) })
+              ] }) : /* @__PURE__ */ o(K, { children: [
+                t.institutionGuid && /* @__PURE__ */ e(
+                  Ze,
+                  {
+                    alt: t.institutionName,
+                    institutionGuid: t.institutionGuid,
+                    size: 12
+                  }
+                ),
+                /* @__PURE__ */ e(p, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ o(c, { alignItems: "flex-end", width: "100%", children: [
+              /* @__PURE__ */ o(p, { bold: !0, color: m ? "success.main" : "text.primary", variant: "body1", children: [
+                m ? "+" : "",
+                L(t.amount, "0,0.00")
+              ] }),
+              !n && /* @__PURE__ */ o(
+                c,
+                {
+                  direction: "row",
+                  sx: {
+                    alignItems: "center",
+                    gap: 6,
+                    justifyContent: "flex-end",
+                    textTransform: "uppercase",
+                    width: "100%"
+                  },
+                  children: [
+                    f && /* @__PURE__ */ e(Me, { color: "success", filled: !0, size: 12 }),
+                    x && /* @__PURE__ */ e(ve, { color: "error", filled: !0, size: 12 }),
+                    /* @__PURE__ */ e(p, { bold: !0, color: "text.secondary", variant: "caption", children: y })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(
+      Ae,
+      {
+        ariaLabelClose: r.close_drawer_aria,
+        isOpen: u,
+        onClose: () => g(!1),
+        title: t.type === M.Income ? r.income_details : r.expense_details,
+        children: s && /* @__PURE__ */ e(
+          mt,
+          {
+            onDeleted: () => g(!1),
+            recurringTransaction: s
+          }
+        )
+      }
+    )
+  ] });
+}, H = T(
+  ({
+    recurrences: t,
+    isMini: n = !1,
+    onResetClick: i,
+    onRecurrenceClick: a,
+    sx: r = {},
+    title: l
+  }) => {
+    const { recurring: u } = D(), g = h.useMemo(() => ot(t), [t]);
+    return /* @__PURE__ */ o(c, { sx: { gap: 8, mt: 4, ...r }, children: [
+      l && /* @__PURE__ */ o(
+        c,
+        {
+          sx: { alignItems: "top", direction: "row", justifyContent: "space-between", px: 24 },
+          children: [
+            /* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: l }),
+            i && /* @__PURE__ */ e(st, { onClick: i, sx: { mt: -12 }, variant: "text", children: u.reset })
+          ]
+        }
+      ),
+      t.length === 0 ? /* @__PURE__ */ e(p, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: u.no_activities }) : /* @__PURE__ */ e(Se, { children: n ? t.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
+        /* @__PURE__ */ e(
+          we,
+          {
+            isMini: n,
+            onRecurrenceClick: a,
+            recurrence: s
+          }
+        ),
+        /* @__PURE__ */ e(se, { sx: { mx: 24 } })
+      ] }, `recurrence-${m}`)) : g.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
+        /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ e(
+          Se,
+          {
+            subheader: /* @__PURE__ */ e(ct, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children: A(s.date, E.DAY_OF_WEEK_MONTH_DAY) }) }),
+            sx: { width: "100%" },
+            children: s.recurrences.map((f, x) => /* @__PURE__ */ e(h.Fragment, { children: /* @__PURE__ */ e(
+              we,
+              {
+                isMini: n,
+                onRecurrenceClick: a,
+                recurrence: f
+              }
+            ) }, `day-recurrence-${x}`))
+          }
+        ) }, s.id),
+        /* @__PURE__ */ e(se, { sx: { mx: 24 } })
+      ] }, `recurrence-${m}`)) })
+    ] });
+  }
+), _e = T(
+  ({ expected: t, isExpense: n = !0, missed: i, paid: a, title: r, total: l, upcoming: u }) => {
+    const g = me(), { isSmallMobile: s } = Ge(), { recurring: m } = D(), f = h.useMemo(() => {
+      const x = [{ color: g.palette.success.main, percentage: `${a / t}` }];
+      return i && x.push({ color: g.palette.error.main, percentage: `${i / t}` }), x;
+    }, [a, t, i]);
+    return /* @__PURE__ */ o(c, { sx: { px: 24 }, children: [
+      /* @__PURE__ */ o(c, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
+        /* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: `${r} (${l})` }),
+        /* @__PURE__ */ e(p, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${L(t, "0,0.00")}` })
+      ] }),
+      /* @__PURE__ */ e(Ee, { data: f, height: 12 }),
+      /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2, my: 8 }, children: [
+        /* @__PURE__ */ e(O, { sx: { bgcolor: "success.main", height: 8, mr: 8, width: 8 } }),
+        !s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: L(a, "0,0.00") }),
+        /* @__PURE__ */ e(p, { variant: "caption", children: m.paid?.toLowerCase() }),
+        i !== void 0 && /* @__PURE__ */ o(K, { children: [
+          /* @__PURE__ */ e(O, { sx: { bgcolor: "error.main", height: 8, ml: 16, mr: 8, width: 8 } }),
+          !s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: L(i, "0,0.00") }),
+          /* @__PURE__ */ e(p, { variant: "caption", children: m.missed?.toLowerCase() })
+        ] }),
+        /* @__PURE__ */ e(O, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
+        !s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: L(u, "0,0.00") }),
+        /* @__PURE__ */ e(p, { variant: "caption", children: m.upcoming })
+      ] })
+    ] });
+  }
+), bt = T(() => {
+  const { recurring: t } = D(), { isDesktop: n, isSmallMobile: i } = Ge(), { onEvent: a } = X(), {
+    currentMonthExpenses: r,
+    currentMonthIncome: l,
+    dateRange: u,
+    expenseTotal: g,
+    incomeTotal: s,
+    missedExpenseTotal: m,
+    pastRecurrences: f,
+    paidExpenseTotal: x,
+    paidIncomeTotal: b,
+    selectedDay: y,
+    selectedDayRecurrences: d,
+    setDateRange: S,
+    upcomingExpenseTotal: W,
+    upcomingIncomeTotal: J,
+    upcomingRecurrences: B
+  } = v(), [$, Q] = h.useState(0), ee = Ue(u.start, /* @__PURE__ */ new Date()), I = (C, ie) => {
+    Q(ie);
+  }, U = (C) => {
+    a(_.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
+      transaction_guid: C.transaction?.guid
+    });
+  }, w = (C) => {
+    a(_.RECURRING_TRANSACTIONS_CLICK_PAID, {
+      transaction_guid: C.transaction?.guid
+    });
+  }, te = () => {
+    const C = ze(u.start, 1);
+    S({
+      start: k(C),
+      end: z(C)
+    });
+  }, ne = () => {
+    const C = Be(u.start, 1);
+    S({
+      start: k(C),
+      end: z(C)
+    });
+  };
+  return /* @__PURE__ */ o(oe, { container: !0, sx: { pt: 16, px: 24, spacing: 24 }, children: [
+    /* @__PURE__ */ e(oe, { md: !0, sm: 12, width: "100%", children: /* @__PURE__ */ o(c, { sx: { gap: 16 }, children: [
+      /* @__PURE__ */ o(c, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ e(qe, { sx: { px: 24 }, children: N(
+          t.header_title,
+          A(u.start, E.MONTH_LONG)
+        ) }),
+        !n && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
+          /* @__PURE__ */ e(
+            be,
+            {
+              color: "primary",
+              disabled: ee,
+              onClick: ne,
+              children: /* @__PURE__ */ e(Ye, {})
+            }
+          ),
+          /* @__PURE__ */ e(be, { color: "primary", onClick: te, children: /* @__PURE__ */ e(Ve, {}) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        _e,
+        {
+          expected: g,
+          missed: m,
+          paid: x,
+          title: t.expenses,
+          total: r.length,
+          upcoming: W
+        }
+      ),
+      /* @__PURE__ */ e(
+        _e,
+        {
+          expected: s,
+          isExpense: !1,
+          paid: b,
+          title: t.deposits,
+          total: l.length,
+          upcoming: J
+        }
+      ),
+      n && /* @__PURE__ */ e(
+        H,
+        {
+          onRecurrenceClick: U,
+          recurrences: B,
+          title: t.upcoming_activity
+        }
+      ),
+      !n && /* @__PURE__ */ o(c, { children: [
+        /* @__PURE__ */ o(Fe, { onChange: I, value: $, variant: "fullWidth", children: [
+          /* @__PURE__ */ e(
+            Re,
+            {
+              label: /* @__PURE__ */ e(p, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: i ? t.upcoming : t.upcoming_activity })
+            }
+          ),
+          /* @__PURE__ */ e(
+            Re,
+            {
+              label: /* @__PURE__ */ e(p, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: i ? t.past : t.past_transactions })
+            }
+          )
+        ] }),
+        $ === 0 && /* @__PURE__ */ e(
+          H,
+          {
+            onRecurrenceClick: U,
+            recurrences: B
+          }
+        ),
+        $ === 1 && /* @__PURE__ */ e(
+          H,
+          {
+            onRecurrenceClick: w,
+            recurrences: f
+          }
+        )
+      ] })
+    ] }) }),
+    n && /* @__PURE__ */ e(oe, { sx: { minWidth: 450 }, xs: "auto", children: /* @__PURE__ */ o(c, { gap: 24, children: [
+      /* @__PURE__ */ e(Ne, {}),
+      /* @__PURE__ */ e(
+        H,
+        {
+          onRecurrenceClick: w,
+          recurrences: d || f,
+          title: y ? N(
+            t.day_transactions,
+            A(y, E.MONTH_DAY)
+          ) : t.past_transactions
+        }
+      )
+    ] }) })
+  ] });
+}), wn = T(({ onBackClick: t, sx: n = {} }) => {
+  const { accounts: i } = pe(), { recurring: a } = D(), { isCopyLoaded: r, isInitialized: l, selectedAccountGuids: u, setSelectedAccounts: g } = V(), { isDataLoaded: s, loadRepeatingTransactions: m, setDateRange: f } = v(), { setFilter: x } = ge(), { onEvent: b } = X(), [y, d] = h.useState(!1);
+  return h.useEffect(() => {
+    g(i);
+  }, [i]), h.useEffect(() => {
+    l && (x({
+      dateRange: { start: de(le(), 90), end: ce() },
+      accounts: u
+    }), f({ start: k(/* @__PURE__ */ new Date()), end: z(/* @__PURE__ */ new Date()) }), m().finally());
+  }, [l]), r ? /* @__PURE__ */ o(
+    at,
+    {
+      accountOptions: i,
+      actions: [
+        {
+          label: a.settings,
+          iconName: "settings",
+          onClick: () => {
+            d(!0), b(_.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
+          }
+        }
+      ],
+      onAccountsFilterClick: () => b(_.RECURRING_TRANSACTIONS_CLICK_FILTER),
+      onBackClick: t,
+      sx: n,
+      title: a.title,
+      children: [
+        l && s ? /* @__PURE__ */ e(bt, {}) : /* @__PURE__ */ o(c, { direction: "column", p: 48, spacing: 24, children: [
+          /* @__PURE__ */ e(re, { height: 100, variant: "rounded", width: "100%" }),
+          /* @__PURE__ */ e(re, { height: 100, variant: "rounded", width: "100%" }),
+          /* @__PURE__ */ e(re, { height: 600, variant: "rounded", width: "100%" })
+        ] }),
+        /* @__PURE__ */ e(
+          Ae,
+          {
+            ariaLabelClose: a.close_drawer_aria,
+            isOpen: y,
+            onClose: () => d(!1),
+            shouldShowHeaderBorders: !1,
+            title: a.settings,
+            children: /* @__PURE__ */ e(He, {})
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(j, {});
+}), Rt = T(() => {
+  const { recurring: t } = D(), { availableWidth: n } = rt(), { selectedDay: i, selectedDayRecurrences: a, setSelectedDay: r, upcomingRecurrences: l } = v(), u = n < 750;
+  return /* @__PURE__ */ o(c, { flexDirection: u ? "column" : "row", width: "100%", children: [
+    /* @__PURE__ */ e(Ne, {}),
+    !u && /* @__PURE__ */ e(se, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        isMini: !0,
+        onResetClick: i ? () => r(i) : void 0,
+        recurrences: a || l.slice(0, 5),
+        sx: { width: u ? "100%" : "calc(100% - 336px)", mt: 12 },
+        title: i ? N(
+          t.day_transactions,
+          A(i, E.MONTH_DAY)
+        ) : t.upcoming_activity
+      }
+    )
+  ] });
+}), _n = T(
+  ({ onPrimaryCtaClick: t, sx: n }) => {
+    const { accounts: i } = pe(), { recurring: a } = D(), { setFilter: r } = ge(), { isDataLoaded: l, loadRepeatingTransactions: u } = v(), { isCopyLoaded: g, isInitialized: s, setSelectedAccounts: m, selectedAccountGuids: f } = V();
+    return h.useEffect(() => {
+      s && m(i);
+    }, [s]), h.useEffect(() => {
+      f.length > 0 && (r({
+        dateRange: { start: de(le(), 90), end: ce() },
+        accounts: f
+      }), u().finally());
+    }, [f]), !g || !s ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ e(
+      pt,
+      {
+        className: "mx-exp-recurring-transactions-miniwidget",
+        onPrimaryCtaClick: t,
+        primaryCtaLabel: a.primary_cta,
+        subTitle: a.sub_title,
+        sx: n,
+        title: a.mini_title,
+        children: l ? /* @__PURE__ */ e(Rt, {}) : /* @__PURE__ */ e(j, {})
+      }
+    );
+  }
+), Tt = ({
+  upcomingRecurrences: t,
+  maxLogos: n = 3
+}) => /* @__PURE__ */ e(c, { sx: { flexDirection: "row", gap: 4 }, children: t?.slice(0, n).map((i, a) => /* @__PURE__ */ e(
+  ue,
+  {
+    categoryGuid: i.categoryGuid || "",
+    merchantGuid: i.merchantGuid || ""
+  },
+  `${i.categoryGuid}-${i.merchantGuid}-${a}`
+)) }), Dt = ({
+  upcomingRecurrences: t,
+  logoSize: n = 32,
+  maxLogos: i = 3
+}) => {
+  const a = (r) => r * (n / 2);
+  return /* @__PURE__ */ e(
+    O,
+    {
+      sx: {
+        position: "relative",
+        width: 64
+      },
+      children: t.map((r, l) => l < i ? /* @__PURE__ */ e(
+        O,
+        {
+          sx: {
+            borderRadius: "4px",
+            left: a(l),
+            outlineColor: "common.white",
+            outlineStyle: "solid",
+            outlineWidth: 2,
+            position: "absolute"
+          },
+          children: /* @__PURE__ */ e(
+            ue,
+            {
+              categoryGuid: r.categoryGuid || "",
+              merchantGuid: r.merchantGuid || "",
+              size: n
+            }
+          )
+        },
+        `${r.categoryGuid}-${r.merchantGuid}-${l}`
+      ) : null)
+    }
+  );
+}, St = ({
+  amount: t,
+  bgcolor: n,
+  isLargeScreen: i,
+  isSmallScreen: a,
+  label: r
+}) => /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+  /* @__PURE__ */ e(
+    O,
+    {
+      sx: {
+        borderRadius: "2px",
+        bgcolor: n,
+        height: 8,
+        width: 8
+      }
+    }
+  ),
+  /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
+    !a && /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children: L(t, t === 0 || !i ? "0,0" : "0,0.00") }),
+    /* @__PURE__ */ e(p, { variant: "caption", children: r })
+  ] })
+] }), It = T(() => {
+  const { recurring: t } = D();
+  return /* @__PURE__ */ o(c, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(Xe, { size: 32 }),
+    /* @__PURE__ */ o(c, { children: [
+      /* @__PURE__ */ e(ae, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(ae, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+    ] })
+  ] });
+}), vn = T(
+  ({ onCTAClick: t }) => {
+    const [n, i] = h.useState(!1), { onEvent: a } = X(), r = me(), { accounts: l } = pe(), [u, { width: g }] = gt(), { isCopyLoaded: s, isInitialized: m, selectedAccountGuids: f, setSelectedAccounts: x } = V(), {
+      loadRepeatingTransactions: b,
+      upcomingRecurrences: y,
+      expenseTotal: d,
+      missedExpenseTotal: S,
+      paidExpenseTotal: W,
+      repeatingTransactions: J,
+      setDateRange: B,
+      upcomingExpenseTotal: $,
+      isDataLoaded: Q
+    } = v(), { setFilter: ee } = ge(), { recurring: I, budgets: U } = D();
+    h.useEffect(() => {
+      x(l);
+    }, [l]), h.useEffect(() => {
+      m && (ee({
+        dateRange: { start: de(le(), 90), end: ce() },
+        accounts: f
+      }), B({ start: k(/* @__PURE__ */ new Date()), end: z(/* @__PURE__ */ new Date()) }), b().finally(), i(!0));
+    }, [m]), h.useEffect(() => {
+      n && a(_.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
+        state: y.length > 0 ? "default" : "zeroState"
+      });
+    }, [n]);
+    const w = g <= 288, te = g >= 450, ne = h.useMemo(() => {
+      const G = [
+        { color: r.palette.success.main, percentage: `${W / d}` }
+      ];
+      return S && G.push({
+        color: r.palette.error.main,
+        percentage: `${S / d}`
+      }), G;
+    }, [
+      W,
+      d,
+      S,
+      r.palette.success.main,
+      r.palette.error.main
+    ]), C = h.useMemo(() => L(d, d === 0 ? "0,0" : "0,0.00"), [d]), ie = () => {
+      a(
+        y.length > 0 ? _.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : _.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
+      ), t();
+    };
+    if (!s || !n || !Q) return /* @__PURE__ */ e(j, { height: 100 });
+    const Oe = 32, ke = y.length > 0, We = () => ke ? w ? /* @__PURE__ */ e(
+      Dt,
+      {
+        logoSize: Oe,
+        maxLogos: 3,
+        upcomingRecurrences: y.slice(0, 3)
+      }
+    ) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width: w ? 64 : 104 } }), $e = [
+      {
+        amount: W,
+        bgColor: "success.main",
+        label: I.paid
+      },
+      {
+        amount: S,
+        bgColor: "error.main",
+        label: I.missed
+      },
+      {
+        amount: $,
+        bgColor: "border.light",
+        label: I.upcoming
+      }
+    ], Ce = !J?.length;
+    return /* @__PURE__ */ e(
+      ht,
+      {
+        className: "mx-recurring-transaction-microwidget",
+        ctaLabel: Ce ? U.get_started_cta : I.primary_cta,
+        onCTAClick: ie,
+        title: I.recurring_expenses,
+        children: Ce ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ o(K, { children: [
+          /* @__PURE__ */ o(
+            c,
+            {
+              ref: u,
+              sx: {
+                flexDirection: "row",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ o(
+                  c,
+                  {
+                    sx: [
+                      C.length >= 10 && w ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
+                      {
+                        alignItems: "baseline",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      }
+                    ],
+                    children: [
+                      /* @__PURE__ */ e(
+                        p,
+                        {
+                          sx: { width: "100%" },
+                          variant: C.length >= 10 && w ? "H3" : "H2",
+                          children: C
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        ae,
+                        {
+                          sx: {
+                            pr: 12
+                          },
+                          variant: "XSmall",
+                          children: I.expected
+                        }
+                      )
+                    ]
+                  }
+                ),
+                We()
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(c, { sx: { pt: 12 }, children: [
+            /* @__PURE__ */ e(Ee, { data: ne }),
+            /* @__PURE__ */ e(
+              c,
+              {
+                sx: {
+                  alignItems: "center",
+                  flexDirection: "row",
+                  gap: 16,
+                  mt: 4
+                },
+                children: $e.map((G, Pe) => /* @__PURE__ */ e(
+                  St,
+                  {
+                    amount: G.amount,
+                    bgcolor: G.bgColor,
+                    isLargeScreen: te,
+                    isSmallScreen: w,
+                    label: G.label
+                  },
+                  `recurrence-legend-${Pe}`
+                ))
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+export {
+  On as AddRecurringTransactionDetails,
+  An as ManageExpenses,
+  kn as ManageIncome,
+  He as RecurringSettings,
+  vn as RecurringTransactionsMicroWidget,
+  _n as RecurringTransactionsMiniWidget,
+  Gn as RecurringTransactionsStore,
+  wn as RecurringTransactionsWidget,
+  Wn as SelectTransaction
+};