@mx-cartographer/experiences 6.26.33-alpha.mm0 → 7.0.0-alpha.mega1

package/dist/dashboard/index.es.js

@@ -0,0 +1,181 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import r from "react";
+import { observer as f } from "mobx-react-lite";
+import p from "@mui/material/Unstable_Grid2";
+import u from "@mui/material/Skeleton";
+import s from "@mui/material/Stack";
+import B from "@mui/material/styles/useTheme";
+import { l as A, u as v, c as C, a as M, j as D } from "../hooks-30y_BLwc.mjs";
+import G from "@mui/material/Paper";
+import { Icon as S, H1 as k, P as F } from "@mxenabled/mxui";
+import { useMediaQuery as W } from "@mui/system";
+import I from "@mui/material/Box";
+import T from "@mui/material/Button";
+import j from "@mui/material/IconButton";
+import $ from "@mui/material/Tooltip";
+import H from "@mui/material/useMediaQuery";
+import { i as R, j as Q } from "../ConnectDrawer-D9cR5phc.mjs";
+import { u as z } from "../useScreenSize-B6JyS_Lj.mjs";
+const E = f(() => {
+  const e = B(), {
+    appDataStore: { banner: c, loadBanner: i, user: d }
+  } = A();
+  return r.useEffect(() => {
+    i().finally();
+  }, [d]), c?.image_url ? /* @__PURE__ */ t(
+    s,
+    {
+      sx: {
+        alignItems: "center",
+        width: "100%",
+        mb: 24
+      },
+      children: /* @__PURE__ */ t(
+        "a",
+        {
+          href: c?.redirect_url,
+          rel: "noreferrer",
+          style: {
+            width: "100%"
+          },
+          target: "_blank",
+          children: /* @__PURE__ */ t(
+            "img",
+            {
+              alt: "",
+              src: c.image_url,
+              style: {
+                width: "100%",
+                height: "auto",
+                border: `1px solid ${e.palette.grey[300]}`
+              }
+            }
+          )
+        }
+      )
+    }
+  ) : null;
+}), P = ({ handleConnectClick: e }) => {
+  const { common: c } = v(), i = H("(max-width: 700px)");
+  return /* @__PURE__ */ t(I, { my: 4, children: i ? /* @__PURE__ */ t($, { id: "add-accounts", placement: "bottom", title: c.add_accounts, children: /* @__PURE__ */ t(
+    j,
+    {
+      "aria-controls": "add_accounts",
+      "aria-describedby": "add-accounts",
+      "aria-haspopup": !0,
+      "aria-label": c.add_accounts,
+      color: "primary",
+      onClick: e,
+      children: /* @__PURE__ */ t(S, { name: "add", size: 24 })
+    }
+  ) }) : /* @__PURE__ */ t(
+    T,
+    {
+      "aria-controls": "add_accounts",
+      "aria-haspopup": !0,
+      "aria-label": c.add_accounts,
+      onClick: e,
+      startIcon: /* @__PURE__ */ t(S, { name: "add", size: 24 }),
+      sx: {
+        p: 12,
+        whiteSpace: "nowrap",
+        minWidth: "max-content"
+      },
+      variant: "text",
+      children: c.add_accounts
+    }
+  ) });
+}, N = f(P), O = () => {
+  const [e, c] = r.useState(!1), i = W("(max-width:320px)"), { visibleAccounts: d } = C(), { selectedAccountGuids: _, setSelectedAccountGuids: g } = M(), { common: o, connect: l } = v(), { config: x } = D(), { isMobile: b } = z(), n = {
+    accountFilterOptionsCopy: {
+      accountTypeAccounts: o.account_filter.account_type_accounts,
+      cancelButton: o.cancel_button,
+      filterButton: o.filter_button,
+      filterButtonAria: o.account_filter.filter_button_generic_aria,
+      selectAllAccounts: o.account_filter.select_all_accounts,
+      toggleAccountTypeAccounts: o.account_filter.toggle_account_type_accounts,
+      unselectAllAccounts: o.account_filter.unselect_all_accounts,
+      zeroStateButton: o.account_filter.zero_state_button,
+      zeroStateDescription: o.account_filter.zero_state_description,
+      zeroStateTitle: o.account_filter.zero_state_title
+    },
+    title: o.filter_button
+  }, y = () => {
+    const m = (/* @__PURE__ */ new Date()).getHours();
+    return m > 1 && m < 12 ? o.good_morning : m >= 12 && m < 18 ? o.good_afternoon : o.good_evening;
+  };
+  return /* @__PURE__ */ a(r.Fragment, { children: [
+    /* @__PURE__ */ t(G, { sx: { gap: 12, mb: b ? 24 : 0, p: 24 }, children: /* @__PURE__ */ a(s, { alignItems: "center", flexDirection: "row", justifyContent: "space-between", children: [
+      /* @__PURE__ */ a(s, { children: [
+        /* @__PURE__ */ t(k, { variant: i ? "H2" : "H1", children: y() }),
+        /* @__PURE__ */ t(F, { color: "text.secondary", children: o.heres_your_spending_overview })
+      ] }),
+      /* @__PURE__ */ a(s, { flexDirection: "row", children: [
+        x.show_connections_widget_in_master && /* @__PURE__ */ t(N, { handleConnectClick: () => c(!0) }),
+        /* @__PURE__ */ t(
+          R,
+          {
+            accounts: d,
+            copy: n,
+            onConnectAccountClick: () => c(!0),
+            onFilterClick: (w) => {
+              g(w);
+            },
+            selectedAccountGuids: _,
+            showAccountNumbers: !1,
+            sx: {
+              maxWidth: "100%"
+            },
+            variant: "text"
+          }
+        )
+      ] })
+    ] }) }),
+    e && /* @__PURE__ */ t(
+      Q,
+      {
+        onClose: () => c(!1),
+        showConnectWidget: e,
+        title: l.mini_title
+      }
+    )
+  ] });
+}, U = f(O);
+var h = /* @__PURE__ */ ((e) => (e[e.Main = 0] = "Main", e[e.RightSide = 1] = "RightSide", e[e.Disabled = 2] = "Disabled", e))(h || {});
+const q = ({ widgets: e, isLoading: c }) => {
+  const { isDesktop: i, isMobile: d } = z(), { copyStore: _ } = A(), { setSelectedAccounts: g } = M(), { visibleAccounts: o } = C();
+  r.useEffect(() => {
+    g(o);
+  }, [o]);
+  const l = r.useMemo(
+    () => e.filter((n) => n.location !== h.Disabled).sort((n, y) => n.index - y.index),
+    [e]
+  ), x = r.useMemo(
+    () => l.filter((n) => n.location === h.Main),
+    [l]
+  ), b = r.useMemo(
+    () => l.filter((n) => n.location === h.RightSide),
+    [l]
+  );
+  return /* @__PURE__ */ a(p, { container: !0, spacing: d ? 0 : 24, sx: { overflow: "scroll" }, children: [
+    /* @__PURE__ */ t(p, { xs: 12, children: _.isInitialized && /* @__PURE__ */ t(U, {}) }),
+    /* @__PURE__ */ a(p, { lg: 8, xs: 12, children: [
+      /* @__PURE__ */ t(E, {}),
+      c && /* @__PURE__ */ a(s, { direction: "column", spacing: 24, children: [
+        /* @__PURE__ */ t(u, { height: 100, variant: "rounded", width: "100%" }),
+        /* @__PURE__ */ t(u, { height: 300, variant: "rounded", width: "100%" }),
+        /* @__PURE__ */ t(u, { height: 300, variant: "rounded", width: "100%" })
+      ] }),
+      !c && /* @__PURE__ */ t(s, { direction: "column", spacing: 24, children: i ? x.map((n) => /* @__PURE__ */ t(r.Fragment, { children: n.component }, n.index)) : l.map((n) => /* @__PURE__ */ t(r.Fragment, { children: n.component }, n.index)) })
+    ] }),
+    i && /* @__PURE__ */ t(p, { lg: 4, children: c ? /* @__PURE__ */ a(s, { direction: "column", spacing: 24, children: [
+      /* @__PURE__ */ t(u, { height: 200, variant: "rounded", width: "100%" }),
+      /* @__PURE__ */ t(u, { height: 100, variant: "rounded", width: "100%" }),
+      /* @__PURE__ */ t(u, { height: 300, variant: "rounded", width: "100%" })
+    ] }) : /* @__PURE__ */ t(s, { direction: "column", spacing: 24, children: b.map((n) => /* @__PURE__ */ t(r.Fragment, { children: n.component }, n.index)) }) })
+  ] });
+}, dt = f(q);
+export {
+  dt as Dashboard,
+  h as DashboardLocation
+};