@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

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

@@ -0,0 +1,60 @@
+import { useCategoryStore as u, useGlobalCopyStore as c } from "../../common/context/hooks.es.js";
+import { useScreenSize as f } from "../../common/hooks/useScreenSize.es.js";
+import s from "./SpendingDonut.es.js";
+import g from "./SpendingList.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=SpendingChart.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingChart.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.es.js

@@ -0,0 +1,132 @@
+import { CategoryGuids as j } from "../../core/constants/Category.es.js";
+import k from "../../common/components/charts/Donut.es.js";
+import { useGlobalCopyStore as G } from "../../common/context/hooks.es.js";
+import { useScreenSize as I } from "../../common/hooks/useScreenSize.es.js";
+import { useAriaLive as V } from "../../common/hooks/useAriaLive.es.js";
+import { formatCurrency as c } from "../../core/utils/NumberFormatting.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=SpendingDonut.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingDonut.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":"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"}

package/dist/spending/components/SpendingLegend.es.js

@@ -0,0 +1,46 @@
+import "react";
+import i from "@mui/material/Stack";
+import { Text as u } from "@mxenabled/mxui";
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+var x = ({ data: e, onSelected: n, selectedId: t }) => {
+  const d = (r, o) => {
+    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), n(o));
+  };
+  return /* @__PURE__ */ a(i, {
+    gap: 8,
+    height: "100%",
+    justifyContent: "center",
+    my: "auto",
+    children: e.categoryData.map((r) => /* @__PURE__ */ c(i, {
+      alignItems: "center",
+      "aria-label": r.name,
+      "aria-pressed": r.guid === t,
+      direction: "row",
+      gap: 8,
+      onClick: () => n(r.guid),
+      onKeyDown: (o) => d(o, r.guid),
+      role: "button",
+      sx: {
+        cursor: "pointer",
+        touchAction: "manipulation"
+      },
+      tabIndex: 0,
+      children: [/* @__PURE__ */ a(p, {
+        borderRadius: 4,
+        height: 8,
+        sx: { backgroundColor: r.color },
+        width: 8
+      }), /* @__PURE__ */ a(u, {
+        bold: r.guid === t,
+        variant: "caption",
+        children: r.name
+      })]
+    }, r.guid))
+  });
+};
+export {
+  x as default
+};
+
+//# sourceMappingURL=SpendingLegend.es.js.map

