@mx-cartographer/experiences 7.0.16 → 7.0.17-alpha-debts-missing-sorting-option-ram

package/dist/budgets/index.es.js

@@ -4,9 +4,9 @@ import { observer as I } from "mobx-react-lite";
 import { endOfMonth as de } from "date-fns/endOfMonth";
 import { startOfMonth as J } from "date-fns/startOfMonth";
 import W from "@mui/material/Box";
-import b from "@mui/material/Stack";
+import _ from "@mui/material/Stack";
 import Q from "@mui/material/styles/useTheme";
-import { Icon as $, Text as p, CategoryIcon as H, H1 as Ge, H3 as Be } from "@mxenabled/mxui";
+import { Icon as $, Text as g, CategoryIcon as H, H1 as Ge, H3 as Be } from "@mxenabled/mxui";
 import { u as Pe } from "../BudgetUtil-CeSLAcsl.mjs";
 import { C as Ne } from "../ConnectionsDrawer-ihxkAi1P.mjs";
 import * as E from "d3";
@@ -115,15 +115,15 @@ function pt({ bubble: t, isDraggable: o, onClick: i = () => {
   const {
     budgetColors: { background: n, text: r },
     category: { icon: c, name: y },
-    guid: h,
-    description: m,
-    radius: g,
-    x: f,
-    y: _
+    guid: p,
+    description: h,
+    radius: m,
+    x: C,
+    y: b
   } = t;
-  let u = -12, C = -12;
-  g > G ? (u = -14, C = -45) : g > le && (C = -32);
-  const B = `${t.category.name}: ${m}`, A = {
+  let u = -12, B = -12;
+  m > G ? (u = -14, B = -45) : m > le && (B = -32);
+  const f = `${t.category.name}: ${h}`, A = {
     modifiers: [
       {
         name: "offset",
@@ -135,14 +135,14 @@ function pt({ bubble: t, isDraggable: o, onClick: i = () => {
     "g",
     {
       className: "bubble",
-      id: `bubble-${h}`,
+      id: `bubble-${p}`,
       onClick: () => i(t),
       onMouseEnter: () => a(!0),
       onMouseLeave: () => a(!1),
       style: { cursor: o ? "pointer" : "default" },
       textAnchor: "middle",
-      x: f,
-      y: _,
+      x: C,
+      y: b,
       children: [
         /* @__PURE__ */ e(
           je,
@@ -150,50 +150,50 @@ function pt({ bubble: t, isDraggable: o, onClick: i = () => {
             followCursor: !0,
             open: s,
             slotProps: { popper: A },
-            title: B,
-            children: /* @__PURE__ */ e("circle", { fill: n, id: `circle-${h}`, r: g })
+            title: f,
+            children: /* @__PURE__ */ e("circle", { fill: n, id: `circle-${p}`, r: m })
           }
         ),
-        /* @__PURE__ */ e("svg", { x: u, y: C, children: /* @__PURE__ */ e($, { name: c, size: g <= G ? 24 : 32, sx: { fill: r } }) }),
-        g > G && /* @__PURE__ */ e(
-          p,
+        /* @__PURE__ */ e("svg", { x: u, y: B, children: /* @__PURE__ */ e($, { name: c, size: m <= G ? 24 : 32, sx: { fill: r } }) }),
+        m > G && /* @__PURE__ */ e(
+          g,
           {
             bold: !0,
             component: "text",
-            id: `budget-category-${h}`,
+            id: `budget-category-${p}`,
             sx: { fill: r },
             variant: "Small",
             y: 4,
             children: y
           }
         ),
-        g > le && /* @__PURE__ */ e(
-          p,
+        m > le && /* @__PURE__ */ e(
+          g,
           {
             bold: !0,
             component: "text",
-            id: `budget-description-${h}-1`,
+            id: `budget-description-${p}-1`,
             sx: { fill: r },
             variant: "Body",
-            y: g <= G ? 12 : 24,
-            children: g <= G ? m.split(" ")[0] : m
+            y: m <= G ? 12 : 24,
+            children: m <= G ? h.split(" ")[0] : h
           }
         ),
-        g <= G && g > le && /* @__PURE__ */ e(
-          p,
+        m <= G && m > le && /* @__PURE__ */ e(
+          g,
           {
             component: "text",
-            id: `budget-description-${h}-2`,
+            id: `budget-description-${p}-2`,
             sx: { fill: r },
             variant: "XSmall",
             y: 28,
-            children: m.split(" ")[1]
+            children: h.split(" ")[1]
           }
         ),
         /* @__PURE__ */ e(gt, { bubble: t })
       ]
     },
-    h
+    p
   );
 }
 let F;
@@ -213,19 +213,19 @@ const ht = ({
   onConnectAccountsClick: o,
   createBudgetOnClick: i
 }) => {
-  const { recalculateBudgets: s } = w(), { spendCategories: a } = j(), { budgets: n } = D(), [r, c] = l.useState(!1), [y, h] = l.useState(!1), [m, g] = l.useState(!1), f = l.useMemo(() => [...a.filter((u) => u.totalAverageAmount > 0)], [a]), _ = async () => {
-    g(!0);
-    const { data: u, isSuccess: C } = await s(f);
-    g(!1), C ? (u.length === 0 && c(!0), h(!1)) : h(!0);
+  const { recalculateBudgets: s } = w(), { spendCategories: a } = j(), { budgets: n } = D(), [r, c] = l.useState(!1), [y, p] = l.useState(!1), [h, m] = l.useState(!1), C = l.useMemo(() => [...a.filter((u) => u.totalAverageAmount > 0)], [a]), b = async () => {
+    m(!0);
+    const { data: u, isSuccess: B } = await s(C);
+    m(!1), B ? (u.length === 0 && c(!0), p(!1)) : p(!0);
   };
-  return m ? /* @__PURE__ */ e(P, {}) : y ? /* @__PURE__ */ e(
+  return h ? /* @__PURE__ */ e(P, {}) : y ? /* @__PURE__ */ e(
     ce,
     {
       header: n.autogenerate_budgets_error_header,
       icon: "error",
       iconColor: "#4D4D4D",
       onClick: (u) => {
-        u === "primary" ? _() : i();
+        u === "primary" ? b() : i();
       },
       primaryButton: n.autogenerate_budgets_error_primary_button,
       secondaryButton: n.zero_state_generate_budgets_secondary_button,
@@ -267,7 +267,7 @@ const ht = ({
       icon: "bubble_chart",
       iconColor: "#1A1A1A",
       onClick: (u) => {
-        u === "primary" ? _() : i();
+        u === "primary" ? b() : i();
       },
       primaryButton: n.empty_state_primary_button,
       secondaryButton: t ? void 0 : n.empty_state_secondary_button,
@@ -294,7 +294,7 @@ const ht = ({
     shouldShowZeroState: a,
     unavailableWidth: n = 24
   }) => {
-    const { onEvent: r } = X(), { setSelectedBudget: c } = w(), { isLoadingCategoryTotals: y } = j(), { isInitialized: h } = ee(), { accounts: m } = D(), { availableWidth: g } = ze(), { isMobile: f } = me(), [_, u] = l.useState(!1), C = l.useMemo(() => g - n, [g]), B = (x) => {
+    const { onEvent: r } = X(), { setSelectedBudget: c } = w(), { isLoadingCategoryTotals: y } = j(), { isInitialized: p } = ee(), { accounts: h } = D(), { availableWidth: m } = ze(), { isMobile: C } = me(), [b, u] = l.useState(!1), B = l.useMemo(() => m - n, [m]), f = (x) => {
       c(x), r(k.BUDGETS_CLICK_BUDGET_CATEGORY, {
         budget_category: x.category.name,
         click_type: "bubble"
@@ -302,8 +302,8 @@ const ht = ({
     }, A = () => {
       u(!0), r(k.ACCOUNTS_CLICK_CONNECT);
     };
-    return y ? /* @__PURE__ */ e(b, { alignItems: "center", height: o, justifyContent: "center", width: Math.abs(C), children: /* @__PURE__ */ e(P, {}) }) : /* @__PURE__ */ d(W, { ml: a || f ? 0 : 24, sx: { alignSelf: "center" }, children: [
-      a || !h ? /* @__PURE__ */ e(
+    return y ? /* @__PURE__ */ e(_, { alignItems: "center", height: o, justifyContent: "center", width: Math.abs(B), children: /* @__PURE__ */ e(P, {}) }) : /* @__PURE__ */ d(W, { ml: a || C ? 0 : 24, sx: { alignSelf: "center" }, children: [
+      a || !p ? /* @__PURE__ */ e(
         bt,
         {
           createBudgetOnClick: t,
@@ -315,36 +315,36 @@ const ht = ({
         {
           height: o,
           isDraggable: i,
-          onClick: B,
-          width: C
+          onClick: f,
+          width: B
         }
       ),
       /* @__PURE__ */ e(
         Ne,
         {
           onClose: () => u(!1),
-          showConnectionsWidget: _,
-          title: m.manage_connections
+          showConnectionsWidget: b,
+          title: h.manage_connections
         }
       )
     ] });
   }
 ), yt = I(() => {
   const { budgets: t } = D(), { totalBudgeted: o } = w(), { incomeTotal: i } = te(), s = i - o;
-  return /* @__PURE__ */ d(b, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
-    /* @__PURE__ */ d(b, { alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(i, "0,0") }),
-      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.projected_income })
+  return /* @__PURE__ */ d(_, { direction: "row", justifyContent: "center", my: 16, spacing: 20, children: [
+    /* @__PURE__ */ d(_, { alignItems: "center", children: [
+      /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: T(i, "0,0") }),
+      /* @__PURE__ */ e(g, { color: "secondary", variant: "Small", children: t.projected_income })
     ] }),
-    /* @__PURE__ */ e(p, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
-    /* @__PURE__ */ d(b, { alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(o, "0,0") }),
-      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.budgeted })
+    /* @__PURE__ */ e(g, { bold: !0, justifyContent: "center", variant: "Body", children: "-" }),
+    /* @__PURE__ */ d(_, { alignItems: "center", children: [
+      /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: T(o, "0,0") }),
+      /* @__PURE__ */ e(g, { color: "secondary", variant: "Small", children: t.budgeted })
     ] }),
-    /* @__PURE__ */ e(p, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
-    /* @__PURE__ */ d(b, { alignItems: "center", children: [
-      /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: T(s, "0,0") }),
-      /* @__PURE__ */ e(p, { color: "secondary", variant: "Small", children: t.remaining })
+    /* @__PURE__ */ e(g, { bold: !0, justifyContent: "center", variant: "Body", children: "=" }),
+    /* @__PURE__ */ d(_, { alignItems: "center", children: [
+      /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: T(s, "0,0") }),
+      /* @__PURE__ */ e(g, { color: "secondary", variant: "Small", children: t.remaining })
     ] })
   ] });
 }), ft = I(
@@ -362,26 +362,26 @@ const ht = ({
     ] }, t.guid);
   }
 ), Ct = ({ onRecalculateBudgets: t }) => {
-  const { budgets: o, common: i } = D(), { spendCategories: s } = j(), { recalculateBudgets: a, setAlert: n } = w(), [r, c] = l.useState(!1), y = s.filter((m) => m.totalAverageAmount > 0), h = async () => {
+  const { budgets: o, common: i } = D(), { spendCategories: s } = j(), { recalculateBudgets: a, setAlert: n } = w(), [r, c] = l.useState(!1), y = s.filter((h) => h.totalAverageAmount > 0), p = async () => {
     await a(y), c(!1), n(o.alert_recalculated_budgets), t?.();
   };
   return /* @__PURE__ */ d(l.Fragment, { children: [
     /* @__PURE__ */ e(Ae, { onClick: () => c(!0), sx: { mt: 24, mx: 24 }, variant: "text", children: o.recalculate_button }),
-    /* @__PURE__ */ e(p, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
+    /* @__PURE__ */ e(g, { sx: { mx: 24, my: 16, textAlign: "center", whiteSpace: "wrap" }, variant: "Paragraph", children: o.recalculate_help }),
     /* @__PURE__ */ e(
       M,
       {
         ariaLabelClose: i.close_aria,
         isOpen: r,
         onClose: () => c(!1),
-        onPrimaryAction: h,
+        onPrimaryAction: p,
         title: o.recalculate_title,
-        children: /* @__PURE__ */ d(b, { children: [
-          /* @__PURE__ */ d(b, { mx: 24, my: 16, children: [
-            /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
-            /* @__PURE__ */ e(p, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
+        children: /* @__PURE__ */ d(_, { children: [
+          /* @__PURE__ */ d(_, { mx: 24, my: 16, children: [
+            /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: o.recalculate_description_top }),
+            /* @__PURE__ */ e(g, { variant: "ParagraphSmall", children: o.recalculate_description_bottom })
           ] }),
-          /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: y.map((m) => /* @__PURE__ */ e(ft, { category: m }, m.guid)) }) })
+          /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: y.map((h) => /* @__PURE__ */ e(ft, { category: h }, h.guid)) }) })
         ] })
       }
     )
@@ -392,13 +392,13 @@ const ht = ({
   onAmountChanged: i
 }) => {
   const { budgets: s } = D(), { totalBudgeted: a } = w(), { incomeTotal: n } = te(), r = n - a;
-  return /* @__PURE__ */ d(b, { gap: 16, children: [
-    /* @__PURE__ */ d(b, { children: [
-      /* @__PURE__ */ e(p, { children: L(
+  return /* @__PURE__ */ d(_, { gap: 16, children: [
+    /* @__PURE__ */ d(_, { children: [
+      /* @__PURE__ */ e(g, { children: L(
         s.add_description_top,
         T(r, "0,0")
       ) }),
-      /* @__PURE__ */ e(p, { children: L(s.add_description_bottom, o) })
+      /* @__PURE__ */ e(g, { children: L(s.add_description_bottom, o) })
     ] }),
     /* @__PURE__ */ e(
       He,
@@ -445,7 +445,7 @@ const ht = ({
   const { budgets: o } = D(), { addBudget: i, setAlert: s, unbudgetedCategories: a } = w(), n = async (r, c) => {
     await i(r, c), s(L(o.alert_budget_created, r.name));
   };
-  return /* @__PURE__ */ d(b, { children: [
+  return /* @__PURE__ */ d(_, { children: [
     /* @__PURE__ */ e(yt, {}),
     /* @__PURE__ */ e(W, { bgcolor: "background.paper", children: /* @__PURE__ */ e(K, { children: a.map((r) => /* @__PURE__ */ e(
       Bt,
@@ -458,27 +458,27 @@ const ht = ({
     /* @__PURE__ */ e(Ct, { onRecalculateBudgets: t })
   ] });
 }), St = (t) => {
-  const o = Q(), { onEvent: i } = X(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: n, setTheme: r } = w(), { budgets: c, common: y } = D(), { isCopyLoaded: h, isInitialized: m, selectedAccounts: g } = ee(), { reloadCategoryTotals: f } = j(), _ = Pe(), u = s.length === 0, [C, B] = l.useState(!1), A = () => {
-    B(!0), i(k.BUDGETS_CLICK_ADD);
+  const o = Q(), { onEvent: i } = X(), { detailedBudgets: s, isDataLoaded: a, loadBudgetData: n, setTheme: r } = w(), { budgets: c, common: y } = D(), { isCopyLoaded: p, isInitialized: h, selectedAccounts: m } = ee(), { reloadCategoryTotals: C } = j(), b = Pe(), u = s.length === 0, [B, f] = l.useState(!1), A = () => {
+    f(!0), i(k.BUDGETS_CLICK_ADD);
   }, x = () => {
-    B(!1);
+    f(!1);
   };
   return l.useEffect(() => {
     r(o);
   }, [o]), l.useEffect(() => {
-    m && !a && f(g, J(/* @__PURE__ */ new Date()), de(/* @__PURE__ */ new Date())).then(
+    h && !a && C(m, J(/* @__PURE__ */ new Date()), de(/* @__PURE__ */ new Date())).then(
       () => {
         n().finally();
       }
     );
-  }, [m, g]), h ? /* @__PURE__ */ d(
+  }, [h, m]), p ? /* @__PURE__ */ d(
     Xe,
     {
       primaryCtaLabel: u ? c.get_started_cta : c.details_cta,
       title: c.budgets_title,
       ...t,
       children: [
-        a ? /* @__PURE__ */ d(b, { height: 450, mt: 32, children: [
+        a ? /* @__PURE__ */ d(_, { height: 450, mt: 32, children: [
           /* @__PURE__ */ e(
             we,
             {
@@ -489,16 +489,16 @@ const ht = ({
             }
           ),
           !u && /* @__PURE__ */ d(W, { ml: 16, children: [
-            /* @__PURE__ */ e(p, { bold: !0, color: _ < 0 ? "error.main" : "success.main", children: T(Math.abs(_), "0,0") }),
-            /* @__PURE__ */ e(p, { children: _ < 0 ? c.overspent_in_budgets : c.left_in_budgets })
+            /* @__PURE__ */ e(g, { bold: !0, color: b < 0 ? "error.main" : "success.main", children: T(Math.abs(b), "0,0") }),
+            /* @__PURE__ */ e(g, { children: b < 0 ? c.overspent_in_budgets : c.left_in_budgets })
           ] })
         ] }) : /* @__PURE__ */ e(P, {}),
         /* @__PURE__ */ e(
           M,
           {
             ariaLabelClose: y.close_aria,
-            isOpen: C,
-            onClose: () => B(!1),
+            isOpen: B,
+            onClose: () => f(!1),
             title: c.add_new_title,
             children: /* @__PURE__ */ e(De, { onRecalculateBudgets: x })
           }
@@ -520,18 +520,18 @@ const ht = ({
       percentage: `${n}%`
     }
   ];
-  return /* @__PURE__ */ e(ge, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ d(b, { alignItems: "center", gap: 16, children: [
+  return /* @__PURE__ */ e(ge, { sx: { mt: 24, mx: 24 }, children: /* @__PURE__ */ e(pe, { children: /* @__PURE__ */ d(_, { alignItems: "center", gap: 16, children: [
     /* @__PURE__ */ e(H, { categoryGuid: a, size: 56 }),
     /* @__PURE__ */ e(Ge, { children: `${T(r, "0,0")} / ${T(o, "0,0")}` }),
-    /* @__PURE__ */ e(p, { bold: !0, variant: "XSmall", children: s }),
+    /* @__PURE__ */ e(g, { bold: !0, variant: "XSmall", children: s }),
     /* @__PURE__ */ e(ue, { data: c, height: 10 })
   ] }) }) });
 }, At = I(() => {
   const { budgets: t } = D();
-  return /* @__PURE__ */ d(b, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+  return /* @__PURE__ */ d(_, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
     /* @__PURE__ */ e($, { color: "secondary", name: "bubble_chart", sx: { fontSize: 32 } }),
-    /* @__PURE__ */ e(p, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
-    /* @__PURE__ */ e(p, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
+    /* @__PURE__ */ e(g, { bold: !0, color: "secondary", variant: "Small", children: t.zero_state_no_sub_budgets }),
+    /* @__PURE__ */ e(g, { color: "text.secondary", variant: "XSmall", children: t.zero_state_no_sub_budgets_description })
   ] });
 }), xt = I(({ budget: t }) => {
   const {
@@ -546,8 +546,8 @@ const ht = ({
     /* @__PURE__ */ e(
       Z,
       {
-        primary: /* @__PURE__ */ e(b, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: t.category.name }) }),
-        secondary: /* @__PURE__ */ e(b, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(p, { fontWeight: 400, variant: "Body", children: `
+        primary: /* @__PURE__ */ e(_, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: t.category.name }) }),
+        secondary: /* @__PURE__ */ e(_, { component: "span", direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ e(g, { fontWeight: 400, variant: "Body", children: `
                   ${T(n, "0,0")} / 
                   ${T(o, "0,0")}
                 ` }) })
@@ -555,23 +555,23 @@ const ht = ({
     )
   ] }) });
 }), vt = I(({ category: t, parentBudget: o }) => {
-  const { budgets: i, common: s } = D(), { setExpandedGuid: a, setOnSelect: n } = Qe(), { addBudget: r } = w(), [c, y] = l.useState(!1), [h, m] = l.useState(!1), [g, f] = l.useState(""), [_, u] = l.useState(void 0);
+  const { budgets: i, common: s } = D(), { setExpandedGuid: a, setOnSelect: n } = Qe(), { addBudget: r } = w(), [c, y] = l.useState(!1), [p, h] = l.useState(!1), [m, C] = l.useState(""), [b, u] = l.useState(void 0);
   l.useEffect(() => {
     n((A) => {
       const x = t.subCategories.find((v) => v.guid === A);
-      x && (u(x), f(`${x.currentAmount === 0 ? "" : x.currentAmount}`), m(!0));
+      x && (u(x), C(`${x.currentAmount === 0 ? "" : x.currentAmount}`), h(!0));
     });
   }, []);
-  const C = () => {
+  const B = () => {
     a(t.guid), y(!0);
-  }, B = async () => {
-    _ && Number(g) > 0 && (await r(_, Number(g), o.guid), m(!1), y(!1), u(void 0));
+  }, f = async () => {
+    b && Number(m) > 0 && (await r(b, Number(m), o.guid), h(!1), y(!1), u(void 0));
   };
   return /* @__PURE__ */ d(W, { children: [
-    /* @__PURE__ */ e(V, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Y, { onClick: C, children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ d(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-      /* @__PURE__ */ d(b, { alignItems: "center", direction: "row", gap: 8, children: [
+    /* @__PURE__ */ e(V, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Y, { onClick: B, children: /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ d(_, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ d(_, { alignItems: "center", direction: "row", gap: 8, children: [
         /* @__PURE__ */ e($, { fill: !0, name: "add_box", size: 24, sx: { color: "primary.light" } }),
-        /* @__PURE__ */ e(p, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
+        /* @__PURE__ */ e(g, { bold: !0, sx: { color: "primary.light" }, variant: "Body", children: i.add_sub_budget_button })
       ] }),
       /* @__PURE__ */ e($, { name: "chevron_right", size: 24, sx: { color: "primary.light" } })
     ] }) }) }) }),
@@ -590,40 +590,40 @@ const ht = ({
       N,
       {
         copy: { close_aria: s.close_aria, title: i.add_title },
-        disablePrimaryButton: Number(g) <= 0,
-        isOpen: h,
-        onClose: () => m(!1),
-        onPrimaryAction: B,
+        disablePrimaryButton: Number(m) <= 0,
+        isOpen: p,
+        onClose: () => h(!1),
+        onPrimaryAction: f,
         primaryText: i.add_save_button,
         children: /* @__PURE__ */ e(
           re,
           {
-            amount: g,
-            categoryName: _?.name || "",
-            onAmountChanged: f
+            amount: m,
+            categoryName: b?.name || "",
+            onAmountChanged: C
           }
         )
       }
     )
   ] });
 }), Tt = I(({ budget: t }) => {
-  const { category: o, subBudgets: i } = t, { budgets: s, common: a } = D(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: c, updateBudget: y } = w(), { filter: h, setFilter: m } = ne(), [g, f] = l.useState(!1), [_, u] = l.useState(!1), [C, B] = l.useState("");
+  const { category: o, subBudgets: i } = t, { budgets: s, common: a } = D(), { deleteBudget: n, selectedSubBudget: r, setSelectedSubBudget: c, updateBudget: y } = w(), { filter: p, setFilter: h } = ne(), [m, C] = l.useState(!1), [b, u] = l.useState(!1), [B, f] = l.useState("");
   l.useEffect(() => {
-    r && (B(`${r.amount}`), m({
-      ...h,
+    r && (f(`${r.amount}`), h({
+      ...p,
       custom: (S) => S.category_guid === r.category_guid
     }));
   }, [r]);
   const A = async () => {
     r && await y({
       ...r,
-      amount: Number(C)
+      amount: Number(B)
     });
   }, x = async () => {
     r && await n(r.guid), u(!1), v();
   }, v = () => {
-    m({
-      ...h,
+    h({
+      ...p,
       custom: (S) => S.category_guid === t.category_guid || S.top_level_category_guid === t.category_guid
     }), c(void 0);
   };
@@ -641,12 +641,12 @@ const ht = ({
         ariaLabelClose: a.close_aria,
         isOpen: !!r,
         onClose: v,
-        onPrimaryAction: () => f(!0),
+        onPrimaryAction: () => C(!0),
         onSecondaryAction: () => u(!0),
         primaryText: s.details_edit_button,
         secondaryText: s.details_delete_button,
         title: s.details_title,
-        children: r && /* @__PURE__ */ d(b, { gap: 24, children: [
+        children: r && /* @__PURE__ */ d(_, { gap: 24, children: [
           /* @__PURE__ */ e(Ie, { budget: r }),
           /* @__PURE__ */ e(xe, { height: "100%" })
         ] })
@@ -657,17 +657,17 @@ const ht = ({
         N,
         {
           copy: { close_aria: a.close_aria, title: s.details_edit_title },
-          disablePrimaryButton: Number(C) <= 0,
-          isOpen: g,
-          onClose: () => f(!1),
+          disablePrimaryButton: Number(B) <= 0,
+          isOpen: m,
+          onClose: () => C(!1),
           onPrimaryAction: A,
           primaryText: s.edit_save_button,
           children: /* @__PURE__ */ e(
             re,
             {
-              amount: C,
+              amount: B,
               categoryName: r.category.name,
-              onAmountChanged: B
+              onAmountChanged: f
             }
           )
         }
@@ -676,40 +676,40 @@ const ht = ({
         N,
         {
           copy: { close_aria: a.close_aria, title: s.delete_title },
-          isOpen: _,
+          isOpen: b,
           onClose: () => u(!1),
           onPrimaryAction: x,
           primaryColor: "error",
           primaryText: "Delete",
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(p, { variant: "Paragraph", children: L(s.delete_description, r.category.name) })
+          children: /* @__PURE__ */ e(g, { variant: "Paragraph", children: L(s.delete_description, r.category.name) })
         }
       )
     ] })
   ] });
 }), wt = I(({ budget: t }) => {
-  const { is_mobile_webview: o } = Ue(), { setAlert: i } = w(), { budgets: s, common: a, transactions: n } = D(), { isDesktop: r } = me(), {
-    sortedTransactions: c,
-    sortedTransactionsWithSplits: y,
-    tags: h
-  } = ne(), [m, g] = l.useState(0), [f, _] = l.useState(""), u = l.useMemo(
-    () => c.find((x) => x.guid === f),
-    [f, c]
-  ), C = (x, v) => {
-    g(v);
-  }, B = () => {
-    qe(y, h), i(s.alert_csv_downloaded);
-  }, A = c.length > 0 && !o && r;
-  return /* @__PURE__ */ d(b, { gap: 24, children: [
+  const { is_mobile_webview: o } = Ue(), { setAlert: i } = w(), { budgets: s, common: a, transactions: n } = D(), { isDesktop: r, isSmallTablet: c, isTablet: y } = me(), {
+    sortedTransactions: p,
+    sortedTransactionsWithSplits: h,
+    tags: m
+  } = ne(), [C, b] = l.useState(0), [u, B] = l.useState(""), f = l.useMemo(
+    () => p.find((S) => S.guid === u),
+    [u, p]
+  ), A = (S, O) => {
+    b(O);
+  }, x = () => {
+    qe(h, m), i(s.alert_csv_downloaded);
+  }, v = p.length > 0 && !o && (r || y && !c);
+  return /* @__PURE__ */ d(_, { gap: 24, children: [
     /* @__PURE__ */ e(Ie, { budget: t }),
-    /* @__PURE__ */ d(b, { children: [
+    /* @__PURE__ */ d(_, { children: [
       /* @__PURE__ */ d(
         Ze,
         {
-          onChange: C,
+          onChange: A,
           sx: { width: "100%" },
           textColor: "primary",
-          value: m,
+          value: C,
           variant: "fullWidth",
           children: [
             /* @__PURE__ */ e(be, { label: s.details_transactions_tab }),
@@ -717,27 +717,27 @@ const ht = ({
           ]
         }
       ),
-      m === 0 && /* @__PURE__ */ d(b, { children: [
-        A && /* @__PURE__ */ e(b, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
+      C === 0 && /* @__PURE__ */ d(_, { children: [
+        v && /* @__PURE__ */ e(_, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ e(
           Ae,
           {
-            onClick: B,
+            onClick: x,
             startIcon: /* @__PURE__ */ e($, { name: "ios_share" }),
             variant: "text",
             children: n.export_csv_btn
           }
         ) }),
-        /* @__PURE__ */ e(xe, { height: "100%", onClick: _ })
+        /* @__PURE__ */ e(xe, { height: "100%", onClick: B })
       ] }),
-      m === 1 && /* @__PURE__ */ e(Tt, { budget: t }),
+      C === 1 && /* @__PURE__ */ e(Tt, { budget: t }),
       /* @__PURE__ */ e(
         M,
         {
           ariaLabelClose: a.close_aria,
-          isOpen: !!u,
-          onClose: () => _(""),
+          isOpen: !!f,
+          onClose: () => B(""),
           title: s.details_transaction_drawer,
-          children: u && /* @__PURE__ */ e(Je, { transaction: u })
+          children: f && /* @__PURE__ */ e(Je, { transaction: f })
         }
       )
     ] })
@@ -750,10 +750,10 @@ const ht = ({
     selectedSubBudget: r,
     setAlert: c,
     setSelectedBudget: y,
-    updateBudget: h
-  } = w(), { setFilter: m } = ne(), [g, f] = l.useState(!1), [_, u] = l.useState(!1), [C, B] = l.useState(!1), [A, x] = l.useState("");
+    updateBudget: p
+  } = w(), { setFilter: h } = ne(), [m, C] = l.useState(!1), [b, u] = l.useState(!1), [B, f] = l.useState(!1), [A, x] = l.useState("");
   l.useEffect(() => {
-    n && !r && (x(`${n.amount}`), f(!0), m({
+    n && !r && (x(`${n.amount}`), C(!0), h({
       accounts: t,
       dateRange: s,
       custom: (R) => R.category_guid === n.category_guid || R.top_level_category_guid === n.category_guid,
@@ -761,15 +761,15 @@ const ht = ({
     }));
   }, [n]);
   const v = async () => {
-    n && (await h({
+    n && (await p({
       ...n,
       amount: Number(A),
       percentage: n.category.totalAmount / Number(A) * 100
     }), c(L(o.alert_budget_updated, n.category.name)));
   }, S = async () => {
-    n && (await a(n.guid), c(L(o.alert_budget_deleted, n.category.name))), B(!1), O();
+    n && (await a(n.guid), c(L(o.alert_budget_deleted, n.category.name))), f(!1), O();
   }, O = () => {
-    f(!1), setTimeout(() => {
+    C(!1), setTimeout(() => {
       y(void 0);
     }, 250);
   };
@@ -779,10 +779,10 @@ const ht = ({
         M,
         {
           ariaLabelClose: i.close_aria,
-          isOpen: g,
+          isOpen: m,
           onClose: O,
           onPrimaryAction: () => u(!0),
-          onSecondaryAction: () => B(!0),
+          onSecondaryAction: () => f(!0),
           primaryText: o.details_edit_button,
           secondaryColor: "error",
           secondaryText: o.details_delete_button,
@@ -795,7 +795,7 @@ const ht = ({
         {
           copy: { close_aria: i.close_aria, title: o.details_edit_title },
           disablePrimaryButton: Number(A) <= 0,
-          isOpen: _,
+          isOpen: b,
           onClose: () => u(!1),
           onPrimaryAction: v,
           primaryText: o.edit_save_button,
@@ -813,13 +813,13 @@ const ht = ({
         N,
         {
           copy: { close_aria: i.close_aria, title: o.delete_title },
-          isOpen: C,
-          onClose: () => B(!1),
+          isOpen: B,
+          onClose: () => f(!1),
           onPrimaryAction: S,
           primaryColor: "error",
           primaryText: o.details_delete_button,
           secondaryColor: "secondary",
-          children: /* @__PURE__ */ e(p, { variant: "Paragraph", children: L(o.delete_description, n.category.name) })
+          children: /* @__PURE__ */ e(g, { variant: "Paragraph", children: L(o.delete_description, n.category.name) })
         }
       )
     ] });
@@ -831,23 +831,23 @@ const ht = ({
     description: r,
     percentage: c,
     subBudgets: y,
-    transaction_total: h
+    transaction_total: p
   } = t;
   return /* @__PURE__ */ e(V, { children: /* @__PURE__ */ d(Y, { onClick: () => o?.(t), children: [
     /* @__PURE__ */ e(ae, { sx: { mb: -8, mr: 16 }, children: /* @__PURE__ */ e(ve, { color: s, percent: c, size: 40, children: /* @__PURE__ */ e(H, { categoryGuid: n, variant: "basic" }) }) }),
     /* @__PURE__ */ e(
       Z,
       {
-        primary: /* @__PURE__ */ d(b, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: t.category.name }),
-          /* @__PURE__ */ e(p, { fontWeight: 400, variant: "Body", children: `
-                  ${T(h, "0,0")} / 
+        primary: /* @__PURE__ */ d(_, { component: "span", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: t.category.name }),
+          /* @__PURE__ */ e(g, { fontWeight: 400, variant: "Body", children: `
+                  ${T(p, "0,0")} / 
                   ${T(i, "0,0")}
                 ` })
         ] }),
-        secondary: /* @__PURE__ */ d(b, { component: "span", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(p, { variant: "XSmall", children: `${y.length} Sub-budgets` }),
-          /* @__PURE__ */ e(p, { bold: c > 100, color: a, variant: "XSmall", children: r })
+        secondary: /* @__PURE__ */ d(_, { component: "span", direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ e(g, { variant: "XSmall", children: `${y.length} Sub-budgets` }),
+          /* @__PURE__ */ e(g, { bold: c > 100, color: a, variant: "XSmall", children: r })
         ] })
       }
     )
@@ -867,9 +867,9 @@ const ht = ({
     ] }, n.guid)) }) })
   ] });
 }), Ot = I(() => {
-  const t = Q(), { onEvent: o } = X(), { visibleAccounts: i } = Se(), { budgets: s, common: a, recurring: n } = D(), { incomeCategories: r, spendCategories: c } = j(), { detailedBudgets: y, totalBudgeted: h } = w(), { incomeTotal: m } = te(), { setFilter: g } = ne(), [f, _] = l.useState(!1), [u, C] = l.useMemo(() => {
+  const t = Q(), { onEvent: o } = X(), { visibleAccounts: i } = Se(), { budgets: s, common: a, recurring: n } = D(), { incomeCategories: r, spendCategories: c } = j(), { detailedBudgets: y, totalBudgeted: p } = w(), { incomeTotal: h } = te(), { setFilter: m } = ne(), [C, b] = l.useState(!1), [u, B] = l.useMemo(() => {
     const v = c.reduce((z, se) => z + se.totalAmount, 0);
-    let S = v / h;
+    let S = v / p;
     S > 1 && (S = 1);
     let O = t.palette.success.main;
     S > 0.8 && S < 1 ? O = t.palette.warning.main : S >= 1 && (O = t.palette.error.main);
@@ -880,11 +880,11 @@ const ht = ({
       }
     ];
     return [v, R];
-  }, [y, c]), [B, A] = l.useMemo(() => {
+  }, [y, c]), [f, A] = l.useMemo(() => {
     const v = Math.abs(
       r.reduce((R, z) => R + z.totalAmount, 0)
     );
-    let S = v / m;
+    let S = v / h;
     S > 1 && (S = 1);
     const O = [
       {
@@ -893,30 +893,30 @@ const ht = ({
       }
     ];
     return [v, O];
-  }, [r, m]), x = () => {
-    g({
+  }, [r, h]), x = () => {
+    m({
       accounts: i.map((v) => v.guid),
       dateRange: {
         start: tt(/* @__PURE__ */ new Date(), 90),
         end: /* @__PURE__ */ new Date()
       }
-    }), _(!0), o(k.BUDGETS_CLICK_EDIT_INCOME);
+    }), b(!0), o(k.BUDGETS_CLICK_EDIT_INCOME);
   };
   return /* @__PURE__ */ d(ge, { elevation: 2, sx: { overflow: "visible" }, children: [
     /* @__PURE__ */ e(Te, { sx: { pb: 8, pl: 24 }, title: /* @__PURE__ */ e(Be, { children: s.overview_title }) }),
-    /* @__PURE__ */ e(pe, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ d(b, { gap: 24, children: [
-      /* @__PURE__ */ d(b, { gap: 8, children: [
-        /* @__PURE__ */ e(p, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
-        /* @__PURE__ */ e(ue, { data: C, height: 16 }),
-        /* @__PURE__ */ e(p, { variant: "Small", children: L(
+    /* @__PURE__ */ e(pe, { sx: { pt: 12, px: 24 }, children: /* @__PURE__ */ d(_, { gap: 24, children: [
+      /* @__PURE__ */ d(_, { gap: 8, children: [
+        /* @__PURE__ */ e(g, { bold: !0, sx: { mb: 8 }, variant: "Body", children: s.spending_title }),
+        /* @__PURE__ */ e(ue, { data: B, height: 16 }),
+        /* @__PURE__ */ e(g, { variant: "Small", children: L(
           s.spending_description,
           T(u, "0,0"),
-          T(h, "0,0")
+          T(p, "0,0")
         ) })
       ] }),
-      /* @__PURE__ */ d(b, { gap: 8, children: [
-        /* @__PURE__ */ d(b, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
-          /* @__PURE__ */ e(p, { bold: !0, variant: "Body", children: s.income_title }),
+      /* @__PURE__ */ d(_, { gap: 8, children: [
+        /* @__PURE__ */ d(_, { alignItems: "center", direction: "row", gap: 4, mb: -4, children: [
+          /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: s.income_title }),
           /* @__PURE__ */ e(
             nt,
             {
@@ -928,10 +928,10 @@ const ht = ({
           )
         ] }),
         /* @__PURE__ */ e(ue, { data: A, height: 16 }),
-        /* @__PURE__ */ e(p, { variant: "Small", children: L(
+        /* @__PURE__ */ e(g, { variant: "Small", children: L(
           s.income_description,
-          T(B, "0,0"),
-          T(m, "0,0")
+          T(f, "0,0"),
+          T(h, "0,0")
         ) })
       ] })
     ] }) }),
@@ -939,43 +939,43 @@ const ht = ({
       M,
       {
         ariaLabelClose: a.close_aria,
-        isOpen: f,
-        onClose: () => _(!1),
+        isOpen: C,
+        onClose: () => b(!1),
         title: n.manage_income,
-        children: /* @__PURE__ */ d(b, { sx: { height: "100%" }, children: [
-          /* @__PURE__ */ e(p, { bold: !0, sx: { mb: 4, mt: 12, mx: 24 }, variant: "Small", children: s.income_title }),
+        children: /* @__PURE__ */ d(_, { sx: { height: "100%" }, children: [
+          /* @__PURE__ */ e(g, { bold: !0, sx: { mb: 4, mt: 12, mx: 24 }, variant: "Small", children: s.income_title }),
           /* @__PURE__ */ e(ot, { forOverview: !0 })
         ] })
       }
     )
   ] });
 }), Ce = 480, Dn = I(({ onBackClick: t, sx: o }) => {
-  const i = Q(), { onEvent: s } = X(), { visibleAccounts: a } = Se(), { budgets: n, common: r } = D(), { isCopyLoaded: c, isInitialized: y, selectedAccounts: h, setDisplayedDate: m, setSelectedAccounts: g } = ee(), {
-    alert: f,
-    dateRange: _,
+  const i = Q(), { onEvent: s } = X(), { visibleAccounts: a } = Se(), { budgets: n, common: r } = D(), { isCopyLoaded: c, isInitialized: y, selectedAccounts: p, setDisplayedDate: h, setSelectedAccounts: m } = ee(), {
+    alert: C,
+    dateRange: b,
     isDataLoaded: u,
-    loadBudgetData: C,
-    setDateRange: B,
+    loadBudgetData: B,
+    setDateRange: f,
     setAlert: A,
     setTheme: x,
     detailedBudgets: v
   } = w(), { loadRepeatingTransactions: S, setDateRange: O } = te(), { reloadCategoryTotals: R } = j(), { isSmallTablet: z, isMobile: se, isSmallMobile: Ee } = me(), U = z || se || Ee, [Oe, ie] = l.useState(!1);
-  l.useEffect(() => (x(i), g(a), B({ start: J(q()), end: de(q()) }), s(k.BUDGETS_VIEW), () => {
-    B({ start: J(q()), end: de(q()) });
+  l.useEffect(() => (x(i), m(a), f({ start: J(q()), end: de(q()) }), s(k.BUDGETS_VIEW), () => {
+    f({ start: J(q()), end: de(q()) });
   }), []), l.useEffect(() => {
-    g(a);
+    m(a);
   }, [a]), l.useEffect(() => {
-    y && (m(_.start, _.end), R(h, _.start, _.end).finally(), O(_), u || (S().finally(), C().finally()));
-  }, [y, h, _]);
+    y && (h(b.start, b.end), R(p, b.start, b.end).finally(), O(b), u || (S().finally(), B().finally()));
+  }, [y, p, b]);
   const Le = (_e) => {
-    B({ start: _e[0] || /* @__PURE__ */ new Date(), end: _e[1] || /* @__PURE__ */ new Date() });
+    f({ start: _e[0] || /* @__PURE__ */ new Date(), end: _e[1] || /* @__PURE__ */ new Date() });
   }, Re = () => {
     s(k.BUDGETS_CLICK_FILTER);
   }, he = () => {
     ie(!0), s(k.BUDGETS_CLICK_ADD);
   }, ke = () => {
     ie(!1);
-  }, Me = Ke(_.end, J(/* @__PURE__ */ new Date()));
+  }, Me = Ke(b.end, J(/* @__PURE__ */ new Date()));
   return !c || !y || !u ? /* @__PURE__ */ e(P, {}) : /* @__PURE__ */ d(
     Fe,
     {
@@ -999,14 +999,14 @@ const ht = ({
       children: [
         (!y || !u) && /* @__PURE__ */ e(P, {}),
         y && u && /* @__PURE__ */ d(
-          b,
+          _,
           {
             direction: U ? "column" : "row",
             height: "100%",
             sx: { justifyContent: "center" },
             width: "100%",
             children: [
-              /* @__PURE__ */ e(b, { height: U ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e(_, { height: U ? 450 : "calc(100dvh - 150px)", children: /* @__PURE__ */ e(
                 we,
                 {
                   createBudgetOnClick: he,
@@ -1017,7 +1017,7 @@ const ht = ({
                 }
               ) }),
               v.length !== 0 && /* @__PURE__ */ d(
-                b,
+                _,
                 {
                   gap: 24,
                   height: "100%",
@@ -1051,7 +1051,7 @@ const ht = ({
             onClose: () => {
               A("");
             },
-            open: !!f,
+            open: !!C,
             children: /* @__PURE__ */ e(
               Ve,
               {
@@ -1060,7 +1060,7 @@ const ht = ({
                 },
                 severity: "success",
                 variant: "filled",
-                children: f
+                children: C
               }
             )
           }