@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

package/dist/spending/SpendingMiniWidget/index.es.js

@@ -0,0 +1,41 @@
+import { useAccountStore as c, useCategoryStore as g, useGlobalCopyStore as u, useGlobalUiStore as y } from "../../common/context/hooks/index.es.js";
+import { useWidgetLoadTimer as C } from "../../common/hooks/useWidgetLoadTimer/index.es.js";
+import L from "../../common/components/MiniWidgetContainer/index.es.js";
+import S from "../../common/components/Loader/index.es.js";
+import M from "../components/MiniSpendingChart/index.es.js";
+import n from "react";
+import { observer as h } from "mobx-react-lite";
+import { endOfMonth as _ } from "date-fns/endOfMonth";
+import { startOfMonth as b } from "date-fns/startOfMonth";
+import { jsx as a } from "react/jsx-runtime";
+var x = ({ onPrimaryCtaClick: d, sx: m = {} }) => {
+  const { isAccountDataLoaded: e, loadAccountData: s } = c(), { dateRangeTotalsLoaded: o, categoriesLoaded: f, loadCategories: l, loadDateRangeCategoryTotals: p } = g(), { spending: t } = u(), { isInitialized: i, selectedAccounts: r } = y();
+  return C({
+    widgetName: "SpendingMiniWidget",
+    isLoaded: o
+  }), n.useEffect(() => {
+    e || s().finally(), f || l().finally();
+  }, []), n.useEffect(() => {
+    !i || !e || p(r, b(/* @__PURE__ */ new Date()), _(/* @__PURE__ */ new Date())).finally();
+  }, [
+    i,
+    e,
+    r
+  ]), !i || !e || !o ? /* @__PURE__ */ a(S, {}) : /* @__PURE__ */ a(L, {
+    className: "mx-exp-spending-miniwidget",
+    onPrimaryCtaClick: d,
+    primaryCtaLabel: t.primary_cta,
+    primaryCtaLabelAria: t.primary_cta_aria,
+    sx: {
+      height: "100%",
+      ...m
+    },
+    title: t.mini_title,
+    children: /* @__PURE__ */ a(M, {})
+  });
+}, O = h(x);
+export {
+  O as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/SpendingMiniWidget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/spending/SpendingMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { endOfMonth } from 'date-fns/endOfMonth'\n\nimport {\n  Loader,\n  MiniWidgetContainer,\n  useAccountStore,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { MiniWidgetProps } from '../core'\n\nimport MiniSpendingChart from './components/MiniSpendingChart'\n\nconst SpendingMiniWidget: React.FC<MiniWidgetProps> = ({ onPrimaryCtaClick, sx = {} }) => {\n  const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n  const { dateRangeTotalsLoaded, categoriesLoaded, loadCategories, loadDateRangeCategoryTotals } =\n    useCategoryStore()\n  const { spending: spendingCopy } = useGlobalCopyStore()\n  const { isInitialized, selectedAccounts } = useGlobalUiStore()\n\n  useWidgetLoadTimer({\n    widgetName: 'SpendingMiniWidget',\n    isLoaded: dateRangeTotalsLoaded,\n  })\n\n  React.useEffect(() => {\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    if (!isInitialized || !isAccountDataLoaded) return\n\n    loadDateRangeCategoryTotals(\n      selectedAccounts,\n      startOfMonth(new Date()),\n      endOfMonth(new Date()),\n    ).finally()\n  }, [isInitialized, isAccountDataLoaded, selectedAccounts])\n\n  // Keep spinning until account data and the date-range totals have loaded.\n  // Rendering before then would show a misleading $0 while accounts/totals are\n  // still in flight. (MEW-3538)\n  if (!isInitialized || !isAccountDataLoaded || !dateRangeTotalsLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <MiniWidgetContainer\n      className=\"mx-exp-spending-miniwidget\"\n      onPrimaryCtaClick={onPrimaryCtaClick}\n      primaryCtaLabel={spendingCopy.primary_cta}\n      primaryCtaLabelAria={spendingCopy.primary_cta_aria}\n      sx={{ height: '100%', ...sx }}\n      title={spendingCopy.mini_title}\n    >\n      <MiniSpendingChart />\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(SpendingMiniWidget)\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAA,CAAiD,EAAE,mBAAA,GAAmB,IAAA,IAAK,CAAC,EAAA,MAAQ;AACxF,QAAM,EAAE,qBAAA,GAAqB,iBAAA,EAAA,IAAoB,EAAgB,GAC3D,EAAE,uBAAA,GAAuB,kBAAA,GAAkB,gBAAA,GAAgB,6BAAA,EAAA,IAC/D,EAAiB,GACb,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAChD,EAAE,eAAA,GAAe,kBAAA,EAAA,IAAqB,EAAiB;AA6B7D,SA3BA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAAgB,EAAE,QAAQ,GAEvB,KACH,EAAe,EAAE,QAAQ;AAAA,EAE7B,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,IAAI,CAAC,KAAiB,CAAC,KAEvB,EACE,GACA,EAAa,oBAAI,KAAK,CAAC,GACvB,EAAW,oBAAI,KAAK,CAAC,CACvB,EAAE,QAAQ;AAAA,EACZ,GAAG;AAAA,IAAC;AAAA,IAAe;AAAA,IAAqB;AAAA,EAAgB,CAAC,GAKrD,CAAC,KAAiB,CAAC,KAAuB,CAAC,IACtC,gBAAA,EAAC,GAAD,CAAS,CAAA,IAIhB,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACS,mBAAA;AAAA,IACnB,iBAAiB,EAAa;AAAA,IAC9B,qBAAqB,EAAa;AAAA,IAClC,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC5B,OAAO,EAAa;AAAA,cAEpB,gBAAA,EAAC,GAAD,CAAoB,CAAA;AAAA,EACD,CAAA;AAEzB,GAEA,IAAe,EAAS,CAAkB"}

package/dist/spending/SpendingWidget/index.es.js

@@ -0,0 +1,51 @@
+import { useAccountStore as R, useAppConfig as W, useCategoryStore as v, useEvent as G, useGlobalCopyStore as O, useGlobalUiStore as b, useTransactionStore as x } from "../../common/context/hooks/index.es.js";
+import { useWidgetLoadTimer as k } from "../../common/hooks/useWidgetLoadTimer/index.es.js";
+import { ANALYTICS_EVENTS as p } from "../../common/constants/Analytics/index.es.js";
+import w from "../../common/components/Loader/index.es.js";
+import { WidgetContainer as F } from "../../common/components/WidgetContainer/index.es.js";
+import M from "../components/Spending/index.es.js";
+import g from "react";
+import { observer as P } from "mobx-react-lite";
+import { endOfMonth as V } from "date-fns/endOfMonth";
+import { startOfMonth as j } from "date-fns/startOfMonth";
+import { startOfToday as u } from "date-fns/startOfToday";
+import { jsx as a } from "react/jsx-runtime";
+import z from "@mui/material/Box";
+import { parseISO as C } from "date-fns/parseISO";
+var B = ({ onBackClick: S, onMenuClick: D, sx: y = {} }) => {
+  const { isAccountDataLoaded: e, loadAccountData: _ } = R(), { categoriesLoaded: E, dateRangeTotalsLoaded: i, loadCategories: L, loadDateRangeCategoryTotals: d } = v(), { isTransactionDataLoaded: T, loadTransactionData: A } = x(), { spending: h } = O(), { displayedDateRange: n, isInitialized: o, setDisplayedDate: s, selectedAccounts: r } = b(), { onEvent: f } = G(), { clientConfig: I } = W();
+  k({
+    widgetName: "SpendingWidget",
+    isLoaded: i
+  }), g.useEffect(() => {
+    const t = I?.master?.deep_link_params, l = t?.date_range ? [C(t.date_range.from), C(t.date_range.to)] : [j(u()), V(u())], c = l[0], m = l[1];
+    s(c, m), e || _().finally(), E || L().finally(), T || A().finally(), o && e && d(r, c, m).finally(), f(p.SPENDING_VIEW);
+  }, []), g.useEffect(() => {
+    o && e && d(r, n.start, n.end).finally();
+  }, [
+    n,
+    o,
+    e,
+    r
+  ]);
+  const N = (t) => {
+    s(t[0], t[1]);
+  };
+  return !o || !e || !i ? /* @__PURE__ */ a(w, {}) : /* @__PURE__ */ a(F, {
+    calendarActions: { onRangeChanged: N },
+    onAccountsFilterClick: () => f(p.SPENDING_CLICK_FILTER),
+    onBackClick: S,
+    onMenuClick: D,
+    sx: y,
+    title: h.title,
+    children: /* @__PURE__ */ a(z, {
+      width: "100%",
+      children: /* @__PURE__ */ a(M, {})
+    })
+  });
+}, nt = P(B);
+export {
+  nt as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/SpendingWidget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/spending/SpendingWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { endOfMonth } from 'date-fns/endOfMonth'\n\nimport Box from '@mui/material/Box'\n\nimport type { DateRange } from '@mui/x-date-pickers-pro'\n\nimport {\n  Loader,\n  useAccountStore,\n  useGlobalUiStore,\n  WidgetContainer,\n  useEvent,\n  ANALYTICS_EVENTS,\n  useGlobalCopyStore,\n  useAppConfig,\n  useCategoryStore,\n  useTransactionStore,\n  useWidgetLoadTimer,\n} from '../common'\n\nimport type { WidgetProps } from '../core'\n\nimport Spending from './components/Spending'\nimport { parseISO } from 'date-fns/parseISO'\n\ninterface RSpendingWidgetProps extends WidgetProps {\n  onBackClick?: () => void\n}\n\nconst SpendingWidget: React.FC<RSpendingWidgetProps> = ({ onBackClick, onMenuClick, sx = {} }) => {\n  const { isAccountDataLoaded, loadAccountData } = useAccountStore()\n  const { categoriesLoaded, dateRangeTotalsLoaded, loadCategories, loadDateRangeCategoryTotals } =\n    useCategoryStore()\n  const { isTransactionDataLoaded, loadTransactionData } = useTransactionStore()\n  const { spending: spendingCopy } = useGlobalCopyStore()\n  const { displayedDateRange, isInitialized, setDisplayedDate, selectedAccounts } =\n    useGlobalUiStore()\n  const { onEvent } = useEvent()\n\n  const { clientConfig } = useAppConfig()\n\n  useWidgetLoadTimer({\n    widgetName: 'SpendingWidget',\n    isLoaded: dateRangeTotalsLoaded,\n  })\n\n  React.useEffect(() => {\n    const dlp = clientConfig?.master?.deep_link_params\n\n    const date_range = dlp?.date_range\n      ? ([parseISO(dlp.date_range.from), parseISO(dlp.date_range.to)] as DateRange<Date>)\n      : ([startOfMonth(startOfToday()), endOfMonth(startOfToday())] as DateRange<Date>)\n\n    const startDate = date_range[0] as Date\n    const endDate = date_range[1] as Date\n\n    setDisplayedDate(startDate, endDate)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    // Load with the dates we just computed rather than reading from the store,\n    // which may still hold a stale range set by a previously visited widget.\n    if (isInitialized && isAccountDataLoaded) {\n      loadDateRangeCategoryTotals(selectedAccounts, startDate, endDate).finally()\n    }\n\n    onEvent(ANALYTICS_EVENTS.SPENDING_VIEW)\n  }, [])\n\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      loadDateRangeCategoryTotals(\n        selectedAccounts,\n        displayedDateRange.start,\n        displayedDateRange.end,\n      ).finally()\n    }\n  }, [displayedDateRange, isInitialized, isAccountDataLoaded, selectedAccounts])\n\n  const handleDateChanged = (range: DateRange<Date>) => {\n    setDisplayedDate(range[0] as Date, range[1] as Date)\n  }\n\n  if (!isInitialized || !isAccountDataLoaded || !dateRangeTotalsLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged: handleDateChanged }}\n      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.SPENDING_CLICK_FILTER)}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={spendingCopy.title}\n    >\n      <Box width=\"100%\">\n        <Spending />\n      </Box>\n    </WidgetContainer>\n  )\n}\n\nexport default observer(SpendingWidget)\n"],"mappings":";;;;;;;;;;;;;;AAiCA,IAAM,IAAA,CAAkD,EAAE,aAAA,GAAa,aAAA,GAAa,IAAA,IAAK,CAAC,EAAA,MAAQ;AAChG,QAAM,EAAE,qBAAA,GAAqB,iBAAA,EAAA,IAAoB,EAAgB,GAC3D,EAAE,kBAAA,GAAkB,uBAAA,GAAuB,gBAAA,GAAgB,6BAAA,EAAA,IAC/D,EAAiB,GACb,EAAE,yBAAA,GAAyB,qBAAA,EAAA,IAAwB,EAAoB,GACvE,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAChD,EAAE,oBAAA,GAAoB,eAAA,GAAe,kBAAA,GAAkB,kBAAA,EAAA,IAC3D,EAAiB,GACb,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,EAAE,cAAA,EAAA,IAAiB,EAAa;AAEtC,EAAA,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAED,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAM,GAAc,QAAQ,kBAE5B,IAAa,GAAK,aACnB,CAAC,EAAS,EAAI,WAAW,IAAI,GAAG,EAAS,EAAI,WAAW,EAAE,CAAC,IAC3D,CAAC,EAAa,EAAa,CAAC,GAAG,EAAW,EAAa,CAAC,CAAC,GAExD,IAAY,EAAW,CAAA,GACvB,IAAU,EAAW,CAAA;AAE3B,IAAA,EAAiB,GAAW,CAAO,GAE9B,KACH,EAAgB,EAAE,QAAQ,GAEvB,KACH,EAAe,EAAE,QAAQ,GAEtB,KACH,EAAoB,EAAE,QAAQ,GAK5B,KAAiB,KACnB,EAA4B,GAAkB,GAAW,CAAO,EAAE,QAAQ,GAG5E,EAAQ,EAAiB,aAAa;AAAA,EACxC,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,KACnB,EACE,GACA,EAAmB,OACnB,EAAmB,GACrB,EAAE,QAAQ;AAAA,EAEd,GAAG;AAAA,IAAC;AAAA,IAAoB;AAAA,IAAe;AAAA,IAAqB;AAAA,EAAgB,CAAC;AAE7E,QAAM,IAAA,CAAqB,MAA2B;AACpD,IAAA,EAAiB,EAAM,CAAA,GAAY,EAAM,CAAA,CAAU;AAAA,EACrD;AAEA,SAAI,CAAC,KAAiB,CAAC,KAAuB,CAAC,IACtC,gBAAA,EAAC,GAAD,CAAS,CAAA,IAIhB,gBAAA,EAAC,GAAD;AAAA,IACE,iBAAiB,EAAE,gBAAgB,EAAkB;AAAA,IACrD,uBAAA,MAA6B,EAAQ,EAAiB,qBAAqB;AAAA,IAC9D,aAAA;AAAA,IACA,aAAA;AAAA,IACT,IAAA;AAAA,IACJ,OAAO,EAAa;AAAA,cAEpB,gBAAA,EAAC,GAAD;AAAA,MAAK,OAAM;AAAA,gBACT,gBAAA,EAAC,GAAD,CAAW,CAAA;AAAA,IACR,CAAA;AAAA,EACU,CAAA;AAErB,GAEA,KAAe,EAAS,CAAc"}

package/dist/spending/components/MiniSpendingChart/index.es.js

@@ -0,0 +1,112 @@
+import { useCategoryStore as x, useGlobalCopyStore as I } from "../../../common/context/hooks/index.es.js";
+import { getIncomeData as D, getSpendingData as j } from "../../utils/SpendingData/index.es.js";
+import u from "../SpendingDonut/index.es.js";
+import f from "../SpendingLegend/index.es.js";
+import S from "../SpendingTabLabel/index.es.js";
+import i from "react";
+import { observer as L } from "mobx-react-lite";
+import M from "@mui/material/Stack";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useTheme as w } from "@mui/material/styles";
+import b from "@mui/material/Box";
+import C from "@mui/material/Tab";
+import A from "@mui/material/Tabs";
+var R = () => {
+  const t = w(), { goals: _, spending: a } = I(), { categories: r, dateRangeCategoryTotals: l } = x(), h = i.useMemo(() => [
+    t.palette.chartMono.chartMono5,
+    t.palette.chartMono.chartMono4,
+    t.palette.chartMono.chartMono3,
+    t.palette.chartMono.chartMono2,
+    t.palette.chartMono.chartMono1,
+    t.palette.chartMono.chartMono6
+  ], [t]), [o, g] = i.useState(""), [n, y] = i.useState(0), m = i.useMemo(() => j(r, _, t, l), [r, l]), p = i.useMemo(() => D(r, l, h), [
+    r,
+    l,
+    h
+  ]), v = (s, T) => {
+    y(T), g("");
+  }, c = (s) => {
+    g(o === s ? "" : s);
+  };
+  return /* @__PURE__ */ d(b, {
+    width: "100%",
+    children: [
+      /* @__PURE__ */ d(A, {
+        "aria-label": a.mini_title,
+        onChange: v,
+        sx: { touchAction: "manipulation" },
+        value: n,
+        variant: "fullWidth",
+        children: [/* @__PURE__ */ e(C, {
+          "aria-controls": "spending-tabpanel",
+          id: "spending-tab",
+          label: /* @__PURE__ */ e(S, {
+            amount: m.totalAmount,
+            label: a.spend_tab_title,
+            variant: "mini"
+          }),
+          tabIndex: n === 0 ? 0 : -1
+        }), /* @__PURE__ */ e(C, {
+          "aria-controls": "income-tabpanel",
+          id: "income-tab",
+          label: /* @__PURE__ */ e(S, {
+            amount: p.totalAmount,
+            label: a.income_tab_title,
+            variant: "mini"
+          }),
+          tabIndex: n === 1 ? 0 : -1
+        })]
+      }),
+      /* @__PURE__ */ e(b, {
+        "aria-labelledby": "spending-tab",
+        hidden: n !== 0,
+        id: "spending-tabpanel",
+        role: "tabpanel",
+        children: /* @__PURE__ */ d(M, {
+          direction: "row",
+          gap: 16,
+          justifyContent: "center",
+          p: 24,
+          children: [/* @__PURE__ */ e(u, {
+            data: m,
+            onSelected: c,
+            selectedId: o,
+            totalLabel: a.total_spending
+          }), /* @__PURE__ */ e(f, {
+            data: m,
+            onSelected: c,
+            selectedId: o
+          })]
+        })
+      }),
+      /* @__PURE__ */ e(b, {
+        "aria-labelledby": "income-tab",
+        hidden: n !== 1,
+        id: "income-tabpanel",
+        role: "tabpanel",
+        children: /* @__PURE__ */ d(M, {
+          direction: "row",
+          gap: 16,
+          justifyContent: "center",
+          p: 24,
+          children: [/* @__PURE__ */ e(u, {
+            data: p,
+            isIncome: !0,
+            onSelected: c,
+            selectedId: o,
+            totalLabel: a.total_income
+          }), /* @__PURE__ */ e(f, {
+            data: p,
+            onSelected: c,
+            selectedId: o
+          })]
+        })
+      })
+    ]
+  });
+}, P = L(R);
+export {
+  P as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/MiniSpendingChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/MiniSpendingChart.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../common'\nimport { getIncomeData, getSpendingData } from '../utils/SpendingData'\n\nimport SpendingTabLabel from './SpendingTabLabel'\nimport SpendingDonut from './SpendingDonut'\nimport SpendingLegend from './SpendingLegend'\n\nconst MiniSpendingChart = () => {\n  const theme = useTheme()\n  const { goals: goalsCopy, spending: spendingCopy } = useGlobalCopyStore()\n  const { categories, dateRangeCategoryTotals } = useCategoryStore()\n\n  const incomeColors = React.useMemo(\n    () => [\n      theme.palette.chartMono.chartMono5,\n      theme.palette.chartMono.chartMono4,\n      theme.palette.chartMono.chartMono3,\n      theme.palette.chartMono.chartMono2,\n      theme.palette.chartMono.chartMono1,\n      theme.palette.chartMono.chartMono6,\n    ],\n    [theme],\n  ) as string[]\n\n  const [selectedId, setSelectedId] = React.useState('')\n  const [selectedTab, setSelectedTab] = React.useState(0)\n\n  const spendingData = React.useMemo(\n    () => getSpendingData(categories, goalsCopy, theme, dateRangeCategoryTotals),\n    [categories, dateRangeCategoryTotals],\n  )\n\n  const incomeData = React.useMemo(\n    () => getIncomeData(categories, dateRangeCategoryTotals, incomeColors),\n    [categories, dateRangeCategoryTotals, incomeColors],\n  )\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setSelectedTab(newValue)\n    setSelectedId('')\n  }\n\n  const handleSelected = (id: string) => {\n    setSelectedId(selectedId === id ? '' : id)\n  }\n\n  return (\n    <Box width=\"100%\">\n      <Tabs\n        aria-label={spendingCopy.mini_title}\n        onChange={handleTabChange}\n        sx={{ touchAction: 'manipulation' }}\n        value={selectedTab}\n        variant=\"fullWidth\"\n      >\n        <Tab\n          aria-controls=\"spending-tabpanel\"\n          id=\"spending-tab\"\n          label={\n            <SpendingTabLabel\n              amount={spendingData.totalAmount}\n              label={spendingCopy.spend_tab_title}\n              variant=\"mini\"\n            />\n          }\n          tabIndex={selectedTab === 0 ? 0 : -1}\n        />\n        <Tab\n          aria-controls=\"income-tabpanel\"\n          id=\"income-tab\"\n          label={\n            <SpendingTabLabel\n              amount={incomeData.totalAmount}\n              label={spendingCopy.income_tab_title}\n              variant=\"mini\"\n            />\n          }\n          tabIndex={selectedTab === 1 ? 0 : -1}\n        />\n      </Tabs>\n      <Box\n        aria-labelledby=\"spending-tab\"\n        hidden={selectedTab !== 0}\n        id=\"spending-tabpanel\"\n        role=\"tabpanel\"\n      >\n        <Stack direction=\"row\" gap={16} justifyContent={'center'} p={24}>\n          <SpendingDonut\n            data={spendingData}\n            onSelected={handleSelected}\n            selectedId={selectedId}\n            totalLabel={spendingCopy.total_spending}\n          />\n\n          <SpendingLegend data={spendingData} onSelected={handleSelected} selectedId={selectedId} />\n        </Stack>\n      </Box>\n      <Box\n        aria-labelledby=\"income-tab\"\n        hidden={selectedTab !== 1}\n        id=\"income-tabpanel\"\n        role=\"tabpanel\"\n      >\n        <Stack direction=\"row\" gap={16} justifyContent={'center'} p={24}>\n          <SpendingDonut\n            data={incomeData}\n            isIncome={true}\n            onSelected={handleSelected}\n            selectedId={selectedId}\n            totalLabel={spendingCopy.total_income}\n          />\n\n          <SpendingLegend data={incomeData} onSelected={handleSelected} selectedId={selectedId} />\n        </Stack>\n      </Box>\n    </Box>\n  )\n}\n\nexport default observer(MiniSpendingChart)\n"],"mappings":"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"}

package/dist/spending/components/Spending/index.es.js

@@ -0,0 +1,123 @@
+import { CategoryGuids as i } from "../../../core/constants/Category/index.es.js";
+import { useAppConfig as E, useCategoryStore as J, useGlobalCopyStore as K, useGlobalUiStore as P, useTransactionStore as Q } from "../../../common/context/hooks/index.es.js";
+import O from "../../../common/components/drawer/Drawer/index.es.js";
+import { exportTransactionsToCSV as X } from "../../../core/utils/TransactionUtils/index.es.js";
+import Y from "../../../transactions/components/shared/TransactionList/index.es.js";
+import Z from "../../../transactions/components/shared/TransactionDetails/index.es.js";
+import { getIncomeData as tt, getSpendingData as et } from "../../utils/SpendingData/index.es.js";
+import G from "../SpendingTabLabel/index.es.js";
+import N from "../SpendingChart/index.es.js";
+import s from "react";
+import { observer as ot } from "mobx-react-lite";
+import R from "@mui/material/Stack";
+import { Icon as at } from "@mxenabled/mxui";
+import nt from "@mui/material/Button";
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import rt from "@mui/material/Box";
+import k from "@mui/material/Tab";
+import st from "@mui/material/Tabs";
+import { useTheme as it } from "@mui/material";
+var ct = (n) => [
+  n.palette.chartMono.chartMono5,
+  n.palette.chartMono.chartMono4,
+  n.palette.chartMono.chartMono3,
+  n.palette.chartMono.chartMono2,
+  n.palette.chartMono.chartMono1,
+  n.palette.chartMono.chartMono6
+], lt = () => {
+  const n = it(), { is_mobile_webview: A } = E(), { clientConfig: b } = E(), { categories: c, dateRangeCategoryTotals: l } = J(), { goals: B, spending: r, transactions: V } = K(), { displayedDateRange: T, selectedAccountGuids: y } = P(), { setFilter: d, sortedTransactions: g, sortedTransactionsWithSplits: L, tags: j } = Q(), p = b?.master?.deep_link_params?.account_guids, F = b?.master?.deep_link_params?.view, [m, v] = s.useState(""), [u, W] = s.useState(F === "income" ? 1 : 0), [M, w] = s.useState(""), [z, _] = s.useState(!1), f = s.useMemo(() => et(c, B, n, l), [c, l]), I = s.useMemo(() => tt(c, l, ct(n)), [c, l]), h = s.useMemo(() => g.find((t) => t.guid === M), [M, g]), U = (t, a) => {
+    W(a), v("");
+  }, x = (t, a = !1) => {
+    a ? $(t) : v(m === t || t === "0" ? "" : t);
+  }, $ = (t) => {
+    d({
+      accounts: p || y,
+      dateRange: T,
+      custom: (a) => m === "other" ? a.top_level_category_guid === t : a.category_guid === t,
+      showSplits: !0
+    }), _(!0);
+  }, D = (t) => {
+    const a = {
+      accounts: p || y,
+      dateRange: T
+    };
+    if (u === 0) if (t === "other") {
+      const o = f.categoryData.find((S) => S.guid === "other");
+      d({
+        ...a,
+        custom: (S) => !!o?.categoryTotals?.find((H) => H.guid === S.top_level_category_guid)
+      });
+    } else d({
+      ...a,
+      custom: (o) => t ? o.top_level_category_guid === t : o.top_level_category_guid !== i.INCOME && o.category_guid !== i.INCOME && o.top_level_category_guid !== i.INVESTMENTS && o.top_level_category_guid !== i.TRANSFER,
+      showSplits: !!t
+    });
+    else d({
+      ...a,
+      custom: (o) => t ? o.category_guid === t : o.category_guid === i.INCOME || o.top_level_category_guid === i.INCOME
+    });
+    _(!0);
+  }, q = () => {
+    X(L, j);
+  };
+  return /* @__PURE__ */ C(rt, { children: [
+    /* @__PURE__ */ C(st, {
+      onChange: U,
+      value: u,
+      variant: "fullWidth",
+      children: [/* @__PURE__ */ e(k, { label: /* @__PURE__ */ e(G, {
+        amount: f.totalAmount,
+        label: r.spend_tab_title
+      }) }), /* @__PURE__ */ e(k, { label: /* @__PURE__ */ e(G, {
+        amount: I.totalAmount,
+        label: r.income_tab_title
+      }) })]
+    }),
+    u === 0 && /* @__PURE__ */ e(N, {
+      data: f,
+      onSelected: x,
+      onViewTransactions: D,
+      selectedId: m,
+      title: r.spend_tab_title
+    }),
+    u === 1 && /* @__PURE__ */ e(N, {
+      data: I,
+      onSelected: x,
+      onViewTransactions: D,
+      selectedId: m,
+      title: r.income_tab_title
+    }),
+    /* @__PURE__ */ e(O, {
+      ariaLabelClose: r.close_drawer_aria,
+      isOpen: z,
+      onClose: () => _(!1),
+      title: r.transactions_drawer_title,
+      children: /* @__PURE__ */ C(R, { children: [!A && g.length > 0 && /* @__PURE__ */ e(R, {
+        direction: "row",
+        justifyContent: "right",
+        mb: -24,
+        mr: 8,
+        mt: 8,
+        zIndex: 1,
+        children: /* @__PURE__ */ e(nt, {
+          onClick: q,
+          startIcon: /* @__PURE__ */ e(at, { name: "ios_share" }),
+          variant: "text",
+          children: V.export_csv_btn
+        })
+      }), /* @__PURE__ */ e(Y, { onClick: w })] })
+    }),
+    /* @__PURE__ */ e(O, {
+      ariaLabelClose: r.close_drawer_aria,
+      isOpen: !!h,
+      onClose: () => w(""),
+      title: r.transaction_details_drawer_title,
+      children: h && /* @__PURE__ */ e(Z, { transaction: h })
+    })
+  ] });
+}, Et = ot(lt);
+export {
+  Et as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/Spending/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/Spending.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\nimport { useTheme } from '@mui/material'\nimport type { Theme } from '@mui/system'\n\nimport { Icon } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { CategoryGuids } from '../../core/constants'\nimport { Transaction } from '../../core'\nimport { exportTransactionsToCSV } from '../../core/utils/TransactionUtils'\n\nimport { TransactionDetails, TransactionList } from '../../transactions'\nimport { getIncomeData, getSpendingData } from '../utils/SpendingData'\nimport SpendingChart from './SpendingChart'\nimport SpendingTabLabel from './SpendingTabLabel'\n\nconst getIncomeColors = (theme: Theme) => {\n  return [\n    theme.palette.chartMono.chartMono5,\n    theme.palette.chartMono.chartMono4,\n    theme.palette.chartMono.chartMono3,\n    theme.palette.chartMono.chartMono2,\n    theme.palette.chartMono.chartMono1,\n    theme.palette.chartMono.chartMono6,\n  ]\n}\n\nconst Spending = () => {\n  const theme = useTheme()\n  const { is_mobile_webview } = useAppConfig()\n\n  const { clientConfig } = useAppConfig()\n  const { categories, dateRangeCategoryTotals } = useCategoryStore()\n\n  const {\n    goals: goalsCopy,\n    spending: spendingCopy,\n    transactions: transactionCopy,\n  } = useGlobalCopyStore()\n  const { displayedDateRange, selectedAccountGuids } = useGlobalUiStore()\n  const {\n    setFilter,\n    sortedTransactions: transactions,\n    sortedTransactionsWithSplits,\n    tags,\n  } = useTransactionStore()\n\n  const accountGuids = clientConfig?.master?.deep_link_params?.account_guids\n  const view = clientConfig?.master?.deep_link_params?.view\n\n  const [selectedId, setSelectedId] = React.useState('')\n  const [selectedTab, setSelectedTab] = React.useState(view === 'income' ? 1 : 0)\n  const [transactionGuid, setTransactionGuid] = React.useState('')\n  const [transactionsOpen, setTransactionsOpen] = React.useState(false)\n\n  const spendingData = React.useMemo(\n    () => getSpendingData(categories, goalsCopy, theme, dateRangeCategoryTotals),\n    [categories, dateRangeCategoryTotals],\n  )\n\n  const incomeData = React.useMemo(\n    () => getIncomeData(categories, dateRangeCategoryTotals, getIncomeColors(theme)),\n    [categories, dateRangeCategoryTotals],\n  )\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setSelectedTab(newValue)\n    setSelectedId('')\n  }\n\n  const handleSelected = (id: string, isSubcategory: boolean = false) => {\n    if (isSubcategory) {\n      handleSelectedSubcategory(id)\n    } else {\n      setSelectedId(selectedId === id || id === '0' ? '' : id)\n    }\n  }\n\n  const handleSelectedSubcategory = (id: string) => {\n    const transactionFilter = {\n      accounts: accountGuids ? accountGuids : selectedAccountGuids,\n      dateRange: displayedDateRange,\n    }\n\n    setFilter({\n      ...transactionFilter,\n      custom: (t: Transaction) =>\n        selectedId === 'other' ? t.top_level_category_guid === id : t.category_guid === id,\n      showSplits: true,\n    })\n\n    setTransactionsOpen(true)\n  }\n\n  const handleViewTransactions = (id: string) => {\n    const transactionFilter = {\n      accounts: accountGuids ? accountGuids : selectedAccountGuids,\n      dateRange: displayedDateRange,\n    }\n\n    if (selectedTab === 0) {\n      // Spending\n      if (id === 'other') {\n        const other = spendingData.categoryData.find((c) => c.guid === 'other')\n        setFilter({\n          ...transactionFilter,\n          custom: (t: Transaction) =>\n            Boolean(other?.categoryTotals?.find((ct) => ct.guid === t.top_level_category_guid)),\n        })\n      } else {\n        setFilter({\n          ...transactionFilter,\n          custom: (t: Transaction) =>\n            id\n              ? t.top_level_category_guid === id\n              : t.top_level_category_guid !== CategoryGuids.INCOME &&\n                t.category_guid !== CategoryGuids.INCOME &&\n                t.top_level_category_guid !== CategoryGuids.INVESTMENTS &&\n                t.top_level_category_guid !== CategoryGuids.TRANSFER,\n          showSplits: Boolean(id),\n        })\n      }\n    } else {\n      // Income\n      setFilter({\n        ...transactionFilter,\n        custom: (t: Transaction) =>\n          id\n            ? t.category_guid === id\n            : t.category_guid === CategoryGuids.INCOME ||\n              t.top_level_category_guid === CategoryGuids.INCOME,\n      })\n    }\n\n    setTransactionsOpen(true)\n  }\n\n  const handleExportToCsv = () => {\n    exportTransactionsToCSV(sortedTransactionsWithSplits, tags)\n  }\n\n  return (\n    <Box>\n      <Tabs onChange={handleTabChange} value={selectedTab} variant=\"fullWidth\">\n        <Tab\n          label={\n            <SpendingTabLabel\n              amount={spendingData.totalAmount}\n              label={spendingCopy.spend_tab_title}\n            />\n          }\n        />\n        <Tab\n          label={\n            <SpendingTabLabel\n              amount={incomeData.totalAmount}\n              label={spendingCopy.income_tab_title}\n            />\n          }\n        />\n      </Tabs>\n      {selectedTab === 0 && (\n        <SpendingChart\n          data={spendingData}\n          onSelected={handleSelected}\n          onViewTransactions={handleViewTransactions}\n          selectedId={selectedId}\n          title={spendingCopy.spend_tab_title}\n        />\n      )}\n      {selectedTab === 1 && (\n        <SpendingChart\n          data={incomeData}\n          onSelected={handleSelected}\n          onViewTransactions={handleViewTransactions}\n          selectedId={selectedId}\n          title={spendingCopy.income_tab_title}\n        />\n      )}\n      <Drawer\n        ariaLabelClose={spendingCopy.close_drawer_aria}\n        isOpen={transactionsOpen}\n        onClose={() => setTransactionsOpen(false)}\n        title={spendingCopy.transactions_drawer_title}\n      >\n        <Stack>\n          {!is_mobile_webview && transactions.length > 0 && (\n            <Stack direction=\"row\" justifyContent=\"right\" mb={-24} mr={8} mt={8} zIndex={1}>\n              <Button\n                onClick={handleExportToCsv}\n                startIcon={<Icon name=\"ios_share\" />}\n                variant=\"text\"\n              >\n                {transactionCopy.export_csv_btn}\n              </Button>\n            </Stack>\n          )}\n          <TransactionList onClick={setTransactionGuid} />\n        </Stack>\n      </Drawer>\n      <Drawer\n        ariaLabelClose={spendingCopy.close_drawer_aria}\n        isOpen={Boolean(transaction)}\n        onClose={() => setTransactionGuid('')}\n        title={spendingCopy.transaction_details_drawer_title}\n      >\n        {transaction && <TransactionDetails transaction={transaction} />}\n      </Drawer>\n    </Box>\n  )\n}\n\nexport default observer(Spending)\n"],"mappings":"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"}

package/dist/spending/components/SpendingChart/index.es.js

@@ -0,0 +1,60 @@
+import { useCategoryStore as u, useGlobalCopyStore as c } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as f } from "../../../common/hooks/useScreenSize/index.es.js";
+import s from "../SpendingDonut/index.es.js";
+import g from "../SpendingList/index.es.js";
+import "react";
+import { observer as S } from "mobx-react-lite";
+import x from "@mui/material/Stack";
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+var C = ({ data: e, onSelected: o, onViewTransactions: d, selectedId: n, title: m }) => {
+  const { isDesktop: a, isMobile: r } = f(), { dateRangeTotalsLoading: i } = u(), { spending: p } = c();
+  return /* @__PURE__ */ y(x, {
+    alignItems: r ? "center" : "flex-start",
+    direction: r ? "column" : "row",
+    gap: {
+      xs: 16,
+      md: 64,
+      xl: 100
+    },
+    justifyContent: "center",
+    pt: 50,
+    px: 8,
+    children: [
+      i && /* @__PURE__ */ t(s, {
+        data: {
+          categoryData: [],
+          donutData: [],
+          totalAmount: 0
+        },
+        onSelected: () => {
+        },
+        selectedId: "",
+        size: a ? 400 : 300,
+        totalLabel: "Loading ...",
+        variant: "full"
+      }),
+      !i && /* @__PURE__ */ t(s, {
+        data: e,
+        onSelected: (l) => {
+          o(l), setTimeout(() => document.getElementById(`spending-list-category-${l}`)?.focus(), 0);
+        },
+        onViewTransactions: d,
+        selectedId: n,
+        size: a ? 400 : 300,
+        totalLabel: p.total_amount,
+        variant: "full"
+      }),
+      /* @__PURE__ */ t(g, {
+        data: e,
+        onSelected: o,
+        selectedId: n,
+        title: m
+      })
+    ]
+  });
+}, R = S(C);
+export {
+  R as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/SpendingChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/SpendingChart.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useCategoryStore, useGlobalCopyStore, useScreenSize } from '../../common'\n\nimport { SpendingData } from '../utils/SpendingData'\nimport SpendingDonut from './SpendingDonut'\nimport SpendingList from './SpendingList'\n\ninterface SpendingChartProps {\n  data: SpendingData\n  title: string\n  onSelected: (id: string, isSubcategory?: boolean) => void\n  onViewTransactions: (id: string) => void\n  selectedId: string\n}\n\nconst SpendingChart: React.FC<SpendingChartProps> = ({\n  data,\n  onSelected,\n  onViewTransactions,\n  selectedId,\n  title,\n}) => {\n  const { isDesktop, isMobile } = useScreenSize()\n  const { dateRangeTotalsLoading } = useCategoryStore()\n  const { spending: spendingCopy } = useGlobalCopyStore()\n\n  const handleDonutSelected = (id: string) => {\n    onSelected(id)\n    setTimeout(() => document.getElementById(`spending-list-category-${id}`)?.focus(), 0)\n  }\n\n  const loadingDonut = (\n    <SpendingDonut\n      data={{\n        categoryData: [],\n        donutData: [],\n        totalAmount: 0,\n      }}\n      onSelected={() => {}}\n      selectedId={''}\n      size={isDesktop ? 400 : 300}\n      totalLabel={'Loading ...'}\n      variant=\"full\"\n    />\n  )\n\n  return (\n    <Stack\n      alignItems={isMobile ? 'center' : 'flex-start'}\n      direction={isMobile ? 'column' : 'row'}\n      gap={{ xs: 16, md: 64, xl: 100 }}\n      justifyContent=\"center\"\n      pt={50}\n      px={8}\n    >\n      {dateRangeTotalsLoading && loadingDonut}\n      {/* Not using a ternary here because it doesn't show the animation */}\n      {!dateRangeTotalsLoading && (\n        <SpendingDonut\n          data={data}\n          onSelected={handleDonutSelected}\n          onViewTransactions={onViewTransactions}\n          selectedId={selectedId}\n          size={isDesktop ? 400 : 300}\n          totalLabel={spendingCopy.total_amount}\n          variant=\"full\"\n        />\n      )}\n\n      <SpendingList data={data} onSelected={onSelected} selectedId={selectedId} title={title} />\n    </Stack>\n  )\n}\n\nexport default observer(SpendingChart)\n"],"mappings":";;;;;;;;AAmBA,IAAM,IAAA,CAA+C,EACnD,MAAA,GACA,YAAA,GACA,oBAAA,GACA,YAAA,GACA,OAAA,EAAA,MACI;AACJ,QAAM,EAAE,WAAA,GAAW,UAAA,EAAA,IAAa,EAAc,GACxC,EAAE,wBAAA,EAAA,IAA2B,EAAiB,GAC9C,EAAE,UAAU,EAAA,IAAiB,EAAmB;AAsBtD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,YAAY,IAAW,WAAW;AAAA,IAClC,WAAW,IAAW,WAAW;AAAA,IACjC,KAAK;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAI;AAAA,IAC/B,gBAAe;AAAA,IACf,IAAI;AAAA,IACJ,IAAI;AAAA,cANN;AAAA,MAQG,KAvBH,gBAAA,EAAC,GAAD;AAAA,QACE,MAAM;AAAA,UACJ,cAAc,CAAC;AAAA,UACf,WAAW,CAAC;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,QACA,YAAA,MAAkB;AAAA,QAAC;AAAA,QACnB,YAAY;AAAA,QACZ,MAAM,IAAY,MAAM;AAAA,QACxB,YAAY;AAAA,QACZ,SAAQ;AAAA,MACT,CAY4B;AAAA,MAE1B,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,QACQ,MAAA;AAAA,QACN,YAlCF,CAAuB,MAAe;AAC1C,UAAA,EAAW,CAAE,GACb,WAAA,MAAiB,SAAS,eAAe,0BAA0B,CAAA,EAAI,GAAG,MAAM,GAAG,CAAC;AAAA,QACtF;AAAA,QAgC4B,oBAAA;AAAA,QACR,YAAA;AAAA,QACZ,MAAM,IAAY,MAAM;AAAA,QACxB,YAAY,EAAa;AAAA,QACzB,SAAQ;AAAA,MACT,CAAA;AAAA,MAGH,gBAAA,EAAC,GAAD;AAAA,QAAoB,MAAA;AAAA,QAAkB,YAAA;AAAA,QAAwB,YAAA;AAAA,QAAmB,OAAA;AAAA,MAAQ,CAAA;AAAA,IACpF;AAAA;AAEX,GAEA,IAAe,EAAS,CAAa"}

package/dist/spending/components/SpendingDonut/index.es.js

@@ -0,0 +1,132 @@
+import { CategoryGuids as j } from "../../../core/constants/Category/index.es.js";
+import k from "../../../common/components/charts/Donut/index.es.js";
+import { useGlobalCopyStore as G } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as I } from "../../../common/hooks/useScreenSize/index.es.js";
+import { useAriaLive as V } from "../../../common/hooks/useAriaLive/index.es.js";
+import { formatCurrency as c } from "../../../core/utils/NumberFormatting/index.es.js";
+import h from "react";
+import { observer as W } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { CategoryIcon as _, CategoryIconVariants as $, P as v, Text as l } from "@mxenabled/mxui";
+import A from "@mui/material/Button";
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
+import { useTheme as B } from "@mui/material/styles";
+import f from "@mui/material/Box";
+var E = ({ data: t, isIncome: g = !1, onSelected: x, onViewTransactions: y, selectedId: e, size: r = 150, totalLabel: m, variant: n = "mini" }) => {
+  const { spending: d } = G(), C = B(), { isTablet: b } = I(), { announce: p, ariaLive: D } = V(), o = h.useMemo(() => e ? t.categoryData.find((a) => a.guid === e) : void 0, [e]);
+  h.useEffect(() => {
+    if (o) {
+      const a = c(o.amount, n === "mini" ? "0,0" : "0,0.00");
+      p(`${o.name}: ${a}`);
+    }
+  }, [
+    o,
+    p,
+    n
+  ]);
+  const S = t.donutData.length > 0 ? t.donutData : [{
+    id: "0",
+    color: C.palette.divider,
+    value: 100
+  }], T = () => {
+    y?.(e);
+  }, w = b ? 32 : 48;
+  return /* @__PURE__ */ u(f, {
+    "aria-label": d.chart_description,
+    height: r,
+    position: "relative",
+    role: "group",
+    width: r,
+    children: [D, /* @__PURE__ */ i(k, {
+      data: S,
+      onClick: x,
+      selectedId: e,
+      size: r,
+      children: /* @__PURE__ */ i(s, {
+        alignItems: "center",
+        height: "100%",
+        justifyContent: "center",
+        width: "100%",
+        children: /* @__PURE__ */ u(s, {
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: r,
+          minWidth: r,
+          children: [
+            o && /* @__PURE__ */ u(s, {
+              alignItems: "center",
+              gap: n === "mini" ? 0 : 8,
+              mb: n === "mini" ? 0 : 8,
+              mt: n === "mini" ? 0 : -16,
+              sx: n === "mini" ? {
+                gap: 0,
+                mb: 0
+              } : {
+                gap: {
+                  xs: 4,
+                  xl: 8
+                },
+                mb: {
+                  xs: 4,
+                  xl: 8
+                }
+              },
+              children: [/* @__PURE__ */ i(f, {
+                "aria-hidden": "true",
+                role: "presentation",
+                children: /* @__PURE__ */ i(_, {
+                  categoryGuid: g ? j.INCOME : o.guid,
+                  size: n === "mini" ? 24 : w,
+                  variant: $.Transparent
+                })
+              }), /* @__PURE__ */ i(l, {
+                color: "text.secondary",
+                noWrap: !0,
+                variant: n === "mini" ? "tiny" : "body1",
+                children: o ? o.name : m
+              })]
+            }),
+            !o && n === "full" && /* @__PURE__ */ i(l, {
+              bold: !0,
+              color: "text.secondary",
+              sx: { mb: {
+                xs: 4,
+                xl: 8
+              } },
+              children: m
+            }),
+            /* @__PURE__ */ i(v, {
+              variant: n === "mini" ? "h2" : "h1",
+              children: o ? c(o.amount, n === "mini" ? "0,0" : "0,0.00") : c(t.totalAmount, n === "mini" ? "0,0" : "0,0.00")
+            }),
+            !o && n === "mini" && /* @__PURE__ */ i(l, {
+              color: "text.secondary",
+              noWrap: !0,
+              variant: "tiny",
+              children: m
+            }),
+            n === "full" && /* @__PURE__ */ i(A, {
+              "aria-label": `View ${o?.name || ""} Transactions`,
+              disabled: t.categoryData.length === 0,
+              onClick: T,
+              sx: {
+                mt: {
+                  xl: 4,
+                  xs: 0
+                },
+                zIndex: 1
+              },
+              variant: "text",
+              children: d.view_transactions
+            })
+          ]
+        })
+      })
+    })]
+  });
+}, X = W(E);
+export {
+  X as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/SpendingDonut/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/SpendingDonut.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, CategoryIconVariants, P, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useScreenSize } from '../../common'\nimport { CategoryGuids } from '../../core/constants'\nimport Donut from '../../common/components/charts/Donut'\nimport { useAriaLive } from '../../common/hooks/useAriaLive'\n\nimport type { SpendingData } from '../utils/SpendingData'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface SpendingDonutProps {\n  data: SpendingData\n  isIncome?: boolean\n  onSelected: (id: string) => void\n  onViewTransactions?: (id: string) => void\n  selectedId: string\n  size?: number\n  totalLabel: string\n  variant?: 'mini' | 'full'\n}\n\nconst SpendingDonut: React.FC<SpendingDonutProps> = ({\n  data,\n  isIncome = false,\n  onSelected,\n  onViewTransactions,\n  selectedId,\n  size = 150,\n  totalLabel,\n  variant = 'mini',\n}) => {\n  const { spending: spendingCopy } = useGlobalCopyStore()\n  const theme = useTheme()\n  const { isTablet } = useScreenSize()\n  const { announce, ariaLive } = useAriaLive()\n\n  const selectedCategory = React.useMemo(\n    () => (selectedId ? data.categoryData.find((cd) => cd.guid === selectedId) : undefined),\n    [selectedId],\n  )\n\n  // Announce category selection to screen readers\n  React.useEffect(() => {\n    if (selectedCategory) {\n      const amount = formatCurrency(selectedCategory.amount, variant === 'mini' ? '0,0' : '0,0.00')\n      announce(`${selectedCategory.name}: ${amount}`)\n    }\n  }, [selectedCategory, announce, variant])\n\n  const donutData =\n    data.donutData.length > 0\n      ? data.donutData\n      : [{ id: '0', color: theme.palette.divider, value: 100 }]\n\n  const handleViewTransactions = () => {\n    onViewTransactions?.(selectedId)\n  }\n\n  const iconSize = isTablet ? 32 : 48\n  return (\n    <Box\n      aria-label={spendingCopy.chart_description}\n      height={size}\n      position=\"relative\"\n      role=\"group\"\n      width={size}\n    >\n      {ariaLive}\n      <Donut data={donutData} onClick={onSelected} selectedId={selectedId} size={size}>\n        <Stack alignItems=\"center\" height=\"100%\" justifyContent=\"center\" width=\"100%\">\n          <Stack alignItems=\"center\" justifyContent=\"center\" minHeight={size} minWidth={size}>\n            {selectedCategory && (\n              <Stack\n                alignItems=\"center\"\n                gap={variant === 'mini' ? 0 : 8}\n                mb={variant === 'mini' ? 0 : 8}\n                mt={variant === 'mini' ? 0 : -16}\n                sx={\n                  variant === 'mini'\n                    ? { gap: 0, mb: 0 }\n                    : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }\n                }\n              >\n                <Box aria-hidden=\"true\" role=\"presentation\">\n                  <CategoryIcon\n                    categoryGuid={isIncome ? CategoryGuids.INCOME : selectedCategory.guid}\n                    size={variant === 'mini' ? 24 : iconSize}\n                    variant={CategoryIconVariants.Transparent}\n                  />\n                </Box>\n                <Text\n                  color=\"text.secondary\"\n                  noWrap={true}\n                  variant={variant === 'mini' ? 'tiny' : 'body1'}\n                >\n                  {selectedCategory ? selectedCategory.name : totalLabel}\n                </Text>\n              </Stack>\n            )}\n\n            {!selectedCategory && variant === 'full' && (\n              <Text bold={true} color=\"text.secondary\" sx={{ mb: { xs: 4, xl: 8 } }}>\n                {totalLabel}\n              </Text>\n            )}\n\n            <P variant={variant === 'mini' ? 'h2' : 'h1'}>\n              {selectedCategory\n                ? formatCurrency(selectedCategory.amount, variant === 'mini' ? '0,0' : '0,0.00')\n                : formatCurrency(data.totalAmount, variant === 'mini' ? '0,0' : '0,0.00')}\n            </P>\n            {!selectedCategory && variant === 'mini' && (\n              <Text color=\"text.secondary\" noWrap={true} variant=\"tiny\">\n                {totalLabel}\n              </Text>\n            )}\n\n            {variant === 'full' && (\n              <Button\n                aria-label={`View ${selectedCategory?.name || ''} Transactions`}\n                disabled={data.categoryData.length === 0}\n                onClick={handleViewTransactions}\n                sx={{ mt: { xl: 4, xs: 0 }, zIndex: 1 }}\n                variant=\"text\"\n              >\n                {spendingCopy.view_transactions}\n              </Button>\n            )}\n          </Stack>\n        </Stack>\n      </Donut>\n    </Box>\n  )\n}\n\nexport default observer(SpendingDonut)\n"],"mappings":";;;;;;;;;;;;;;AA6BA,IAAM,IAAA,CAA+C,EACnD,MAAA,GACA,UAAA,IAAW,IACX,YAAA,GACA,oBAAA,GACA,YAAA,GACA,MAAA,IAAO,KACP,YAAA,GACA,SAAA,IAAU,OAAA,MACN;AACJ,QAAM,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAChD,IAAQ,EAAS,GACjB,EAAE,UAAA,EAAA,IAAa,EAAc,GAC7B,EAAE,UAAA,GAAU,UAAA,EAAA,IAAa,EAAY,GAErC,IAAmB,EAAM,QAAA,MACtB,IAAa,EAAK,aAAa,KAAA,CAAM,MAAO,EAAG,SAAS,CAAU,IAAI,QAC7E,CAAC,CAAU,CACb;AAGA,EAAA,EAAM,UAAA,MAAgB;AACpB,QAAI,GAAkB;AACpB,YAAM,IAAS,EAAe,EAAiB,QAAQ,MAAY,SAAS,QAAQ,QAAQ;AAC5F,MAAA,EAAS,GAAG,EAAiB,IAAA,KAAS,CAAA,EAAQ;AAAA,IAChD;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAU;AAAA,EAAO,CAAC;AAExC,QAAM,IACJ,EAAK,UAAU,SAAS,IACpB,EAAK,YACL,CAAC;AAAA,IAAE,IAAI;AAAA,IAAK,OAAO,EAAM,QAAQ;AAAA,IAAS,OAAO;AAAA,EAAI,CAAC,GAEtD,IAAA,MAA+B;AACnC,IAAA,IAAqB,CAAU;AAAA,EACjC,GAEM,IAAW,IAAW,KAAK;AACjC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY,EAAa;AAAA,IACzB,QAAQ;AAAA,IACR,UAAS;AAAA,IACT,MAAK;AAAA,IACL,OAAO;AAAA,cALT,CAOG,GACD,gBAAA,EAAC,GAAD;AAAA,MAAO,MAAM;AAAA,MAAW,SAAS;AAAA,MAAwB,YAAA;AAAA,MAAkB,MAAA;AAAA,gBACzE,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAS,QAAO;AAAA,QAAO,gBAAe;AAAA,QAAS,OAAM;AAAA,kBACrE,gBAAA,EAAC,GAAD;AAAA,UAAO,YAAW;AAAA,UAAS,gBAAe;AAAA,UAAS,WAAW;AAAA,UAAM,UAAU;AAAA,oBAA9E;AAAA,YACG,KACC,gBAAA,EAAC,GAAD;AAAA,cACE,YAAW;AAAA,cACX,KAAK,MAAY,SAAS,IAAI;AAAA,cAC9B,IAAI,MAAY,SAAS,IAAI;AAAA,cAC7B,IAAI,MAAY,SAAS,IAAI;AAAA,cAC7B,IACE,MAAY,SACR;AAAA,gBAAE,KAAK;AAAA,gBAAG,IAAI;AAAA,cAAE,IAChB;AAAA,gBAAE,KAAK;AAAA,kBAAE,IAAI;AAAA,kBAAG,IAAI;AAAA,gBAAE;AAAA,gBAAG,IAAI;AAAA,kBAAE,IAAI;AAAA,kBAAG,IAAI;AAAA,gBAAE;AAAA,cAAE;AAAA,wBARtD,CAWE,gBAAA,EAAC,GAAD;AAAA,gBAAK,eAAY;AAAA,gBAAO,MAAK;AAAA,0BAC3B,gBAAA,EAAC,GAAD;AAAA,kBACE,cAAc,IAAW,EAAc,SAAS,EAAiB;AAAA,kBACjE,MAAM,MAAY,SAAS,KAAK;AAAA,kBAChC,SAAS,EAAqB;AAAA,gBAC/B,CAAA;AAAA,cACE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,gBACE,OAAM;AAAA,gBACN,QAAQ;AAAA,gBACR,SAAS,MAAY,SAAS,SAAS;AAAA,0BAEtC,IAAmB,EAAiB,OAAO;AAAA,cACxC,CAAA,CACD;AAAA;YAGR,CAAC,KAAoB,MAAY,UAChC,gBAAA,EAAC,GAAD;AAAA,cAAM,MAAM;AAAA,cAAM,OAAM;AAAA,cAAiB,IAAI,EAAE,IAAI;AAAA,gBAAE,IAAI;AAAA,gBAAG,IAAI;AAAA,cAAE,EAAE;AAAA,wBACjE;AAAA,YACG,CAAA;AAAA,YAGR,gBAAA,EAAC,GAAD;AAAA,cAAG,SAAS,MAAY,SAAS,OAAO;AAAA,wBACrC,IACG,EAAe,EAAiB,QAAQ,MAAY,SAAS,QAAQ,QAAQ,IAC7E,EAAe,EAAK,aAAa,MAAY,SAAS,QAAQ,QAAQ;AAAA,YACzE,CAAA;AAAA,YACF,CAAC,KAAoB,MAAY,UAChC,gBAAA,EAAC,GAAD;AAAA,cAAM,OAAM;AAAA,cAAiB,QAAQ;AAAA,cAAM,SAAQ;AAAA,wBAChD;AAAA,YACG,CAAA;AAAA,YAGP,MAAY,UACX,gBAAA,EAAC,GAAD;AAAA,cACE,cAAY,QAAQ,GAAkB,QAAQ,EAAA;AAAA,cAC9C,UAAU,EAAK,aAAa,WAAW;AAAA,cACvC,SAAS;AAAA,cACT,IAAI;AAAA,gBAAE,IAAI;AAAA,kBAAE,IAAI;AAAA,kBAAG,IAAI;AAAA,gBAAE;AAAA,gBAAG,QAAQ;AAAA,cAAE;AAAA,cACtC,SAAQ;AAAA,wBAEP,EAAa;AAAA,YACR,CAAA;AAAA,UAEL;AAAA;MACF,CAAA;AAAA,IACF,CAAA,CACJ;AAAA;AAET,GAEA,IAAe,EAAS,CAAa"}