package/dist/spending/components/SpendingLegend.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingLegend.es.js","names":[],"sources":["../../../src/spending/components/SpendingLegend.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport type { SpendingData } from '../utils/SpendingData'\n\ninterface SpendingLegendProps {\n  data: SpendingData\n  onSelected: (id: string) => void\n  selectedId: string\n}\n\nconst SpendingLegend: React.FC<SpendingLegendProps> = ({ data, onSelected, selectedId }) => {\n  const handleKeyDown = (event: React.KeyboardEvent, guid: string) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onSelected(guid)\n    }\n  }\n\n  return (\n    <Stack gap={8} height=\"100%\" justifyContent=\"center\" my=\"auto\">\n      {data.categoryData.map((item) => (\n        <Stack\n          alignItems=\"center\"\n          aria-label={item.name}\n          aria-pressed={item.guid === selectedId}\n          direction=\"row\"\n          gap={8}\n          key={item.guid}\n          onClick={() => onSelected(item.guid)}\n          onKeyDown={(e) => handleKeyDown(e, item.guid)}\n          role=\"button\"\n          sx={{ cursor: 'pointer', touchAction: 'manipulation' }}\n          tabIndex={0}\n        >\n          <Box borderRadius={4} height={8} sx={{ backgroundColor: item.color }} width={8} />\n          <Text bold={item.guid === selectedId} variant=\"caption\">\n            {item.name}\n          </Text>\n        </Stack>\n      ))}\n    </Stack>\n  )\n}\n\nexport default SpendingLegend\n"],"mappings":";;;;;AAeA,IAAM,IAAA,CAAiD,EAAE,MAAA,GAAM,YAAA,GAAY,YAAA,EAAA,MAAiB;AAC1F,QAAM,IAAA,CAAiB,GAA4B,MAAiB;AAClE,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAW,CAAI;AAAA,EAEnB;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAG,QAAO;AAAA,IAAO,gBAAe;AAAA,IAAS,IAAG;AAAA,cACrD,EAAK,aAAa,IAAA,CAAK,MACtB,gBAAA,EAAC,GAAD;AAAA,MACE,YAAW;AAAA,MACX,cAAY,EAAK;AAAA,MACjB,gBAAc,EAAK,SAAS;AAAA,MAC5B,WAAU;AAAA,MACV,KAAK;AAAA,MAEL,SAAA,MAAe,EAAW,EAAK,IAAI;AAAA,MACnC,WAAA,CAAY,MAAM,EAAc,GAAG,EAAK,IAAI;AAAA,MAC5C,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAW,aAAa;AAAA,MAAe;AAAA,MACrD,UAAU;AAAA,gBAXZ,CAaE,gBAAA,EAAC,GAAD;AAAA,QAAK,cAAc;AAAA,QAAG,QAAQ;AAAA,QAAG,IAAI,EAAE,iBAAiB,EAAK,MAAM;AAAA,QAAG,OAAO;AAAA,MAAI,CAAA,GACjF,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK,SAAS;AAAA,QAAY,SAAQ;AAAA,kBAC3C,EAAK;AAAA,MACF,CAAA,CACD;AAAA,OAXA,EAAK,IAWL,CACR;AAAA,EACI,CAAA;AAEX"}

package/dist/spending/components/SpendingList.es.js

@@ -0,0 +1,124 @@
+import { useGlobalCopyStore as y } from "../../common/context/hooks.es.js";
+import { formatCurrency as l } from "../../core/utils/NumberFormatting.es.js";
+import f from "react";
+import { observer as x } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { Text as t } from "@mxenabled/mxui";
+import { jsx as i, jsxs as o } from "react/jsx-runtime";
+import b from "@mui/material/Box";
+import C from "@mui/material/Divider";
+import p from "@mui/material/List";
+import u from "@mui/material/ListItem";
+import h from "@mui/material/ListItemButton";
+import v from "@mui/material/Collapse";
+var w = ({ data: n, onSelected: g, selectedId: d = "", title: m }) => {
+  const { spending: c } = y(), a = n.categoryData.find((r) => r.guid === d);
+  return /* @__PURE__ */ o(s, {
+    direction: "column",
+    justifyContent: "center",
+    maxWidth: 400,
+    minWidth: 275,
+    width: "100%",
+    children: [
+      /* @__PURE__ */ i(t, {
+        bold: !0,
+        id: "spending-list-title",
+        sx: { py: 12 },
+        variant: "h3",
+        children: `${m} ${c.by_category}`
+      }),
+      /* @__PURE__ */ i(C, { "aria-hidden": "true" }),
+      /* @__PURE__ */ i(p, {
+        "aria-labelledby": "spending-list-title",
+        children: n.categoryData.map((r) => /* @__PURE__ */ o(f.Fragment, { children: [/* @__PURE__ */ i(u, {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            borderBottom: 1,
+            borderColor: "divider",
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ o(h, {
+            "aria-expanded": a?.guid === r.guid,
+            id: `spending-list-category-${r.guid}`,
+            onClick: () => g(r.guid),
+            sx: {
+              minHeight: 44,
+              px: 8,
+              py: 0
+            },
+            children: [/* @__PURE__ */ i(b, {
+              "aria-hidden": "true",
+              borderRadius: 4,
+              flexShrink: 0,
+              height: 8,
+              role: "presentation",
+              sx: {
+                backgroundColor: r.color,
+                mr: 8
+              },
+              width: 8
+            }), /* @__PURE__ */ o(s, {
+              alignItems: "center",
+              direction: "row",
+              justifyContent: "space-between",
+              width: "100%",
+              children: [/* @__PURE__ */ i(t, {
+                bold: d === r.guid,
+                children: r.name
+              }), /* @__PURE__ */ i(t, {
+                bold: d === r.guid,
+                variant: "body1",
+                children: l(r.amount, "0,0.00")
+              })]
+            })]
+          })
+        }), r.categoryTotals && r.categoryTotals.length > 0 && /* @__PURE__ */ i(v, {
+          in: a?.guid === r.guid,
+          unmountOnExit: !0,
+          children: /* @__PURE__ */ i(p, {
+            sx: {
+              borderBottom: 1,
+              borderColor: "divider"
+            },
+            children: a?.categoryTotals?.map((e) => /* @__PURE__ */ i(u, {
+              sx: {
+                pl: 12,
+                py: 0
+              },
+              children: /* @__PURE__ */ i(h, {
+                id: `spending-list-subcategory-${e.guid}`,
+                onClick: () => g(e.guid, !0),
+                sx: {
+                  minHeight: 44,
+                  px: 8,
+                  py: 0
+                },
+                children: /* @__PURE__ */ o(s, {
+                  direction: "row",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  children: [/* @__PURE__ */ o(t, { children: [e.name, " "] }), /* @__PURE__ */ i(t, { children: l(e.amount, "0,0.00") })]
+                })
+              })
+            }, e.guid))
+          })
+        })] }, r.guid))
+      }),
+      /* @__PURE__ */ i(t, {
+        bold: !0,
+        sx: {
+          mt: 12,
+          pr: 8,
+          textAlign: "right"
+        },
+        children: `${c.total}: ${l(n.totalAmount, "0,0.00")}`
+      })
+    ]
+  });
+}, _ = x(w);
+export {
+  _ as default
+};
+
+//# sourceMappingURL=SpendingList.es.js.map

