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

package/dist/budgets/components/BubbleChart/Bubble/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/bubblechart/Bubble.tsx"],"sourcesContent":["import React from 'react'\n\nimport Tooltip from '@mui/material/Tooltip'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport Mercury from './Mercury'\n\nimport { useWidgetContainerProvider } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport type { BubbleData } from '../BubbleChart'\n\nconst LARGE_THRESHOLD = 75\nconst MEDIUM_THRESHOLD = 50\n\ninterface BubbleProps {\n  bubble: BubbleData\n  isDraggable: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const theme = useTheme()\n\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const budgetBubble = React.useMemo(() => {\n    if (!bubble) return undefined\n    return {\n      amount: bubble.amount,\n      budgetColors: bubble.budgetColors,\n      guid: bubble.guid,\n      radius: bubble.radius,\n      transaction_total: bubble.transaction_total,\n    }\n  }, [bubble.amount, bubble.budgetColors, bubble.guid, bubble.radius, bubble.transaction_total])\n\n  if (!bubble) return undefined\n\n  const {\n    budgetColors: { background, text: textColor },\n    category: { icon, name },\n    guid,\n    description,\n    radius,\n    x,\n    y,\n  } = bubble\n\n  const defaultSvgOffset = availableWidth < 400 ? -8 : -12\n\n  let iconX = defaultSvgOffset\n  let iconY = defaultSvgOffset\n\n  if (radius > LARGE_THRESHOLD) {\n    iconX = -14\n    iconY = -45\n  } else if (radius > MEDIUM_THRESHOLD) {\n    iconY = -32\n  }\n\n  let iconDimension = 32\n\n  if (radius <= LARGE_THRESHOLD) {\n    iconDimension = availableWidth < 400 ? 16 : 24\n  }\n\n  const tooltipText = `${bubble.category.name}: ${description}`\n  const tooltipPopperSlot = {\n    modifiers: [\n      {\n        name: 'offset',\n        options: { offset: [0, 15] },\n      },\n    ],\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick(bubble)\n    }\n  }\n\n  const handleFocus = () => {\n    setShowTooltip(true)\n  }\n\n  const handleBlur = () => {\n    setShowTooltip(false)\n  }\n\n  return (\n    <g\n      aria-label={`${name} - ${description}`}\n      className=\"bubble\"\n      id={`bubble-${guid}`}\n      key={guid}\n      onBlur={handleBlur}\n      onClick={() => onClick(bubble)}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      role=\"button\"\n      style={{ cursor: isDraggable ? 'pointer' : 'default', touchAction: 'manipulation' }}\n      tabIndex={0}\n      textAnchor=\"middle\"\n      x={x}\n      y={y}\n    >\n      <style>\n        {`\n          .bubble:focus,\n          .bubble:focus-visible {\n            outline: none;\n          }\n          .bubble:focus circle,\n          .bubble:focus-visible circle {\n            stroke: ${theme.palette.primary.main};\n            stroke-width: 3;\n            stroke-opacity: 0.8;\n          }\n        `}\n      </style>\n      <Tooltip open={showTooltip} slotProps={{ popper: tooltipPopperSlot }} title={tooltipText}>\n        <circle fill={background} id={`circle-${guid}`} r={radius} />\n      </Tooltip>\n\n      <svg x={iconX} y={iconY}>\n        <Icon name={icon} size={iconDimension} sx={{ fill: textColor }} />\n      </svg>\n\n      {radius > LARGE_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-category-${guid}`}\n          sx={{ fill: textColor }}\n          variant=\"body2\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={4}\n        >\n          {name}\n        </Text>\n      )}\n\n      {radius > MEDIUM_THRESHOLD && (\n        <Text\n          bold={true}\n          component=\"text\"\n          id={`budget-description-${guid}-1`}\n          sx={{ fill: textColor }}\n          variant=\"body1\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={radius <= LARGE_THRESHOLD ? 12 : 24}\n        >\n          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}\n        </Text>\n      )}\n\n      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (\n        <Text\n          component=\"text\"\n          id={`budget-description-${guid}-2`}\n          sx={{ fill: textColor }}\n          variant=\"caption\"\n          /* @ts-expect-error Property doesn't exist on type */\n          y={28}\n        >\n          {description.split(' ')[1]}\n        </Text>\n      )}\n\n      <Mercury bubble={budgetBubble as BubbleData} />\n    </g>\n  )\n}\n"],"mappings":"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"}

package/dist/budgets/components/BubbleChart/Mercury/index.es.js

