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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/CreditScoreGraph.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  CreditScoreDarkColors,\n  CreditScoreLightColors,\n  getCreditScoreDetails,\n} from '../util/finstrongUtils'\n\nimport { DialScoreCard } from './shared/DialScoreCard'\nimport { Loader, useGlobalCopyStore, useGlobalUiStore } from '../../common'\n\nexport interface CreditScoreGraphProps {\n  arcRadius: number\n  size?: 'L' | 'M' | 'SM'\n  healthScore: number\n  maxValue?: number\n  minValue?: number\n  footerCenterContent?: string | number\n}\nexport const CreditScoreGraph = observer(\n  ({\n    arcRadius,\n    size = 'L',\n    healthScore,\n    maxValue = 850,\n    minValue = 300,\n    footerCenterContent,\n  }: CreditScoreGraphProps) => {\n    const theme = useTheme()\n\n    const isDarkMode = theme.palette.mode === 'dark'\n    const creditScoreData = [\n      {\n        id: 1,\n        label: 'Poor',\n        value: 29,\n        color: isDarkMode ? CreditScoreDarkColors.POOR : CreditScoreLightColors.POOR,\n      },\n      {\n        id: 2,\n        label: 'Fair',\n        value: 25,\n        color: isDarkMode ? CreditScoreDarkColors.FAIR : CreditScoreLightColors.FAIR,\n      },\n      {\n        id: 3,\n        label: 'Good',\n        value: 17,\n        color: isDarkMode ? CreditScoreDarkColors.GOOD : CreditScoreLightColors.GOOD,\n      },\n      {\n        id: 4,\n        label: 'Very Good',\n        value: 17,\n        color: isDarkMode ? CreditScoreDarkColors.VERY_GOOD : CreditScoreLightColors.VERY_GOOD,\n      },\n      {\n        id: 5,\n        label: 'Exceptional',\n        value: 12,\n        color: isDarkMode ? CreditScoreDarkColors.EXCEPTIONAL : CreditScoreLightColors.EXCEPTIONAL,\n      },\n    ]\n    const { finstrong: copy } = useGlobalCopyStore()\n\n    const { isCopyLoaded } = useGlobalUiStore()\n\n    if (!isCopyLoaded) return <Loader />\n\n    const { status: creditScoreStatus, color: markerColor = 'none' } = getCreditScoreDetails(\n      healthScore,\n      isDarkMode,\n      copy.credit_score_status,\n    )\n    return (\n      <DialScoreCard\n        arcRadius={arcRadius}\n        dialScoreData={creditScoreData}\n        footerCenterContent={footerCenterContent}\n        footerLeftContent={minValue}\n        footerRightContent={maxValue}\n        healthScore={healthScore}\n        healthScoreStatus={creditScoreStatus}\n        markerColor={markerColor}\n        maxValue={maxValue}\n        minValue={minValue}\n        size={size}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAqBA,IAAa,IAAmB,EAAA,CAC7B,EACC,WAAA,GACA,MAAA,IAAO,KACP,aAAA,GACA,UAAA,IAAW,KACX,UAAA,IAAW,KACX,qBAAA,EAAA,MAC2B;AAG3B,QAAM,IAFQ,EAEK,EAAM,QAAQ,SAAS,QACpC,IAAkB;AAAA,IACtB;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,IAAa,EAAsB,OAAO,EAAuB;AAAA,IAC1E;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,IAAa,EAAsB,OAAO,EAAuB;AAAA,IAC1E;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,IAAa,EAAsB,OAAO,EAAuB;AAAA,IAC1E;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,IAAa,EAAsB,YAAY,EAAuB;AAAA,IAC/E;AAAA,IACA;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO,IAAa,EAAsB,cAAc,EAAuB;AAAA,IACjF;AAAA,EACF,GACM,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,EAAE,cAAA,EAAA,IAAiB,EAAiB;AAE1C,MAAI,CAAC,EAAc,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAEnC,QAAM,EAAE,QAAQ,GAAmB,OAAO,IAAc,OAAA,IAAW,EACjE,GACA,GACA,EAAK,mBACP;AACA,SACE,gBAAA,EAAC,GAAD;AAAA,IACa,WAAA;AAAA,IACX,eAAe;AAAA,IACM,qBAAA;AAAA,IACrB,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACP,aAAA;AAAA,IACb,mBAAmB;AAAA,IACN,aAAA;AAAA,IACH,UAAA;AAAA,IACA,UAAA;AAAA,IACJ,MAAA;AAAA,EACP,CAAA;AAEL,CACF"}

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

@@ -0,0 +1,44 @@
+import { useGlobalCopyStore as i } from "../../../common/context/hooks/index.es.js";
+import { calculateFinstrongScoreStatus as c } from "../../util/finstrongUtils/index.es.js";
+import { DialScoreCard as p } from "../shared/DialScoreCard/index.es.js";
+import { observer as s } from "mobx-react-lite";
+import { jsx as S } from "react/jsx-runtime";
+var b = s(({ arcRadius: e, size: t = "L", healthScore: r, footerCenterContent: a, margin: l }) => {
+  const n = [
+    {
+      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: o } = i(), u = c(r, o);
+  return /* @__PURE__ */ S(p, {
+    arcRadius: e,
+    dialScoreData: n,
+    footerCenterContent: t === "L" ? o.footer_center_content_updated_just_now : a,
+    healthScore: r,
+    healthScoreStatus: u.status,
+    isFinacialStrengthGraph: !0,
+    margin: l,
+    size: t
+  });
+});
+export {
+  b as FinancialStrengthGraph
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/FinancialStrengthGraph.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { calculateFinstrongScoreStatus } from '../util/finstrongUtils'\n\nimport { DialScoreCard } from './shared/DialScoreCard'\n\nexport interface FinacialStrengthGraphProps {\n  arcRadius: number\n  size?: 'L' | 'M' | 'SM'\n  healthScore: number\n  footerCenterContent?: string | number\n  margin?: { top?: number; right?: number; left?: number; bottom?: number }\n}\nexport const FinancialStrengthGraph = observer(\n  ({\n    arcRadius,\n    size = 'L',\n    healthScore,\n    footerCenterContent,\n    margin,\n  }: FinacialStrengthGraphProps) => {\n    const healthScoreData = [\n      { id: 1, label: 'Group A', value: 25 },\n      { id: 2, label: 'Group B', value: 25 },\n      { id: 3, label: 'Group C', value: 25 },\n      { id: 4, label: 'Group D', value: 25 },\n    ]\n    const { finstrong: copy } = useGlobalCopyStore()\n\n    const healthScoreStatus = calculateFinstrongScoreStatus(healthScore, copy)\n\n    return (\n      <DialScoreCard\n        arcRadius={arcRadius}\n        dialScoreData={healthScoreData}\n        footerCenterContent={\n          size === 'L' ? copy.footer_center_content_updated_just_now : footerCenterContent\n        }\n        healthScore={healthScore}\n        healthScoreStatus={healthScoreStatus.status}\n        isFinacialStrengthGraph={true}\n        margin={margin}\n        size={size}\n      />\n    )\n  },\n)\n"],"mappings":";;;;;AAeA,IAAa,IAAyB,EAAA,CACnC,EACC,WAAA,GACA,MAAA,IAAO,KACP,aAAA,GACA,qBAAA,GACA,QAAA,EAAA,MACgC;AAChC,QAAM,IAAkB;AAAA,IACtB;AAAA,MAAE,IAAI;AAAA,MAAG,OAAO;AAAA,MAAW,OAAO;AAAA,IAAG;AAAA,IACrC;AAAA,MAAE,IAAI;AAAA,MAAG,OAAO;AAAA,MAAW,OAAO;AAAA,IAAG;AAAA,IACrC;AAAA,MAAE,IAAI;AAAA,MAAG,OAAO;AAAA,MAAW,OAAO;AAAA,IAAG;AAAA,IACrC;AAAA,MAAE,IAAI;AAAA,MAAG,OAAO;AAAA,MAAW,OAAO;AAAA,IAAG;AAAA,EACvC,GACM,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,IAAoB,EAA8B,GAAa,CAAI;AAEzE,SACE,gBAAA,EAAC,GAAD;AAAA,IACa,WAAA;AAAA,IACX,eAAe;AAAA,IACf,qBACE,MAAS,MAAM,EAAK,yCAAyC;AAAA,IAElD,aAAA;AAAA,IACb,mBAAmB,EAAkB;AAAA,IACrC,yBAAyB;AAAA,IACjB,QAAA;AAAA,IACF,MAAA;AAAA,EACP,CAAA;AAEL,CACF"}

package/dist/finstrong/components/HaveManageableDebt/DebtPaymentTabContent/index.es.js

@@ -0,0 +1,43 @@
+import { useFinstrongStore as c, useGlobalCopyStore as m } from "../../../../common/context/hooks/index.es.js";
+import l from "../../../../common/components/ConnectDrawer/index.es.js";
+import p from "../../shared/TotalCard/index.es.js";
+import d from "../../shared/Transactions/index.es.js";
+import _ from "react";
+import { observer as b } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import u from "@mui/material/Button";
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+var y = () => {
+  const { allTransactions: e, healthScore: r } = c(), { connect: a, finstrong: o } = m(), [i, n] = _.useState(!1);
+  return /* @__PURE__ */ C(f, {
+    gap: 16,
+    sx: { p: 16 },
+    children: [
+      /* @__PURE__ */ t(p, {
+        balance: r.ninety_day_debt_spend,
+        sx: { flexDirection: "column-reverse" },
+        title: o.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_payments
+      }),
+      e.debtSpend.length ? /* @__PURE__ */ t(d, {
+        amountColor: "text.primary",
+        transactions: e.debtSpend.map((s) => s.transaction)
+      }) : /* @__PURE__ */ t(u, {
+        onClick: () => {
+          n(!0);
+        },
+        variant: "contained",
+        children: o.connect_more_accounts_button
+      }),
+      /* @__PURE__ */ t(l, {
+        onClose: () => n(!1),
+        showConnectWidget: i,
+        title: a.mini_title
+      })
+    ]
+  });
+}, j = b(y);
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/HaveManageableDebt/DebtPaymentTabContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/HaveManageableDebt/DebtPaymentTabContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ConnectDrawer, useFinstrongStore, useGlobalCopyStore } from '../../../common'\nimport TotalCard from '../shared/TotalCard'\nimport Transactions from '../shared/Transactions'\n\nconst DebtPaymentTabContent: React.FC = () => {\n  const { allTransactions, healthScore } = useFinstrongStore()\n  const { connect: connectCopy, finstrong: copy } = useGlobalCopyStore()\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n\n  return (\n    <Stack gap={16} sx={{ p: 16 }}>\n      <TotalCard\n        balance={healthScore.ninety_day_debt_spend}\n        sx={{ flexDirection: 'column-reverse' }}\n        title={copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_payments}\n      />\n\n      {allTransactions.debtSpend.length ? (\n        //TODO: Need to add More Transactions functionality\n        <Transactions\n          amountColor=\"text.primary\"\n          transactions={allTransactions.debtSpend.map((item) => item.transaction)}\n        />\n      ) : (\n        <Button\n          onClick={() => {\n            setShowConnectWidget(true)\n          }}\n          variant=\"contained\"\n        >\n          {copy.connect_more_accounts_button}\n        </Button>\n      )}\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(DebtPaymentTabContent)\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAA,MAAwC;AAC5C,QAAM,EAAE,iBAAA,GAAiB,aAAA,EAAA,IAAgB,EAAkB,GACrD,EAAE,SAAS,GAAa,WAAW,EAAA,IAAS,EAAmB,GAC/D,CAAC,GAAmB,CAAA,IAAwB,EAAM,SAAS,EAAK;AAEtE,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAI,IAAI,EAAE,GAAG,GAAG;AAAA,cAA5B;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,EAAY;AAAA,QACrB,IAAI,EAAE,eAAe,iBAAiB;AAAA,QACtC,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,MAC/D,CAAA;AAAA,MAEA,EAAgB,UAAU,SAEzB,gBAAA,EAAC,GAAD;AAAA,QACE,aAAY;AAAA,QACZ,cAAc,EAAgB,UAAU,IAAA,CAAK,MAAS,EAAK,WAAW;AAAA,MACvE,CAAA,IAED,gBAAA,EAAC,GAAD;AAAA,QACE,SAAA,MAAe;AACb,UAAA,EAAqB,EAAI;AAAA,QAC3B;AAAA,QACA,SAAQ;AAAA,kBAEP,EAAK;AAAA,MACA,CAAA;AAAA,MAGV,gBAAA,EAAC,GAAD;AAAA,QACE,SAAA,MAAe,EAAqB,EAAK;AAAA,QACtB,mBAAA;AAAA,QACnB,OAAO,EAAY;AAAA,MACpB,CAAA;AAAA,IACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAqB"}

package/dist/finstrong/components/HaveManageableDebt/HaveManageableDebtComponent/index.es.js

@@ -0,0 +1,88 @@
+import { useFinstrongStore as u, useGlobalCopyStore as f } from "../../../../common/context/hooks/index.es.js";
+import y from "../../../../common/components/Loader/index.es.js";
+import d from "../../../../common/components/TabContentContainer/index.es.js";
+import { EmptyState as g } from "../../../../common/components/EmptyState/index.es.js";
+import v from "../../shared/LineGraph/index.es.js";
+import w from "../IncomeTabContent/index.es.js";
+import x from "../DebtPaymentTabContent/index.es.js";
+import C from "../../shared/DoubleBarChart/index.es.js";
+import l from "react";
+import { observer as k } from "mobx-react-lite";
+import { Fragment as b, jsx as e, jsxs as n } from "react/jsx-runtime";
+import m from "@mui/material/Tab";
+import S from "@mui/material/Tabs";
+import T from "@mui/material/Card";
+var D = () => {
+  const { isIncomeInitialized: t, loadDebtSpend: _, loadIncome: s, monthlySummaries: i } = u(), [r, c] = l.useState(0), { finstrong: a } = f();
+  if (l.useEffect(() => {
+    t || (_().finally(), s().finally());
+  }, [t]), !t) return /* @__PURE__ */ e(y, {});
+  const p = i.some((o) => o.debt_spend !== 0 || o.income !== 0);
+  return /* @__PURE__ */ n(b, { children: [
+    /* @__PURE__ */ n(T, { children: [
+      /* @__PURE__ */ n(S, {
+        "aria-label": a.key_indicators_save.drawer_title,
+        centered: !0,
+        onChange: (o, h) => c(h),
+        selectionFollowsFocus: !0,
+        sx: { mb: 0 },
+        value: r,
+        variant: "fullWidth",
+        children: [/* @__PURE__ */ e(m, {
+          "aria-controls": "income-details-tabpanel-0",
+          id: "income-details-tab-0",
+          label: a.key_indicators_borrow.have_manageable_debt_drawer.income,
+          sx: { minHeight: 44 }
+        }), /* @__PURE__ */ e(m, {
+          "aria-controls": "debt-payment-details-tabpanel-1",
+          id: "debt-payment-details-tab-1",
+          label: a.key_indicators_borrow.have_manageable_debt_drawer.debt_payment,
+          sx: { minHeight: 44 }
+        })]
+      }),
+      /* @__PURE__ */ e(d, {
+        "aria-labelledby": "income-details-tab-0",
+        index: 0,
+        name: "income-details",
+        value: r,
+        children: /* @__PURE__ */ e(w, {})
+      }),
+      /* @__PURE__ */ e(d, {
+        "aria-labelledby": "debt-payment-details-tab-1",
+        index: 1,
+        name: "debt-payment-details",
+        value: r,
+        children: /* @__PURE__ */ e(x, {})
+      })
+    ] }),
+    p ? /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(C, {
+      chartFor: "debt_payment_vs_income",
+      data: i,
+      legendLabelComparison: a.key_indicators_borrow.have_manageable_debt_drawer.debt_payment,
+      legendLabelMain: a.key_indicators_borrow.have_manageable_debt_drawer.income,
+      title: a.key_indicators_borrow.have_manageable_debt_drawer.debt_payment
+    }) }) : /* @__PURE__ */ e(g, {
+      header: a.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_double_bar_chart_empty_state_header,
+      icon: "multiline_chart",
+      subText: a.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_double_bar_chart_empty_state_description,
+      sx: {
+        backgroundColor: "background.paper",
+        borderRadius: "8px",
+        boxShadow: 1,
+        p: 24,
+        pb: 48,
+        ".empty-state-subtext": {
+          fontSize: 15,
+          lineHeight: "24px",
+          mt: 8
+        }
+      }
+    }),
+    /* @__PURE__ */ e(v, { chartFor: "debtOverTime" })
+  ] });
+}, W = k(D);
+export {
+  W as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/HaveManageableDebt/HaveManageableDebtComponent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/HaveManageableDebt/HaveManageableDebtComponent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { useGlobalCopyStore, TabContentContainer, useFinstrongStore, Loader } from '../../../common'\nimport { EmptyState } from '../../../common/components/EmptyState'\nimport IncomeTabContent from './IncomeTabContent'\nimport DebtPaymentTabContent from './DebtPaymentTabContent'\nimport DoubleBarChart from '../shared/DoubleBarChart'\nimport LineGraph from '../shared/LineGraph'\n\nconst HaveManagebleDebtComponent: React.FC = () => {\n  const { isIncomeInitialized, loadDebtSpend, loadIncome, monthlySummaries } = useFinstrongStore()\n\n  const [tabValue, setTabValue] = React.useState(0)\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  React.useEffect(() => {\n    if (!isIncomeInitialized) {\n      loadDebtSpend().finally()\n      loadIncome().finally()\n    }\n  }, [isIncomeInitialized])\n\n  if (!isIncomeInitialized) return <Loader />\n\n  const hasBarChartData = monthlySummaries.some(\n    (eachItem) => eachItem.debt_spend !== 0 || eachItem.income !== 0,\n  )\n\n  return (\n    <>\n      <Card>\n        <Tabs\n          aria-label={copy.key_indicators_save.drawer_title}\n          centered={true}\n          onChange={(_, val) => setTabValue(val)}\n          selectionFollowsFocus={true}\n          sx={{ mb: 0 }}\n          value={tabValue}\n          variant=\"fullWidth\"\n        >\n          <Tab\n            aria-controls=\"income-details-tabpanel-0\"\n            id=\"income-details-tab-0\"\n            label={copy.key_indicators_borrow.have_manageable_debt_drawer.income}\n            sx={{ minHeight: 44 }}\n          />\n          <Tab\n            aria-controls=\"debt-payment-details-tabpanel-1\"\n            id=\"debt-payment-details-tab-1\"\n            label={copy.key_indicators_borrow.have_manageable_debt_drawer.debt_payment}\n            sx={{ minHeight: 44 }}\n          />\n        </Tabs>\n\n        <TabContentContainer\n          aria-labelledby=\"income-details-tab-0\"\n          index={0}\n          name=\"income-details\"\n          value={tabValue}\n        >\n          <IncomeTabContent />\n        </TabContentContainer>\n\n        <TabContentContainer\n          aria-labelledby=\"debt-payment-details-tab-1\"\n          index={1}\n          name=\"debt-payment-details\"\n          value={tabValue}\n        >\n          <DebtPaymentTabContent />\n        </TabContentContainer>\n      </Card>\n\n      {hasBarChartData ? (\n        <>\n          <DoubleBarChart\n            chartFor=\"debt_payment_vs_income\"\n            data={monthlySummaries}\n            legendLabelComparison={\n              copy.key_indicators_borrow.have_manageable_debt_drawer.debt_payment\n            }\n            legendLabelMain={copy.key_indicators_borrow.have_manageable_debt_drawer.income}\n            title={copy.key_indicators_borrow.have_manageable_debt_drawer.debt_payment}\n          />\n        </>\n      ) : (\n        <EmptyState\n          header={\n            copy.key_indicators_borrow.have_manageable_debt_drawer\n              .have_manageable_debt_double_bar_chart_empty_state_header\n          }\n          icon=\"multiline_chart\"\n          subText={\n            copy.key_indicators_borrow.have_manageable_debt_drawer\n              .have_manageable_debt_double_bar_chart_empty_state_description\n          }\n          sx={{\n            backgroundColor: 'background.paper',\n            borderRadius: '8px',\n            boxShadow: 1,\n            p: 24,\n            pb: 48,\n            '.empty-state-subtext': {\n              fontSize: 15,\n              lineHeight: '24px',\n              mt: 8,\n            },\n          }}\n        />\n      )}\n      <LineGraph chartFor=\"debtOverTime\" />\n    </>\n  )\n}\n\nexport default observer(HaveManagebleDebtComponent)\n"],"mappings":";;;;;;;;;;;;;;AAcA,IAAM,IAAA,MAA6C;AACjD,QAAM,EAAE,qBAAA,GAAqB,eAAA,GAAe,YAAA,GAAY,kBAAA,EAAA,IAAqB,EAAkB,GAEzF,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,CAAC,GAC1C,EAAE,WAAW,EAAA,IAAS,EAAmB;AAS/C,MAPA,EAAM,UAAA,MAAgB;AACpB,IAAK,MACH,EAAc,EAAE,QAAQ,GACxB,EAAW,EAAE,QAAQ;AAAA,EAEzB,GAAG,CAAC,CAAmB,CAAC,GAEpB,CAAC,EAAqB,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAE1C,QAAM,IAAkB,EAAiB,KAAA,CACtC,MAAa,EAAS,eAAe,KAAK,EAAS,WAAW,CACjE;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,cAAY,EAAK,oBAAoB;AAAA,QACrC,UAAU;AAAA,QACV,UAAA,CAAW,GAAG,MAAQ,EAAY,CAAG;AAAA,QACrC,uBAAuB;AAAA,QACvB,IAAI,EAAE,IAAI,EAAE;AAAA,QACZ,OAAO;AAAA,QACP,SAAQ;AAAA,kBAPV,CASE,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,IAAG;AAAA,UACH,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,UAC9D,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,IAAG;AAAA,UACH,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,UAC9D,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA,CACG;AAAA;MAEN,gBAAA,EAAC,GAAD;AAAA,QACE,mBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAO;AAAA,kBAEP,gBAAA,EAAC,GAAD,CAAmB,CAAA;AAAA,MACA,CAAA;AAAA,MAErB,gBAAA,EAAC,GAAD;AAAA,QACE,mBAAgB;AAAA,QAChB,OAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAO;AAAA,kBAEP,gBAAA,EAAC,GAAD,CAAwB,CAAA;AAAA,MACL,CAAA;AAAA,IACjB,EAAA,CAAA;AAAA,IAEL,IACC,gBAAA,EAAA,GAAA,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACT,MAAM;AAAA,MACN,uBACE,EAAK,sBAAsB,4BAA4B;AAAA,MAEzD,iBAAiB,EAAK,sBAAsB,4BAA4B;AAAA,MACxE,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,IAC/D,CAAA,EACD,CAAA,IAEF,gBAAA,EAAC,GAAD;AAAA,MACE,QACE,EAAK,sBAAsB,4BACxB;AAAA,MAEL,MAAK;AAAA,MACL,SACE,EAAK,sBAAsB,4BACxB;AAAA,MAEL,IAAI;AAAA,QACF,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,WAAW;AAAA,QACX,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,wBAAwB;AAAA,UACtB,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,IAAI;AAAA,QACN;AAAA,MACF;AAAA,IACD,CAAA;AAAA,IAEH,gBAAA,EAAC,GAAD,EAAW,UAAS,eAAgB,CAAA;AAAA,EACpC,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAA0B"}

package/dist/finstrong/components/HaveManageableDebt/HaveManageableDebtProgressBar/index.es.js

@@ -0,0 +1,73 @@
+import { buildDynamicCopy as l } from "../../../../core/utils/Localization/index.es.js";
+import { useFinstrongStore as c, useGlobalCopyStore as d } from "../../../../common/context/hooks/index.es.js";
+import { formatCurrency as b } from "../../../../core/utils/NumberFormatting/index.es.js";
+import { getManageDebtRatioState as _, getPercentFromRatio as f } from "../../../util/finstrongUtils/index.es.js";
+import p from "../../ProgressBar/index.es.js";
+import { observer as g } from "mobx-react-lite";
+import a from "@mui/material/Stack";
+import { Text as i } from "@mxenabled/mxui";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+import h from "@mui/material/Divider";
+var u = () => {
+  const { healthScore: t } = c(), { finstrong: o } = d(), r = f(t.debt_to_income_ratio), m = _(r);
+  return /* @__PURE__ */ e(p, {
+    bottomComponent: /* @__PURE__ */ n(a, {
+      sx: {
+        alignItems: "flex-end",
+        flexDirection: "row",
+        height: 24,
+        justifyContent: "space-between",
+        mt: 2,
+        position: "relative"
+      },
+      children: [/* @__PURE__ */ e(s, {
+        sx: {
+          left: "30%",
+          position: "absolute",
+          transform: "translateX(-50%)"
+        },
+        children: /* @__PURE__ */ n(a, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "column",
+            height: 24,
+            justifyContent: "flex-end"
+          },
+          children: [/* @__PURE__ */ e(h, {
+            orientation: "vertical",
+            sx: {
+              borderWidth: 1,
+              height: 8
+            }
+          }), /* @__PURE__ */ e(i, {
+            sx: { color: "text.primary" },
+            variant: "caption",
+            children: "30%"
+          })]
+        })
+      }), /* @__PURE__ */ e(s, {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: 24,
+          justifyContent: "center",
+          marginLeft: "auto"
+        },
+        children: /* @__PURE__ */ e(i, {
+          variant: "body2",
+          children: t.debt_to_income_ratio ? l(o.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_sticky_description, r) : "-"
+        })
+      })]
+    }),
+    label: o.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_sticky_title,
+    status: m,
+    statusBarData: [{ percentage: `${r}%` }],
+    value: b(t.ninety_day_debt_spend, "0,0.00")
+  });
+}, M = g(u);
+export {
+  M as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/HaveManageableDebt/HaveManageableDebtProgressBar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/HaveManageableDebt/HaveManageableDebtProgressBar.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useFinstrongStore, useGlobalCopyStore } from '../../../common'\nimport ProgressBar from '../ProgressBar'\nimport { getManageDebtRatioState, getPercentFromRatio } from '../../util/finstrongUtils'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nconst HaveManageableDebtProgressBar = () => {\n  const { healthScore } = useFinstrongStore()\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  const debtPercentage = getPercentFromRatio(healthScore.debt_to_income_ratio)\n\n  const cardStatus = getManageDebtRatioState(debtPercentage)\n\n  return (\n    <ProgressBar\n      bottomComponent={\n        <Stack\n          sx={{\n            alignItems: 'flex-end',\n            flexDirection: 'row',\n            height: 24,\n            justifyContent: 'space-between',\n            mt: 2,\n            position: 'relative',\n          }}\n        >\n          {/* 30% tick mark and label positioned at 30% */}\n          <Box\n            sx={{\n              left: '30%',\n              position: 'absolute',\n              transform: 'translateX(-50%)',\n            }}\n          >\n            <Stack\n              sx={{\n                alignItems: 'center',\n                flexDirection: 'column',\n                height: 24,\n                justifyContent: 'flex-end',\n              }}\n            >\n              <Divider\n                orientation=\"vertical\"\n                sx={{\n                  borderWidth: 1,\n                  height: 8,\n                }}\n              />\n              <Text sx={{ color: 'text.primary' }} variant=\"caption\">\n                30%\n              </Text>\n            </Stack>\n          </Box>\n          {/* Debt percentage positioned at the right end */}\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              height: 24,\n              justifyContent: 'center',\n              marginLeft: 'auto',\n            }}\n          >\n            <Text variant=\"body2\">\n              {healthScore.debt_to_income_ratio\n                ? (buildDynamicCopy(\n                    copy.key_indicators_borrow.have_manageable_debt_drawer\n                      .have_manageable_debt_sticky_description,\n                    debtPercentage,\n                  ) as string)\n                : '-'}\n            </Text>\n          </Box>\n        </Stack>\n      }\n      label={\n        copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_sticky_title\n      }\n      status={cardStatus}\n      statusBarData={[\n        {\n          percentage: `${debtPercentage}%`,\n        },\n      ]}\n      value={formatCurrency(healthScore.ninety_day_debt_spend, '0,0.00')}\n    />\n  )\n}\n\nexport default observer(HaveManageableDebtProgressBar)\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,IAAA,MAAsC;AAC1C,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAkB,GACpC,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,IAAiB,EAAoB,EAAY,oBAAoB,GAErE,IAAa,EAAwB,CAAc;AAEzD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,iBACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ;AAAA,gBARF,CAWE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,MAAM;AAAA,UACN,UAAU;AAAA,UACV,WAAW;AAAA,QACb;AAAA,kBAEA,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,gBAAgB;AAAA,UAClB;AAAA,oBANF,CAQE,gBAAA,EAAC,GAAD;AAAA,YACE,aAAY;AAAA,YACZ,IAAI;AAAA,cACF,aAAa;AAAA,cACb,QAAQ;AAAA,YACV;AAAA,UACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,OAAO,eAAe;AAAA,YAAG,SAAQ;AAAA,sBAAU;AAAA,UAEjD,CAAA,CACD;AAAA;MACJ,CAAA,GAEL,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,SAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,YAAY;AAAA,QACd;AAAA,kBAEA,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBACX,EAAY,uBACR,EACC,EAAK,sBAAsB,4BACxB,yCACH,CACF,IACA;AAAA,QACA,CAAA;AAAA,MACH,CAAA,CACA;AAAA;IAET,OACE,EAAK,sBAAsB,4BAA4B;AAAA,IAEzD,QAAQ;AAAA,IACR,eAAe,CACb,EACE,YAAY,GAAG,CAAA,IACjB,CACF;AAAA,IACA,OAAO,EAAe,EAAY,uBAAuB,QAAQ;AAAA,EAClE,CAAA;AAEL,GAEA,IAAe,EAAS,CAA6B"}

package/dist/finstrong/components/HaveManageableDebt/IncomeTabContent/index.es.js

@@ -0,0 +1,40 @@
+import { useFinstrongStore as m, useGlobalCopyStore as s } from "../../../../common/context/hooks/index.es.js";
+import l from "../../../../common/components/ConnectDrawer/index.es.js";
+import f from "../../shared/TotalCard/index.es.js";
+import p from "../../shared/Transactions/index.es.js";
+import _ from "react";
+import { observer as d } from "mobx-react-lite";
+import u from "@mui/material/Stack";
+import b from "@mui/material/Button";
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+var h = () => {
+  const { healthScore: r, allTransactions: t } = m(), { connect: a, finstrong: e } = s(), [c, n] = _.useState(!1);
+  return /* @__PURE__ */ C(u, {
+    gap: 16,
+    sx: { p: 16 },
+    children: [
+      /* @__PURE__ */ o(f, {
+        balance: r.ninety_day_income,
+        sx: { flexDirection: "column-reverse" },
+        title: e.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_income
+      }),
+      t.income.length ? /* @__PURE__ */ o(p, { transactions: t.income.map((i) => i.transaction) }) : /* @__PURE__ */ o(b, {
+        onClick: () => {
+          n(!0);
+        },
+        variant: "contained",
+        children: e.connect_more_accounts_button
+      }),
+      /* @__PURE__ */ o(l, {
+        onClose: () => n(!1),
+        showConnectWidget: c,
+        title: a.mini_title
+      })
+    ]
+  });
+}, D = d(h);
+export {
+  D as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/HaveManageableDebt/IncomeTabContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/HaveManageableDebt/IncomeTabContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ConnectDrawer, useFinstrongStore, useGlobalCopyStore } from '../../../common'\nimport TotalCard from '../shared/TotalCard'\nimport Transactions from '../shared/Transactions'\n\nconst IncomeTabContent: React.FC = () => {\n  const { healthScore, allTransactions } = useFinstrongStore()\n  const { connect: connectCopy, finstrong: copy } = useGlobalCopyStore()\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n\n  return (\n    <Stack gap={16} sx={{ p: 16 }}>\n      <TotalCard\n        balance={healthScore.ninety_day_income}\n        sx={{ flexDirection: 'column-reverse' }}\n        title={copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_income}\n      />\n\n      {allTransactions.income.length ? (\n        // TODO: Need to add More Transactions functionality\n        <Transactions transactions={allTransactions.income.map((item) => item.transaction)} />\n      ) : (\n        <Button\n          onClick={() => {\n            setShowConnectWidget(true)\n          }}\n          variant=\"contained\"\n        >\n          {copy.connect_more_accounts_button}\n        </Button>\n      )}\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(IncomeTabContent)\n"],"mappings":";;;;;;;;;AAUA,IAAM,IAAA,MAAmC;AACvC,QAAM,EAAE,aAAA,GAAa,iBAAA,EAAA,IAAoB,EAAkB,GACrD,EAAE,SAAS,GAAa,WAAW,EAAA,IAAS,EAAmB,GAC/D,CAAC,GAAmB,CAAA,IAAwB,EAAM,SAAS,EAAK;AAEtE,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAI,IAAI,EAAE,GAAG,GAAG;AAAA,cAA5B;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,EAAY;AAAA,QACrB,IAAI,EAAE,eAAe,iBAAiB;AAAA,QACtC,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,MAC/D,CAAA;AAAA,MAEA,EAAgB,OAAO,SAEtB,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAgB,OAAO,IAAA,CAAK,MAAS,EAAK,WAAW,EAAI,CAAA,IAErF,gBAAA,EAAC,GAAD;AAAA,QACE,SAAA,MAAe;AACb,UAAA,EAAqB,EAAI;AAAA,QAC3B;AAAA,QACA,SAAQ;AAAA,kBAEP,EAAK;AAAA,MACA,CAAA;AAAA,MAGV,gBAAA,EAAC,GAAD;AAAA,QACE,SAAA,MAAe,EAAqB,EAAK;AAAA,QACtB,mBAAA;AAAA,QACnB,OAAO,EAAY;AAAA,MACpB,CAAA;AAAA,IACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAgB"}

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

@@ -0,0 +1,117 @@
+import r from "@mui/material/Stack";
+import { P as d, Text as l } from "@mxenabled/mxui";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { useTheme as x } from "@mui/material/styles";
+import e from "@mui/material/Box";
+var f = ({ copy: n }) => {
+  const a = x(), h = [
+    a.palette.chartMono.chartMono5,
+    a.palette.chartMono.chartMono4,
+    a.palette.chartMono.chartMono3,
+    a.palette.chartMono.chartMono2
+  ];
+  return /* @__PURE__ */ o(r, {
+    sx: { gap: 8 },
+    children: [/* @__PURE__ */ t(r, {
+      sx: {
+        flexDirection: "row",
+        gap: 8,
+        px: 2
+      },
+      children: [
+        {
+          color: "chartMono.chartMono2",
+          text: n.vulnerable,
+          value: "0-25"
+        },
+        {
+          color: "chartMono.chartMono3",
+          text: n.building,
+          value: "26-50"
+        },
+        {
+          color: "chartMono.chartMono4",
+          text: n.stable,
+          value: "51-75"
+        },
+        {
+          color: "chartMono.chartMono5",
+          text: n.strong,
+          value: "76-100"
+        }
+      ].map(({ color: i, text: c, value: s }) => /* @__PURE__ */ o(r, {
+        sx: {
+          gap: 4,
+          textAlign: "center",
+          width: "100%"
+        },
+        children: [/* @__PURE__ */ o(e, { children: [/* @__PURE__ */ t(d, {
+          sx: {
+            fontWeight: 700,
+            textTransform: "uppercase"
+          },
+          variant: "caption",
+          children: c
+        }), /* @__PURE__ */ o(l, {
+          sx: { color: "text.secondary" },
+          variant: "caption",
+          children: [
+            "(",
+            s,
+            ")"
+          ]
+        })] }), /* @__PURE__ */ t(e, { sx: {
+          border: "2px solid",
+          borderColor: i,
+          borderRadius: "3px"
+        } })]
+      }, c))
+    }), /* @__PURE__ */ o(e, { children: [/* @__PURE__ */ t(e, { sx: {
+      background: `linear-gradient(to left, ${h.join(", ")})`,
+      borderRadius: "4px",
+      height: 16
+    } }), /* @__PURE__ */ t(r, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [
+        0,
+        10,
+        20,
+        30,
+        40,
+        50,
+        60,
+        70,
+        80,
+        90,
+        100
+      ].map((i) => /* @__PURE__ */ o(r, {
+        sx: {
+          alignItems: "center",
+          height: 20,
+          justifyContent: "space-between",
+          width: 24
+        },
+        children: [/* @__PURE__ */ t(e, { sx: {
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          position: "relative",
+          rotate: "90deg",
+          top: 3.5,
+          width: 8
+        } }), /* @__PURE__ */ t(l, {
+          sx: { color: "text.secondary" },
+          variant: "tiny",
+          children: i
+        })]
+      }, i))
+    })] })]
+  });
+};
+export {
+  f as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/HealthChart/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/HealthChart.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { type FinstrongCopy } from '../../core'\n\ninterface HealthChartProps {\n  copy: FinstrongCopy\n}\n\nconst HealthChart = ({ copy }: HealthChartProps) => {\n  const theme = useTheme()\n\n  const gradientColors = [\n    theme.palette.chartMono.chartMono5,\n    theme.palette.chartMono.chartMono4,\n    theme.palette.chartMono.chartMono3,\n    theme.palette.chartMono.chartMono2,\n  ]\n  return (\n    <Stack sx={{ gap: 8 }}>\n      <Stack sx={{ flexDirection: 'row', gap: 8, px: 2 }}>\n        {[\n          { color: 'chartMono.chartMono2', text: copy.vulnerable, value: '0-25' },\n          { color: 'chartMono.chartMono3', text: copy.building, value: '26-50' },\n          { color: 'chartMono.chartMono4', text: copy.stable, value: '51-75' },\n          { color: 'chartMono.chartMono5', text: copy.strong, value: '76-100' },\n        ].map(({ color, text, value }) => (\n          <Stack key={text} sx={{ gap: 4, textAlign: 'center', width: '100%' }}>\n            <Box>\n              <P sx={{ fontWeight: 700, textTransform: 'uppercase' }} variant=\"caption\">\n                {text}\n              </P>\n              <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                ({value})\n              </Text>\n            </Box>\n            <Box sx={{ border: '2px solid', borderColor: color, borderRadius: '3px' }} />\n          </Stack>\n        ))}\n      </Stack>\n      <Box>\n        <Box\n          sx={{\n            background: `linear-gradient(to left, ${gradientColors.join(', ')})`,\n            borderRadius: '4px',\n            height: 16,\n          }}\n        />\n        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n          {[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((value) => (\n            <Stack\n              key={value}\n              sx={{ alignItems: 'center', height: 20, justifyContent: 'space-between', width: 24 }}\n            >\n              <Box\n                sx={{\n                  borderBottom: '1px solid',\n                  borderColor: 'divider',\n                  position: 'relative',\n                  rotate: '90deg',\n                  top: 3.5,\n                  width: 8,\n                }}\n              />\n              <Text sx={{ color: 'text.secondary' }} variant=\"tiny\">\n                {value}\n              </Text>\n            </Stack>\n          ))}\n        </Stack>\n      </Box>\n    </Stack>\n  )\n}\n\nexport default HealthChart\n"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+import { buildDynamicCopy as d } from "../../../core/utils/Localization/index.es.js";
+import { useFinstrongStore as b, useGlobalCopyStore as g, useUserStore as l } from "../../../common/context/hooks/index.es.js";
+import { getCreditScoreState as f, getManageDebtRatioState as I } from "../../util/finstrongUtils/index.es.js";
+import { KeyIndicatorsTabItemType as _ } from "../../constants/index/index.es.js";
+import m from "../KeyIndicatorsTabItem/index.es.js";
+import F from "react";
+import { observer as y } from "mobx-react-lite";
+import C from "@mui/material/Stack";
+import { jsx as p, jsxs as M } from "react/jsx-runtime";
+var R = () => {
+  const { healthScore: i } = b(), { finstrong: n } = g(), { key_indicators_borrow: t } = n, { user: s } = l(), S = (r) => {
+    const e = I(r), o = {
+      GOOD: t.manage_debit_good_description,
+      FAIR: t.manage_debit_fair_description,
+      OFF_TRACK: t.manage_debit_off_track_description,
+      MISSING: t.manage_debit_missing_description
+    };
+    return {
+      cardState: e,
+      description: e === "FAIR" || e === "OFF_TRACK" ? d(o[e], r) : o[e],
+      title: t.manage_debit_title
+    };
+  }, u = (r) => {
+    const e = f(r), o = {
+      GOOD: t.credit_score_good_description,
+      FAIR: t.credit_score_fair_description,
+      OFF_TRACK: t.credit_score_off_track_description,
+      MISSING: t.credit_score_missing_description
+    };
+    return {
+      cardState: e,
+      description: e === "MISSING" ? o[e] : d(o[e], r),
+      title: t.credit_score_title
+    };
+  }, { manageDebtStatus: a, creditScoreStatus: c } = F.useMemo(() => {
+    const r = i.debt_to_income_ratio !== null ? Math.round(i.debt_to_income_ratio * 100) : null;
+    return {
+      manageDebtStatus: S(r),
+      creditScoreStatus: u(s.credit_score || null)
+    };
+  }, [
+    i.debt_to_income_ratio,
+    s.credit_score,
+    t,
+    n
+  ]);
+  return /* @__PURE__ */ M(C, {
+    direction: "column",
+    gap: 24,
+    sx: {
+      p: 8,
+      pt: 24
+    },
+    children: [/* @__PURE__ */ p(m, {
+      cardState: a.cardState,
+      description: a.description,
+      drawerFor: _.HaveManageableDebt,
+      title: a.title
+    }), /* @__PURE__ */ p(m, {
+      cardState: c.cardState,
+      description: c.description,
+      drawerFor: _.HaveAGoodCreditScore,
+      title: c.title
+    })]
+  });
+}, k = y(R);
+export {
+  k as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsBorrowTab.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../common'\nimport { KeyIndicatorsTabItemType } from '../constants'\nimport { getCreditScoreState, getManageDebtRatioState } from '../util/finstrongUtils'\n\nimport KeyIndicatorsTabsItem from './KeyIndicatorsTabItem'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nconst KeyIndicatorsBorrowTab: React.FC = () => {\n  const { healthScore } = useFinstrongStore()\n  const { finstrong: copyContent } = useGlobalCopyStore()\n  const { key_indicators_borrow: borrowCopy } = copyContent\n  const { user } = useUserStore()\n\n  const getManageDebtRatioStatus = (ratio: number | null) => {\n    const state = getManageDebtRatioState(ratio)\n\n    const cardStatusMapping = {\n      GOOD: borrowCopy.manage_debit_good_description,\n      FAIR: borrowCopy.manage_debit_fair_description,\n      OFF_TRACK: borrowCopy.manage_debit_off_track_description,\n      MISSING: borrowCopy.manage_debit_missing_description,\n    }\n\n    const description =\n      state === 'FAIR' || state === 'OFF_TRACK'\n        ? (buildDynamicCopy(cardStatusMapping[state], ratio) as string)\n        : cardStatusMapping[state]\n\n    return {\n      cardState: state,\n      description,\n      title: borrowCopy.manage_debit_title,\n    }\n  }\n\n  const getCreditScoreStatus = (score: number | null) => {\n    const state = getCreditScoreState(score)\n\n    const cardStatusMapping = {\n      GOOD: borrowCopy.credit_score_good_description,\n      FAIR: borrowCopy.credit_score_fair_description,\n      OFF_TRACK: borrowCopy.credit_score_off_track_description,\n      MISSING: borrowCopy.credit_score_missing_description,\n    } as const\n\n    const description =\n      state === 'MISSING'\n        ? cardStatusMapping[state]\n        : (buildDynamicCopy(cardStatusMapping[state], score) as string)\n\n    return {\n      cardState: state,\n      description,\n      title: borrowCopy.credit_score_title,\n    }\n  }\n\n  const { manageDebtStatus, creditScoreStatus } = React.useMemo(() => {\n    const convertedDebtToIncomeRatio =\n      healthScore.debt_to_income_ratio !== null\n        ? Math.round(healthScore.debt_to_income_ratio * 100)\n        : null\n    const manageDebtStatus = getManageDebtRatioStatus(convertedDebtToIncomeRatio)\n    const creditScoreStatus = getCreditScoreStatus(user.credit_score || null)\n\n    return {\n      manageDebtStatus,\n      creditScoreStatus,\n    }\n  }, [healthScore.debt_to_income_ratio, user.credit_score, borrowCopy, copyContent])\n\n  return (\n    <Stack direction=\"column\" gap={24} sx={{ p: 8, pt: 24 }}>\n      <KeyIndicatorsTabsItem\n        cardState={manageDebtStatus.cardState}\n        description={manageDebtStatus.description}\n        drawerFor={KeyIndicatorsTabItemType.HaveManageableDebt}\n        title={manageDebtStatus.title}\n      />\n      <KeyIndicatorsTabsItem\n        cardState={creditScoreStatus.cardState}\n        description={creditScoreStatus.description}\n        drawerFor={KeyIndicatorsTabItemType.HaveAGoodCreditScore}\n        title={creditScoreStatus.title}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(KeyIndicatorsBorrowTab)\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAA,MAAyC;AAC7C,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAkB,GACpC,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAChD,EAAE,uBAAuB,EAAA,IAAe,GACxC,EAAE,MAAA,EAAA,IAAS,EAAa,GAExB,IAAA,CAA4B,MAAyB;AACzD,UAAM,IAAQ,EAAwB,CAAK,GAErC,IAAoB;AAAA,MACxB,MAAM,EAAW;AAAA,MACjB,MAAM,EAAW;AAAA,MACjB,WAAW,EAAW;AAAA,MACtB,SAAS,EAAW;AAAA,IACtB;AAOA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,aANA,MAAU,UAAU,MAAU,cACzB,EAAiB,EAAkB,CAAA,GAAQ,CAAK,IACjD,EAAkB,CAAA;AAAA,MAKtB,OAAO,EAAW;AAAA,IACpB;AAAA,EACF,GAEM,IAAA,CAAwB,MAAyB;AACrD,UAAM,IAAQ,EAAoB,CAAK,GAEjC,IAAoB;AAAA,MACxB,MAAM,EAAW;AAAA,MACjB,MAAM,EAAW;AAAA,MACjB,WAAW,EAAW;AAAA,MACtB,SAAS,EAAW;AAAA,IACtB;AAOA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,aANA,MAAU,YACN,EAAkB,CAAA,IACjB,EAAiB,EAAkB,CAAA,GAAQ,CAAK;AAAA,MAKrD,OAAO,EAAW;AAAA,IACpB;AAAA,EACF,GAEM,EAAE,kBAAA,GAAkB,mBAAA,EAAA,IAAsB,EAAM,QAAA,MAAc;AAClE,UAAM,IACJ,EAAY,yBAAyB,OACjC,KAAK,MAAM,EAAY,uBAAuB,GAAG,IACjD;AAIN,WAAO;AAAA,MACL,kBAJuB,EAAyB,CAIhD;AAAA,MACA,mBAJwB,EAAqB,EAAK,gBAAgB,IAIlE;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IAAC,EAAY;AAAA,IAAsB,EAAK;AAAA,IAAc;AAAA,IAAY;AAAA,EAAW,CAAC;AAEjF,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAS,KAAK;AAAA,IAAI,IAAI;AAAA,MAAE,GAAG;AAAA,MAAG,IAAI;AAAA,IAAG;AAAA,cAAtD,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,EAAiB;AAAA,MAC5B,aAAa,EAAiB;AAAA,MAC9B,WAAW,EAAyB;AAAA,MACpC,OAAO,EAAiB;AAAA,IACzB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,EAAkB;AAAA,MAC7B,aAAa,EAAkB;AAAA,MAC/B,WAAW,EAAyB;AAAA,MACpC,OAAO,EAAkB;AAAA,IAC1B,CAAA,CACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAsB"}