package/dist/spending/components/SpendingList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingList.es.js","names":[],"sources":["../../../src/spending/components/SpendingList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Collapse from '@mui/material/Collapse'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { SpendingData } from '../utils/SpendingData'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface SpendingListProps {\n  data: SpendingData\n  onSelected: (id: string, isSubcategory?: boolean) => void\n  selectedId?: string\n  title: string\n}\n\nconst SpendingList: React.FC<SpendingListProps> = ({\n  data,\n  onSelected,\n  selectedId = '',\n  title,\n}) => {\n  const { spending: spendingCopy } = useGlobalCopyStore()\n  const selectedCategory = data.categoryData.find((parent) => parent.guid === selectedId)\n\n  return (\n    <Stack direction=\"column\" justifyContent=\"center\" maxWidth={400} minWidth={275} width=\"100%\">\n      <Text bold={true} id=\"spending-list-title\" sx={{ py: 12 }} variant=\"h3\">\n        {`${title} ${spendingCopy.by_category}`}\n      </Text>\n\n      <Divider aria-hidden=\"true\" />\n\n      <List aria-labelledby=\"spending-list-title\">\n        {data.categoryData.map((item) => (\n          <React.Fragment key={item.guid}>\n            <ListItem\n              disableGutters={true}\n              disablePadding={true}\n              sx={{\n                borderBottom: 1,\n                borderColor: 'divider',\n                minHeight: 44,\n              }}\n            >\n              <ListItemButton\n                aria-expanded={Boolean(selectedCategory?.guid === item.guid)}\n                id={`spending-list-category-${item.guid}`}\n                onClick={() => onSelected(item.guid)}\n                sx={{ minHeight: 44, px: 8, py: 0 }}\n              >\n                <Box\n                  aria-hidden=\"true\"\n                  borderRadius={4}\n                  flexShrink={0}\n                  height={8}\n                  role=\"presentation\"\n                  sx={{ backgroundColor: item.color, mr: 8 }}\n                  width={8}\n                />\n                <Stack\n                  alignItems=\"center\"\n                  direction=\"row\"\n                  justifyContent=\"space-between\"\n                  width=\"100%\"\n                >\n                  <Text bold={selectedId === item.guid}>{item.name}</Text>\n                  <Text bold={selectedId === item.guid} variant=\"body1\">\n                    {formatCurrency(item.amount, '0,0.00')}\n                  </Text>\n                </Stack>\n              </ListItemButton>\n            </ListItem>\n\n            {item.categoryTotals && item.categoryTotals.length > 0 && (\n              <Collapse in={Boolean(selectedCategory?.guid === item.guid)} unmountOnExit={true}>\n                <List sx={{ borderBottom: 1, borderColor: 'divider' }}>\n                  {selectedCategory?.categoryTotals?.map((subItem) => (\n                    <ListItem\n                      key={subItem.guid}\n                      sx={{\n                        pl: 12,\n                        py: 0,\n                      }}\n                    >\n                      <ListItemButton\n                        id={`spending-list-subcategory-${subItem.guid}`}\n                        onClick={() => onSelected(subItem.guid, true)}\n                        sx={{ minHeight: 44, px: 8, py: 0 }}\n                      >\n                        <Stack direction=\"row\" justifyContent=\"space-between\" width=\"100%\">\n                          <Text>{subItem.name} </Text>\n                          <Text>{formatCurrency(subItem.amount, '0,0.00')}</Text>\n                        </Stack>\n                      </ListItemButton>\n                    </ListItem>\n                  ))}\n                </List>\n              </Collapse>\n            )}\n          </React.Fragment>\n        ))}\n      </List>\n\n      <Text bold={true} sx={{ mt: 12, pr: 8, textAlign: 'right' }}>\n        {`${spendingCopy.total}: ${formatCurrency(data.totalAmount, '0,0.00')}`}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default observer(SpendingList)\n"],"mappings":"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"}

