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

package/dist/budgets/utils/BubblesSVG/index.es.js

@@ -0,0 +1,73 @@
+import * as l from "d3";
+var d = 5, h = 100, u = 25, p = (t) => {
+  const s = (a) => {
+    a.active || t.alphaTarget(0.3).restart(), a.subject.fx = a.subject.x, a.subject.fy = a.subject.y;
+  }, n = (a) => {
+    a.subject.fx = a.x, a.subject.fy = a.y;
+  }, c = (a) => {
+    a.active || t.alphaTarget(0), a.subject.fx = null, a.subject.fy = null;
+  };
+  return l.drag().on("start", s).on("drag", n).on("end", c);
+}, A = (t) => {
+  let s = t.transaction_total / t.amount;
+  s < 0 ? s = 0 : s > 1 && (s = 1);
+  const n = s * 2 * Math.PI, c = l.interpolate(0, n), a = l.arc().cornerRadius(5).innerRadius(t.radius - d * 2).outerRadius(t.radius - d).startAngle(0).endAngle(0);
+  return (r) => (a.endAngle(c(r)), a(t) || "");
+}, S = (t) => {
+  l.selectAll(".bubble").call(p(t));
+}, x = (t, s, n) => Math.min(Math.max(t, s), n), _ = (t, s, n) => {
+  t.alpha(1).restart().force("x", l.forceX().x(n / 2).strength(0.01)).force("y", l.forceY().y(s / 2).strength(0.02)).on("tick", () => {
+    const c = t.nodes();
+    c.forEach((a) => {
+      const r = a.radius ?? u;
+      a.x = x(a.x ?? 0, r, n - r), a.y = x(a.y ?? 0, r, s - r);
+    }), l.selectAll(".bubble").data(c).attr("transform", (a) => `translate(${a.x},${a.y})`);
+  });
+}, f = (t, s) => l.scaleLinear().domain([t, s]).range([u, h]), I = (t) => {
+  const s = t.reduce((r, e) => {
+    const i = Math.max(e.transaction_total, e.amount);
+    return i > r ? i : r;
+  }, 0), n = t.reduce((r, e) => {
+    const i = Math.max(e.transaction_total, e.amount);
+    return i < r ? i : r;
+  }, s), c = f(n, s), a = t.map((r) => {
+    const e = c(Math.max(r.transaction_total, r.amount)) || 25;
+    return {
+      ...r,
+      radius: e
+    };
+  });
+  return l.forceSimulation(a).velocityDecay(0.05).force("collide", l.forceCollide((r) => r.radius + 2).strength(0.7));
+}, R = (t, s, n) => {
+  const c = Math.PI * u ** 2 * t, a = n < 400 || s < 300, r = a ? 40 : 20, e = Math.max(100, n - r), i = Math.max(100, s - r), m = e * i;
+  let o = u;
+  if (c < m) {
+    const M = Math.sqrt(m / (t * Math.PI)), g = Math.min(e, i) / 4;
+    o = Math.min(h, M, g);
+  }
+  return a && t <= 3 && (o = Math.min(o, 45)), {
+    minRadius: Math.max(20, o * 0.6),
+    maxRadius: o
+  };
+}, y = (t, s, n, c, a) => {
+  const { maxRadius: r, minRadius: e } = R(t, s, a);
+  return l.scaleLinear().domain([c, n]).range([e, r]);
+}, j = (t, s, n = !1, c, a) => {
+  const r = s.map((o) => Math.max(o.transaction_total, o.amount)), e = Math.min(...r), i = Math.max(...r), m = n ? y(t.length, c, i, e, a) : f(e, i);
+  return t.map((o) => ({
+    ...o,
+    radius: m(Math.max(o.transaction_total, o.amount))
+  }));
+};
+export {
+  A as arcTween,
+  j as computeScaledNodes,
+  p as drag,
+  S as enableDrag,
+  f as getScale,
+  y as getSmartScale,
+  _ as resize,
+  I as simulate
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/budgets/utils/BubblesSVG/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/budgets/utils/BubblesSVG.ts"],"sourcesContent":["import * as d3 from 'd3'\n\nimport type { Simulation } from 'd3'\n\nimport { type BubbleData } from '../components/BubbleChart'\nimport { DetailedBudget } from '../../core'\n\n// D3 SVG Types\nexport type SimulationType = Simulation<BubbleData, undefined>\n\nconst PROGRESS_INDICATOR_SIZE = 5\nconst MAX_BUBBLE_RADIUS = 100\nconst MIN_BUBBLE_RADIUS = 25\n\n/**\n * Enables dragging of bubbles\n * @param simulation D3 Simulation\n */\nexport const drag = (simulation: SimulationType) => {\n  const dragStarted = (event: any) => {\n    if (!event.active) simulation.alphaTarget(0.3).restart()\n    event.subject.fx = event.subject.x\n    event.subject.fy = event.subject.y\n  }\n\n  const dragged = (event: any) => {\n    event.subject.fx = event.x\n    event.subject.fy = event.y\n  }\n\n  const dragEnded = (event: any) => {\n    if (!event.active) simulation.alphaTarget(0)\n    event.subject.fx = null\n    event.subject.fy = null\n  }\n  return d3.drag().on('start', dragStarted).on('drag', dragged).on('end', dragEnded)\n}\n\n/**\n * Provide d values for the arc between the start and end radius based on time\n * @param bubble Bubble data\n */\nexport const arcTween = (bubble: BubbleData) => {\n  // Percentage of the budget\n  let p = bubble.transaction_total / bubble.amount\n  if (p < 0) p = 0\n  else if (p > 1) p = 1\n\n  // End angle for the progress status\n  const angle = p * 2 * Math.PI\n  // Interpolate values between 0 and the end angle\n  const interpolate = d3.interpolate(0, angle)\n  // Progress arc starting at 0\n  const arc = d3\n    .arc<BubbleData>()\n    .cornerRadius(5)\n    .innerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE * 2)\n    .outerRadius(bubble.radius - PROGRESS_INDICATOR_SIZE)\n    .startAngle(0)\n    .endAngle(0)\n\n  return (t: number) => {\n    // assign end angle to interpolated value for t\n    arc.endAngle(interpolate(t))\n    // call arc and return intermediate `d` value\n    return arc(bubble) || ''\n  }\n}\n\n/**\n * Enable drag\n * @param simulation D3 Simulation\n */\nexport const enableDrag = (simulation: SimulationType) => {\n  d3.selectAll('.bubble').call(drag(simulation) as any)\n}\n\n/**\n * Clamps a number between a minimum and maximum value.\n *\n * @param value - The number to be clamped.\n * @param min - The minimum allowable value.\n * @param max - The maximum allowable value.\n * @returns The clamped value within the range [min, max].\n */\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)\n\n/**\n * Update location after a resize\n * @param simulation D3 Simulation\n * @param height New height\n * @param width New width\n */\nexport const resize = (simulation: SimulationType, height: number, width: number) => {\n  simulation\n    .alpha(1)\n    .restart()\n    .force(\n      'x',\n      d3\n        .forceX()\n        .x(width / 2)\n        .strength(0.01),\n    )\n    .force(\n      'y',\n      d3\n        .forceY()\n        .y(height / 2)\n        .strength(0.02),\n    )\n    .on('tick', () => {\n      const nodes = simulation.nodes()\n\n      nodes.forEach((node: BubbleData) => {\n        const radius = node.radius ?? MIN_BUBBLE_RADIUS\n\n        node.x = clamp(node.x ?? 0, radius, width - radius)\n        node.y = clamp(node.y ?? 0, radius, height - radius)\n      })\n\n      d3.selectAll('.bubble')\n        .data(nodes)\n        .attr('transform', (d: BubbleData) => `translate(${d.x},${d.y})`)\n    })\n}\n\nexport const getScale = (min: number, max: number) => {\n  return d3.scaleLinear().domain([min, max]).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])\n}\n\n/**\n * Simulates the chart\n * @param budgets Budget data\n */\nexport const simulate = (budgets: DetailedBudget[]) => {\n  const maxValue = budgets.reduce((acc, budget) => {\n    const max = Math.max(budget.transaction_total, budget.amount)\n    return max > acc ? max : acc\n  }, 0)\n\n  const minValue = budgets.reduce((acc, budget) => {\n    const max = Math.max(budget.transaction_total, budget.amount)\n    return max < acc ? max : acc\n  }, maxValue)\n\n  const scale = getScale(minValue, maxValue)\n\n  const bubbles = budgets.map((budget) => {\n    const radius = scale(Math.max(budget.transaction_total, budget.amount)) || 25\n\n    return {\n      ...budget,\n      radius,\n    } as BubbleData\n  })\n\n  return d3\n    .forceSimulation<BubbleData>(bubbles)\n    .velocityDecay(0.05)\n    .force('collide', d3.forceCollide<BubbleData>((d) => d.radius + 2).strength(0.7))\n}\n\n/**\n * Calculate the target radius based on the number of bubbles and container size\n * @param count Number of bubbles\n * @param height Height of the container\n * @param width Width of the container\n * @returns An object containing the target minimum and maximum radius\n */\nconst getTargetRadius = (bubbleCount: number, containerHeight: number, containerWidth: number) => {\n  const minBubbleArea = Math.PI * MIN_BUBBLE_RADIUS ** 2\n  const totalMinBubbleArea = minBubbleArea * bubbleCount\n\n  const isSmallContainer = containerWidth < 400 || containerHeight < 300\n  const padding = isSmallContainer ? 40 : 20\n  const usableWidth = Math.max(100, containerWidth - padding)\n  const usableHeight = Math.max(100, containerHeight - padding)\n  const usableArea = usableWidth * usableHeight\n\n  let maxRadius = MIN_BUBBLE_RADIUS\n\n  if (totalMinBubbleArea < usableArea) {\n    const radiusFromArea = Math.sqrt(usableArea / (bubbleCount * Math.PI))\n    const radiusFromDimensions = Math.min(usableWidth, usableHeight) / 4\n\n    maxRadius = Math.min(MAX_BUBBLE_RADIUS, radiusFromArea, radiusFromDimensions)\n  }\n\n  if (isSmallContainer && bubbleCount <= 3) {\n    maxRadius = Math.min(maxRadius, 45)\n  }\n\n  const minRadius = Math.max(20, maxRadius * 0.6)\n\n  return { minRadius, maxRadius }\n}\n\n/* @param count Number of bubbles\n * @param height Height of the container\n * @param maxValue Maximum value for the scale\n * @param minValue Minimum value for the scale\n * @param width Width of the container\n * @returns A D3 linear scale for bubble radius\n */\nexport const getSmartScale = (\n  count: number,\n  height: number,\n  maxValue: number,\n  minValue: number,\n  width: number,\n) => {\n  const { maxRadius, minRadius } = getTargetRadius(count, height, width)\n\n  return d3.scaleLinear().domain([minValue, maxValue]).range([minRadius, maxRadius])\n}\n\nexport const computeScaledNodes = (\n  nodes: BubbleData[],\n  budgets: DetailedBudget[],\n  isCompact: boolean = false,\n  height: number,\n  width: number,\n) => {\n  const values = budgets.map((b) => Math.max(b.transaction_total, b.amount))\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n\n  const scale = isCompact\n    ? getSmartScale(nodes.length, height, max, min, width)\n    : getScale(min, max)\n\n  return nodes.map((node) => ({\n    ...node,\n    radius: scale(Math.max(node.transaction_total, node.amount)),\n  }))\n}\n"],"mappings":"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"}

package/dist/cashflow/CashflowMiniWidget/index.es.js

@@ -0,0 +1,45 @@
+import { useGlobalCopyStore as c, useGlobalUiStore as f, useRecurringTransactionsStore as p } from "../../common/context/hooks/index.es.js";
+import { useWidgetLoadTimer as u } from "../../common/hooks/useWidgetLoadTimer/index.es.js";
+import h from "../../common/components/MiniWidgetContainer/index.es.js";
+import a from "../../common/components/Loader/index.es.js";
+import { EmptyState as g } from "../../common/components/EmptyState/index.es.js";
+import { useCashflowUiStore as y } from "../context/hooks/index.es.js";
+import C from "../components/CashflowWidgetContent/index.es.js";
+import w from "react";
+import { observer as _ } from "mobx-react-lite";
+import { jsx as e, jsxs as b } from "react/jsx-runtime";
+var x = ({ onPrimaryCtaClick: r, onSecondaryCtaClick: s, sx: m = {} }) => {
+  const { cashflow: t } = c(), { isInitialized: n } = f(), { income: l } = y(), { loadRepeatingTransactionData: d, isDataLoaded: i } = p();
+  w.useEffect(() => {
+    i || d().finally();
+  }, []), u({
+    widgetName: "CashflowMiniWidget",
+    isLoaded: i
+  });
+  const o = i && !l.length;
+  return n ? /* @__PURE__ */ b(h, {
+    className: "mx-exp-cashflow-miniwidget",
+    onPrimaryCtaClick: r,
+    primaryCtaLabel: t.primary_cta,
+    primaryCtaLabelAria: t.primary_cta_aria,
+    subTitle: o || !i ? void 0 : t.sub_title,
+    sx: {
+      height: "100%",
+      ...m
+    },
+    title: t.title,
+    children: [!i && /* @__PURE__ */ e(a, {}), i && (o ? /* @__PURE__ */ e(g, {
+      header: t.create,
+      icon: "local_atm",
+      onClick: s,
+      primaryButton: t.add_income,
+      primaryButtonStartIcon: "add",
+      subText: t.create_description
+    }) : /* @__PURE__ */ e(C, {}))]
+  }) : /* @__PURE__ */ e(a, {});
+}, D = _(x);
+export {
+  D as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/CashflowMiniWidget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/cashflow/CashflowMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  EmptyState,\n  Loader,\n  MiniWidgetContainer,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { MiniWidgetProps } from '../core'\n\nimport CashflowWidgetContent from './components/CashflowWidgetContent'\nimport { useCashflowUiStore } from './context/hooks'\n\nconst CashflowMiniWidget: React.FC<MiniWidgetProps> = ({\n  onPrimaryCtaClick,\n  onSecondaryCtaClick,\n  sx = {},\n}) => {\n  const { cashflow: copy } = useGlobalCopyStore()\n  const { isInitialized } = useGlobalUiStore()\n  const { income } = useCashflowUiStore()\n  const { loadRepeatingTransactionData, isDataLoaded } = useRecurringTransactionsStore()\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadRepeatingTransactionData().finally()\n    }\n  }, [])\n\n  useWidgetLoadTimer({\n    widgetName: 'CashflowMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  const showEmptyState = isDataLoaded && !income.length\n\n  if (!isInitialized) return <Loader />\n\n  return (\n    <MiniWidgetContainer\n      className=\"mx-exp-cashflow-miniwidget\"\n      onPrimaryCtaClick={onPrimaryCtaClick}\n      primaryCtaLabel={copy.primary_cta}\n      primaryCtaLabelAria={copy.primary_cta_aria}\n      subTitle={showEmptyState || !isDataLoaded ? undefined : copy.sub_title}\n      sx={{ height: '100%', ...sx }}\n      title={copy.title}\n    >\n      {!isDataLoaded && <Loader />}\n      {isDataLoaded &&\n        (showEmptyState ? (\n          <EmptyState\n            header={copy.create}\n            icon=\"local_atm\"\n            onClick={onSecondaryCtaClick}\n            primaryButton={copy.add_income}\n            primaryButtonStartIcon=\"add\"\n            subText={copy.create_description}\n          />\n        ) : (\n          <CashflowWidgetContent />\n        ))}\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(CashflowMiniWidget)\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,IAAA,CAAiD,EACrD,mBAAA,GACA,qBAAA,GACA,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,UAAU,EAAA,IAAS,EAAmB,GACxC,EAAE,eAAA,EAAA,IAAkB,EAAiB,GACrC,EAAE,QAAA,EAAA,IAAW,EAAmB,GAChC,EAAE,8BAAA,GAA8B,cAAA,EAAA,IAAiB,EAA8B;AAErF,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAA6B,EAAE,QAAQ;AAAA,EAE3C,GAAG,CAAC,CAAC,GAEL,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,IAAiB,KAAgB,CAAC,EAAO;AAE/C,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACS,mBAAA;AAAA,IACnB,iBAAiB,EAAK;AAAA,IACtB,qBAAqB,EAAK;AAAA,IAC1B,UAAU,KAAkB,CAAC,IAAe,SAAY,EAAK;AAAA,IAC7D,IAAI;AAAA,MAAE,QAAQ;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC5B,OAAO,EAAK;AAAA,cAPd,CASG,CAAC,KAAgB,gBAAA,EAAC,GAAD,CAAS,CAAA,GAC1B,MACE,IACC,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAK;AAAA,MACb,MAAK;AAAA,MACL,SAAS;AAAA,MACT,eAAe,EAAK;AAAA,MACpB,wBAAuB;AAAA,MACvB,SAAS,EAAK;AAAA,IACf,CAAA,IAED,gBAAA,EAAC,GAAD,CAAwB,CAAA,EAET;AAAA,OA1BI,gBAAA,EAAC,GAAD,CAAS,CAAA;AA4BtC,GAEA,IAAe,EAAS,CAAkB"}

package/dist/cashflow/CashflowOnboarding/index.es.js

@@ -0,0 +1,224 @@
+import { useCashflowStore as te, useGlobalCopyStore as oe, useGlobalUiStore as re, useRecurringTransactionsStore as ne, useTransactionStore as ie, useUserStore as ae } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as ce } from "../../common/hooks/useScreenSize/index.es.js";
+import { Frequency as se, RepeatingType as v } from "../../core/types/RepeatingTransaction/index.es.js";
+import { fromUnixToDayOfWeekAndDate as me } from "../../core/utils/DateUtil/index.es.js";
+import { getNextPaymentDate as F } from "../../core/utils/RecurringTransactionsUtil/index.es.js";
+import de from "../../common/components/Loader/index.es.js";
+import le from "../../transactions/components/shared/transactionlist/TransactionRow/index.es.js";
+import pe from "../../common/components/SubheaderRow/index.es.js";
+import { incomeFilter as O, incomeFilterSearch as ue } from "../../transactions/utils/Filters/index.es.js";
+import { SelectTransaction as fe } from "../../recurringtransactions/components/shared/recurringsettings/SelectTransaction/index.es.js";
+import { AddRecurringTransactionDetails as ge } from "../../recurringtransactions/components/shared/recurringsettings/AddRecurringTransactionDetails/index.es.js";
+import { useCashflowUiStore as he } from "../context/hooks/index.es.js";
+import ye from "../components/onboarding/StepOne/index.es.js";
+import { CASHFLOW_IMAGES as xe } from "../constants/CashflowImages/index.es.js";
+import _e from "../components/onboarding/StepTwo/index.es.js";
+import m, { useState as d } from "react";
+import { observer as Se } from "mobx-react-lite";
+import h from "@mui/material/Stack";
+import { H2 as be, Icon as R, P as W } from "@mxenabled/mxui";
+import { startOfMonth as De } from "date-fns/startOfMonth";
+import { startOfToday as A } from "date-fns/startOfToday";
+import l from "@mui/material/Button";
+import { Fragment as G, jsx as e, jsxs as i } from "react/jsx-runtime";
+import { keyframes as Te, useTheme as Ce } from "@mui/material/styles";
+import p from "@mui/material/Box";
+import { subDays as ke } from "date-fns/subDays";
+import { getUnixTime as Ie } from "date-fns/getUnixTime";
+import { fromUnixTime as U } from "date-fns/fromUnixTime";
+import { formatISO as we } from "date-fns/formatISO";
+import L from "@mui/material/Divider";
+import ve from "@mui/material/List";
+var Fe = Te`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`, Oe = () => {
+  const { addRepeatingTransaction: M, repeatingTransactions: q } = ne(), { cashflow: a, common: y } = oe(), { user: N } = ae(), { completeOnboarding: x } = te(), { isDirty: z } = he(), { isMobile: c } = ce(), { isCopyLoaded: B, setDisplayedDate: H } = re(), { filter: _, setFilter: S, transactions: b } = ie(), P = Ce(), [j, u] = d(!0), [s, E] = m.useState(se.EveryMonth), [$, J] = m.useState(1), [D, K] = m.useState(15), [T, Q] = d(!1), [f, C] = d(1), [r, X] = d([]), [k, g] = d(""), n = m.useMemo(() => b.find((t) => t.guid === k), [k, b]), Y = !!q.filter((t) => t.repeating_transaction_type === v.Income).length, I = async () => {
+    C(2), H(De(ke(A(), 90)), A()), S({
+      ..._,
+      custom: O
+    }), C(3);
+  }, Z = async () => {
+    if (!(r.length < 1)) {
+      Q(!0);
+      for (let t = 0; t < r.length; t++) {
+        const o = r[t], w = F(s, U(o.date)), ee = {
+          account_guid: o.account_guid,
+          amount: o.amount,
+          created_by: 0,
+          merchant_guid: o.merchant_guid,
+          description: o.feed_description || o.description,
+          predicted_occurs_on: we(w, { representation: "date" }),
+          recurrence_day: w.getDay(),
+          recurrence_type: s,
+          repeating_transaction_type: v.Income,
+          second_recurrence_day: D,
+          transaction_type: o.transaction_type,
+          user_guid: N.guid
+        };
+        await M(ee, o);
+      }
+      await x();
+    }
+  }, V = !n && j || !n && r.length < 1;
+  return B ? /* @__PURE__ */ i(p, {
+    sx: {
+      display: "flex",
+      alignItems: c ? "flex-start" : "center",
+      backgroundColor: P.palette.background.paper,
+      backgroundImage: c ? null : `url(${xe.CASHFLOW_ONBOARDING})`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "left 100px",
+      backgroundSize: "35%",
+      py: 24
+    },
+    children: [
+      f === 1 && /* @__PURE__ */ e(p, {
+        sx: { ...c ? {
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: "100%",
+          padding: "0 16px"
+        } : {
+          maxWidth: 590,
+          ml: "40%",
+          mr: 90
+        } },
+        children: /* @__PURE__ */ e(ye, { handleNextStep: I })
+      }),
+      f === 2 && /* @__PURE__ */ e(p, {
+        sx: { ...c ? {
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: "100%",
+          padding: "0 16px"
+        } : {
+          maxWidth: 590,
+          ml: "40%",
+          mr: 90
+        } },
+        children: /* @__PURE__ */ e(_e, {})
+      }),
+      f === 3 && /* @__PURE__ */ i(p, {
+        sx: { ...c ? {
+          display: "flex",
+          flexDirection: "column",
+          maxWidth: "100%",
+          padding: "0 16px"
+        } : {
+          maxWidth: 590,
+          ml: "40%",
+          mr: 90
+        } },
+        children: [
+          /* @__PURE__ */ e(be, {
+            pb: 12,
+            variant: "h1",
+            children: a.add_income_title
+          }),
+          /* @__PURE__ */ e(W, {
+            mb: 24,
+            children: a.add_income_description
+          }),
+          r.length > 0 && !n && /* @__PURE__ */ i(G, { children: [/* @__PURE__ */ e(ve, { children: r.map((t, o) => /* @__PURE__ */ i(m.Fragment, { children: [
+            /* @__PURE__ */ e(pe, {
+              bgcolor: "background.paper",
+              children: me(Ie(t.nextDate || t.date))
+            }),
+            /* @__PURE__ */ e(le, { transaction: t }),
+            o !== r.length - 1 && /* @__PURE__ */ e(L, {})
+          ] }, t.guid)) }), /* @__PURE__ */ i(h, {
+            alignItems: "center",
+            direction: "row",
+            children: [/* @__PURE__ */ e(L, { sx: { flexGrow: 1 } }), /* @__PURE__ */ e(l, {
+              onClick: () => u(!0),
+              startIcon: /* @__PURE__ */ e(R, {
+                name: "add",
+                size: 20
+              }),
+              children: a.add_income
+            })]
+          })] }),
+          V && /* @__PURE__ */ e(fe, {
+            bgcolor: "background.paper",
+            onSearch: (t) => S({
+              ..._,
+              custom: (o) => t ? ue(o, t) : O(o)
+            }),
+            onSelected: (t) => {
+              g(t), u(!1);
+            }
+          }),
+          !Y && z && /* @__PURE__ */ e(W, {
+            color: "error",
+            mt: 16,
+            children: a.confirm_error
+          }),
+          n && /* @__PURE__ */ i(G, { children: [/* @__PURE__ */ e(ge, {
+            bgcolor: "background.paper",
+            firstDay: $,
+            frequency: s,
+            onFirstDayChange: J,
+            onFrequencyChange: E,
+            onSecondDayChange: K,
+            secondDay: D,
+            transaction: n
+          }), /* @__PURE__ */ i(h, {
+            direction: "row",
+            gap: 16,
+            ml: 24,
+            mt: 32,
+            children: [/* @__PURE__ */ e(l, {
+              "aria-disabled": !n,
+              onClick: () => {
+                const t = [...r];
+                t.push({
+                  ...n,
+                  nextDate: F(s, U(n.date)),
+                  frequency: s
+                }), X(t), g("");
+              },
+              variant: "contained",
+              children: y.confirm_button
+            }), /* @__PURE__ */ e(l, {
+              onClick: () => {
+                g(""), u(!0), I().finally();
+              },
+              variant: "outlined",
+              children: y.cancel_button
+            })]
+          })] }),
+          r.length > 0 && !n && /* @__PURE__ */ i(h, {
+            direction: "row",
+            gap: 16,
+            ml: 24,
+            mt: 32,
+            children: [/* @__PURE__ */ e(l, {
+              "aria-disabled": r.length < 1 || T,
+              onClick: Z,
+              startIcon: T ? /* @__PURE__ */ e(R, {
+                name: "progress_activity",
+                sx: { animation: `${Fe} 2s linear infinite` }
+              }) : null,
+              variant: "contained",
+              children: a.confirm_income_button
+            }), /* @__PURE__ */ e(l, {
+              onClick: x,
+              variant: "outlined",
+              children: a.skip_button
+            })]
+          })
+        ]
+      })
+    ]
+  }) : /* @__PURE__ */ e(de, {});
+}, st = Se(Oe);
+export {
+  st as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/CashflowOnboarding/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/cashflow/CashflowOnboarding.tsx"],"sourcesContent":["import React, { useState } from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { formatISO } from 'date-fns/formatISO'\nimport { fromUnixTime } from 'date-fns/fromUnixTime'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\nimport { keyframes } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport { H2, Icon, P } from '@mxenabled/mxui'\n\nimport StepOne from './components/onboarding/StepOne'\nimport StepTwo from './components/onboarding/StepTwo'\n\nimport {\n  Loader,\n  useCashflowStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useTransactionStore,\n  useUserStore,\n} from '../common'\nimport { type RepeatingTransaction, type Transaction, RepeatingType, Frequency } from '../core'\nimport SubheaderRow from '../common/components/SubheaderRow'\n\nimport { useCashflowUiStore } from './context/hooks'\n\nimport { TransactionRow } from '../transactions'\nimport { incomeFilter, incomeFilterSearch } from '../transactions/utils/Filters'\n\nimport { AddRecurringTransactionDetails } from '../recurringtransactions'\nimport { SelectTransaction } from '../recurringtransactions'\nimport { getNextPaymentDate } from '../core/utils/RecurringTransactionsUtil'\n\nimport { fromUnixToDayOfWeekAndDate } from '../core/utils/DateUtil'\nimport { CASHFLOW_IMAGES } from './constants/CashflowImages'\n\ninterface UpcomingTransactions extends Transaction {\n  nextDate: Date | null\n  frequency: Frequency\n}\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nconst CashflowOnboarding: React.FC = () => {\n  const { addRepeatingTransaction, repeatingTransactions } = useRecurringTransactionsStore()\n  const { cashflow: customCopy, common: commonCopy } = useGlobalCopyStore()\n  const { user } = useUserStore()\n  const { completeOnboarding } = useCashflowStore()\n  const { isDirty } = useCashflowUiStore()\n  const { isMobile } = useScreenSize()\n  const { isCopyLoaded, setDisplayedDate } = useGlobalUiStore()\n  const { filter, setFilter, transactions } = useTransactionStore()\n  const theme = useTheme()\n\n  const [addIncome, setAddIncome] = useState(true)\n  const [frequency, setFrequency] = React.useState(Frequency.EveryMonth)\n  const [firstDay, setFirstDay] = React.useState(1)\n  const [secondDay, setSecondDay] = React.useState(15)\n  const [isSubmitting, setIsSubmitting] = useState(false)\n  // const [nextDate, setNextDate] = React.useState<Date | null>(null)\n  const [step, setStep] = useState(1)\n  const [selectedTransactions, setSelectedTransactions] = useState<UpcomingTransactions[] | []>([])\n  const [transactionGuid, setTransactionGuid] = useState('')\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const canSubmit = !!repeatingTransactions.filter(\n    (r) => r.repeating_transaction_type === RepeatingType.Income,\n  ).length\n\n  const handleGetTransactions = async () => {\n    setStep(2)\n    // set transaction date range and filter by income\n    setDisplayedDate(\n      //  Beginning of the month, 90 days before today\n      startOfMonth(subDays(startOfToday(), 90)),\n      startOfToday(),\n    )\n\n    setFilter({ ...filter, custom: incomeFilter })\n\n    setStep(3)\n  }\n\n  const handleAddIncome = async () => {\n    if (selectedTransactions.length < 1) {\n      return\n    }\n    setIsSubmitting(true)\n\n    // Create Repeating Transactions\n    for (let i = 0; i < selectedTransactions.length; i++) {\n      const upcomingTransaction = selectedTransactions[i]\n\n      const nextDate = getNextPaymentDate(frequency, fromUnixTime(upcomingTransaction.date))\n\n      const repeatingTransaction = {\n        account_guid: upcomingTransaction.account_guid,\n        amount: upcomingTransaction.amount,\n        created_by: 0, //user\n        merchant_guid: upcomingTransaction.merchant_guid,\n        description: upcomingTransaction.feed_description || upcomingTransaction.description,\n        predicted_occurs_on: formatISO(nextDate, { representation: 'date' }),\n        recurrence_day: nextDate.getDay(),\n        recurrence_type: frequency,\n        repeating_transaction_type: RepeatingType.Income,\n        second_recurrence_day: secondDay,\n        transaction_type: upcomingTransaction.transaction_type,\n        user_guid: user.guid,\n      } as RepeatingTransaction\n\n      await addRepeatingTransaction(repeatingTransaction, upcomingTransaction)\n    }\n    await completeOnboarding()\n  }\n\n  const showSelectIncome =\n    (!transaction && addIncome) || (!transaction && selectedTransactions.length < 1)\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignItems: !isMobile ? 'center' : 'flex-start',\n        backgroundColor: theme.palette.background.paper,\n        backgroundImage: !isMobile ? `url(${CASHFLOW_IMAGES.CASHFLOW_ONBOARDING})` : null,\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'left 100px',\n        backgroundSize: '35%',\n        py: 24,\n      }}\n    >\n      {step === 1 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <StepOne handleNextStep={handleGetTransactions} />\n        </Box>\n      )}\n      {step === 2 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <StepTwo />\n        </Box>\n      )}\n      {step === 3 && (\n        <Box\n          sx={{\n            ...(isMobile\n              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }\n              : { maxWidth: 590, ml: '40%', mr: 90 }),\n          }}\n        >\n          <H2 pb={12} variant=\"h1\">\n            {customCopy.add_income_title}\n          </H2>\n          <P mb={24}>{customCopy.add_income_description}</P>\n\n          {selectedTransactions.length > 0 && !transaction && (\n            <>\n              <List>\n                {selectedTransactions.map((transaction, index) => {\n                  return (\n                    <React.Fragment key={transaction.guid}>\n                      <SubheaderRow bgcolor=\"background.paper\">\n                        {fromUnixToDayOfWeekAndDate(\n                          getUnixTime(transaction.nextDate || transaction.date),\n                        )}\n                      </SubheaderRow>\n                      <TransactionRow transaction={transaction} />\n                      {index !== selectedTransactions.length - 1 && <Divider />}\n                    </React.Fragment>\n                  )\n                })}\n              </List>\n              <Stack alignItems=\"center\" direction=\"row\">\n                <Divider sx={{ flexGrow: 1 }} />\n                <Button\n                  onClick={() => setAddIncome(true)}\n                  startIcon={<Icon name=\"add\" size={20} />}\n                >\n                  {customCopy.add_income}\n                </Button>\n              </Stack>\n            </>\n          )}\n\n          {showSelectIncome && (\n            <SelectTransaction\n              bgcolor=\"background.paper\"\n              onSearch={(searchValue) =>\n                setFilter({\n                  ...filter,\n                  custom: (transaction: Transaction) =>\n                    searchValue\n                      ? incomeFilterSearch(transaction, searchValue)\n                      : incomeFilter(transaction),\n                })\n              }\n              onSelected={(guid) => {\n                setTransactionGuid(guid)\n                setAddIncome(false)\n              }}\n            />\n          )}\n\n          {!canSubmit && isDirty && (\n            <P color=\"error\" mt={16}>\n              {customCopy.confirm_error}\n            </P>\n          )}\n\n          {transaction && (\n            <>\n              <AddRecurringTransactionDetails\n                bgcolor=\"background.paper\"\n                firstDay={firstDay}\n                frequency={frequency}\n                onFirstDayChange={setFirstDay}\n                onFrequencyChange={setFrequency}\n                onSecondDayChange={setSecondDay}\n                secondDay={secondDay}\n                transaction={transaction}\n              />\n              <Stack direction=\"row\" gap={16} ml={24} mt={32}>\n                <Button\n                  aria-disabled={!transaction}\n                  onClick={() => {\n                    const updatedTransactions = [...selectedTransactions]\n                    updatedTransactions.push({\n                      ...transaction,\n                      nextDate: getNextPaymentDate(frequency, fromUnixTime(transaction.date)),\n                      frequency,\n                    })\n\n                    setSelectedTransactions(updatedTransactions)\n                    setTransactionGuid('')\n                  }}\n                  variant=\"contained\"\n                >\n                  {commonCopy.confirm_button}\n                </Button>\n                <Button\n                  onClick={() => {\n                    setTransactionGuid('')\n                    setAddIncome(true)\n                    handleGetTransactions().finally()\n                  }}\n                  variant=\"outlined\"\n                >\n                  {commonCopy.cancel_button}\n                </Button>\n              </Stack>\n            </>\n          )}\n\n          {selectedTransactions.length > 0 && !transaction && (\n            <Stack direction=\"row\" gap={16} ml={24} mt={32}>\n              <Button\n                aria-disabled={selectedTransactions.length < 1 || isSubmitting}\n                onClick={handleAddIncome}\n                startIcon={\n                  isSubmitting ? (\n                    <Icon\n                      name=\"progress_activity\"\n                      sx={{\n                        animation: `${spin} 2s linear infinite`,\n                      }}\n                    />\n                  ) : null\n                }\n                variant=\"contained\"\n              >\n                {customCopy.confirm_income_button}\n              </Button>\n              <Button onClick={completeOnboarding} variant=\"outlined\">\n                {customCopy.skip_button}\n              </Button>\n            </Stack>\n          )}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(CashflowOnboarding)\n"],"mappings":"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"}

package/dist/cashflow/CashflowWidget/index.es.js

@@ -0,0 +1,82 @@
+import { useAccountStore as N, useAppConfig as R, useEvent as v, useGlobalCopyStore as y, useGlobalUiStore as m, useRecurringTransactionsStore as G, useTransactionStore as O } from "../../common/context/hooks/index.es.js";
+import { useWidgetLoadTimer as H } from "../../common/hooks/useWidgetLoadTimer/index.es.js";
+import W from "../../common/components/drawer/Drawer/index.es.js";
+import { ANALYTICS_EVENTS as f } from "../../common/constants/Analytics/index.es.js";
+import { AccountType as t } from "../../core/types/Account/index.es.js";
+import F from "../../common/components/Loader/index.es.js";
+import { WidgetContainer as x } from "../../common/components/WidgetContainer/index.es.js";
+import { RecurringSettings as P } from "../../recurringtransactions/components/shared/RecurringSettings/index.es.js";
+import { useCashflowUiStore as k } from "../context/hooks/index.es.js";
+import K from "../components/CashflowContent/index.es.js";
+import V from "../components/CashflowHeading/index.es.js";
+import s from "react";
+import { observer as j } from "mobx-react-lite";
+import { startOfToday as U } from "date-fns/startOfToday";
+import { jsx as o, jsxs as z } from "react/jsx-runtime";
+import { endOfToday as B } from "date-fns/endOfToday";
+import { subDays as M } from "date-fns/subDays";
+var Y = ({ onBackClick: p, onMenuClick: C, sx: g = {} }) => {
+  const { selectedAccounts: i, selectedAccountGuids: _, shouldDisableNextDate: h, shouldDisablePrevDate: S } = m(), { onEvent: a } = v(), { clientConfig: A } = R(), { visibleCashAccounts: r } = N(), { setFilter: T } = O(), { dateRange: D } = k(), { loadRepeatingTransactionData: I, isDataLoaded: n } = G(), { cashflow: c, recurring: l } = y(), { isInitialized: b } = m(), d = A?.master?.deep_link_params?.view === "manage_income", [w, u] = s.useState(d);
+  return s.useEffect(() => {
+    n || I().finally();
+  }, []), s.useEffect(() => {
+    const E = r.map((e) => e.guid), L = i.filter((e) => _.includes(e.guid) && E.includes(e.guid));
+    T({
+      dateRange: {
+        start: M(U(), 90),
+        end: B()
+      },
+      accounts: L.map((e) => e.guid)
+    });
+  }, [r, i]), H({
+    widgetName: "CashflowWidget",
+    isLoaded: n
+  }), b ? /* @__PURE__ */ z(x, {
+    actions: [{
+      label: l.action_title,
+      iconName: "credit_card_gear",
+      onClick: () => {
+        u(!0), a(f.CASH_FLOW_CLICK_SETTINGS);
+      }
+    }],
+    allowedAccountTypes: [
+      t.CASH,
+      t.CHECKING,
+      t.PREPAID,
+      t.SAVINGS,
+      t.CHECKING_LINE_OF_CREDIT
+    ],
+    calendarActions: {
+      shouldDisableNext: h,
+      shouldDisablePrevious: S,
+      shouldDisablePicker: !0,
+      onRangeChanged: () => {
+      }
+    },
+    dateRange: D,
+    dateRangeVariant: "readonly",
+    hasDivider: !0,
+    onAccountsFilterClick: () => a(f.CASH_FLOW_CLICK_FILTER),
+    onBackClick: p,
+    onMenuClick: C,
+    sx: g,
+    title: c.title,
+    children: [
+      /* @__PURE__ */ o(V, {}),
+      /* @__PURE__ */ o(K, {}),
+      /* @__PURE__ */ o(W, {
+        ariaLabelClose: c.close_settings_aria,
+        isOpen: w,
+        onClose: () => u(!1),
+        shouldShowHeaderBorders: !1,
+        title: l.action_title,
+        children: /* @__PURE__ */ o(P, { defaultSelectedTab: d ? 1 : 0 })
+      })
+    ]
+  }) : /* @__PURE__ */ o(F, {});
+}, ue = j(Y);
+export {
+  ue as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/CashflowWidget/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../src/cashflow/CashflowWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  useAccountStore,\n  useAppConfig,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { AccountType, WidgetProps } from '../core'\n\nimport { RecurringSettings } from '../recurringtransactions'\n\nimport CashflowContent from './components/CashflowContent'\nimport CashflowHeading from './components/CashflowHeading'\nimport { useCashflowUiStore } from './context/hooks'\nimport { subDays } from 'date-fns/subDays'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { endOfToday } from 'date-fns/endOfToday'\n\nconst CashflowWidget: React.FC<WidgetProps> = ({ onBackClick, onMenuClick, sx = {} }) => {\n  const { selectedAccounts, selectedAccountGuids, shouldDisableNextDate, shouldDisablePrevDate } =\n    useGlobalUiStore()\n\n  const { onEvent } = useEvent()\n  const { clientConfig } = useAppConfig()\n  const { visibleCashAccounts: cashAccounts } = useAccountStore()\n  const { setFilter } = useTransactionStore()\n  const { dateRange } = useCashflowUiStore()\n  const { loadRepeatingTransactionData, isDataLoaded } = useRecurringTransactionsStore()\n  const { cashflow: customCopy, recurring: recurringCopy } = useGlobalCopyStore()\n  const { isInitialized } = useGlobalUiStore()\n\n  const view = clientConfig?.master?.deep_link_params?.view\n  const isManageIncomeView = view === 'manage_income'\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(isManageIncomeView)\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadRepeatingTransactionData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    const cashAccountGuids = cashAccounts.map((account) => account.guid)\n    const selAccts = selectedAccounts.filter(\n      (account) =>\n        selectedAccountGuids.includes(account.guid) && cashAccountGuids.includes(account.guid),\n    )\n    setFilter({\n      dateRange: { start: subDays(startOfToday(), 90), end: endOfToday() },\n      accounts: selAccts.map((a) => a.guid),\n    })\n  }, [cashAccounts, selectedAccounts])\n\n  useWidgetLoadTimer({\n    widgetName: 'CashflowWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  if (!isInitialized) return <Loader />\n\n  return (\n    <WidgetContainer\n      actions={[\n        {\n          label: recurringCopy.action_title,\n          iconName: 'credit_card_gear',\n          onClick: () => {\n            setIsSettingsOpen(true)\n            onEvent(ANALYTICS_EVENTS.CASH_FLOW_CLICK_SETTINGS)\n          },\n        },\n      ]}\n      allowedAccountTypes={[\n        AccountType.CASH,\n        AccountType.CHECKING,\n        AccountType.PREPAID,\n        AccountType.SAVINGS,\n        AccountType.CHECKING_LINE_OF_CREDIT,\n      ]}\n      calendarActions={{\n        shouldDisableNext: shouldDisableNextDate,\n        shouldDisablePrevious: shouldDisablePrevDate,\n        shouldDisablePicker: true,\n        onRangeChanged: () => {},\n      }}\n      dateRange={dateRange}\n      dateRangeVariant=\"readonly\"\n      hasDivider={true}\n      onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.CASH_FLOW_CLICK_FILTER)}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={customCopy.title}\n    >\n      <CashflowHeading />\n\n      <CashflowContent />\n\n      <Drawer\n        ariaLabelClose={customCopy.close_settings_aria}\n        isOpen={isSettingsOpen}\n        onClose={() => setIsSettingsOpen(false)}\n        shouldShowHeaderBorders={false}\n        title={recurringCopy.action_title}\n      >\n        <RecurringSettings defaultSelectedTab={isManageIncomeView ? 1 : 0} />\n      </Drawer>\n    </WidgetContainer>\n  )\n}\n\nexport default observer(CashflowWidget)\n"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,IAAM,IAAA,CAAyC,EAAE,aAAA,GAAa,aAAA,GAAa,IAAA,IAAK,CAAC,EAAA,MAAQ;AACvF,QAAM,EAAE,kBAAA,GAAkB,sBAAA,GAAsB,uBAAA,GAAuB,uBAAA,EAAA,IACrE,EAAiB,GAEb,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,cAAA,EAAA,IAAiB,EAAa,GAChC,EAAE,qBAAqB,EAAA,IAAiB,EAAgB,GACxD,EAAE,WAAA,EAAA,IAAc,EAAoB,GACpC,EAAE,WAAA,EAAA,IAAc,EAAmB,GACnC,EAAE,8BAAA,GAA8B,cAAA,EAAA,IAAiB,EAA8B,GAC/E,EAAE,UAAU,GAAY,WAAW,EAAA,IAAkB,EAAmB,GACxE,EAAE,eAAA,EAAA,IAAkB,EAAiB,GAGrC,IADO,GAAc,QAAQ,kBAAkB,SACjB,iBAC9B,CAAC,GAAgB,CAAA,IAAqB,EAAM,SAAS,CAAkB;AAyB7E,SAvBA,EAAM,UAAA,MAAgB;AACpB,IAAK,KACH,EAA6B,EAAE,QAAQ;AAAA,EAE3C,GAAG,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAmB,EAAa,IAAA,CAAK,MAAY,EAAQ,IAAI,GAC7D,IAAW,EAAiB,OAAA,CAC/B,MACC,EAAqB,SAAS,EAAQ,IAAI,KAAK,EAAiB,SAAS,EAAQ,IAAI,CACzF;AACA,IAAA,EAAU;AAAA,MACR,WAAW;AAAA,QAAE,OAAO,EAAQ,EAAa,GAAG,EAAE;AAAA,QAAG,KAAK,EAAW;AAAA,MAAE;AAAA,MACnE,UAAU,EAAS,IAAA,CAAK,MAAM,EAAE,IAAI;AAAA,IACtC,CAAC;AAAA,EACH,GAAG,CAAC,GAAc,CAAgB,CAAC,GAEnC,EAAmB;AAAA,IACjB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC,GAEI,IAGH,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS,CACP;AAAA,MACE,OAAO,EAAc;AAAA,MACrB,UAAU;AAAA,MACV,SAAA,MAAe;AACb,QAAA,EAAkB,EAAI,GACtB,EAAQ,EAAiB,wBAAwB;AAAA,MACnD;AAAA,IACF,CACF;AAAA,IACA,qBAAqB;AAAA,MACnB,EAAY;AAAA,MACZ,EAAY;AAAA,MACZ,EAAY;AAAA,MACZ,EAAY;AAAA,MACZ,EAAY;AAAA,IACd;AAAA,IACA,iBAAiB;AAAA,MACf,mBAAmB;AAAA,MACnB,uBAAuB;AAAA,MACvB,qBAAqB;AAAA,MACrB,gBAAA,MAAsB;AAAA,MAAC;AAAA,IACzB;AAAA,IACW,WAAA;AAAA,IACX,kBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,uBAAA,MAA6B,EAAQ,EAAiB,sBAAsB;AAAA,IAC/D,aAAA;AAAA,IACA,aAAA;AAAA,IACT,IAAA;AAAA,IACJ,OAAO,EAAW;AAAA,cA/BpB;AAAA,MAiCE,gBAAA,EAAC,GAAD,CAAkB,CAAA;AAAA,MAElB,gBAAA,EAAC,GAAD,CAAkB,CAAA;AAAA,MAElB,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB,EAAW;AAAA,QAC3B,QAAQ;AAAA,QACR,SAAA,MAAe,EAAkB,EAAK;AAAA,QACtC,yBAAyB;AAAA,QACzB,OAAO,EAAc;AAAA,kBAErB,gBAAA,EAAC,GAAD,EAAmB,oBAAoB,IAAqB,IAAI,EAAI,CAAA;AAAA,MAC9D,CAAA;AAAA,IACO;AAAA,OAjDQ,gBAAA,EAAC,GAAD,CAAS,CAAA;AAmDtC,GAEA,KAAe,EAAS,CAAc"}

package/dist/cashflow/components/CashflowAmountHeading/index.es.js

@@ -0,0 +1,45 @@
+import { CurrencyText as e } from "../../../common/components/CurrencyText/index.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+var g = ({ amount: o, isMobile: t = !1, isTotal: n = !1, label: m, symbol: c, tooltip: i }) => /* @__PURE__ */ d(a, {
+  bgcolor: n ? "background.default" : "transparent",
+  direction: t ? "row" : "column",
+  justifyContent: t ? "space-between" : "initial",
+  padding: t ? "14px 16px" : 0,
+  sx: {
+    borderBottomLeftRadius: 4,
+    borderBottomRightRadius: 4
+  },
+  children: [
+    !t && /* @__PURE__ */ r(e, {
+      amount: o,
+      component: "h2",
+      variant: "h2"
+    }),
+    /* @__PURE__ */ d(a, {
+      alignItems: "center",
+      component: "span",
+      direction: "row",
+      gap: 8,
+      mt: 2,
+      children: [/* @__PURE__ */ r(p, {
+        bold: n,
+        variant: "body2",
+        children: m
+      }), i]
+    }),
+    t && /* @__PURE__ */ r(e, {
+      amount: o,
+      component: "h2",
+      symbol: c,
+      variant: "body2"
+    })
+  ]
+});
+export {
+  g as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/CashflowAmountHeading/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/CashflowAmountHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { CurrencyText } from '../../common/components/CurrencyText'\n\ninterface CashflowAmountHeadingProps {\n  amount: number\n  isMobile?: boolean\n  isTotal?: boolean\n  label: string\n  symbol?: string\n  tooltip?: React.ReactNode\n}\n\nconst CashflowAmountHeading: React.FC<CashflowAmountHeadingProps> = ({\n  amount,\n  isMobile = false,\n  isTotal = false,\n  label,\n  symbol,\n  tooltip,\n}) => {\n  return (\n    <Stack\n      bgcolor={isTotal ? 'background.default' : 'transparent'}\n      direction={isMobile ? 'row' : 'column'}\n      justifyContent={isMobile ? 'space-between' : 'initial'}\n      padding={isMobile ? '14px 16px' : 0}\n      sx={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}\n    >\n      {!isMobile && <CurrencyText amount={amount} component=\"h2\" variant=\"h2\" />}\n      <Stack alignItems=\"center\" component=\"span\" direction=\"row\" gap={8} mt={2}>\n        <Text bold={isTotal} variant=\"body2\">\n          {label}\n        </Text>\n        {tooltip}\n      </Stack>\n      {isMobile && <CurrencyText amount={amount} component=\"h2\" symbol={symbol} variant=\"body2\" />}\n    </Stack>\n  )\n}\n\nexport default CashflowAmountHeading\n"],"mappings":";;;;;AAiBA,IAAM,IAAA,CAA+D,EACnE,QAAA,GACA,UAAA,IAAW,IACX,SAAA,IAAU,IACV,OAAA,GACA,QAAA,GACA,SAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,SAAS,IAAU,uBAAuB;AAAA,EAC1C,WAAW,IAAW,QAAQ;AAAA,EAC9B,gBAAgB,IAAW,kBAAkB;AAAA,EAC7C,SAAS,IAAW,cAAc;AAAA,EAClC,IAAI;AAAA,IAAE,wBAAwB;AAAA,IAAG,yBAAyB;AAAA,EAAE;AAAA,YAL9D;AAAA,IAOG,CAAC,KAAY,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,WAAU;AAAA,MAAK,SAAQ;AAAA,IAAM,CAAA;AAAA,IACzE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,WAAU;AAAA,MAAO,WAAU;AAAA,MAAM,KAAK;AAAA,MAAG,IAAI;AAAA,gBAAxE,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAS,SAAQ;AAAA,kBAC1B;AAAA,MACG,CAAA,GACL,CACI;AAAA;IACN,KAAY,gBAAA,EAAC,GAAD;AAAA,MAAsB,QAAA;AAAA,MAAQ,WAAU;AAAA,MAAa,QAAA;AAAA,MAAQ,SAAQ;AAAA,IAAS,CAAA;AAAA,EACtF"}

package/dist/cashflow/components/CashflowContent/index.es.js

@@ -0,0 +1,63 @@
+import { useEvent as d, useGlobalCopyStore as u } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as p } from "../../../common/hooks/useScreenSize/index.es.js";
+import s from "../../../common/components/TabContentContainer/index.es.js";
+import b from "../DetailsTab/index.es.js";
+import x from "../SummaryTab/index.es.js";
+import n from "react";
+import { observer as w } from "mobx-react-lite";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import e from "@mui/material/Box";
+import m from "@mui/material/Tab";
+import C from "@mui/material/Tabs";
+var _ = () => {
+  const { cashflow: t } = u(), { isDesktop: r } = p(), { onEvent: i } = d(), [o, f] = n.useState(0), c = (v, h) => {
+    f(h);
+  };
+  return n.useEffect(() => {
+    i(o === 0 ? "cash_flow_summary" : "cash_flow_details");
+  }, [o]), /* @__PURE__ */ l(e, { children: [
+    /* @__PURE__ */ l(C, {
+      "aria-label": t.cashflow_summary_and_details,
+      centered: !0,
+      onChange: c,
+      textColor: "primary",
+      value: o,
+      variant: "fullWidth",
+      children: [/* @__PURE__ */ a(m, {
+        "aria-controls": "cashflow-tabpanel-0",
+        id: "cashflow-tab-0",
+        label: t.summary,
+        sx: { textTransform: "none" }
+      }), /* @__PURE__ */ a(m, {
+        "aria-controls": "cashflow-tabpanel-1",
+        id: "cashflow-tab-1",
+        label: t.details,
+        sx: { textTransform: "none" }
+      })]
+    }),
+    /* @__PURE__ */ a(e, { sx: { mb: 32 } }),
+    /* @__PURE__ */ a(s, {
+      index: 0,
+      name: "cashflow",
+      value: o,
+      children: /* @__PURE__ */ a(e, {
+        sx: { m: r ? 48 : 16 },
+        children: /* @__PURE__ */ a(x, {})
+      })
+    }),
+    /* @__PURE__ */ a(s, {
+      index: 1,
+      name: "cashflow",
+      value: o,
+      children: /* @__PURE__ */ a(e, {
+        sx: { m: r ? 48 : 16 },
+        children: /* @__PURE__ */ a(b, {})
+      })
+    })
+  ] });
+}, R = w(_);
+export {
+  R as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/CashflowContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/CashflowContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Tabs from '@mui/material/Tabs'\nimport Tab from '@mui/material/Tab'\n\nimport DetailsTab from './DetailsTab'\nimport SummaryTab from './SummaryTab'\nimport { TabContentContainer, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\n\nconst CashflowContent: React.FC = () => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const { isDesktop } = useScreenSize()\n  const { onEvent } = useEvent()\n\n  const [value, setValue] = React.useState(0)\n\n  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {\n    setValue(newValue)\n  }\n\n  React.useEffect(() => {\n    onEvent(value === 0 ? 'cash_flow_summary' : 'cash_flow_details')\n  }, [value])\n\n  return (\n    <Box>\n      <Tabs\n        aria-label={customCopy.cashflow_summary_and_details}\n        centered={true}\n        onChange={handleChange}\n        textColor=\"primary\"\n        value={value}\n        variant=\"fullWidth\"\n      >\n        <Tab\n          aria-controls=\"cashflow-tabpanel-0\"\n          id=\"cashflow-tab-0\"\n          label={customCopy.summary}\n          sx={{\n            textTransform: 'none',\n          }}\n        />\n        <Tab\n          aria-controls=\"cashflow-tabpanel-1\"\n          id=\"cashflow-tab-1\"\n          label={customCopy.details}\n          sx={{\n            textTransform: 'none',\n          }}\n        />\n      </Tabs>\n      <Box sx={{ mb: 32 }} />\n      <TabContentContainer index={0} name=\"cashflow\" value={value}>\n        <Box sx={{ m: isDesktop ? 48 : 16 }}>\n          <SummaryTab />\n        </Box>\n      </TabContentContainer>\n      <TabContentContainer index={1} name=\"cashflow\" value={value}>\n        <Box sx={{ m: isDesktop ? 48 : 16 }}>\n          <DetailsTab />\n        </Box>\n      </TabContentContainer>\n    </Box>\n  )\n}\n\nexport default observer(CashflowContent)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,IAAA,MAAkC;AACtC,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB,GAC9C,EAAE,WAAA,EAAA,IAAc,EAAc,GAC9B,EAAE,SAAA,EAAA,IAAY,EAAS,GAEvB,CAAC,GAAO,CAAA,IAAY,EAAM,SAAS,CAAC,GAEpC,IAAA,CAAgB,GAA8B,MAAqB;AACvE,IAAA,EAAS,CAAQ;AAAA,EACnB;AAEA,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAQ,MAAU,IAAI,sBAAsB,mBAAmB;AAAA,EACjE,GAAG,CAAC,CAAK,CAAC,GAGR,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAW;AAAA,MACvB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAU;AAAA,MACH,OAAA;AAAA,MACP,SAAQ;AAAA,gBANV,CAQE,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAc;AAAA,QACd,IAAG;AAAA,QACH,OAAO,EAAW;AAAA,QAClB,IAAI,EACF,eAAe,OACjB;AAAA,MACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAc;AAAA,QACd,IAAG;AAAA,QACH,OAAO,EAAW;AAAA,QAClB,IAAI,EACF,eAAe,OACjB;AAAA,MACD,CAAA,CACG;AAAA;IACN,gBAAA,EAAC,GAAD,EAAK,IAAI,EAAE,IAAI,GAAG,EAAI,CAAA;AAAA,IACtB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAkB,OAAA;AAAA,gBACpD,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,GAAG,IAAY,KAAK,GAAG;AAAA,kBAChC,gBAAA,EAAC,GAAD,CAAa,CAAA;AAAA,MACV,CAAA;AAAA,IACc,CAAA;AAAA,IACrB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAkB,OAAA;AAAA,gBACpD,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,GAAG,IAAY,KAAK,GAAG;AAAA,kBAChC,gBAAA,EAAC,GAAD,CAAa,CAAA;AAAA,MACV,CAAA;AAAA,IACc,CAAA;AAAA,EAClB,EAAA,CAAA;AAET,GAEA,IAAe,EAAS,CAAe"}