@@ -0,0 +1,29 @@
+import { arcTween as f } from "../../../utils/BubblesSVG/index.es.js";
+import i from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { useTheme as p } from "@mui/material/styles";
+import * as r from "d3";
+var l = 5, y = 2e3, R = ({ bubble: a }) => {
+  const c = p(), { amount: m, guid: n, budgetColors: { mercury: u }, radius: s, transaction_total: d } = a, t = `mercury-${n}`;
+  return i.useEffect(() => {
+    r.select(`.${t}`).selectAll(".status").remove(), r.select(`.${t}`).append("path").transition().duration(y).delay(0).attr("class", "status").attr("style", `fill: ${u}; fill-opacity: 1;`).attrTween("d", () => f(a));
+  }, [
+    m,
+    s,
+    d
+  ]), /* @__PURE__ */ o("g", {
+    className: t,
+    children: /* @__PURE__ */ o("path", {
+      d: r.arc().innerRadius((e) => e - 2 * l).outerRadius((e) => e - l).startAngle(0).endAngle(2 * Math.PI)(s) || "",
+      style: {
+        fill: c.palette.common.white,
+        fillOpacity: 0.35
+      }
+    })
+  });
+}, A = i.memo(R);
+export {
+  A as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BubbleChart/Mercury/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/bubblechart/Mercury.tsx"],"sourcesContent":["import React from 'react'\nimport * as d3 from 'd3'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { arcTween } from '../../utils/BubblesSVG'\n\nimport type { BubbleData } from '../BubbleChart'\n\nconst PROGRESS_INDICATOR_SIZE = 5\nconst PROGRESS_DURATION = 2000\n\ninterface MercuryProps {\n  bubble: BubbleData\n}\n\nconst Mercury = ({ bubble }: MercuryProps) => {\n  const theme = useTheme()\n  const {\n    amount,\n    guid,\n    budgetColors: { mercury },\n    radius,\n    transaction_total,\n  } = bubble\n\n  const bubbleId = `mercury-${guid}`\n\n  React.useEffect(() => {\n    // Remove previous status arc\n    d3.select(`.${bubbleId}`).selectAll('.status').remove()\n\n    // Append updated status arc\n    d3.select(`.${bubbleId}`)\n      .append('path')\n      .transition()\n      .duration(PROGRESS_DURATION)\n      .delay(0)\n      .attr('class', 'status')\n      .attr('style', `fill: ${mercury}; fill-opacity: 1;`)\n      .attrTween('d', () => arcTween(bubble))\n  }, [amount, radius, transaction_total])\n\n  const trackArc = d3\n    .arc<number>()\n    .innerRadius((radius: number) => radius - 2 * PROGRESS_INDICATOR_SIZE)\n    .outerRadius((radius: number) => radius - PROGRESS_INDICATOR_SIZE)\n    .startAngle(0)\n    .endAngle(2 * Math.PI)\n\n  return (\n    <g className={bubbleId}>\n      <path\n        d={trackArc(radius) || ''}\n        style={{ fill: theme.palette.common.white, fillOpacity: 0.35 }}\n      />\n    </g>\n  )\n}\n\nexport default React.memo(Mercury)\n"],"mappings":";;;;;AASA,IAAM,IAA0B,GAC1B,IAAoB,KAMpB,IAAA,CAAW,EAAE,QAAA,EAAA,MAA2B;AAC5C,QAAM,IAAQ,EAAS,GACjB,EACJ,QAAA,GACA,MAAA,GACA,cAAc,EAAE,SAAA,EAAA,GAChB,QAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAW,WAAW,CAAA;AAE5B,SAAA,EAAM,UAAA,MAAgB;AAEpB,IAAA,EAAG,OAAO,IAAI,CAAA,EAAU,EAAE,UAAU,SAAS,EAAE,OAAO,GAGtD,EAAG,OAAO,IAAI,CAAA,EAAU,EACrB,OAAO,MAAM,EACb,WAAW,EACX,SAAS,CAAiB,EAC1B,MAAM,CAAC,EACP,KAAK,SAAS,QAAQ,EACtB,KAAK,SAAS,SAAS,CAAA,oBAA2B,EAClD,UAAU,KAAA,MAAW,EAAS,CAAM,CAAC;AAAA,EAC1C,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAQ;AAAA,EAAiB,CAAC,GAUpC,gBAAA,EAAC,KAAD;AAAA,IAAG,WAAW;AAAA,cACZ,gBAAA,EAAC,QAAD;AAAA,MACE,GAVW,EACd,IAAY,EACZ,YAAA,CAAa,MAAmB,IAAS,IAAI,CAAuB,EACpE,YAAA,CAAa,MAAmB,IAAS,CAAuB,EAChE,WAAW,CAAC,EACZ,SAAS,IAAI,KAAK,EAKZ,EAAS,CAAM,KAAK;AAAA,MACvB,OAAO;AAAA,QAAE,MAAM,EAAM,QAAQ,OAAO;AAAA,QAAO,aAAa;AAAA,MAAK;AAAA,IAC9D,CAAA;AAAA,EACA,CAAA;AAEP,GAEA,IAAe,EAAM,KAAK,CAAO"}

package/dist/budgets/components/BubbleChart/index.es.js

@@ -0,0 +1,59 @@
+import { useBudgetsStore as x } from "../../../common/context/hooks/index.es.js";
+import { computeScaledNodes as y, enableDrag as B, resize as E, simulate as R } from "../../utils/BubblesSVG/index.es.js";
+import { Bubble as C } from "../bubblechart/Bubble/index.es.js";
+import t from "react";
+import { observer as M } from "mobx-react-lite";
+import { jsx as d } from "react/jsx-runtime";
+var g = ({ height: o, width: s, isDraggable: i = !1, onClick: p = () => {
+} }) => {
+  const [v, f] = t.useState([]), r = t.useRef(null), b = t.useRef(!1), { detailedBudgets: c } = x(), l = t.useCallback(() => {
+    const e = r.current, u = R(c), m = u.nodes();
+    if (e) {
+      const N = e.nodes(), S = new Map(N.map((n) => [n.guid, n]));
+      m.forEach((n) => {
+        const a = S.get(n.guid);
+        a && Object.assign(n, {
+          vx: a.vx,
+          vy: a.vy,
+          x: a.x,
+          y: a.y
+        });
+      });
+    }
+    r.current = u, b.current = !1, f(m);
+  }, [c]);
+  return t.useEffect(() => {
+    l();
+  }, [l]), t.useEffect(() => () => {
+    r.current && (r.current.stop(), r.current = null);
+  }, []), t.useEffect(() => {
+    const e = r.current;
+    if (!e) return;
+    const u = y(e.nodes(), c, s > 0 && s < 450 || o > 0 && o < 300, o, s);
+    e.nodes(u), E(e, o, s), i && setTimeout(() => {
+      B(e);
+    }, 0), f([...u]);
+  }, [
+    o,
+    s,
+    i,
+    c
+  ]), /* @__PURE__ */ d("svg", {
+    height: o,
+    style: {
+      overflow: "visible",
+      touchAction: "manipulation"
+    },
+    width: Math.abs(s),
+    children: v.map((e) => /* @__PURE__ */ d(C, {
+      bubble: e,
+      isDraggable: i,
+      onClick: p
+    }, e.guid))
+  });
+}, _ = M(g);
+export {
+  _ as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BubbleChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/budgets/components/BubbleChart.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { SimulationNodeDatum } from 'd3-force'\n\nimport { useBudgetsStore } from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport {\n  computeScaledNodes,\n  enableDrag,\n  resize,\n  simulate,\n  type SimulationType,\n} from '../utils/BubblesSVG'\n\nimport { Bubble } from './bubblechart/Bubble'\n\nexport interface BubbleData extends DetailedBudget, SimulationNodeDatum {\n  radius: number\n}\n\ninterface BubbleChartProps {\n  height: number\n  width: number\n  isDraggable?: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nconst BubbleChart: React.FC<BubbleChartProps> = ({\n  height,\n  width,\n  isDraggable = false,\n  onClick = () => {},\n}) => {\n  const [simulationNodes, setSimulationNodes] = React.useState<BubbleData[]>([])\n\n  const simulationRef = React.useRef<SimulationType | null>(null)\n  const dragEnabledRef = React.useRef<boolean>(false)\n\n  const { detailedBudgets: budgets } = useBudgetsStore()\n\n  const updateSimulation = React.useCallback(() => {\n    const previousSimulation = simulationRef.current\n    const currentSimulation = simulate(budgets)\n    const currentNodes = currentSimulation.nodes()\n\n    if (previousSimulation) {\n      const previousNodes = previousSimulation.nodes()\n      const previousNodesMap = new Map(previousNodes.map((node) => [node.guid, node]))\n\n      currentNodes.forEach((node) => {\n        const previousNode = previousNodesMap.get(node.guid)\n        if (previousNode) {\n          Object.assign(node, {\n            vx: previousNode.vx,\n            vy: previousNode.vy,\n            x: previousNode.x,\n            y: previousNode.y,\n          })\n        }\n      })\n    }\n\n    simulationRef.current = currentSimulation\n    dragEnabledRef.current = false\n    setSimulationNodes(currentNodes)\n  }, [budgets])\n\n  React.useEffect(() => {\n    updateSimulation()\n  }, [updateSimulation])\n\n  React.useEffect(() => {\n    return () => {\n      if (simulationRef.current) {\n        simulationRef.current.stop()\n        simulationRef.current = null\n      }\n    }\n  }, [])\n\n  React.useEffect(() => {\n    const simulation = simulationRef.current\n    if (!simulation) return\n\n    const nodes = simulation.nodes()\n    const isCompact = (width > 0 && width < 450) || (height > 0 && height < 300)\n\n    const updatedNodes = computeScaledNodes(nodes, budgets, isCompact, height, width)\n    simulation.nodes(updatedNodes)\n    resize(simulation, height, width)\n\n    if (isDraggable) {\n      setTimeout(() => {\n        enableDrag(simulation)\n      }, 0)\n    }\n\n    setSimulationNodes([...updatedNodes])\n  }, [height, width, isDraggable, budgets])\n\n  return (\n    <svg\n      height={height}\n      style={{ overflow: 'visible', touchAction: 'manipulation' }}\n      width={Math.abs(width)}\n    >\n      {simulationNodes.map((bubble) => (\n        <Bubble bubble={bubble} isDraggable={isDraggable} key={bubble.guid} onClick={onClick} />\n      ))}\n    </svg>\n  )\n}\n\nexport default observer(BubbleChart)\n"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAA2C,EAC/C,QAAA,GACA,OAAA,GACA,aAAA,IAAc,IACd,SAAA,IAAA,MAAgB;AAAC,EAAA,MACb;AACJ,QAAM,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAuB,CAAC,CAAC,GAEvE,IAAgB,EAAM,OAA8B,IAAI,GACxD,IAAiB,EAAM,OAAgB,EAAK,GAE5C,EAAE,iBAAiB,EAAA,IAAY,EAAgB,GAE/C,IAAmB,EAAM,YAAA,MAAkB;AAC/C,UAAM,IAAqB,EAAc,SACnC,IAAoB,EAAS,CAAO,GACpC,IAAe,EAAkB,MAAM;AAE7C,QAAI,GAAoB;AACtB,YAAM,IAAgB,EAAmB,MAAM,GACzC,IAAmB,IAAI,IAAI,EAAc,IAAA,CAAK,MAAS,CAAC,EAAK,MAAM,CAAI,CAAC,CAAC;AAE/E,MAAA,EAAa,QAAA,CAAS,MAAS;AAC7B,cAAM,IAAe,EAAiB,IAAI,EAAK,IAAI;AACnD,QAAI,KACF,OAAO,OAAO,GAAM;AAAA,UAClB,IAAI,EAAa;AAAA,UACjB,IAAI,EAAa;AAAA,UACjB,GAAG,EAAa;AAAA,UAChB,GAAG,EAAa;AAAA,QAClB,CAAC;AAAA,MAEL,CAAC;AAAA,IACH;AAEA,IAAA,EAAc,UAAU,GACxB,EAAe,UAAU,IACzB,EAAmB,CAAY;AAAA,EACjC,GAAG,CAAC,CAAO,CAAC;AAEZ,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAiB;AAAA,EACnB,GAAG,CAAC,CAAgB,CAAC,GAErB,EAAM,UAAA,MACJ,MAAa;AACX,IAAI,EAAc,YAChB,EAAc,QAAQ,KAAK,GAC3B,EAAc,UAAU;AAAA,EAE5B,GACC,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAa,EAAc;AACjC,QAAI,CAAC,EAAY;AAKjB,UAAM,IAAe,EAHP,EAAW,MAGe,GAAO,GAF5B,IAAQ,KAAK,IAAQ,OAAS,IAAS,KAAK,IAAS,KAEL,GAAQ,CAAK;AAChF,IAAA,EAAW,MAAM,CAAY,GAC7B,EAAO,GAAY,GAAQ,CAAK,GAE5B,KACF,WAAA,MAAiB;AACf,MAAA,EAAW,CAAU;AAAA,IACvB,GAAG,CAAC,GAGN,EAAmB,CAAC,GAAG,CAAY,CAAC;AAAA,EACtC,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAa;AAAA,EAAO,CAAC,GAGtC,gBAAA,EAAC,OAAD;AAAA,IACU,QAAA;AAAA,IACR,OAAO;AAAA,MAAE,UAAU;AAAA,MAAW,aAAa;AAAA,IAAe;AAAA,IAC1D,OAAO,KAAK,IAAI,CAAK;AAAA,cAEpB,EAAgB,IAAA,CAAK,MACpB,gBAAA,EAAC,GAAD;AAAA,MAAgB,QAAA;AAAA,MAAqB,aAAA;AAAA,MAAwC,SAAA;AAAA,IAAU,GAAhC,EAAO,IAAyB,CACxF;AAAA,EACE,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}

package/dist/budgets/components/BudgetDetailsDrawer/index.es.js

@@ -0,0 +1,106 @@
+import { buildDynamicCopy as c } from "../../../core/utils/Localization/index.es.js";
+import { useBudgetsStore as E, useGlobalCopyStore as N, useGlobalUiStore as P, useTransactionStore as G } from "../../../common/context/hooks/index.es.js";
+import _ from "../../../common/components/dialog/Dialog/index.es.js";
+import I from "../../../common/components/drawer/Drawer/index.es.js";
+import { BudgetAmount as $ } from "../shared/BudgetAmount/index.es.js";
+import { BudgetDetails as j } from "../budgetdetails/BudgetDetails/index.es.js";
+import r from "react";
+import { observer as F } from "mobx-react-lite";
+import { Text as R } from "@mxenabled/mxui";
+import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import U from "@mui/material/Alert";
+import k from "@mui/material/Snackbar";
+var Z = F(() => {
+  const { selectedAccountGuids: b } = P(), { budgets: t, common: n } = N(), { alert: d, dateRange: h, deleteBudget: C, selectedBudget: e, selectedSubBudget: S, setAlert: a, setSelectedBudget: B, updateBudget: A } = E(), { setFilter: D } = G(), [v, u] = r.useState(!1), [x, s] = r.useState(!1), [O, m] = r.useState(!1), [i, l] = r.useState("");
+  r.useEffect(() => {
+    e && !S && (l(`${e.amount}`), u(!0), D({
+      accounts: b,
+      dateRange: h,
+      custom: (y) => y.category_guid === e.category_guid || y.top_level_category_guid === e.category_guid,
+      showSplits: !0
+    }));
+  }, [e]);
+  const T = async () => {
+    e && (await A({
+      ...e,
+      amount: Number(i),
+      percentage: e.category.totalAmount / Number(i) * 100
+    }), s(!1), a(c(t.alert_budget_updated, e.category.name)));
+  }, w = async () => {
+    e && (await C(e.guid), a(c(t.alert_budget_deleted, e.category.name))), p();
+  }, p = () => {
+    u(!1), setTimeout(() => {
+      B(void 0);
+    }, 250);
+  }, g = () => {
+    s(!1), l(`${e?.amount}`);
+  };
+  if (e)
+    return /* @__PURE__ */ f(r.Fragment, { children: [
+      /* @__PURE__ */ f(I, {
+        ariaLabelClose: n.close_aria,
+        isOpen: v,
+        onClose: p,
+        onPrimaryAction: () => s(!0),
+        onSecondaryAction: () => m(!0),
+        primaryText: t.details_edit_button,
+        secondaryColor: "error",
+        secondaryText: t.details_delete_button,
+        title: t.details_title,
+        children: [/* @__PURE__ */ o(j, { budget: e }), /* @__PURE__ */ o(k, {
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "right"
+          },
+          autoHideDuration: 3500,
+          onClose: () => a(""),
+          open: !!d,
+          children: /* @__PURE__ */ o(U, {
+            closeText: "",
+            onClose: () => a(""),
+            severity: "success",
+            variant: "filled",
+            children: d
+          })
+        })]
+      }),
+      /* @__PURE__ */ o(_, {
+        copy: {
+          close_aria: n.close_aria,
+          title: t.details_edit_title
+        },
+        disablePrimaryButton: Number(i) <= 0,
+        isOpen: x,
+        onClose: g,
+        onPrimaryAction: T,
+        onSecondaryAction: g,
+        primaryText: t.edit_save_button,
+        children: /* @__PURE__ */ o($, {
+          amount: i,
+          categoryName: e.category.name,
+          onAmountChanged: l
+        })
+      }),
+      /* @__PURE__ */ o(_, {
+        copy: {
+          close_aria: n.close_aria,
+          title: t.delete_title
+        },
+        isOpen: O,
+        onClose: () => m(!1),
+        onPrimaryAction: w,
+        primaryColor: "error",
+        primaryText: t.details_delete_button,
+        secondaryColor: "secondary",
+        children: /* @__PURE__ */ o(R, {
+          variant: "subtitle1",
+          children: c(t.delete_description, e.category.name)
+        })
+      })
+    ] });
+});
+export {
+  Z as BudgetDetailsDrawer
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BudgetDetailsDrawer/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/budgets/components/BudgetDetailsDrawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  Dialog,\n  Drawer,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { type Budget, type Transaction } from '../../core'\n\nimport { BudgetDetails } from './budgetdetails/BudgetDetails'\nimport { BudgetAmount } from './shared/BudgetAmount'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport const BudgetDetailsDrawer = observer(() => {\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const {\n    alert,\n    dateRange,\n    deleteBudget,\n    selectedBudget,\n    selectedSubBudget,\n    setAlert,\n    setSelectedBudget,\n    updateBudget,\n  } = useBudgetsStore()\n  const { setFilter } = useTransactionStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isEditOpen, setIsEditOpen] = React.useState(false)\n  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(``)\n\n  React.useEffect(() => {\n    if (selectedBudget && !selectedSubBudget) {\n      setAmount(`${selectedBudget.amount}`)\n      setIsOpen(true)\n      setFilter({\n        accounts: selectedAccountGuids,\n        dateRange: dateRange,\n        custom: (t: Transaction) =>\n          t.category_guid === selectedBudget.category_guid ||\n          t.top_level_category_guid === selectedBudget.category_guid,\n        showSplits: true,\n      })\n    }\n  }, [selectedBudget])\n\n  const handleUpdateBudget = async () => {\n    if (selectedBudget) {\n      await updateBudget({\n        ...selectedBudget,\n        amount: Number(amount),\n        percentage: (selectedBudget.category.totalAmount / Number(amount)) * 100,\n      } as Budget)\n      setIsEditOpen(false)\n      setAlert(buildDynamicCopy(copy.alert_budget_updated, selectedBudget.category.name) as string)\n    }\n  }\n\n  const handleDeleteBudget = async () => {\n    if (selectedBudget) {\n      await deleteBudget(selectedBudget.guid)\n      setAlert(buildDynamicCopy(copy.alert_budget_deleted, selectedBudget.category.name) as string)\n    }\n    handleClose()\n  }\n\n  const handleClose = () => {\n    setIsOpen(false)\n    // Wait for the close animation before set the selected budget\n    setTimeout(() => {\n      setSelectedBudget(undefined)\n    }, 250)\n  }\n\n  const handleEditClose = () => {\n    setIsEditOpen(false)\n    setAmount(`${selectedBudget?.amount}`)\n  }\n\n  if (!selectedBudget) {\n    return undefined\n  }\n\n  return (\n    <React.Fragment>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={() => setIsEditOpen(true)}\n        onSecondaryAction={() => setIsDeleteOpen(true)}\n        primaryText={copy.details_edit_button}\n        secondaryColor=\"error\"\n        secondaryText={copy.details_delete_button}\n        title={copy.details_title}\n      >\n        <BudgetDetails budget={selectedBudget} />\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          autoHideDuration={3500}\n          onClose={() => setAlert('')}\n          open={Boolean(alert)}\n        >\n          <Alert closeText=\"\" onClose={() => setAlert('')} severity={'success'} variant=\"filled\">\n            {alert}\n          </Alert>\n        </Snackbar>\n      </Drawer>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isEditOpen}\n        onClose={handleEditClose}\n        onPrimaryAction={handleUpdateBudget}\n        onSecondaryAction={handleEditClose}\n        primaryText={copy.edit_save_button}\n      >\n        <BudgetAmount\n          amount={amount}\n          categoryName={selectedBudget.category.name}\n          onAmountChanged={setAmount}\n        />\n      </Dialog>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}\n        isOpen={isDeleteOpen}\n        onClose={() => setIsDeleteOpen(false)}\n        onPrimaryAction={handleDeleteBudget}\n        primaryColor=\"error\"\n        primaryText={copy.details_delete_button}\n        secondaryColor=\"secondary\"\n      >\n        <Text variant=\"subtitle1\">\n          {buildDynamicCopy(copy.delete_description, selectedBudget.category.name) as string}\n        </Text>\n      </Dialog>\n    </React.Fragment>\n  )\n})\n"],"mappings":"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"}

package/dist/budgets/components/BudgetDetailsDrawerV2/index.es.js

@@ -0,0 +1,126 @@
+import { buildDynamicCopy as _ } from "../../../core/utils/Localization/index.es.js";
+import { useBudgetsStore as z, useGlobalCopyStore as M, useGlobalUiStore as k, useTransactionStore as H } from "../../../common/context/hooks/index.es.js";
+import U from "../../../common/components/drawer/Drawer/index.es.js";
+import { getCategoryColor as T } from "../../../core/utils/CategoryUtil/index.es.js";
+import { getRemainingAmountSpentPercentage as W } from "../../../core/utils/BudgetUtil/index.es.js";
+import q from "../../../common/components/Loader/index.es.js";
+import J from "../../../common/components/CurrencyDialog/index.es.js";
+import K from "../../../transactions/components/shared/TransactionList/index.es.js";
+import { BudgetDetailsTopSection as Q } from "../shared/BudgetDetailsTopSection/index.es.js";
+import i from "react";
+import { observer as X } from "mobx-react-lite";
+import { CategoryIcon as Y } from "@mxenabled/mxui";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { alpha as Z, useTheme as ee } from "@mui/material/styles";
+import te from "@mui/material/Alert";
+import oe from "@mui/material/Snackbar";
+var c = {
+  CANCEL_DELETE: "Cancel - Delete",
+  END_SAVE: "End - Save",
+  END_DELETE: "End - Delete",
+  START_DELETE: "Start - Delete"
+}, re = ({ onClose: A, onEvent: s, onViewHistory: L, transactionListProps: x }) => {
+  const { alert: u, dateRange: f, deleteBudget: B, selectedBudget: e, selectedSubBudget: N, setAlert: m, setSelectedBudget: v, updateBudget: w } = z(), { budgets: o, common: p } = M(), { isCopyLoaded: G, selectedAccountGuids: R } = k(), E = ee(), { setFilter: V } = H(), [a, d] = i.useState(""), [t, n] = i.useState(null), [P, C] = i.useState(!1), g = i.useRef(!1);
+  if (i.useEffect(() => {
+    !e || N || (d(`${e.amount}`), V({
+      accounts: R,
+      dateRange: f,
+      custom: ({ category_guid: l, top_level_category_guid: y }) => {
+        const { category_guid: D } = e;
+        return l === D || y === D;
+      }
+    }), C(!0));
+  }, [e]), !G) return /* @__PURE__ */ r(q, {});
+  if (!e) return null;
+  const b = () => {
+    d(""), n(null), C(!1), setTimeout(() => {
+      v(void 0), A?.();
+    }, 250);
+  }, S = () => {
+    t === "delete" && s?.(c.CANCEL_DELETE, a), d(e.amount ? `${e.amount}` : ""), n(null);
+  }, F = async () => {
+    if (t === "edit") {
+      if (g.current) return;
+      g.current = !0, await w({
+        ...e,
+        amount: Number(a)
+      }), s?.(c.END_SAVE, a), m(_(o.alert_budget_updated, e.category.name)), n(null), g.current = !1;
+    }
+    t === "delete" && (await B(e.guid), s?.(c.END_DELETE, a), b());
+  }, { remainingAmount: O, spentPercentage: $, iconColor: I } = W(e.transaction_total ?? 0, e.amount ?? 0), j = (l, y) => _(l, /* @__PURE__ */ r("b", { children: y }));
+  return /* @__PURE__ */ h(i.Fragment, { children: [/* @__PURE__ */ h(U, {
+    ariaLabelClose: p.close_aria,
+    footerStyles: {
+      px: 24,
+      py: 16
+    },
+    isOpen: P,
+    onClose: b,
+    onPrimaryAction: () => n("edit"),
+    onSecondaryAction: () => {
+      s?.(c.START_DELETE, a), n("delete");
+    },
+    primaryText: o.details_edit_button,
+    secondaryColor: "error",
+    secondaryText: o.details_delete_button,
+    sx: { "& .list-wrapper": { pr: 24 } },
+    title: _(o.details_type_title, e.category.name),
+    children: [
+      /* @__PURE__ */ r(Q, {
+        amount: e.amount,
+        icon: /* @__PURE__ */ r(Y, {
+          categoryGuid: e.category.guid,
+          size: 44,
+          sx: {
+            bgcolor: Z(T(e.category.guid, E), 0.15),
+            border: `1px solid ${T(e.category.guid, E)}`,
+            color: "text.primary"
+          }
+        }),
+        iconColor: I,
+        onViewHistory: L,
+        remainingAmount: O,
+        spentPercentage: $,
+        startDate: (f.start.getTime() ?? 0) / 1e3,
+        totalTransaction: e.transaction_total
+      }),
+      /* @__PURE__ */ r(K, { ...x }),
+      u && /* @__PURE__ */ r(oe, {
+        anchorOrigin: {
+          horizontal: "right",
+          vertical: "bottom"
+        },
+        autoHideDuration: 3500,
+        onClose: () => m(""),
+        open: !!u,
+        children: /* @__PURE__ */ r(te, {
+          closeText: "",
+          onClose: () => m(""),
+          severity: "success",
+          variant: "filled",
+          children: u
+        })
+      })
+    ]
+  }), t && /* @__PURE__ */ r(J, {
+    closeAriaLabel: p.close_aria,
+    content: j(o[t === "edit" ? "edit_budget_content" : "delete_description"], e.category.name),
+    handleInputChange: (l) => d(l.toString()),
+    handleModalClose: S,
+    handlePrimaryAction: F,
+    handleSecondaryAction: S,
+    inputLabel: t === "edit" ? o.details_edit_title : "",
+    inputValue: a,
+    isOpen: !0,
+    primaryColor: t === "edit" ? "primary" : "error",
+    primaryText: o[t === "edit" ? "add_save_button" : "details_delete_button"],
+    secondaryColor: t === "edit" ? "primary" : "inherit",
+    secondaryText: p.cancel_button,
+    title: o[t === "edit" ? "details_edit_title" : "delete_title"]
+  })] });
+}, be = X(re);
+export {
+  be as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BudgetDetailsDrawerV2/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/budgets/components/BudgetDetailsDrawerV2.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\n\nimport Snackbar from '@mui/material/Snackbar'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon } from '@mxenabled/mxui'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport {\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { type Budget, type Transaction } from '../../core'\nimport { CurrencyDialog, Drawer, Loader } from '../../common/components'\nimport { TransactionList } from '../../transactions'\nimport { type TransactionListProps } from '../../transactions/components/shared/TransactionList'\n\nimport { getRemainingAmountSpentPercentage } from '../../core/utils/BudgetUtil'\n\nimport { BudgetDetailsTopSection } from './shared/BudgetDetailsTopSection'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nenum Action {\n  DELETE = 'delete',\n  EDIT = 'edit',\n}\n\ninterface BudgetDetailsDrawerV2Props {\n  onClose?: () => void\n  onEvent?: (event: string, amount: string) => void\n  onViewHistory?: () => void\n  transactionListProps?: TransactionListProps\n}\n\nconst EVENT_MESSAGES = {\n  CANCEL_DELETE: 'Cancel - Delete',\n  END_SAVE: 'End - Save',\n  END_DELETE: 'End - Delete',\n  START_DELETE: 'Start - Delete',\n}\n\n// V2 implementation of Budget Details Drawer.\n// This will replace BudgetDetailsDrawer\n// after the PFM design is finalized\n// and aligned with Insights.\n\nconst BudgetDetailsDrawerV2 = ({\n  onClose,\n  onEvent,\n  onViewHistory,\n  transactionListProps,\n}: BudgetDetailsDrawerV2Props) => {\n  const {\n    alert,\n    dateRange,\n    deleteBudget,\n    selectedBudget,\n    selectedSubBudget,\n    setAlert,\n    setSelectedBudget,\n    updateBudget,\n  } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isCopyLoaded, selectedAccountGuids } = useGlobalUiStore()\n  const theme = useTheme()\n  const { setFilter } = useTransactionStore()\n\n  const [amount, setAmount] = React.useState('')\n  const [formAction, setFormAction] = React.useState<Action | null>(null)\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const inProgress = React.useRef(false)\n\n  React.useEffect(() => {\n    if (!selectedBudget || selectedSubBudget) return\n\n    setAmount(`${selectedBudget.amount}`)\n    setFilter({\n      accounts: selectedAccountGuids,\n      dateRange,\n      custom: ({ category_guid, top_level_category_guid }: Transaction) => {\n        const { category_guid: budgetCategoryGuid } = selectedBudget\n        return (\n          category_guid === budgetCategoryGuid || top_level_category_guid === budgetCategoryGuid\n        )\n      },\n    })\n    setIsOpen(true)\n  }, [selectedBudget])\n\n  if (!isCopyLoaded) return <Loader />\n  if (!selectedBudget) return null\n\n  const handleClose = () => {\n    setAmount('')\n    setFormAction(null)\n    setIsOpen(false)\n\n    setTimeout(() => {\n      setSelectedBudget(undefined)\n      onClose?.()\n    }, 250)\n  }\n\n  const handleFormDialogClose = () => {\n    if (formAction === Action.DELETE) onEvent?.(EVENT_MESSAGES.CANCEL_DELETE, amount)\n\n    setAmount(selectedBudget.amount ? `${selectedBudget.amount}` : '')\n    setFormAction(null)\n  }\n\n  const handlePrimaryAction = async () => {\n    if (formAction === Action.EDIT) {\n      if (inProgress.current) return\n      inProgress.current = true\n\n      await updateBudget({\n        ...selectedBudget,\n        amount: Number(amount),\n      } as Budget)\n      onEvent?.(EVENT_MESSAGES.END_SAVE, amount)\n\n      setAlert(\n        buildDynamicCopy(budgetsCopy.alert_budget_updated, selectedBudget.category.name) as string,\n      )\n      setFormAction(null)\n\n      inProgress.current = false\n    }\n\n    if (formAction === Action.DELETE) {\n      await deleteBudget(selectedBudget.guid)\n      onEvent?.(EVENT_MESSAGES.END_DELETE, amount)\n\n      handleClose()\n    }\n  }\n\n  const { remainingAmount, spentPercentage, iconColor } = getRemainingAmountSpentPercentage(\n    selectedBudget.transaction_total ?? 0,\n    selectedBudget.amount ?? 0,\n  )\n\n  const buildCopyWithBold = (copyKey: string, content: React.ReactNode): string => {\n    return buildDynamicCopy(copyKey, <b>{content}</b>) as string\n  }\n\n  return (\n    <React.Fragment>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        footerStyles={{\n          px: 24,\n          py: 16,\n        }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={() => setFormAction(Action.EDIT)}\n        onSecondaryAction={() => {\n          onEvent?.(EVENT_MESSAGES.START_DELETE, amount)\n          setFormAction(Action.DELETE)\n        }}\n        primaryText={budgetsCopy.details_edit_button}\n        secondaryColor=\"error\"\n        secondaryText={budgetsCopy.details_delete_button}\n        sx={{\n          '& .list-wrapper': {\n            pr: 24,\n          },\n        }}\n        title={\n          buildDynamicCopy(budgetsCopy.details_type_title, selectedBudget.category.name) as string\n        }\n      >\n        <BudgetDetailsTopSection\n          amount={selectedBudget.amount}\n          icon={\n            <CategoryIcon\n              categoryGuid={selectedBudget.category.guid}\n              size={44}\n              sx={{\n                bgcolor: alpha(getCategoryColor(selectedBudget.category.guid, theme), 0.15),\n                border: `1px solid ${getCategoryColor(selectedBudget.category.guid, theme)}`,\n                color: 'text.primary',\n              }}\n            />\n          }\n          iconColor={iconColor}\n          onViewHistory={onViewHistory}\n          remainingAmount={remainingAmount}\n          spentPercentage={spentPercentage}\n          startDate={(dateRange.start.getTime() ?? 0) / 1000}\n          totalTransaction={selectedBudget.transaction_total}\n        />\n        <TransactionList {...transactionListProps} />\n        {alert && (\n          <Snackbar\n            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\n            autoHideDuration={3500}\n            onClose={() => setAlert('')}\n            open={Boolean(alert)}\n          >\n            <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n              {alert}\n            </Alert>\n          </Snackbar>\n        )}\n      </Drawer>\n      {formAction && (\n        <CurrencyDialog\n          closeAriaLabel={commonCopy.close_aria}\n          content={buildCopyWithBold(\n            budgetsCopy[formAction === Action.EDIT ? 'edit_budget_content' : 'delete_description'],\n            selectedBudget.category.name,\n          )}\n          handleInputChange={(value) => setAmount(value.toString())}\n          handleModalClose={handleFormDialogClose}\n          handlePrimaryAction={handlePrimaryAction}\n          handleSecondaryAction={handleFormDialogClose}\n          inputLabel={formAction === Action.EDIT ? budgetsCopy.details_edit_title : ''}\n          inputValue={amount}\n          isOpen={true}\n          primaryColor={formAction === Action.EDIT ? 'primary' : 'error'}\n          primaryText={\n            budgetsCopy[formAction === Action.EDIT ? 'add_save_button' : 'details_delete_button']\n          }\n          secondaryColor={formAction === Action.EDIT ? 'primary' : 'inherit'}\n          secondaryText={commonCopy.cancel_button}\n          title={budgetsCopy[formAction === Action.EDIT ? 'details_edit_title' : 'delete_title']}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default observer(BudgetDetailsDrawerV2)\n"],"mappings":"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"}

package/dist/budgets/components/BudgetList/BudgetRow/index.es.js

@@ -0,0 +1,71 @@
+import { formatCurrency as c } from "../../../../core/utils/NumberFormatting/index.es.js";
+import h from "../../../../common/components/donuts/SingleSegmentDonut/index.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { CategoryIcon as b, Text as o } from "@mxenabled/mxui";
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import y from "@mui/material/ListItem";
+import v from "@mui/material/ListItemButton";
+import x from "@mui/material/ListItemText";
+import C from "@mui/material/ListItemAvatar";
+var _ = ({ budget: r, onClick: m }) => {
+  const { amount: s, budgetColors: { background: d, description: p }, category_guid: l, description: u, percentage: i, subBudgets: f, transaction_total: g } = r, n = i > 100;
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ e(v, {
+    onClick: () => m?.(r),
+    children: [/* @__PURE__ */ t(C, {
+      sx: {
+        mb: -8,
+        mr: 16
+      },
+      children: /* @__PURE__ */ t(h, {
+        color: d,
+        percent: i,
+        size: 40,
+        children: /* @__PURE__ */ t(b, {
+          categoryGuid: l,
+          variant: "basic"
+        })
+      })
+    }), /* @__PURE__ */ t(x, {
+      primary: /* @__PURE__ */ e(a, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ t(o, {
+          bold: !0,
+          variant: "body1",
+          children: r.category.name
+        }), /* @__PURE__ */ t(o, {
+          fontWeight: 400,
+          variant: "body1",
+          children: `
+                  ${c(g, "0,0")} /
+                  ${c(s, "0,0")}
+                `
+        })]
+      }),
+      secondary: /* @__PURE__ */ e(a, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [/* @__PURE__ */ t(o, {
+          variant: "caption",
+          children: `${f.length} Sub-budgets`
+        }), /* @__PURE__ */ t(o, {
+          bold: n,
+          sx: {
+            color: p,
+            ...n && { ".MuiListItemButton-root:hover &, .MuiListItemButton-root:active &": { color: "error.dark" } }
+          },
+          variant: "caption",
+          children: u
+        })]
+      })
+    })]
+  }) });
+};
+export {
+  _ as BudgetRow
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BudgetList/BudgetRow/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/budgetlist/BudgetRow.tsx"],"sourcesContent":["import React from 'react'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface BudgetRowProps {\n  budget: DetailedBudget\n  onClick?: (budget: DetailedBudget) => void\n}\n\nexport const BudgetRow: React.FC<BudgetRowProps> = ({ budget, onClick }) => {\n  const {\n    amount,\n    budgetColors: { background, description: descriptionColor },\n    category_guid,\n    description,\n    percentage,\n    subBudgets,\n    transaction_total,\n  } = budget\n\n  const overBudget = percentage > 100\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => onClick?.(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} /\n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text variant=\"caption\">{`${subBudgets.length} Sub-budgets`}</Text>\n              <Text\n                bold={overBudget}\n                sx={{\n                  color: descriptionColor,\n                  ...(overBudget && {\n                    '.MuiListItemButton-root:hover &, .MuiListItemButton-root:active &': {\n                      color: 'error.dark',\n                    },\n                  }),\n                }}\n                variant=\"caption\"\n              >\n                {description}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,IAAA,CAAuC,EAAE,QAAA,GAAQ,SAAA,EAAA,MAAc;AAC1E,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,GAAY,aAAa,EAAA,GACzC,eAAA,GACA,aAAA,GACA,YAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,IAAa,IAAa;AAEhC,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,IAAU,CAAM;AAAA,cAA/C,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACnC,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,kBAChE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAe,SAAQ;AAAA,QAAS,CAAA;AAAA,MAC1C,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBAAvD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAO,SAAS;AAAA,QACb,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,oBAC5B;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA,CACD;AAAA;MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBAAvD,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAW,GAAG,EAAW,MAAA;AAAA,QAA2B,CAAA,GAClE,gBAAA,EAAC,GAAD;AAAA,UACE,MAAM;AAAA,UACN,IAAI;AAAA,YACF,OAAO;AAAA,YACP,GAAI,KAAc,EAChB,qEAAqE,EACnE,OAAO,aACT,EACF;AAAA,UACF;AAAA,UACA,SAAQ;AAAA,oBAEP;AAAA,QACG,CAAA,CACD;AAAA;IAEV,CAAA,CACa;AAAA,KACR,CAAA;AAEd"}

package/dist/budgets/components/BudgetList/SubBudgetRow/index.es.js

@@ -0,0 +1,62 @@
+import { useBudgetsStore as d } from "../../../../common/context/hooks/index.es.js";
+import { formatCurrency as o } from "../../../../core/utils/NumberFormatting/index.es.js";
+import f from "../../../../common/components/donuts/SingleSegmentDonut/index.es.js";
+import "react";
+import { observer as u } from "mobx-react-lite";
+import e from "@mui/material/Stack";
+import { CategoryIcon as l, Text as n } from "@mxenabled/mxui";
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import y from "@mui/material/ListItem";
+import b from "@mui/material/ListItemButton";
+import h from "@mui/material/ListItemText";
+import S from "@mui/material/ListItemAvatar";
+var z = u(({ budget: r }) => {
+  const { amount: i, budgetColors: { background: m }, category: c, percentage: a, transaction_total: s } = r, { setSelectedSubBudget: p } = d();
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ g(b, {
+    onClick: () => p(r),
+    children: [/* @__PURE__ */ t(S, {
+      sx: {
+        mb: -8,
+        mr: 16
+      },
+      children: /* @__PURE__ */ t(f, {
+        color: m,
+        percent: a,
+        size: 40,
+        children: /* @__PURE__ */ t(l, {
+          categoryGuid: c.parent_guid,
+          variant: "basic"
+        })
+      })
+    }), /* @__PURE__ */ t(h, {
+      primary: /* @__PURE__ */ t(e, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: /* @__PURE__ */ t(n, {
+          bold: !0,
+          variant: "body1",
+          children: r.category.name
+        })
+      }),
+      secondary: /* @__PURE__ */ t(e, {
+        component: "span",
+        direction: "row",
+        justifyContent: "space-between",
+        children: /* @__PURE__ */ t(n, {
+          fontWeight: 400,
+          variant: "body1",
+          children: `
+                  ${o(s, "0,0")} / 
+                  ${o(i, "0,0")}
+                `
+        })
+      })
+    })]
+  }) });
+});
+export {
+  z as SubBudgetRow
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BudgetList/SubBudgetRow/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/budgetlist/SubBudgetRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport { SingleSegmentDonut, useBudgetsStore } from '../../../common'\nimport { type DetailedBudget } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface SubBudgetRowProps {\n  budget: DetailedBudget\n}\n\nexport const SubBudgetRow: React.FC<SubBudgetRowProps> = observer(({ budget }) => {\n  const {\n    amount,\n    budgetColors: { background },\n    category,\n    percentage,\n    transaction_total,\n  } = budget\n\n  const { setSelectedSubBudget } = useBudgetsStore()\n\n  return (\n    <ListItem>\n      <ListItemButton onClick={() => setSelectedSubBudget(budget)}>\n        <ListItemAvatar sx={{ mb: -8, mr: 16 }}>\n          <SingleSegmentDonut color={background} percent={percentage} size={40}>\n            <CategoryIcon categoryGuid={category.parent_guid} variant=\"basic\" />\n          </SingleSegmentDonut>\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text bold={true} variant=\"body1\">\n                {budget.category.name}\n              </Text>\n            </Stack>\n          }\n          secondary={\n            <Stack component=\"span\" direction=\"row\" justifyContent=\"space-between\">\n              <Text fontWeight={400} variant=\"body1\">\n                {`\n                  ${formatCurrency(transaction_total, '0,0')} / \n                  ${formatCurrency(amount, '0,0')}\n                `}\n              </Text>\n            </Stack>\n          }\n        />\n      </ListItemButton>\n    </ListItem>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAa,IAA4C,EAAA,CAAU,EAAE,QAAA,EAAA,MAAa;AAChF,QAAM,EACJ,QAAA,GACA,cAAc,EAAE,YAAA,EAAA,GAChB,UAAA,GACA,YAAA,GACA,mBAAA,EAAA,IACE,GAEE,EAAE,sBAAA,EAAA,IAAyB,EAAgB;AAEjD,SACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IAAgB,SAAA,MAAe,EAAqB,CAAM;AAAA,cAA1D,CACE,gBAAA,EAAC,GAAD;AAAA,MAAgB,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACnC,gBAAA,EAAC,GAAD;AAAA,QAAoB,OAAO;AAAA,QAAY,SAAS;AAAA,QAAY,MAAM;AAAA,kBAChE,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc,EAAS;AAAA,UAAa,SAAQ;AAAA,QAAS,CAAA;AAAA,MACjD,CAAA;AAAA,IACN,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,MACE,SACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBACrD,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAO,SAAS;AAAA,QACb,CAAA;AAAA,MACD,CAAA;AAAA,MAET,WACE,gBAAA,EAAC,GAAD;AAAA,QAAO,WAAU;AAAA,QAAO,WAAU;AAAA,QAAM,gBAAe;AAAA,kBACrD,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,oBAC5B;AAAA,oBACG,EAAe,GAAmB,KAAK,CAAA;AAAA,oBACvC,EAAe,GAAQ,KAAK,CAAA;AAAA;AAAA,QAE5B,CAAA;AAAA,MACD,CAAA;AAAA,IAEV,CAAA,CACa;AAAA,KACR,CAAA;AAEd,CAAC"}

package/dist/budgets/components/BudgetList/SubBudgetZeroState/index.es.js

@@ -0,0 +1,38 @@
+import { useGlobalCopyStore as e } from "../../../../common/context/hooks/index.es.js";
+import { observer as a } from "mobx-react-lite";
+import n from "@mui/material/Stack";
+import { Icon as s, Text as r } from "@mxenabled/mxui";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+var l = a(() => {
+  const { budgets: t } = e();
+  return /* @__PURE__ */ c(n, {
+    alignItems: "center",
+    gap: 12,
+    height: "auto",
+    mb: 24,
+    mt: 24,
+    children: [
+      /* @__PURE__ */ o(s, {
+        color: "action",
+        name: "bubble_chart",
+        sx: { fontSize: 32 }
+      }),
+      /* @__PURE__ */ o(r, {
+        bold: !0,
+        color: "text.secondary",
+        variant: "body2",
+        children: t.zero_state_no_sub_budgets
+      }),
+      /* @__PURE__ */ o(r, {
+        color: "text.secondary",
+        variant: "caption",
+        children: t.zero_state_no_sub_budgets_description
+      })
+    ]
+  });
+});
+export {
+  l as SubBudgetZeroState
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/components/BudgetList/SubBudgetZeroState/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/budgets/components/budgetlist/SubBudgetZeroState.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport { observer } from 'mobx-react-lite'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../common'\n\nexport const SubBudgetZeroState = observer(() => {\n  const { budgets: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack alignItems=\"center\" gap={12} height=\"auto\" mb={24} mt={24}>\n      <Icon color=\"action\" name=\"bubble_chart\" sx={{ fontSize: 32 }} />\n      <Text bold={true} color=\"text.secondary\" variant=\"body2\">\n        {copy.zero_state_no_sub_budgets}\n      </Text>\n      <Text color=\"text.secondary\" variant=\"caption\">\n        {copy.zero_state_no_sub_budgets_description}\n      </Text>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAOA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB;AAE7C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAI,QAAO;AAAA,IAAO,IAAI;AAAA,IAAI,IAAI;AAAA,cAA9D;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAS,MAAK;AAAA,QAAe,IAAI,EAAE,UAAU,GAAG;AAAA,MAAI,CAAA;AAAA,MAChE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAC9C,EAAK;AAAA,MACF,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAClC,EAAK;AAAA,MACF,CAAA;AAAA,IACD;AAAA;AAEX,CAAC"}