package/dist/spending/components/SpendingTabLabel.es.js

@@ -0,0 +1,22 @@
+import { formatCurrency as e } from "../../core/utils/NumberFormatting.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { Text as r } from "@mxenabled/mxui";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+var u = ({ amount: t, label: i, variant: n = "full" }) => /* @__PURE__ */ m(a, {
+  direction: "column",
+  children: [/* @__PURE__ */ o(r, {
+    bold: !0,
+    sx: { textTransform: "none" },
+    variant: "body1",
+    children: i
+  }), /* @__PURE__ */ o(r, {
+    variant: "caption",
+    children: e(t, n === "mini" ? "0,0" : "0,0.00")
+  })]
+});
+export {
+  u as default
+};
+
+//# sourceMappingURL=SpendingTabLabel.es.js.map

package/dist/spending/components/SpendingTabLabel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingTabLabel.es.js","names":[],"sources":["../../../src/spending/components/SpendingTabLabel.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface SpendingTabLabelProps {\n  amount: number\n  label: string\n  variant?: 'mini' | 'full'\n}\n\nconst SpendingTabLabel: React.FC<SpendingTabLabelProps> = ({ amount, label, variant = 'full' }) => {\n  return (\n    <Stack direction=\"column\">\n      <Text bold={true} sx={{ textTransform: 'none' }} variant=\"body1\">\n        {label}\n      </Text>\n      <Text variant=\"caption\">{formatCurrency(amount, variant === 'mini' ? '0,0' : '0,0.00')}</Text>\n    </Stack>\n  )\n}\n\nexport default SpendingTabLabel\n"],"mappings":";;;;;AAaA,IAAM,IAAA,CAAqD,EAAE,QAAA,GAAQ,OAAA,GAAO,SAAA,IAAU,OAAA,MAElF,gBAAA,EAAC,GAAD;AAAA,EAAO,WAAU;AAAA,YAAjB,CACE,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,IAAI,EAAE,eAAe,OAAO;AAAA,IAAG,SAAQ;AAAA,cACtD;AAAA,EACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,SAAQ;AAAA,cAAW,EAAe,GAAQ,MAAY,SAAS,QAAQ,QAAQ;AAAA,EAAQ,CAAA,CACxF"}

