@mx-cartographer/experiences 6.26.18-alpha.mega1 → 6.26.18-alpha.mega3

package/dist/debts/utils/shared/index.es.js

@@ -0,0 +1,21 @@
+import { DebtPrioriy as s } from "../../constants/index/index.es.js";
+const l = (t, r) => {
+  const i = t.filter((e) => !e.is_paid_off && !e.is_impossible), o = t.filter((e) => e.is_paid_off || e.is_impossible);
+  switch (r) {
+    case s.HIGHEST_INTEREST:
+      i.sort((e, a) => (a.interest_rate ?? 0) - (e.interest_rate ?? 0));
+      break;
+    case s.LOWEST_BALANCE:
+      i.sort((e, a) => e.balance - a.balance);
+      break;
+    case s.HIGHEST_BALANCE:
+      i.sort((e, a) => a.balance - e.balance);
+      break;
+    default:
+      i.sort((e, a) => e.balance - a.balance);
+  }
+  t.splice(0, t.length, ...i, ...o);
+};
+export {
+  l as sortDebtsByPrioriy
+};

package/dist/finstrong/FinancialStrengthCard/index.es.js

@@ -0,0 +1,113 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import p from "@mui/material/Accordion";
+import f from "@mui/material/AccordionDetails";
+import u from "@mui/material/AccordionSummary";
+import x from "@mui/material/Button";
+import g from "@mui/material/Card";
+import _ from "@mui/material/CardHeader";
+import C from "@mui/material/Stack";
+import { useTheme as y } from "@mui/material/styles";
+import { H3 as S, P as c } from "@mxenabled/mxui";
+import { ChevronRight as b, ExpandMore as M } from "@mxenabled/mx-icons";
+import { observer as v } from "mobx-react-lite";
+import { useDimensions as z } from "../../common/hooks/useDimensions/index.es.js";
+import { ConnectMoreAccountsCard as H } from "../components/ConnectMoreAccountsCard/index.es.js";
+import { FinancialStrengthGraph as k } from "../components/FinancialStrengthGraph/index.es.js";
+import { calculateFinstrongScoreStatus as A } from "../util/finstrongUtils/index.es.js";
+import { useGlobalCopyStore as D, useGlobalUiStore as I, useFinstrongStore as F } from "../../common/context/hooks/index.es.js";
+import j from "../../common/components/Loader/index.es.js";
+const Y = v(() => {
+  const a = y(), [s, { width: t }] = z(), { finstrong: o } = D(), { isCopyLoaded: m, isInitialized: d } = I(), { healthScore: r, healthScoreChange: h } = F(), n = a.palette.mode === "dark", l = A(r?.health_score, o);
+  return !m || !d ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ i(g, { ref: s, sx: { p: 16 }, children: [
+    /* @__PURE__ */ e(
+      _,
+      {
+        action: /* @__PURE__ */ e(
+          x,
+          {
+            endIcon: /* @__PURE__ */ e(b, {}),
+            sx: {
+              fontSize: 13,
+              lineHeight: "16px",
+              fontWeight: 600,
+              color: "primary.main"
+            },
+            variant: "text",
+            children: o.financial_strength_header_action
+          }
+        ),
+        subheader: /* @__PURE__ */ e(S, { color: "text.primary", children: o.financial_strength_header }),
+        sx: {
+          p: 0,
+          "& .MuiCardHeader-content": {
+            overflow: "hidden"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ e(C, { sx: { justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ e(
+      k,
+      {
+        arcRadius: t <= 323 ? 73 : 154,
+        footerCenterContent: h,
+        healthScore: r?.health_score || 0,
+        size: t <= 323 ? "M" : "L"
+      }
+    ) }),
+    r?.health_score ? /* @__PURE__ */ i(
+      p,
+      {
+        sx: {
+          px: 16,
+          backgroundColor: n ? "grey.800" : "grey.50",
+          //TODO: Need to change the background color to palette (supporting both darkmode and lightmode)
+          "&.Mui-expanded": {
+            m: 0
+          },
+          "&::before": {
+            display: "none"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(
+            u,
+            {
+              expandIcon: /* @__PURE__ */ e(M, { size: 20 }),
+              sx: {
+                height: 52,
+                p: 0,
+                "&.Mui-expanded": {
+                  minHeight: 0
+                }
+              },
+              children: /* @__PURE__ */ e(c, { sx: { fontWeight: 600 }, variant: "body1", children: o.accordion_title_text })
+            }
+          ),
+          /* @__PURE__ */ e(f, { sx: { "&.MuiAccordionDetails-root": { padding: 0, pb: 16 } }, children: /* @__PURE__ */ e(c, { variant: "subtitle1", children: l.scoreContent }) })
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      H,
+      {
+        buttonText: o.connect_more_accounts_title,
+        description: o.health_score_zero_description,
+        hasIcon: !1,
+        isDashboard: !0,
+        sx: {
+          backgroundColor: n ? "grey.800" : "grey.50",
+          //TODO: Need to change the background color to palette (supporting both darkmode and lightmode)
+          ".connect-more-accounts-title": {
+            fontWeight: 600,
+            lineHeight: "20px",
+            color: "text.primary"
+          },
+          ".connect-more-accounts-description": { color: "text.primary" }
+        },
+        title: o.health_score_zero_title
+      }
+    )
+  ] });
+});
+export {
+  Y as FinancialStrengthCard
+};

package/dist/finstrong/FinstrongWidget/index.es.js

@@ -0,0 +1,141 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import r from "react";
+import { observer as O } from "mobx-react-lite";
+import I from "@mui/material/Button";
+import X from "@mui/material/Card";
+import a from "@mui/material/Stack";
+import { useTheme as H } from "@mui/material/styles";
+import { ChevronRight as M } from "@mxenabled/mx-icons";
+import { H3 as T } from "@mxenabled/mxui";
+import { LineChart as j } from "../../common/components/charts/LineChart/index.es.js";
+import { ConnectMoreAccountsCard as B } from "../components/ConnectMoreAccountsCard/index.es.js";
+import { FinancialStrengthCard as E } from "../FinancialStrengthCard/index.es.js";
+import P from "../components/ProfileDrawer/index.es.js";
+import G from "../components/KeyIndicatorsTabsWidget/index.es.js";
+import R from "../components/ScoreHistoryDrawer/index.es.js";
+import K from "../components/MissingData/index.es.js";
+import { useAccountStore as N, useBudgetsStore as U, useCategoryStore as V, useFinstrongStore as $, useGlobalCopyStore as q, useGlobalUiStore as J } from "../../common/context/hooks/index.es.js";
+import { useScreenSize as Q } from "../../common/hooks/useScreenSize/index.es.js";
+import Y from "../../common/components/Loader/index.es.js";
+import Z from "../../common/components/WidgetContainer/index.es.js";
+import ee from "../../common/components/ConnectDrawer/index.es.js";
+const te = ({ onBackClick: h, sx: g }) => {
+  const t = H(), { visibleAccounts: s } = N(), { dateRange: l, isDataLoaded: c, loadBudgetData: C, setTheme: S } = U(), { reloadCategoryTotals: y } = V(), { augmentedChartData: m, calculateHealthScore: b, healthScore: w, loadAugmentedChartData: x } = $(), { finstrong: o, connect: k } = q(), { isCopyLoaded: _, isInitialized: i, selectedAccounts: p, setSelectedAccounts: A } = J(), { isMobile: D } = Q(), [v, d] = r.useState(!1);
+  r.useEffect(() => {
+    S(t);
+  }, []), r.useEffect(() => A(s), [s]), r.useEffect(() => {
+    i && (b().finally(), x().finally());
+  }, [i]), r.useEffect(() => {
+    i && (y(p, l.start, l.end), c || C());
+  }, [l, c, i, p]);
+  const [F, f] = r.useState(!1), [W, u] = r.useState(!1);
+  if (!_ || !i) return /* @__PURE__ */ e(Y, {});
+  const z = () => {
+  }, L = () => f(!0);
+  return /* @__PURE__ */ n(
+    Z,
+    {
+      accountOptions: s,
+      actions: [
+        {
+          iconName: "person",
+          label: o.profile,
+          onClick: L
+        }
+      ],
+      hasDivider: !0,
+      onAccountsFilterClick: z,
+      onBackClick: h,
+      sx: g,
+      title: o.title,
+      children: [
+        /* @__PURE__ */ n(
+          a,
+          {
+            sx: {
+              flexDirection: { md: "row" },
+              gap: 24,
+              justifyContent: "center",
+              pt: D ? 24 : 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ n(a, { sx: { gap: 24, width: { md: 432 } }, children: [
+                /* @__PURE__ */ e(E, {}),
+                /* @__PURE__ */ e(
+                  B,
+                  {
+                    description: o.connect_more_accounts_description,
+                    title: o.connect_more_accounts_title
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e(a, { sx: { maxWidth: 848, minWidth: 288, width: { md: 720 } }, children: /* @__PURE__ */ n(X, { sx: { background: t.palette.background.paper, p: 16 }, children: [
+                /* @__PURE__ */ n(a, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+                  /* @__PURE__ */ e(T, { children: o.key_indicators }),
+                  /* @__PURE__ */ e(
+                    I,
+                    {
+                      endIcon: /* @__PURE__ */ e(M, {}),
+                      onClick: () => u(!0),
+                      sx: {
+                        fontSize: 13
+                      },
+                      variant: "text",
+                      children: o.whats_changed
+                    }
+                  )
+                ] }),
+                m.length ? /* @__PURE__ */ e(
+                  j,
+                  {
+                    axisColor: t.palette.divider,
+                    baseline: "min",
+                    colors: [t.palette.primary.main],
+                    curveType: "natural",
+                    customLegendVariant: "XSmall",
+                    datasets: [m],
+                    height: 300,
+                    isGraphClippingXAxis: !0,
+                    labelBackgroundColor: t.palette.border.dark,
+                    labelFontColor: t.palette.common.white,
+                    labelFontSize: typeof t.typography.XSmall?.fontSize == "string" ? parseFloat(t.typography.XSmall.fontSize) : t.typography.XSmall?.fontSize,
+                    labels: [o.key_indicators_label],
+                    margin: { right: 20, left: 25 },
+                    showArea: !0,
+                    showAverage: !0,
+                    showLegend: !0,
+                    showMarkLabel: !0,
+                    showXAxis: !0,
+                    title: o.peer_average,
+                    useCustomMark: !0
+                  }
+                ) : /* @__PURE__ */ e(K, { onClick: () => d(!0) }),
+                w.health_score !== null && /* @__PURE__ */ e(G, {})
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(P, { isOpen: F, onClose: () => f(!1) }),
+        /* @__PURE__ */ e(
+          ee,
+          {
+            onClose: () => d(!1),
+            showConnectWidget: v,
+            title: k.mini_title
+          }
+        ),
+        /* @__PURE__ */ e(
+          R,
+          {
+            isOpen: W,
+            onClose: () => u(!1)
+          }
+        )
+      ]
+    }
+  );
+}, ke = O(te);
+export {
+  ke as default
+};

package/dist/finstrong/api/FinstrongApi/index.es.js

@@ -0,0 +1,15 @@
+import { Fetch as r } from "../../../common/utils/Fetch/index.es.js";
+import { ApiEndpoints as n } from "../../../common/constants/ApiEndpoints/index.es.js";
+class o {
+  fetchInstance;
+  constructor(e, t) {
+    this.fetchInstance = new r(e, t);
+  }
+  calculateHealthScore = async () => this.fetchInstance.post(`${n.HEALTH_SCORES}/calculate`).then((e) => e.health_score);
+  getAverageHealthScores = async () => this.fetchInstance.get(`${n.HEALTH_SCORES}/monthly_averages`).then((e) => e);
+  getHealthScoreChangeReports = async (e, t) => this.fetchInstance.get(`${n.HEALTH_SCORES}/change_report/from/${e}/to/${t}`).then((c) => c);
+  getPeerScore = async (e) => this.fetchInstance.get(`${n.HEALTH_SCORES}/average/${e}`).then((t) => t.average_health_score);
+}
+export {
+  o as FinstrongApi
+};

package/dist/finstrong/components/ConnectMoreAccountsCard/index.es.js

@@ -0,0 +1,76 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import d from "react";
+import { AccountBalance as f, ChevronRight as h } from "@mxenabled/mx-icons";
+import { H3 as u, P as x, Text as C } from "@mxenabled/mxui";
+import _ from "@mui/material/Stack";
+import g from "@mui/material/Button";
+import w from "@mui/material/Card";
+import { useGlobalCopyStore as y } from "../../../common/context/hooks/index.es.js";
+import S from "../../../common/components/ConnectDrawer/index.es.js";
+const N = ({
+  isDashboard: e = !1,
+  hasIcon: a = !0,
+  buttonText: n,
+  title: c,
+  description: r,
+  sx: m
+}) => {
+  const [l, i] = d.useState(!1), { connect: p, finstrong: o } = y();
+  return /* @__PURE__ */ s(
+    w,
+    {
+      sx: {
+        pb: 24,
+        pt: 18,
+        px: 24,
+        width: "100%",
+        ...m
+      },
+      children: [
+        /* @__PURE__ */ s(
+          _,
+          {
+            sx: {
+              gap: 8,
+              ...e && { flexDirection: "row", alignItems: "center" }
+            },
+            children: [
+              a && /* @__PURE__ */ t(f, { sx: { height: 20, width: 20 } }),
+              /* @__PURE__ */ t(u, { className: "connect-more-accounts-title", sx: { ...e && { fontSize: 15 } }, children: c || o.connect_more_accounts_title })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          x,
+          {
+            className: "connect-more-accounts-description",
+            sx: { color: "text.secondary", mt: 8 },
+            variant: "subtitle1",
+            children: r || o.connect_more_accounts_description
+          }
+        ),
+        /* @__PURE__ */ t(
+          g,
+          {
+            endIcon: /* @__PURE__ */ t(h, {}),
+            onClick: () => i(!0),
+            size: "small",
+            sx: { p: 0, mt: 8, "&:hover": { backgroundColor: "transparent" } },
+            children: /* @__PURE__ */ t(C, { sx: { fontWeight: 600 }, variant: "body2", children: n || o.connect_more_accounts_button })
+          }
+        ),
+        /* @__PURE__ */ t(
+          S,
+          {
+            onClose: () => i(!1),
+            showConnectWidget: l,
+            title: p.mini_title
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  N as ConnectMoreAccountsCard
+};

package/dist/finstrong/components/CreditScoreGraph/index.es.js

@@ -0,0 +1,75 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useTheme as f } from "@mui/material/styles";
+import { observer as u } from "mobx-react-lite";
+import { getCreditScoreDetails as S, CreditScoreDarkColors as r, CreditScoreLightColors as e } from "../../util/finstrongUtils/index.es.js";
+import { DialScoreCard as D } from "../shared/DialScoreCard/index.es.js";
+import { useGlobalCopyStore as G, useGlobalUiStore as b } from "../../../common/context/hooks/index.es.js";
+import E from "../../../common/components/Loader/index.es.js";
+const A = u(
+  ({
+    arcRadius: c,
+    size: s = "L",
+    healthScore: t,
+    maxValue: a = 850,
+    minValue: l = 300,
+    footerCenterContent: d
+  }) => {
+    const o = f().palette.mode === "dark", m = [
+      {
+        id: 1,
+        label: "Poor",
+        value: 279,
+        color: o ? r.POOR : e.POOR
+      },
+      {
+        id: 2,
+        label: "Fair",
+        value: 89,
+        color: o ? r.FAIR : e.FAIR
+      },
+      {
+        id: 3,
+        label: "Good",
+        value: 69,
+        color: o ? r.GOOD : e.GOOD
+      },
+      {
+        id: 4,
+        label: "Very Good",
+        value: 59,
+        color: o ? r.VERY_GOOD : e.VERY_GOOD
+      },
+      {
+        id: 5,
+        label: "Exceptional",
+        value: 50,
+        color: o ? r.EXCEPTIONAL : e.EXCEPTIONAL
+      }
+    ], { finstrong: n } = G(), { isCopyLoaded: p } = b();
+    if (!p) return /* @__PURE__ */ i(E, {});
+    const { status: C, color: O = "none" } = S(
+      t,
+      o,
+      n.credit_score_status
+    );
+    return /* @__PURE__ */ i(
+      D,
+      {
+        arcRadius: c,
+        dialScoreData: m,
+        footerCenterContent: d,
+        footerLeftContent: l,
+        footerRightContent: a,
+        healthScore: t,
+        healthScoreStatus: C,
+        markerColor: O,
+        maxValue: a,
+        minValue: l,
+        size: s
+      }
+    );
+  }
+);
+export {
+  A as CreditScoreGraph
+};

package/dist/finstrong/components/FinancialStrengthGraph/index.es.js

@@ -0,0 +1,30 @@
+import { jsx as u } from "react/jsx-runtime";
+import { observer as i } from "mobx-react-lite";
+import { calculateFinstrongScoreStatus as c } from "../../util/finstrongUtils/index.es.js";
+import { DialScoreCard as p } from "../shared/DialScoreCard/index.es.js";
+import { useGlobalCopyStore as s } from "../../../common/context/hooks/index.es.js";
+const G = i(
+  ({ arcRadius: e, size: t = "L", healthScore: o, footerCenterContent: a }) => {
+    const l = [
+      { id: 1, label: "Group A", value: 25 },
+      { id: 2, label: "Group B", value: 25 },
+      { id: 3, label: "Group C", value: 25 },
+      { id: 4, label: "Group D", value: 25 }
+    ], { finstrong: r } = s(), n = c(o, r);
+    return /* @__PURE__ */ u(
+      p,
+      {
+        arcRadius: e,
+        dialScoreData: l,
+        footerCenterContent: t === "L" ? r.footer_center_content_updated_just_now : a,
+        healthScore: o,
+        healthScoreStatus: n.status,
+        isFinacialStrengthGraph: !0,
+        size: t
+      }
+    );
+  }
+);
+export {
+  G as FinancialStrengthGraph
+};

package/dist/finstrong/components/KeyIndicatorsBorrowTab/index.es.js

@@ -0,0 +1,63 @@
+import { jsxs as y, jsx as f } from "react/jsx-runtime";
+import k from "react";
+import T from "@mui/material/Stack";
+import S from "../KeyIndicatorsTabItem/index.es.js";
+import { FinstrongThresholds as u, CardStatus as n } from "../../../common/constants/FinStrong/index.es.js";
+import { useFinstrongStore as I, useGlobalCopyStore as C, useUserStore as D } from "../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as d } from "../../../common/utils/Localization/index.es.js";
+const A = () => {
+  const { healthScore: m } = I(), { finstrong: i } = C(), { key_indicators_borrow: e } = i, { user: p } = D(), g = (t) => {
+    const { good: c, poor: a } = u.debtToIncomeRatio;
+    let o = n.MISSING, r = e.manage_debit_missing_description, s = i.key_indicators_missing;
+    return t != null && (t <= c ? (o = n.GOOD, r = e.manage_debit_good_description, s = i.key_indicators_good) : t > c && t <= a ? (o = n.FAIR, r = d(e.manage_debit_fair_description, t), s = i.key_indicators_fair) : t > a && (o = n.OFF_TRACK, r = d(
+      e.manage_debit_off_track_description,
+      t
+    ), s = i.key_indicators_off_track)), {
+      cardState: o,
+      description: r,
+      title: e.manage_debit_title,
+      stateTitle: s
+    };
+  }, b = (t) => {
+    const { good: c, poor: a } = u.creditScore;
+    let o = n.MISSING, r = e.credit_score_missing_description, s = i.key_indicators_missing;
+    return t !== null && (t >= c ? (o = n.GOOD, r = d(e.credit_score_good_description, t), s = i.key_indicators_good) : t < c && t >= a ? (o = n.FAIR, r = d(e.credit_score_fair_description, t), s = i.key_indicators_fair) : t < a && (o = n.OFF_TRACK, r = d(
+      e.credit_score_off_track_description,
+      t
+    ), s = i.key_indicators_off_track)), {
+      cardState: o,
+      description: r,
+      title: e.credit_score_title,
+      stateTitle: s
+    };
+  }, { manageDebtStatus: _, creditScoreStatus: l } = k.useMemo(() => {
+    const t = m.debt_to_income_ratio !== null ? Math.round(m.debt_to_income_ratio * 100) : null, c = g(t), a = b(p.credit_score || null);
+    return {
+      manageDebtStatus: c,
+      creditScoreStatus: a
+    };
+  }, [m.debt_to_income_ratio, p.credit_score, e, i]);
+  return /* @__PURE__ */ y(T, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
+    /* @__PURE__ */ f(
+      S,
+      {
+        cardState: _.cardState,
+        description: _.description,
+        stateTitle: _.stateTitle,
+        title: _.title
+      }
+    ),
+    /* @__PURE__ */ f(
+      S,
+      {
+        cardState: l.cardState,
+        description: l.description,
+        stateTitle: l.stateTitle,
+        title: l.title
+      }
+    )
+  ] });
+};
+export {
+  A as default
+};

package/dist/finstrong/components/KeyIndicatorsDrawer/index.es.js

@@ -0,0 +1,49 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { observer as h } from "mobx-react-lite";
+import { H3 as x, P as b } from "@mxenabled/mxui";
+import p from "@mui/material/Box";
+import y from "@mui/material/Divider";
+import a from "@mui/material/Stack";
+import { ConnectMoreAccountsCard as g } from "../ConnectMoreAccountsCard/index.es.js";
+import { useGlobalCopyStore as D, useGlobalUiStore as k } from "../../../common/context/hooks/index.es.js";
+import w from "../../../common/components/Loader/index.es.js";
+import C from "../../../common/components/drawer/Drawer/index.es.js";
+const I = ({
+  additionalContent: t,
+  children: c,
+  description: o,
+  drawerTitle: m,
+  isOpen: n,
+  loadConnectAccountsCard: d = !0,
+  onClose: f,
+  stickyComponent: s,
+  title: e
+}) => {
+  const { finstrong: l } = D(), { isCopyLoaded: u } = k();
+  return u ? /* @__PURE__ */ i(C, { isOpen: n, onClose: f, title: m || l.key_indicators, children: [
+    (e || o) && /* @__PURE__ */ i(a, { sx: { p: 24, pb: 0, gap: 8, backgroundColor: "background.paper" }, children: [
+      e && /* @__PURE__ */ r(x, { children: e }),
+      o && /* @__PURE__ */ r(b, { children: o })
+    ] }),
+    s && /* @__PURE__ */ r(
+      p,
+      {
+        sx: {
+          position: "sticky",
+          top: 0,
+          zIndex: 1
+        },
+        children: s
+      }
+    ),
+    t && /* @__PURE__ */ r(p, { children: t }),
+    /* @__PURE__ */ r(y, {}),
+    /* @__PURE__ */ i(a, { sx: { p: 24, gap: 24 }, children: [
+      c,
+      d && /* @__PURE__ */ r(g, { isDashboard: !0 })
+    ] })
+  ] }) : /* @__PURE__ */ r(w, {});
+}, M = h(I);
+export {
+  M as default
+};

package/dist/finstrong/components/KeyIndicatorsSaveTab/index.es.js

@@ -0,0 +1,63 @@
+import { jsxs as S, jsx as m } from "react/jsx-runtime";
+import u from "react";
+import O from "@mui/material/Stack";
+import { FinstrongThresholds as l, CardStatus as a } from "../../../common/constants/FinStrong/index.es.js";
+import y from "../KeyIndicatorsTabItem/index.es.js";
+import { useFinstrongStore as v, useGlobalCopyStore as k } from "../../../common/context/hooks/index.es.js";
+import { buildDynamicCopy as g } from "../../../common/utils/Localization/index.es.js";
+import { formatCurrency as C } from "../../../common/utils/NumberFormatting/index.es.js";
+const b = () => {
+  const { healthScore: _ } = v(), { finstrong: s } = k(), { key_indicators_save: e } = s, p = (t) => {
+    const { good: r, poor: c } = l.daysOfCashOnHand;
+    let n = a.MISSING, i = e.days_of_cash_missing_description, o = s.key_indicators_missing;
+    return t !== null && (t >= r ? (n = a.GOOD, i = g(e.days_of_cash_good_description, t), o = s.key_indicators_good) : t < r && t >= c ? (n = a.FAIR, i = g(e.days_of_cash_fair_description, t), o = s.key_indicators_fair) : t < c && (n = a.OFF_TRACK, i = g(e.days_of_cash_off_track_description, t), o = s.key_indicators_off_track)), {
+      cardState: n,
+      description: i,
+      title: e.days_of_cash_title,
+      stateTitle: o
+    };
+  }, h = (t) => {
+    const { good: r, poor: c } = l.emergencySavings;
+    let n = a.MISSING, i = e.emergency_savings_missing_description, o = s.key_indicators_missing;
+    return t !== null && (t >= r ? (n = a.GOOD, i = e.emergency_savings_good_description, o = s.key_indicators_good) : t < r && t >= c ? (n = a.FAIR, i = g(
+      e.emergency_savings_fair_description,
+      C(t, "0,0.00")
+    ), o = s.key_indicators_fair) : t < c && (n = a.OFF_TRACK, i = e.emergency_savings_off_track_description, o = s.key_indicators_off_track)), {
+      cardState: n,
+      description: i,
+      title: e.emergency_savings_title,
+      stateTitle: o
+    };
+  }, { daysOfCashOnHand: d, emergencySavings: f } = u.useMemo(() => {
+    const t = _.months_of_cash_on_hand !== null ? Math.round(_.months_of_cash_on_hand * 30) : null, r = p(t), c = _.emergency_savings_on_hand !== null ? Math.round(_.emergency_savings_on_hand) : null, n = h(c);
+    return { daysOfCashOnHand: r, emergencySavings: n };
+  }, [
+    _.months_of_cash_on_hand,
+    _.emergency_savings_on_hand,
+    e,
+    s
+  ]);
+  return /* @__PURE__ */ S(O, { direction: "column", gap: 24, sx: { p: 8, pt: 24 }, children: [
+    /* @__PURE__ */ m(
+      y,
+      {
+        cardState: d.cardState,
+        description: d.description,
+        stateTitle: d.stateTitle,
+        title: d.title
+      }
+    ),
+    /* @__PURE__ */ m(
+      y,
+      {
+        cardState: f.cardState,
+        description: f.description,
+        stateTitle: f.stateTitle,
+        title: f.title
+      }
+    )
+  ] });
+};
+export {
+  b as default
+};