package/dist/spending/index.es.js

@@ -1,5 +1,5 @@
-import e from "./SpendingMiniWidget/index.es.js";
-import n from "./SpendingWidget/index.es.js";
+import e from "./SpendingMiniWidget.es.js";
+import n from "./SpendingWidget.es.js";
 export {
   e as SpendingMiniWidget,
   n as SpendingWidget

package/dist/spending/utils/SpendingData.es.js

@@ -0,0 +1,72 @@
+import { CategoryGuids as m } from "../../core/constants/Category.es.js";
+import { getCategoryColor as p } from "../../core/utils/CategoryUtil.es.js";
+var c = 5, f = (i, l, r, s) => s.reduce((a, n) => {
+  const t = i.find((d) => d.guid === n.category_guid);
+  if (!t) return a;
+  const e = t.parent_guid ?? t.guid, g = i.find((d) => d.guid === e);
+  if (!g || n.total <= 0) return a;
+  const o = {
+    guid: t.guid,
+    name: t.guid === e ? `${l.parent_category_totals_label_general} ${t.name}` : t.name,
+    color: p(g.guid, r),
+    amount: n.total
+  }, u = a.find((d) => d.guid === e);
+  return u ? (u.amount += n.total, u.categoryTotals?.push(o)) : a.push({
+    guid: e,
+    name: g.name,
+    color: p(g.guid, r),
+    categoryTotals: [o],
+    amount: n.total
+  }), a;
+}, []), C = (i, l, r, s) => {
+  const a = f(i, l, r, s).filter((o) => o.guid !== m.INCOME && o.guid !== m.INVESTMENTS && o.guid !== m.TRANSFER && o.amount > 0).sort((o, u) => u.amount - o.amount), n = a.reduce((o, u) => o + u.amount, 0), t = a.length > c ? c : a.length, e = a.slice(0, t), g = e.map((o) => ({
+    id: o.guid,
+    color: p(o.guid, r),
+    label: o.name,
+    value: o.amount / n * 100
+  }));
+  if (a.length > 5) {
+    const o = a.slice(c), u = o.reduce((d, _) => d + _.amount, 0);
+    e.push({
+      guid: "other",
+      color: r.palette.categories.others || "",
+      name: l.saving_goal_other,
+      categoryTotals: o,
+      amount: u
+    }), g.push({
+      id: "other",
+      color: r.palette.categories.others || "",
+      label: l.saving_goal_other,
+      value: u / n * 100
+    });
+  }
+  return {
+    categoryData: e,
+    donutData: g,
+    totalAmount: n
+  };
+}, T = (i, l, r) => {
+  const s = i.filter((t) => t.guid === m.INCOME || t.parent_guid === m.INCOME), a = l.filter((t) => s.some((e) => e.guid === t.category_guid)).sort((t, e) => t.total - e.total).map((t, e) => ({
+    guid: t.category_guid,
+    name: i.find((g) => g.guid === t.category_guid)?.name,
+    color: r[e % r.length],
+    categoryTotals: [],
+    amount: Math.abs(t.total)
+  })), n = a.reduce((t, e) => t + e.amount, 0);
+  return {
+    categoryData: a,
+    donutData: a.map((t) => ({
+      id: t.guid,
+      color: t.color,
+      label: t.name,
+      value: t.amount / n * 100
+    })),
+    totalAmount: n
+  };
+};
+export {
+  T as getIncomeData,
+  C as getSpendingData
+};
+
+//# sourceMappingURL=SpendingData.es.js.map

package/dist/spending/utils/SpendingData.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingData.es.js","names":[],"sources":["../../../src/spending/utils/SpendingData.ts"],"sourcesContent":["import { Theme } from '@mui/material'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport { CategoryGuids } from '../../core/constants'\nimport { Category, DateRangeCategoryTotals, GoalsCopy } from '../../core'\nimport type { DonutData } from '../../common/components/charts/Donut'\n\nconst TOP_CATEGORY_LENGTH = 5\n\nexport interface CategoryTotal {\n  guid: string\n  name: string\n  color: string\n  categoryTotals?: CategoryTotal[]\n  amount: number\n}\n\nexport interface SpendingData {\n  categoryData: CategoryTotal[]\n  donutData: DonutData[]\n  totalAmount: number\n}\n\n/**\n * Rolls all categories up into parent categories and return an array of CategoryTotal items.\n * @param categories - Array of all categories\n * @param theme - The current theme to use for colors\n * @param totals - And array of type DateRangeCategoryTotals\n */\nconst getTotalsByParentCategory = (\n  categories: Category[],\n  copy: GoalsCopy,\n  theme: Theme,\n  totals: DateRangeCategoryTotals[],\n): CategoryTotal[] => {\n  // Iterate over the category data from BE and roll up all categories into parent categories\n  // acc is the accumulated category totals of type CategoryTotal that is initialized as an empty []\n  // curr is the current DateRangeCategoryTotal\n  return totals.reduce((acc, curr) => {\n    // Find category and if it doesn't exist, return acc\n    const category = categories.find((c) => c.guid === curr.category_guid)\n    if (!category) return acc\n\n    // Find parent category and if it doesn't exist, return acc\n    const parentGuid = category.parent_guid ?? category.guid\n    const parentCategory = categories.find((c) => c.guid === parentGuid)\n    if (!parentCategory) return acc\n\n    // Skip negative totals — they represent credits/income/transfers, not spending\n    if (curr.total <= 0) return acc\n\n    const categoryTotal = {\n      guid: category.guid,\n      name:\n        category.guid === parentGuid\n          ? `${copy.parent_category_totals_label_general} ${category.name}`\n          : category.name,\n      color: getCategoryColor(parentCategory.guid, theme),\n      amount: curr.total,\n    }\n\n    // If parent category has already been added to acc then find it and add the current total,\n    // otherwise add the parent category to acc.\n    const parentCategoryTotal = acc.find((ct) => ct.guid === parentGuid)\n    if (parentCategoryTotal) {\n      parentCategoryTotal.amount += curr.total\n      parentCategoryTotal.categoryTotals?.push(categoryTotal)\n    } else {\n      acc.push({\n        guid: parentGuid,\n        name: parentCategory.name,\n        color: getCategoryColor(parentCategory.guid, theme),\n        categoryTotals: [categoryTotal],\n        amount: curr.total,\n      })\n    }\n\n    return acc\n  }, [] as CategoryTotal[])\n}\n\n/**\n * Returns an object of type SpendingData containing a subset of category totals related to spending\n * Excludes Income and Transfers\n *\n * @param categories - Array of all categories\n * @param copy - Localized copy\n * @param theme - The current theme to use for colors\n * @param totals - And array of type DateRangeCategoryTotals\n */\nexport const getSpendingData = (\n  categories: Category[],\n  copy: GoalsCopy, // TODO: Replace after `Other` is added to SpendingCopy\n  theme: Theme,\n  totals: DateRangeCategoryTotals[],\n): SpendingData => {\n  const parentCategoryTotals = getTotalsByParentCategory(categories, copy, theme, totals)\n\n  // Filter out Income and Transfers from spending totals\n  // Sort in decending order by amount\n  const spendingTotals = parentCategoryTotals\n    .filter(\n      (ct) =>\n        ct.guid !== CategoryGuids.INCOME &&\n        ct.guid !== CategoryGuids.INVESTMENTS &&\n        ct.guid !== CategoryGuids.TRANSFER &&\n        ct.amount > 0,\n    )\n    .sort((cat1, cat2) => cat2.amount - cat1.amount)\n\n  // Calculate the total spend\n  const totalAmount = spendingTotals.reduce(\n    (acc: number, total: CategoryTotal) => acc + total.amount,\n    0,\n  )\n\n  // Find the number of top categories to include\n  const length =\n    spendingTotals.length > TOP_CATEGORY_LENGTH ? TOP_CATEGORY_LENGTH : spendingTotals.length\n\n  // Only include the top categories\n  const categoryData = spendingTotals.slice(0, length)\n\n  // Map the category data to donut data\n  const donutData = categoryData.map((categoryTotal) => ({\n    id: categoryTotal.guid,\n    color: getCategoryColor(categoryTotal.guid, theme),\n    label: categoryTotal.name,\n    value: (categoryTotal.amount / totalAmount) * 100,\n  }))\n\n  // If there additional categories outside of the top categories, combine them into an Other category\n  if (spendingTotals.length > 5) {\n    const otherCategories = spendingTotals.slice(TOP_CATEGORY_LENGTH)\n    const otherTotal = otherCategories.reduce(\n      (acc: number, total: CategoryTotal) => acc + total.amount,\n      0,\n    )\n    categoryData.push({\n      guid: 'other',\n      color: theme.palette.categories.others || '',\n      name: copy.saving_goal_other,\n      categoryTotals: otherCategories,\n      amount: otherTotal,\n    })\n\n    donutData.push({\n      id: 'other',\n      color: theme.palette.categories.others || '',\n      label: copy.saving_goal_other,\n      value: (otherTotal / totalAmount) * 100,\n    })\n  }\n\n  // Return an object of type SpendingData\n  return {\n    categoryData,\n    donutData,\n    totalAmount,\n  }\n}\n\n/**\n * Returns an object of type SpendingData containing a subset of category totals related to income\n * Only includes Income subcategories\n *\n * @param categories - Array of all categories\n * @param monthlyTotals - And array of type DateRangeCategoryTotals\n * @param colors - An array of color strings to use for income colors\n */\nexport const getIncomeData = (\n  categories: Category[],\n  monthlyTotals: DateRangeCategoryTotals[],\n  colors: string[],\n): SpendingData => {\n  // Get all income subcategories\n  const incomeCategories = categories.filter(\n    (category) =>\n      category.guid === CategoryGuids.INCOME || category.parent_guid === CategoryGuids.INCOME,\n  )\n\n  // Filter, sort & map DateRangeCategoryTotals to CategoryTotal objects\n  // The filter return only subcategories with a parent category of Income\n  // The sort is in acending order due to amounts being negative\n  const incomeTotals: CategoryTotal[] = monthlyTotals\n    .filter((total) => incomeCategories.some((category) => category.guid === total.category_guid))\n    .sort((total1, total2) => total1.total - total2.total)\n    .map((total, index) => {\n      return {\n        guid: total.category_guid,\n        name: categories.find((cat) => cat.guid === total.category_guid)?.name,\n        color: colors[index % colors.length],\n        categoryTotals: [],\n        amount: Math.abs(total.total),\n      }\n    }) as CategoryTotal[]\n\n  // Calculates the total income amount\n  const totalAmount = incomeTotals.reduce(\n    (acc: number, total: CategoryTotal) => acc + total.amount,\n    0,\n  )\n\n  // Maps the income totals to donut data\n  const donutData = incomeTotals.map((incomeTotal) => ({\n    id: incomeTotal.guid,\n    color: incomeTotal.color,\n    label: incomeTotal.name,\n    value: (incomeTotal.amount / totalAmount) * 100,\n  }))\n\n  // Return an object of type SpendingData\n  return {\n    categoryData: incomeTotals,\n    donutData,\n    totalAmount,\n  }\n}\n"],"mappings":"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"}