@wealthx/ui 1.0.0 → 1.0.1

package/dist/charts/index.js

@@ -0,0 +1,2514 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/charts/index.ts
+var charts_exports = {};
+__export(charts_exports, {
+  BackofficeSwitchableChart: () => BackofficeSwitchableChart,
+  FRONTEND_STACKED_CHART_MOCK_COLORS: () => FRONTEND_STACKED_CHART_MOCK_COLORS,
+  FRONTEND_STACKED_CHART_MOCK_DATA: () => FRONTEND_STACKED_CHART_MOCK_DATA,
+  FRONTEND_STACKED_CHART_MOCK_LABELS: () => FRONTEND_STACKED_CHART_MOCK_LABELS,
+  FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS: () => FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS,
+  FrontendBarChart: () => FrontendBarChart,
+  FrontendDoughnutChart: () => FrontendDoughnutChart,
+  FrontendIncomeExpenseHorizontalBarChart: () => FrontendIncomeExpenseHorizontalBarChart,
+  FrontendLiabilitiesChart: () => FrontendLiabilitiesChart,
+  FrontendLineChart: () => FrontendLineChart,
+  FrontendLineChartMobile: () => FrontendLineChartMobile,
+  FrontendMixedChart: () => FrontendMixedChart,
+  FrontendPercentageBar: () => FrontendPercentageBar,
+  FrontendScenarioLineChart: () => FrontendScenarioLineChart,
+  FrontendStackedChart: () => FrontendStackedChart,
+  LoadingChartBackdrop: () => LoadingChartBackdrop,
+  buildChartDataFromObject: () => buildChartDataFromObject,
+  convertToFloat: () => convertToFloat,
+  formatNumber: () => formatNumber,
+  formatNumberWithDollar: () => formatNumberWithDollar,
+  formatNumberWithText: () => formatNumberWithText,
+  getChartOptions: () => getChartOptions,
+  mockBarChartData: () => mockBarChartData,
+  mockDoughnutData: () => mockDoughnutData,
+  mockLiabilitiesParts: () => mockLiabilitiesParts,
+  mockLineChartData: () => mockLineChartData,
+  mockMixedChartDatasets: () => mockMixedChartDatasets,
+  mockMobileLineChartData: () => mockMobileLineChartData,
+  mockPercentageBarColors: () => mockPercentageBarColors,
+  mockPercentageBarParts: () => mockPercentageBarParts,
+  mockScenarioData: () => mockScenarioData,
+  mockScenarioSecondaryData: () => mockScenarioSecondaryData,
+  tooltipsBaseOption: () => tooltipsBaseOption
+});
+module.exports = __toCommonJS(charts_exports);
+
+// src/theme/constants.ts
+var FOUNDATION_COLORS = {
+  // Brand are tenant-driven; defaults for fallback
+  brand: {
+    primary: "#33FF99",
+    secondary: "#162029"
+  },
+  text: {
+    primary: "#040D13",
+    secondary: "#4A5C6A",
+    disabled: "#9EAAB5",
+    inverse: "#FFFFFF"
+  },
+  background: {
+    primary: "#FFFFFF",
+    secondary: "#F5F8FA",
+    tertiary: "#E8EAEC",
+    elevated: "#FFFFFF"
+  },
+  border: {
+    default: "#E8EAEC",
+    focus: "#33FF99",
+    // default only; at runtime --color-border-focus uses brand primary
+    error: "#F44336"
+  },
+  state: {
+    error: "#F44336",
+    warning: "#FF9800",
+    success: "#4CAF50",
+    info: "#2196F3"
+  }
+};
+var DEFAULT_THEME_OPTIONS = {
+  primary: FOUNDATION_COLORS.brand.primary,
+  secondary: FOUNDATION_COLORS.brand.secondary
+};
+
+// src/theme/typography.ts
+var FONT_FAMILY_SANS = '"Proxima Nova", sans-serif';
+function style(weight, size, lineHeight, extra) {
+  return __spreadValues({ fontWeight: weight, fontSize: size, lineHeight }, extra);
+}
+var TYPOGRAPHY_DISPLAY = {
+  large: style(700, "4rem", "4.5rem", { letterSpacing: "-0.03125rem" }),
+  medium: style(700, "3rem", "3.5rem"),
+  small: style(600, "2.125rem", "2.625rem")
+};
+var TYPOGRAPHY_HEADING = {
+  h1: style(700, "2rem", "2.5rem"),
+  h2: style(600, "1.75rem", "2.25rem"),
+  h3: style(600, "1.5rem", "2rem"),
+  h4: style(600, "1.3125rem", "1.75rem"),
+  h5: style(600, "1.125rem", "1.5rem"),
+  h6: style(600, "1rem", "1.375rem")
+};
+var TYPOGRAPHY_BODY = {
+  large: style(400, "1.125rem", "1.75rem"),
+  medium: style(400, "1rem", "1.5rem"),
+  small: style(400, "0.875rem", "1.25rem")
+};
+var TYPOGRAPHY_LABEL = {
+  large: style(600, "1rem", "1.25rem"),
+  medium: style(600, "0.875rem", "1.125rem"),
+  small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" })
+};
+var TYPOGRAPHY_UTILITY = {
+  caption: style(400, "0.75rem", "1rem"),
+  overline: style(600, "0.625rem", "0.875rem", {
+    letterSpacing: "0.09375rem",
+    textTransform: "uppercase"
+  }),
+  code: style(400, "0.875rem", "1.25rem")
+};
+var RESPONSIVE_DISPLAY_MOBILE = {
+  displayLarge: style(700, "2.5rem", "2.8125rem", { letterSpacing: "-0.03125rem" }),
+  displayMedium: style(700, "2rem", "2.334rem"),
+  h1: style(700, "1.75rem", "2.1875rem"),
+  h2: style(600, "1.5rem", "1.93rem")
+};
+var RESPONSIVE_DISPLAY_TABLET = {
+  displayLarge: style(700, "3.6rem", "4.05rem", { letterSpacing: "-0.03125rem" }),
+  displayMedium: style(700, "2.7rem", "3.15rem"),
+  displaySmall: style(600, "1.9125rem", "2.3625rem")
+};
+
+// src/charts/chart-utils.ts
+var tooltipsBaseOption = {
+  enabled: true,
+  mode: "nearest",
+  intersect: false,
+  backgroundColor: FOUNDATION_COLORS.background.primary,
+  titleColor: FOUNDATION_COLORS.text.primary,
+  bodyColor: FOUNDATION_COLORS.text.primary,
+  displayColors: false,
+  borderColor: FOUNDATION_COLORS.text.primary,
+  borderWidth: 1,
+  titleFont: {
+    family: FONT_FAMILY_SANS,
+    style: "normal",
+    size: 14
+  },
+  bodyFont: {
+    family: FONT_FAMILY_SANS,
+    style: "normal",
+    weight: "bold",
+    size: 13
+  }
+};
+var buildChartDataFromObject = (chartDataObject = {}) => {
+  return Object.keys(chartDataObject).map((key) => ({
+    x: key,
+    y: chartDataObject[key]
+  }));
+};
+var formatNumber = (value) => {
+  return value.toLocaleString("en-US");
+};
+var formatNumberWithText = (value, precision = 1) => {
+  if (Math.abs(value) >= 1e6) {
+    return `$${(value / 1e6).toFixed(precision)}M`;
+  }
+  if (Math.abs(value) >= 1e3) {
+    return `$${(value / 1e3).toFixed(precision)}K`;
+  }
+  return `$${value.toFixed(0)}`;
+};
+var formatNumberWithDollar = (value) => {
+  return `$${formatNumber(value)}`;
+};
+var convertToFloat = (value, precision) => {
+  return parseFloat(value.toFixed(precision)).toString();
+};
+
+// src/charts/LoadingChartBackdrop.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var LoadingChartBackdrop = ({
+  isLoading,
+  isError
+}) => {
+  if (isError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Oops! Something went wrong. Chart data has been lost. Please try again after a few minutes." });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.CircularProgress, { color: "inherit", size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Loading chart data..." })
+    ] });
+  }
+  return null;
+};
+LoadingChartBackdrop.displayName = "LoadingChartBackdrop";
+
+// src/charts/BackofficeSwitchableChart.tsx
+var import_react = require("react");
+var import_material2 = require("@mui/material");
+var import_styles = require("@mui/material/styles");
+var import_StackedLineChart = __toESM(require("@mui/icons-material/StackedLineChart"));
+var import_Equalizer = __toESM(require("@mui/icons-material/Equalizer"));
+var import_chart = require("chart.js");
+var import_chartjs_adapter_date_fns = require("chartjs-adapter-date-fns");
+var import_react_chartjs_2 = require("react-chartjs-2");
+var import_date_fns = require("date-fns");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+import_chart.Chart.register(
+  import_chart.CategoryScale,
+  import_chart.LinearScale,
+  import_chart.TimeScale,
+  import_chart.PointElement,
+  import_chart.LineElement,
+  import_chart.BarElement,
+  import_chart.Title,
+  import_chart.Tooltip,
+  import_chart.Legend
+);
+function getChartOptions(options) {
+  var _a, _b;
+  const primaryColor = (_a = options == null ? void 0 : options.primaryColor) != null ? _a : FOUNDATION_COLORS.brand.primary;
+  const textColor = (_b = options == null ? void 0 : options.textColor) != null ? _b : FOUNDATION_COLORS.text.primary;
+  return {
+    scales: {
+      x: {
+        grid: {
+          display: false
+        },
+        stacked: false,
+        type: "time",
+        time: {
+          unit: "month"
+        },
+        ticks: {
+          callback: (value) => {
+            if (typeof value === "number" && value > 0) {
+              return (0, import_date_fns.format)(new Date(value), "MMM").toUpperCase();
+            }
+            const parsedValue = Number(value);
+            return Number.isNaN(parsedValue) ? "" : (0, import_date_fns.format)(new Date(parsedValue), "MMM").toUpperCase();
+          }
+        }
+      },
+      y: {
+        grid: {
+          display: false
+        },
+        stacked: false,
+        ticks: {
+          stepSize: 1,
+          maxTicksLimit: 5
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+        mode: "nearest"
+      }),
+      legend: {
+        display: false
+      }
+    },
+    interaction: {
+      mode: "nearest",
+      intersect: false
+    }
+  };
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        labels: {
+          color: textColor,
+          usePointStyle: true
+        }
+      },
+      tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+        titleColor: textColor,
+        bodyColor: textColor,
+        borderColor: primaryColor,
+        callbacks: {
+          label(tooltipItem) {
+            var _a2, _b2;
+            const value = (_b2 = (_a2 = tooltipItem.parsed) == null ? void 0 : _a2.y) != null ? _b2 : 0;
+            return `$${formatNumber(Math.abs(value))}`;
+          }
+        }
+      })
+    },
+    scales: {
+      x: {
+        type: "time",
+        time: { unit: "month" },
+        grid: { display: false },
+        ticks: { color: textColor, maxTicksLimit: 12 }
+      },
+      y: {
+        beginAtZero: true,
+        grid: { display: false },
+        ticks: {
+          color: textColor,
+          callback(value) {
+            return formatNumberWithText(Number(value), 1);
+          }
+        }
+      }
+    }
+  };
+}
+var ChartContainer = (0, import_styles.styled)("div")({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  minWidth: 0,
+  flexDirection: "column"
+});
+var ChartHeader = (0, import_styles.styled)("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: "1rem",
+  flexWrap: "wrap",
+  gap: "0.5rem"
+});
+var ChartTitle = (0, import_styles.styled)("div")({
+  fontSize: 16,
+  fontWeight: 600,
+  "@media (max-width: 768px)": { fontSize: 14 }
+});
+var ChartControls = (0, import_styles.styled)("div")({
+  display: "flex",
+  justifyContent: "flex-end",
+  marginBottom: 12
+});
+var ChartWrapper = (0, import_styles.styled)("div")({
+  flex: 1,
+  position: "relative",
+  minHeight: 250,
+  width: "100%",
+  height: "100%",
+  "@media (max-width: 768px)": { minHeight: 200 },
+  "@media (max-width: 480px)": { minHeight: 180 }
+});
+var LoadingOverlay = (0, import_styles.styled)("div")({
+  alignItems: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.8)",
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  justifyContent: "center",
+  left: 0,
+  position: "absolute",
+  top: 0,
+  width: "100%",
+  "& span": { marginTop: "1rem" }
+});
+var BackofficeSwitchableChart = ({
+  chartTitle,
+  datasets,
+  chartOptions: chartOptionsOverride,
+  isLoading,
+  isError,
+  chartType,
+  onChartTypeChange,
+  primaryColor = FOUNDATION_COLORS.brand.primary,
+  textColor = FOUNDATION_COLORS.text.primary
+}) => {
+  const chartRef = (0, import_react.useRef)(null);
+  const chartData = (0, import_react.useMemo)(() => ({ datasets }), [datasets]);
+  const responsiveChartOptions = (0, import_react.useMemo)(() => {
+    var _a, _b;
+    const base = getChartOptions({ primaryColor, textColor });
+    return __spreadProps(__spreadValues(__spreadValues({}, base), chartOptionsOverride), {
+      plugins: __spreadValues(__spreadValues({}, base.plugins), (_a = chartOptionsOverride == null ? void 0 : chartOptionsOverride.plugins) != null ? _a : {}),
+      scales: __spreadValues(__spreadValues({}, base.scales), (_b = chartOptionsOverride == null ? void 0 : chartOptionsOverride.scales) != null ? _b : {})
+    });
+  }, [primaryColor, textColor, chartOptionsOverride]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ChartContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ChartHeader, { children: [
+      chartTitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartTitle, { children: chartTitle }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChartControls, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        import_material2.ButtonGroup,
+        {
+          size: "small",
+          "aria-label": "chart type selector",
+          sx: {
+            backgroundColor: "#fff",
+            borderRadius: "5px",
+            border: `1px solid ${primaryColor}`,
+            "& .MuiButton-root": {
+              minWidth: "32px",
+              minHeight: "32px",
+              padding: "4px",
+              border: "none",
+              color: textColor,
+              "&:hover": { boxShadow: "none" }
+            },
+            "& .MuiButton-contained": {
+              backgroundColor: primaryColor,
+              color: textColor,
+              "&:hover": { boxShadow: "none" }
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material2.Button,
+              {
+                variant: chartType === "line" ? "contained" : "text",
+                onClick: () => onChartTypeChange("line"),
+                "aria-label": "Line chart",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_StackedLineChart.default, { sx: { fontSize: 14 } })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_material2.Button,
+              {
+                variant: chartType === "bar" ? "contained" : "text",
+                onClick: () => onChartTypeChange("bar"),
+                "aria-label": "Bar chart",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Equalizer.default, { sx: { fontSize: 14 } })
+              }
+            )
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(ChartWrapper, { children: [
+      !isLoading && !isError && (chartType === "line" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_chartjs_2.Line,
+        {
+          ref: chartRef,
+          data: chartData,
+          options: responsiveChartOptions
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_chartjs_2.Bar,
+        {
+          ref: chartRef,
+          data: chartData,
+          options: responsiveChartOptions
+        }
+      )),
+      (isLoading || isError) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingChartBackdrop, { isLoading, isError }) })
+    ] })
+  ] });
+};
+BackofficeSwitchableChart.displayName = "BackofficeSwitchableChart";
+
+// src/charts/FrontendLineChart.tsx
+var import_react2 = require("react");
+var import_styles2 = require("@mui/material/styles");
+var import_chart2 = require("chart.js");
+var import_chartjs_adapter_date_fns2 = require("chartjs-adapter-date-fns");
+var import_react_chartjs_22 = require("react-chartjs-2");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+import_chart2.Chart.register(
+  import_chart2.CategoryScale,
+  import_chart2.LinearScale,
+  import_chart2.PointElement,
+  import_chart2.LineElement,
+  import_chart2.LineController,
+  import_chart2.Title,
+  import_chart2.Tooltip,
+  import_chart2.Legend,
+  import_chart2.TimeScale
+);
+var ChartContainer2 = (0, import_styles2.styled)("div")({
+  width: "100%"
+});
+var ChartWrapper2 = (0, import_styles2.styled)("div")(
+  ({ chartHeight }) => ({
+    flex: "auto",
+    height: chartHeight || 270,
+    position: "relative",
+    width: "100%"
+  })
+);
+var buildChartData = (title, lineChartData, mainLineColor, referenceLineValue, referenceLineLabel, referenceLineColor = "#39FD99") => {
+  var _a, _b, _c, _d;
+  const datasets = lineChartData.map((dataset, index) => {
+    var _a2;
+    const color = ((_a2 = dataset.customOptions) == null ? void 0 : _a2.borderColor) || mainLineColor;
+    return __spreadValues({
+      type: "line",
+      label: dataset.label || title || `Dataset ${index + 1}`,
+      fill: false,
+      backgroundColor: color,
+      borderColor: color,
+      borderCapStyle: "butt",
+      borderDash: [],
+      borderDashOffset: 0,
+      borderJoinStyle: "miter",
+      pointBorderColor: color,
+      pointBackgroundColor: color,
+      pointBorderWidth: 1,
+      pointHoverRadius: 3,
+      pointHoverBackgroundColor: color,
+      pointHoverBorderColor: color,
+      pointHoverBorderWidth: 3,
+      pointRadius: 1,
+      pointHitRadius: 3,
+      borderWidth: 1.5,
+      tension: 0.4,
+      data: dataset.data
+    }, dataset.customOptions);
+  });
+  if (typeof referenceLineValue === "number" && lineChartData.length > 0 && ((_b = (_a = lineChartData[0]) == null ? void 0 : _a.data) == null ? void 0 : _b.length)) {
+    const firstDataset = lineChartData[0].data;
+    const firstX = (_c = firstDataset[0]) == null ? void 0 : _c.x;
+    const lastX = (_d = firstDataset[firstDataset.length - 1]) == null ? void 0 : _d.x;
+    const refData = firstX && lastX ? [
+      { x: firstX, y: referenceLineValue },
+      { x: lastX, y: referenceLineValue }
+    ] : firstDataset.map((p) => ({ x: p.x, y: referenceLineValue }));
+    datasets.push({
+      type: "line",
+      label: referenceLineLabel || "Target",
+      fill: false,
+      backgroundColor: referenceLineColor,
+      borderColor: referenceLineColor,
+      borderDash: [],
+      borderWidth: 1,
+      pointRadius: 0,
+      tension: 0,
+      data: refData,
+      legendHidden: true
+    });
+  }
+  return { datasets };
+};
+var buildChartOption = (customChartOptions, invertYAxis) => {
+  const baseOptions = {
+    scales: {
+      x: {
+        display: true,
+        grid: { display: false, drawOnChartArea: false, drawBorder: true },
+        stacked: true,
+        ticks: {
+          maxTicksLimit: 8,
+          autoSkip: true,
+          maxRotation: 0,
+          minRotation: 0,
+          beginAtZero: false,
+          source: "auto",
+          display: true
+        },
+        bounds: "data",
+        type: "time",
+        time: {
+          unit: "month",
+          stepSize: 1,
+          displayFormats: {
+            day: "MMM dd",
+            month: "MMM yyyy",
+            year: "yyyy"
+          }
+        },
+        distribution: "series"
+      },
+      y: {
+        display: true,
+        grid: {
+          display: false,
+          drawBorder: false,
+          drawOnChartArea: false,
+          color: "transparent"
+        },
+        border: { display: false },
+        reverse: invertYAxis,
+        position: "left",
+        ticks: {
+          beginAtZero: false,
+          display: true,
+          callback(value) {
+            return formatNumberWithText(Number(value), 1);
+          }
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+        filter: (tooltipItem) => {
+          var _a;
+          if (tooltipItem.dataset.hideFromTooltip) {
+            const chartValue = (_a = tooltipItem.parsed) == null ? void 0 : _a.y;
+            const referenceValue = tooltipItem.dataset.referenceLineValue;
+            return chartValue !== referenceValue;
+          }
+          return true;
+        },
+        callbacks: {
+          title(tooltipItems) {
+            var _a;
+            const tooltipItem = tooltipItems[0];
+            if ((_a = tooltipItem == null ? void 0 : tooltipItem.parsed) == null ? void 0 : _a.x) {
+              const date = new Date(tooltipItem.parsed.x);
+              return date.toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit"
+              });
+            }
+            return "";
+          },
+          label(tooltipItem) {
+            var _a, _b;
+            const chartValue = (_b = (_a = tooltipItem.parsed) == null ? void 0 : _a.y) != null ? _b : 0;
+            const chartValueWithCommas = formatNumber(Math.abs(chartValue));
+            const chartTitle = tooltipItem.dataset.label;
+            return `${chartTitle} ${chartValue >= 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`}`.trim();
+          }
+        }
+      })
+    },
+    interaction: { mode: "nearest", intersect: false }
+  };
+  return __spreadValues(__spreadValues({}, baseOptions), customChartOptions);
+};
+var buildChartLegend = (legendDisplay) => ({
+  display: legendDisplay,
+  position: "bottom",
+  fullSize: true,
+  reverse: false,
+  labels: {
+    color: "#000",
+    filter: (legendItem, data) => {
+      var _a;
+      const ds = (_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a[legendItem.datasetIndex];
+      return !(ds == null ? void 0 : ds.legendHidden);
+    }
+  }
+});
+var FrontendLineChart = ({
+  lineChartData = [],
+  legendDisplay = true,
+  title = "",
+  customChartOptions = {},
+  height,
+  invertYAxis = false,
+  referenceLineValue,
+  referenceLineLabel,
+  mainLineColor = "#162029",
+  referenceLineColor = "#39FD99"
+}) => {
+  const chartRef = (0, import_react2.useRef)(null);
+  const chartData = (0, import_react2.useMemo)(
+    () => buildChartData(
+      title,
+      lineChartData,
+      mainLineColor,
+      referenceLineValue,
+      referenceLineLabel,
+      referenceLineColor
+    ),
+    [lineChartData, title, mainLineColor, referenceLineValue, referenceLineLabel, referenceLineColor]
+  );
+  const chartOption = (0, import_react2.useMemo)(
+    () => buildChartOption(customChartOptions, invertYAxis),
+    [customChartOptions, invertYAxis]
+  );
+  const chartLegend = (0, import_react2.useMemo)(() => buildChartLegend(legendDisplay), [legendDisplay]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChartWrapper2, { chartHeight: height, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_chartjs_22.Chart,
+    {
+      ref: chartRef,
+      type: "line",
+      data: chartData,
+      options: __spreadProps(__spreadValues({}, chartOption), {
+        plugins: __spreadProps(__spreadValues({}, chartOption.plugins), {
+          legend: chartLegend
+        })
+      })
+    }
+  ) }) });
+};
+FrontendLineChart.displayName = "FrontendLineChart";
+
+// src/charts/FrontendLineChartMobile.tsx
+var import_react3 = require("react");
+var import_styles3 = require("@mui/material/styles");
+var import_chart3 = require("chart.js");
+var import_chartjs_adapter_date_fns3 = require("chartjs-adapter-date-fns");
+var import_react_chartjs_23 = require("react-chartjs-2");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+import_chart3.Chart.register(
+  import_chart3.CategoryScale,
+  import_chart3.LinearScale,
+  import_chart3.PointElement,
+  import_chart3.LineElement,
+  import_chart3.LineController,
+  import_chart3.Title,
+  import_chart3.Tooltip,
+  import_chart3.Legend,
+  import_chart3.TimeScale
+);
+var ChartContainer3 = (0, import_styles3.styled)("div")({
+  width: "100%"
+});
+var ChartSize = (0, import_styles3.styled)("div")({
+  flex: "auto",
+  height: 200,
+  position: "relative",
+  width: "100%"
+});
+var MobileChartTitleWrapper = (0, import_styles3.styled)("div")({
+  padding: "8px 0"
+});
+var MobileChartTitleText = (0, import_styles3.styled)("div")({
+  fontSize: 14,
+  color: "#656566"
+});
+var MobileChartTitleBold = (0, import_styles3.styled)("span")({
+  fontWeight: 600,
+  color: "#131c24"
+});
+var MobileChartValue = (0, import_styles3.styled)("div")({
+  fontSize: 24,
+  fontWeight: 700,
+  color: "#131c24",
+  marginTop: 4
+});
+var LegendContainer = (0, import_styles3.styled)("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 12,
+  marginTop: 8,
+  paddingLeft: 30
+});
+var LegendWrap = (0, import_styles3.styled)("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+});
+var LegendBox = (0, import_styles3.styled)("div")(({ isDashed }) => __spreadValues({
+  width: 12,
+  height: isDashed ? 0 : 12,
+  borderRadius: 2,
+  flexShrink: 0
+}, isDashed ? {
+  borderTop: "2px dashed #A1B9BD",
+  width: 12
+} : {}));
+var LegendFont = (0, import_styles3.styled)("span")({
+  fontSize: 12,
+  color: "#656566"
+});
+var BORDER_COLOR = "#A1B9BD";
+var buildChartData2 = (lineChartData, defaultColor) => ({
+  datasets: lineChartData.map((chartData) => {
+    const {
+      label = "",
+      data = [],
+      color = defaultColor,
+      lineSpacing = [],
+      borderWidth = 2,
+      customOptions = {}
+    } = chartData;
+    return __spreadValues({
+      label,
+      fill: false,
+      backgroundColor: color,
+      borderColor: color,
+      borderCapStyle: "butt",
+      borderDash: lineSpacing,
+      borderDashOffset: 0,
+      borderJoinStyle: "miter",
+      pointBorderColor: color,
+      pointBackgroundColor: color,
+      pointBorderWidth: 0,
+      pointHoverRadius: 6,
+      pointHoverBackgroundColor: "#ffffff",
+      pointHoverBorderColor: color,
+      pointHoverBorderWidth: 2,
+      pointRadius: 0,
+      borderWidth,
+      pointHitRadius: 3,
+      data,
+      tension: 0.4
+    }, customOptions);
+  })
+});
+var getMinMaxInArray = (mathFn, array, property) => {
+  return Math[mathFn](
+    ...array.map(
+      (chartItem) => Math[mathFn](...chartItem.data.map((item) => Number(item[property])))
+    )
+  );
+};
+var buildChartOption2 = (minChartData, maxChartData, setChartTitleValue, customChartOptions) => {
+  const baseOptions = {
+    layout: {
+      padding: { left: 30, right: 30, top: 0, bottom: 0 }
+    },
+    scales: {
+      x: {
+        display: false,
+        grid: { display: false },
+        ticks: { padding: 25 },
+        stacked: true,
+        bounds: "data",
+        type: "time",
+        distribution: "linear"
+      },
+      y: {
+        type: "linear",
+        display: false,
+        position: "right",
+        ticks: {
+          padding: 25,
+          min: minChartData,
+          max: maxChartData
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: { enabled: false },
+      legend: { display: false }
+    },
+    interaction: { mode: "nearest", intersect: false },
+    onHover: (_event, activeElements, chart) => {
+      var _a, _b, _c;
+      if (activeElements.length) {
+        const datasetIndex = ((_a = activeElements[0]) == null ? void 0 : _a.datasetIndex) || 0;
+        const elementIndex = ((_b = activeElements[0]) == null ? void 0 : _b.index) || 0;
+        const dataset = chart.data.datasets[datasetIndex];
+        if ((_c = dataset == null ? void 0 : dataset.data) == null ? void 0 : _c[elementIndex]) {
+          setChartTitleValue({
+            index: datasetIndex,
+            value: dataset.data[elementIndex].y
+          });
+        }
+      }
+    }
+  };
+  return __spreadValues(__spreadValues({}, baseOptions), customChartOptions);
+};
+var drawVerticalLine = {
+  id: "drawVerticalLine",
+  afterDraw(chart) {
+    var _a, _b, _c;
+    if (((_b = (_a = chart.tooltip) == null ? void 0 : _a._active) == null ? void 0 : _b.length) && chart.config.type === "line") {
+      const activePoint = chart.tooltip._active[0];
+      if (!activePoint) return;
+      const { ctx } = chart;
+      const yAxis = chart.scales.y;
+      const { x } = activePoint.element;
+      const topY = yAxis.top;
+      const bottomY = yAxis.bottom;
+      const datasetIndex = activePoint.datasetIndex;
+      const dataIndex = activePoint.index;
+      const dataset = chart.data.datasets[datasetIndex];
+      const point = (_c = dataset == null ? void 0 : dataset.data) == null ? void 0 : _c[dataIndex];
+      let dateStr = "";
+      if (point == null ? void 0 : point.x) {
+        const date = new Date(point.x);
+        const mm = String(date.getMonth() + 1).padStart(2, "0");
+        const yyyy = date.getFullYear();
+        dateStr = `${yyyy}/${mm}`;
+      }
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(x, topY);
+      ctx.lineTo(x, bottomY - 20);
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = BORDER_COLOR;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.font = "14px sans-serif";
+      ctx.fillText(dateStr, x, bottomY - 10);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+};
+var MobileChartTitle = ({
+  title = "",
+  subTitle = "",
+  value = 0
+}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MobileChartTitleWrapper, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MobileChartTitleText, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MobileChartTitleBold, { children: title }),
+    " ",
+    subTitle
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MobileChartValue, { children: formatNumberWithDollar(value) })
+] });
+var FrontendLineChartMobile = ({
+  chartTitle = "",
+  subTitle,
+  titleValue = 0,
+  chartData: lineChartData = [],
+  defaultColor = "#162029",
+  customChartOptions = {}
+}) => {
+  var _a;
+  const [lineChartTitleValue, setLineChartTitleValue] = (0, import_react3.useState)({
+    index: 0,
+    value: 0
+  });
+  const lineChart = (0, import_react3.useRef)(null);
+  const minChartData = (0, import_react3.useMemo)(
+    () => lineChartData.length > 0 ? getMinMaxInArray("min", lineChartData, "y") : 0,
+    [lineChartData]
+  );
+  const maxChartData = (0, import_react3.useMemo)(
+    () => lineChartData.length > 0 ? getMinMaxInArray("max", lineChartData, "y") : 100,
+    [lineChartData]
+  );
+  const yAxisInnerPadding = Math.max(
+    minChartData * 0.2,
+    (maxChartData - minChartData) * 0.2
+  );
+  const data = (0, import_react3.useMemo)(
+    () => buildChartData2(lineChartData, defaultColor),
+    [lineChartData, defaultColor]
+  );
+  const options = (0, import_react3.useMemo)(
+    () => buildChartOption2(
+      minChartData - yAxisInnerPadding * 0.2,
+      maxChartData + yAxisInnerPadding * 0.2,
+      setLineChartTitleValue,
+      customChartOptions
+    ),
+    [minChartData, maxChartData, yAxisInnerPadding, customChartOptions]
+  );
+  const currentTitle = ((_a = lineChartData == null ? void 0 : lineChartData[lineChartTitleValue.index]) == null ? void 0 : _a.label) || chartTitle;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      MobileChartTitle,
+      {
+        title: currentTitle,
+        subTitle,
+        value: lineChartTitleValue.value || titleValue
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChartContainer3, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartSize, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_react_chartjs_23.Chart,
+        {
+          type: "line",
+          ref: lineChart,
+          data,
+          options,
+          plugins: [drawVerticalLine]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LegendContainer, { children: lineChartData.map((ds, index) => {
+        var _a2, _b;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(LegendWrap, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            LegendBox,
+            {
+              isDashed: !!((_a2 = ds.lineSpacing) == null ? void 0 : _a2.length),
+              style: ((_b = ds.lineSpacing) == null ? void 0 : _b.length) ? {} : {
+                backgroundColor: ds.color || defaultColor
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LegendFont, { children: ds.label || "" })
+        ] }, ds.label || index);
+      }) })
+    ] })
+  ] });
+};
+FrontendLineChartMobile.displayName = "FrontendLineChartMobile";
+
+// src/charts/FrontendBarChart.tsx
+var import_react4 = require("react");
+var import_styles4 = require("@mui/material/styles");
+var import_chart4 = require("chart.js");
+var import_react_chartjs_24 = require("react-chartjs-2");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+import_chart4.Chart.register(
+  import_chart4.CategoryScale,
+  import_chart4.LinearScale,
+  import_chart4.BarElement,
+  import_chart4.BarController,
+  import_chart4.Title,
+  import_chart4.Tooltip,
+  import_chart4.Legend
+);
+var ChartWrapper3 = (0, import_styles4.styled)("div")({
+  position: "relative",
+  height: 300,
+  width: "100%"
+});
+var baseChartOptions = {
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    legend: { display: false },
+    tooltip: __spreadProps(__spreadValues({}, tooltipsBaseOption), {
+      callbacks: {
+        label(tooltipItem) {
+          const { parsed = { y: 0 } } = tooltipItem;
+          const chartValue = parsed.y;
+          const chartValueWithCommas = formatNumber(Math.abs(chartValue));
+          return `${chartValue > 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`} `;
+        }
+      }
+    })
+  },
+  scales: {
+    x: {
+      grid: { display: true, drawBorder: true, drawOnChartArea: false }
+    },
+    y: {
+      display: true,
+      position: "left",
+      grid: { display: false, drawBorder: false },
+      ticks: {
+        padding: 10,
+        callback(value) {
+          return formatNumberWithText(Number(value), 1);
+        }
+      }
+    }
+  }
+};
+var mergeOptions = (base, custom) => {
+  if (!custom) return base;
+  return deepMerge(base, custom);
+};
+var deepMerge = (target, source) => {
+  const result = __spreadValues({}, target);
+  for (const key of Object.keys(source)) {
+    if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key]) && target[key] && typeof target[key] === "object") {
+      result[key] = deepMerge(target[key], source[key]);
+    } else {
+      result[key] = source[key];
+    }
+  }
+  return result;
+};
+var FrontendBarChart = ({
+  data,
+  customChartOptions
+}) => {
+  const options = (0, import_react4.useMemo)(
+    () => mergeOptions(baseChartOptions, customChartOptions),
+    [customChartOptions]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChartWrapper3, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_chartjs_24.Chart, { type: "bar", data, options }) });
+};
+FrontendBarChart.displayName = "FrontendBarChart";
+
+// src/charts/FrontendDoughnutChart.tsx
+var import_react5 = require("react");
+var import_styles5 = require("@mui/material/styles");
+var import_material3 = require("@mui/material");
+var import_chart5 = require("chart.js");
+var import_react_chartjs_25 = require("react-chartjs-2");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+import_chart5.Chart.register(import_chart5.ArcElement, import_chart5.DoughnutController, import_chart5.Tooltip, import_chart5.Legend);
+var getChartColorRange = (spectrum, count) => {
+  if (count <= 1) return [spectrum[0] || "#162029"];
+  const result = [];
+  for (let i = 0; i < count; i++) {
+    const ratio = i / (count - 1);
+    const fromIdx = Math.floor(ratio * (spectrum.length - 1));
+    const toIdx = Math.min(fromIdx + 1, spectrum.length - 1);
+    const localRatio = ratio * (spectrum.length - 1) - fromIdx;
+    const from = spectrum[fromIdx];
+    const to = spectrum[toIdx];
+    result.push(interpolateColor(from, to, localRatio));
+  }
+  return result;
+};
+var interpolateColor = (c1, c2, t) => {
+  const parse = (hex) => {
+    const h = hex.replace("#", "");
+    return [
+      parseInt(h.substring(0, 2), 16),
+      parseInt(h.substring(2, 4), 16),
+      parseInt(h.substring(4, 6), 16)
+    ];
+  };
+  const [r1, g1, b1] = parse(c1);
+  const [r2, g2, b2] = parse(c2);
+  const lerp = (a, b) => Math.round(a + (b - a) * t);
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(lerp(r1, r2))}${toHex(lerp(g1, g2))}${toHex(lerp(b1, b2))}`;
+};
+var generateChartColor = (dataLength, providedColors) => {
+  if (providedColors.length > 0) return providedColors;
+  const spectrum = ["#162029", "#A1B9BD"];
+  return getChartColorRange(spectrum, dataLength);
+};
+var ChartContainer4 = (0, import_styles5.styled)("div")({
+  alignItems: "center",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+});
+var ChartWrapper4 = (0, import_styles5.styled)("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%"
+});
+var ChartSize2 = (0, import_styles5.styled)("div")({
+  height: 160,
+  maxWidth: 160,
+  width: "100%"
+});
+var LegendContainer2 = (0, import_styles5.styled)("div")(
+  ({ isCustom }) => ({
+    display: "flex",
+    flexDirection: isCustom ? "column" : "row",
+    flexWrap: "wrap",
+    gap: 8,
+    marginTop: 16,
+    width: "100%"
+  })
+);
+var LegendWrap2 = (0, import_styles5.styled)("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "4px 0"
+});
+var LegendBox2 = (0, import_styles5.styled)("div")({
+  width: 12,
+  height: 12,
+  borderRadius: 2,
+  flexShrink: 0
+});
+var LegendFont2 = (0, import_styles5.styled)("span")({
+  fontSize: 13,
+  lineHeight: 1.4
+});
+var LegendFontBold = (0, import_styles5.styled)("span")({
+  fontSize: 13,
+  fontWeight: 600,
+  lineHeight: 1.4,
+  display: "flex",
+  alignItems: "center",
+  gap: 4
+});
+var LegendBoxContainer = (0, import_styles5.styled)("div")({
+  display: "flex",
+  alignItems: "center"
+});
+var buildDoughnutChartOption = (textTop, textBottom, isBottomColor, bottomColor) => ({
+  cutout: "85%",
+  maintainAspectRatio: false,
+  responsive: true,
+  aspectRatio: 1,
+  elements: {
+    center: {
+      textNumber: textTop,
+      text: textBottom,
+      fontColor: "#656566",
+      topColor: "#131c24",
+      bottomColor: isBottomColor ? bottomColor || "#131c24" : "#131c24",
+      fontStyle: "normal"
+    }
+  },
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      mode: "nearest",
+      intersect: true,
+      callbacks: {
+        label: (tooltipItem) => {
+          const chartValue = tooltipItem.parsed;
+          return `${tooltipItem.label}: ${formatNumberWithDollar(chartValue)}`;
+        }
+      },
+      backgroundColor: "#fff",
+      titleFont: { family: "sans-serif", size: 14 },
+      titleColor: "#000",
+      bodyFont: { family: "sans-serif", weight: "bold", size: 13 },
+      bodyColor: "#000",
+      displayColors: false,
+      borderColor: "#000",
+      borderWidth: 1
+    }
+  },
+  interaction: { intersect: false },
+  layout: { padding: {} }
+});
+var drawTextInsideDoughnutPlugin = {
+  id: "doughnutCenterText",
+  beforeDraw: (chart) => {
+    var _a;
+    if ((_a = chart.config.options.elements) == null ? void 0 : _a.center) {
+      const { ctx } = chart;
+      ctx.restore();
+      const centerConfig = chart.config.options.elements.center;
+      const fontBold = "sans-serif";
+      const txt = centerConfig.textNumber;
+      const { text } = centerConfig;
+      const color = centerConfig.topColor;
+      const maxFontSize = centerConfig.maxFontSize || 12;
+      const sidePadding = centerConfig.sidePadding || 25;
+      const sidePaddingCalculated = sidePadding / 100 * (chart.innerRadius * 2);
+      ctx.font = `12px ${fontBold}`;
+      const stringWidth = ctx.measureText(txt).width;
+      const elementWidth = chart.innerRadius * 2 - sidePaddingCalculated;
+      const widthRatio = elementWidth / stringWidth;
+      const newFontSize = Math.floor(12 * widthRatio);
+      const elementHeight = chart.innerRadius * 2;
+      let fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
+      let { minFontSize } = centerConfig;
+      const lineHeight = centerConfig.lineHeight || 12;
+      let wrapText = false;
+      if (minFontSize === void 0) minFontSize = 8;
+      if (minFontSize && fontSizeToUse < minFontSize) {
+        fontSizeToUse = minFontSize;
+        wrapText = true;
+      }
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      const centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
+      let centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2.2;
+      const centerYY = chart.chartArea.top + chart.chartArea.bottom / 1.65;
+      ctx.font = `${fontSizeToUse}px ${fontBold}`;
+      ctx.fillStyle = color;
+      if (!wrapText) {
+        ctx.fillText(txt, centerX, centerY);
+        const regularFont2 = "sans-serif";
+        ctx.fillStyle = centerConfig.bottomColor;
+        ctx.font = `${Math.min(fontSizeToUse * 0.5, 10)}px ${regularFont2}`;
+        ctx.fillText(text, centerX, centerYY);
+        return;
+      }
+      const words = txt.split(" ");
+      let line = "";
+      const lines = [];
+      for (let n = 0; n < words.length; n++) {
+        const testLine = `${line + words[n]} `;
+        const metrics = ctx.measureText(testLine);
+        const testWidth = metrics.width;
+        if (testWidth > elementWidth && n > 0) {
+          lines.push(line);
+          line = `${words[n]} `;
+        } else {
+          line = testLine;
+        }
+      }
+      centerY -= lines.length / 2 * lineHeight;
+      ctx.restore();
+      for (let n = 0; n < lines.length; n++) {
+        ctx.fillText(lines[n], centerX, centerY);
+        centerY += lineHeight;
+      }
+      ctx.fillText(line, centerX, centerY);
+      const regularFont = "sans-serif";
+      ctx.fillStyle = centerConfig.bottomColor;
+      centerY += lineHeight;
+      ctx.fillText(text, centerX, centerY);
+      ctx.save();
+    }
+  }
+};
+var FrontendDoughnutChart = ({
+  title,
+  data,
+  textTop = " ",
+  textBottom = " ",
+  legendDisplay = true,
+  customLegend = false,
+  isBottomColor = false,
+  bottomColor = "#131c24"
+}) => {
+  const chartRef = (0, import_react5.useRef)(null);
+  const {
+    data: dChartData = [],
+    title: dChartTitle = [],
+    colors: dChartColor = [],
+    icons: dChartIcons = []
+  } = data || {};
+  const chartColors = (0, import_react5.useMemo)(
+    () => generateChartColor(dChartData.length, dChartColor),
+    [dChartData.length, dChartColor]
+  );
+  const chartOptions = (0, import_react5.useMemo)(
+    () => buildDoughnutChartOption(textTop, textBottom, isBottomColor, bottomColor),
+    [textTop, textBottom, isBottomColor, bottomColor]
+  );
+  const chartData = (0, import_react5.useMemo)(() => {
+    if (!data || !dChartData.length) return { labels: [], datasets: [] };
+    return {
+      type: "doughnut",
+      labels: dChartTitle,
+      datasets: [
+        {
+          data: dChartData,
+          backgroundColor: chartColors,
+          hoverBackgroundColor: chartColors
+        }
+      ]
+    };
+  }, [data, dChartData, dChartTitle, chartColors]);
+  if (!data || !dChartData.length) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ChartContainer4, { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material3.Typography, { variant: "subtitle2", color: "text.secondary", mb: 1, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material3.Box, { sx: { color: "text.disabled", py: 4 }, children: "No data" })
+    ] });
+  }
+  const generateLegend = () => {
+    if (customLegend) {
+      return dChartData.map((chartDataset, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(LegendWrap2, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(LegendFontBold, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: dChartTitle[index] || "" }),
+          (dChartIcons == null ? void 0 : dChartIcons[index]) && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: dChartIcons[index] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LegendBoxContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LegendBox2, { style: { backgroundColor: chartColors[index] } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LegendFont2, { children: formatNumberWithDollar(chartDataset) })
+      ] }, `${chartDataset}${index}`));
+    }
+    return dChartData.map((_chartDataset, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(LegendWrap2, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LegendBox2, { style: { backgroundColor: chartColors[index] } }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LegendFont2, { children: dChartTitle[index] })
+    ] }, dChartTitle[index]));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ChartContainer4, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_material3.Typography, { variant: "subtitle2", color: "text.secondary", mb: 1, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ChartWrapper4, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChartSize2, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_chartjs_25.Chart,
+        {
+          type: "doughnut",
+          redraw: true,
+          ref: chartRef,
+          data: chartData,
+          options: chartOptions,
+          plugins: [drawTextInsideDoughnutPlugin]
+        }
+      ) }),
+      legendDisplay && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LegendContainer2, { isCustom: customLegend, children: generateLegend() })
+    ] })
+  ] });
+};
+FrontendDoughnutChart.displayName = "FrontendDoughnutChart";
+
+// src/charts/FrontendMixedChart.tsx
+var import_react6 = require("react");
+var import_styles6 = require("@mui/material/styles");
+var import_material4 = require("@mui/material");
+var import_chart6 = require("chart.js");
+var import_chartjs_adapter_date_fns4 = require("chartjs-adapter-date-fns");
+var import_react_chartjs_26 = require("react-chartjs-2");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+import_chart6.Chart.register(
+  import_chart6.CategoryScale,
+  import_chart6.LinearScale,
+  import_chart6.BarElement,
+  import_chart6.BarController,
+  import_chart6.PointElement,
+  import_chart6.LineElement,
+  import_chart6.LineController,
+  import_chart6.Title,
+  import_chart6.Tooltip,
+  import_chart6.Legend,
+  import_chart6.TimeScale
+);
+var FullwidthChartContainer = (0, import_styles6.styled)("div")({
+  position: "relative",
+  width: "100%"
+});
+var ChartHeader2 = (0, import_styles6.styled)("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: 12
+});
+var BarChartSize = (0, import_styles6.styled)("div")({
+  flex: "auto",
+  height: 300,
+  position: "relative",
+  width: "100%"
+});
+var LoadingIndicator = (0, import_styles6.styled)("div")({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.8)"
+});
+var buildChartOption3 = (isMobile) => ({
+  elements: { line: { fill: false } },
+  scales: {
+    x: {
+      type: "time",
+      offset: true,
+      beginAtZero: false,
+      display: true,
+      time: {
+        displayFormats: { month: "yyyy-MM", quarter: "yyyy-MM" },
+        unit: "quarter",
+        stepSize: 1,
+        tooltipFormat: "yyyy-MM"
+      },
+      grid: { display: false, drawOnChartArea: false },
+      ticks: {
+        maxTicksLimit: isMobile ? 4 : 20,
+        autoSkip: false,
+        maxRotation: 0,
+        minRotation: 0,
+        beginAtZero: false,
+        source: "auto"
+      }
+    },
+    y: {
+      type: "linear",
+      display: true,
+      position: "left",
+      ticks: {
+        padding: 5,
+        maxTicksLimit: 6,
+        min: 0,
+        callback: (value) => formatNumberWithText(Number(value), 2)
+      },
+      grid: {
+        display: false,
+        drawBorder: false,
+        drawOnChartArea: false,
+        color: "transparent"
+      },
+      border: { display: false }
+    }
+  },
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    legend: {
+      position: "bottom",
+      labels: { usePointStyle: true, boxWidth: 12 }
+    },
+    tooltip: {
+      enabled: true,
+      mode: "nearest",
+      intersect: false,
+      backgroundColor: "#fff",
+      titleColor: "#000",
+      bodyColor: "#000",
+      displayColors: false,
+      borderColor: "#000",
+      borderWidth: 1,
+      padding: 8,
+      cornerRadius: 4,
+      titleSpacing: 4,
+      bodySpacing: 4,
+      callbacks: {
+        label(tooltipItem) {
+          const xLabel = tooltipItem.dataset.label;
+          const { parsed = { y: 0 } } = tooltipItem;
+          const yLabel = parsed.y;
+          const chartValueWithCommas = formatNumber(Math.abs(yLabel));
+          return `${xLabel}: ${yLabel >= 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`}`.trim();
+        }
+      }
+    }
+  },
+  interaction: { mode: "nearest", intersect: false }
+});
+var FrontendMixedChart = ({
+  datasets,
+  labels,
+  title,
+  isLoading = false,
+  isError = false,
+  timeFilters,
+  defaultTimeFilterIndex = 0,
+  onTimeFilterChange,
+  height,
+  isMobile = false,
+  customChartOptions = {}
+}) => {
+  const [selectedFilter, setSelectedFilter] = (0, import_react6.useState)(defaultTimeFilterIndex);
+  const handleFilterChange = (_event, newValue) => {
+    if (newValue !== null) {
+      setSelectedFilter(newValue);
+      onTimeFilterChange == null ? void 0 : onTimeFilterChange(newValue);
+    }
+  };
+  const chartData = (0, import_react6.useMemo)(
+    () => __spreadProps(__spreadValues({}, labels ? { labels } : {}), {
+      datasets
+    }),
+    [datasets, labels]
+  );
+  const options = (0, import_react6.useMemo)(
+    () => __spreadValues(__spreadValues({}, buildChartOption3(isMobile)), customChartOptions),
+    [isMobile, customChartOptions]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FullwidthChartContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ChartHeader2, { children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material4.Typography, { variant: "subtitle1", fontWeight: 600, children: title }),
+      timeFilters && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_material4.ToggleButtonGroup,
+        {
+          value: selectedFilter,
+          exclusive: true,
+          onChange: handleFilterChange,
+          size: "small",
+          children: timeFilters.map((filter, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material4.ToggleButton, { value: index, children: filter }, filter))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(BarChartSize, { style: height ? { height } : void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_react_chartjs_26.Chart,
+        {
+          type: "bar",
+          data: chartData,
+          options
+        }
+      ),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoadingIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoadingChartBackdrop, { isLoading, isError }) })
+    ] })
+  ] });
+};
+FrontendMixedChart.displayName = "FrontendMixedChart";
+
+// src/charts/FrontendStackedChart.tsx
+var import_material5 = require("@mui/material");
+var import_styles7 = require("@mui/material/styles");
+var import_chart7 = require("chart.js");
+var import_react_chartjs_27 = require("react-chartjs-2");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+import_chart7.Chart.register(
+  import_chart7.CategoryScale,
+  import_chart7.LinearScale,
+  import_chart7.BarElement,
+  import_chart7.BarController,
+  import_chart7.Title,
+  import_chart7.Tooltip,
+  import_chart7.Legend
+);
+var StyledContainer = (0, import_styles7.styled)("div")({
+  width: "100%",
+  height: "100%"
+});
+var LoadingContainer = (0, import_styles7.styled)("div")({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: 200
+});
+var EmptyContainer = (0, import_styles7.styled)("div")({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  color: "#A1A1A1",
+  borderBottom: "1px solid #00001A4D",
+  minHeight: 200
+});
+var DEFAULT_COLORS = [
+  "#1976D2",
+  "#001CB0",
+  "#8979FF",
+  "#004080",
+  "#39FD99",
+  "#FFC55A"
+];
+var FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+var FRONTEND_STACKED_CHART_MOCK_LABELS = [
+  "Recreation & Entertainment",
+  "Transport",
+  "Primary Residence Costs",
+  "Telephone, Internet, Pay TV & Media Streaming Subscriptions",
+  "Groceries",
+  "Other Regular and Recurring Expenses"
+];
+var FRONTEND_STACKED_CHART_MOCK_DATA = FRONTEND_STACKED_CHART_MOCK_LABELS.map(
+  () => FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS.map(() => Math.floor(Math.random() * 1e4))
+);
+var FRONTEND_STACKED_CHART_MOCK_COLORS = DEFAULT_COLORS;
+var FrontendStackedChart = ({
+  datasets = FRONTEND_STACKED_CHART_MOCK_DATA,
+  labels = FRONTEND_STACKED_CHART_MOCK_LABELS,
+  chartTitle,
+  xAxisLabels = FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS,
+  showLegend = false,
+  currency = "$",
+  dataColors = FRONTEND_STACKED_CHART_MOCK_COLORS,
+  isLoading = false,
+  noDataText = "No data"
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material5.CircularProgress, {}) }) });
+  }
+  if (!(datasets == null ? void 0 : datasets.length) || !(labels == null ? void 0 : labels.length) || !(xAxisLabels == null ? void 0 : xAxisLabels.length)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EmptyContainer, { children: noDataText }) });
+  }
+  const resolvedColors = !dataColors || typeof dataColors !== "string" && dataColors.length === 0 ? DEFAULT_COLORS.slice(0, 2) : dataColors;
+  const options = {
+    plugins: {
+      title: { display: !!chartTitle, text: chartTitle },
+      legend: { display: showLegend },
+      tooltip: {
+        callbacks: {
+          label(tooltipItem) {
+            let label = tooltipItem.dataset.label || "";
+            if (label) label += ": ";
+            label += currency ? currency + tooltipItem.parsed.y : tooltipItem.parsed.y;
+            return label;
+          }
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    scales: {
+      x: {
+        stacked: true,
+        display: true,
+        grid: { display: true, drawOnChartArea: false, drawTicks: false },
+        ticks: { display: true, padding: 8, font: { size: 11 } }
+      },
+      y: {
+        stacked: true,
+        display: true,
+        grid: { display: false },
+        ticks: { display: true, maxTicksLimit: 4 }
+      }
+    }
+  };
+  const chartData = {
+    labels: xAxisLabels,
+    datasets: labels.map((label, index) => {
+      const color = typeof resolvedColors === "string" ? resolvedColors : resolvedColors[index];
+      return {
+        label,
+        data: datasets[index],
+        backgroundColor: color,
+        borderColor: "#fff",
+        borderWidth: typeof resolvedColors === "string" ? 0 : 1,
+        barPercentage: 0.5
+      };
+    })
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_chartjs_27.Chart, { type: "bar", options, data: chartData });
+};
+FrontendStackedChart.displayName = "FrontendStackedChart";
+
+// src/charts/FrontendIncomeExpenseHorizontalBarChart.tsx
+var import_react7 = require("react");
+var import_styles8 = require("@mui/material/styles");
+var import_chart8 = require("chart.js");
+var import_chartjs_plugin_datalabels = __toESM(require("chartjs-plugin-datalabels"));
+var import_react_chartjs_28 = require("react-chartjs-2");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+import_chart8.Chart.register(import_chart8.CategoryScale, import_chart8.LinearScale, import_chart8.BarElement, import_chart8.Title, import_chart8.Tooltip, import_chart8.Legend);
+var ChartWrapper5 = (0, import_styles8.styled)("div")(
+  ({ chartHeight }) => ({
+    position: "relative",
+    height: chartHeight,
+    width: "100%"
+  })
+);
+var FrontendIncomeExpenseHorizontalBarChart = ({
+  totalIncome,
+  totalExpense,
+  incomeColor = "#39FD99",
+  expenseColor = "#162029",
+  textColor = "#040D13",
+  height = 160
+}) => {
+  const suggestedMax = Math.max(totalIncome, Math.abs(totalExpense)) * 1.25;
+  const options = (0, import_react7.useMemo)(
+    () => ({
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        datalabels: {
+          color: textColor,
+          textAlign: "left"
+        },
+        legend: { display: false }
+      },
+      layout: {
+        padding: {
+          right: 120,
+          left: 0,
+          top: 10,
+          bottom: 10
+        }
+      },
+      scales: {
+        y: {
+          display: true,
+          grid: { display: false, drawBorder: false },
+          border: { display: false },
+          ticks: { display: false }
+        },
+        x: {
+          display: true,
+          grid: { display: false, drawBorder: false },
+          border: { display: false },
+          ticks: {
+            display: false
+          },
+          suggestedMax
+        }
+      }
+    }),
+    [totalIncome, totalExpense, textColor, suggestedMax]
+  );
+  const chartData = (0, import_react7.useMemo)(
+    () => ({
+      labels: ["Incoming", "Outgoing"],
+      datasets: [
+        {
+          barThickness: 40,
+          backgroundColor: [incomeColor, expenseColor],
+          data: [totalIncome, Math.abs(totalExpense)],
+          datalabels: {
+            labels: {
+              value: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                font: { weight: "bold", size: 14 },
+                formatter(value) {
+                  return [formatNumberWithDollar(value), ""];
+                }
+              },
+              name: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                formatter(_value, ctx) {
+                  return ["", ctx.chart.data.labels[ctx.dataIndex]];
+                }
+              }
+            }
+          }
+        }
+      ]
+    }),
+    [totalIncome, totalExpense, incomeColor, expenseColor]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChartWrapper5, { chartHeight: height, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_react_chartjs_28.Chart,
+    {
+      type: "bar",
+      plugins: [import_chartjs_plugin_datalabels.default],
+      options,
+      data: chartData
+    }
+  ) });
+};
+FrontendIncomeExpenseHorizontalBarChart.displayName = "FrontendIncomeExpenseHorizontalBarChart";
+
+// src/charts/FrontendPercentageBar.tsx
+var import_react8 = require("react");
+var import_material6 = require("@mui/material");
+var import_styles9 = require("@mui/material/styles");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var MAXIMUM_CATEGORIES = 5;
+var MAXIMUM_CATEGORIES_PERCENT = 5;
+var Root = (0, import_styles9.styled)("div")({
+  width: "100%"
+});
+var Title8 = (0, import_styles9.styled)("div")({
+  fontSize: 16,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  transition: "all 0.2s ease-in",
+  whiteSpace: "nowrap",
+  minHeight: 24
+});
+var Bar2 = (0, import_styles9.styled)("div")({
+  display: "flex",
+  gap: 2,
+  height: 25,
+  marginBottom: "2.5rem",
+  marginTop: "1.5rem",
+  width: "100%",
+  "&:not(:hover) .percentage-bar-part": {
+    backgroundColor: "var(--bg-color)"
+  },
+  "&:not(:hover) .percentage-bar-icon": {
+    opacity: 1
+  }
+});
+var Part = (0, import_styles9.styled)("div")({
+  borderRadius: 2,
+  position: "relative",
+  transition: "background-color 0.3s ease-in",
+  cursor: "pointer",
+  backgroundColor: "#e9edf2",
+  "&:hover": {
+    backgroundColor: "var(--bg-color)"
+  },
+  "&:hover .percentage-bar-icon": {
+    opacity: 1
+  }
+});
+var OtherBar = (0, import_styles9.styled)("div")({
+  display: "flex",
+  gap: 2,
+  position: "relative",
+  "&:hover .percentage-bar-part": {
+    backgroundColor: "var(--bg-color)"
+  },
+  "&:hover .percentage-bar-icon": {
+    opacity: 1
+  }
+});
+var ValuePart = (0, import_styles9.styled)("div")({
+  bottom: -28,
+  height: 20,
+  left: 0,
+  position: "absolute",
+  width: "100%",
+  fontSize: 12,
+  padding: "1rem 0.5rem",
+  "&::after": {
+    borderBottom: "2px solid #E8EAEC",
+    borderLeft: "2px solid #E8EAEC",
+    borderRight: "2px solid #E8EAEC",
+    bottom: -4,
+    content: '""',
+    height: 10,
+    left: 0,
+    position: "absolute",
+    width: "100%"
+  }
+});
+var IconWrapper = (0, import_styles9.styled)("div")({
+  opacity: 0,
+  marginLeft: 4,
+  width: 18,
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "opacity 0.3s ease-in",
+  "& svg": { width: "100%" }
+});
+var mergeOtherCategories = (others) => {
+  return others.reduce(
+    (result, part) => __spreadProps(__spreadValues({}, result), {
+      percentage: part.percentage + result.percentage
+    }),
+    { title: "Other", percentage: 0 }
+  );
+};
+var splitCategoryParts = (items, maxIndex) => {
+  if (maxIndex < 0) return [items, []];
+  const idx = maxIndex > MAXIMUM_CATEGORIES ? MAXIMUM_CATEGORIES : maxIndex;
+  return [items.slice(0, idx), items.slice(idx)];
+};
+var FrontendPercentageBar = ({
+  defaultTitle,
+  chartColors = [],
+  parts = [],
+  chartIcons = [],
+  showFullCategory = false
+}) => {
+  const [selectedTitle, setSelectedTitle] = (0, import_react8.useState)("");
+  const handleMouseEnterPart = (part) => {
+    setSelectedTitle(`${(part.percentage * 100).toFixed(1)}% ${part.title}`);
+  };
+  const handleMouseLeaveBar = () => {
+    setSelectedTitle("");
+  };
+  const maximumCategoryItem = (0, import_react8.useMemo)(() => {
+    if (showFullCategory) return parts.length;
+    return parts.slice().sort((a, b) => b.percentage - a.percentage).findIndex((part) => part.percentage * 100 < MAXIMUM_CATEGORIES_PERCENT);
+  }, [parts, showFullCategory]);
+  const [firstParts, secondParts] = (0, import_react8.useMemo)(() => {
+    if (showFullCategory) return [parts, []];
+    return splitCategoryParts(parts, maximumCategoryItem);
+  }, [parts, maximumCategoryItem, showFullCategory]);
+  const [firstColors, secondColors] = (0, import_react8.useMemo)(() => {
+    if (showFullCategory) return [chartColors, []];
+    return splitCategoryParts(chartColors, maximumCategoryItem);
+  }, [chartColors, maximumCategoryItem, showFullCategory]);
+  const [firstIcons, secondIcons] = (0, import_react8.useMemo)(() => {
+    if (showFullCategory) return [chartIcons, []];
+    return splitCategoryParts(chartIcons, maximumCategoryItem);
+  }, [chartIcons, maximumCategoryItem, showFullCategory]);
+  const otherCategoryValue = mergeOtherCategories(secondParts);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Title8, { children: selectedTitle || defaultTitle }),
+    parts.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_material6.Box,
+      {
+        sx: {
+          height: 22,
+          width: "100%",
+          backgroundColor: "rgba(191,191,191,0.1)",
+          border: "1px solid #E8EAEC",
+          borderRadius: "3px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          mt: 0.5
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_material6.Typography, { sx: { color: "#4A5C6A", fontSize: 12, fontWeight: 400 }, children: "No data" })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Bar2, { onMouseLeave: handleMouseLeaveBar, children: [
+      firstParts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        Part,
+        {
+          className: "percentage-bar-part",
+          onMouseEnter: () => handleMouseEnterPart(part),
+          style: {
+            flexGrow: part.percentage * 10,
+            "--bg-color": firstColors[index]
+          },
+          children: [
+            firstIcons[index] && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconWrapper, { className: "percentage-bar-icon", children: firstIcons[index] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ValuePart, { onMouseEnter: () => handleMouseEnterPart(part), children: [
+              convertToFloat(part.percentage * 100, 1),
+              "%"
+            ] })
+          ]
+        },
+        part.title
+      )),
+      otherCategoryValue.percentage !== 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(OtherBar, { style: { flexGrow: otherCategoryValue.percentage * 10 }, children: [
+        secondParts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Part,
+          {
+            className: "percentage-bar-part",
+            onMouseEnter: () => handleMouseEnterPart(part),
+            style: {
+              flexGrow: part.percentage * 100,
+              "--bg-color": secondColors[index]
+            },
+            children: part.percentage > 0.05 && secondIcons[index] && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconWrapper, { className: "percentage-bar-icon", children: secondIcons[index] })
+          },
+          part.title
+        )),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ValuePart, { onMouseEnter: () => handleMouseEnterPart(otherCategoryValue), children: [
+          convertToFloat(otherCategoryValue.percentage * 100, 1),
+          "%"
+        ] })
+      ] })
+    ] })
+  ] });
+};
+FrontendPercentageBar.displayName = "FrontendPercentageBar";
+
+// src/charts/FrontendLiabilitiesChart.tsx
+var import_react9 = require("react");
+var import_styles10 = require("@mui/material/styles");
+var import_material7 = require("@mui/material");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var generateColorGradient = (baseColor, count) => {
+  if (count <= 0) return [];
+  const hex = baseColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return Array.from({ length: count }, (_, i) => {
+    const ratio = count > 1 ? i / (count - 1) : 0;
+    const nr = Math.round(r + (255 - r) * ratio);
+    const ng = Math.round(g + (255 - g) * ratio);
+    const nb = Math.round(b + (255 - b) * ratio);
+    return `#${nr.toString(16).padStart(2, "0")}${ng.toString(16).padStart(2, "0")}${nb.toString(16).padStart(2, "0")}`;
+  });
+};
+var Root2 = (0, import_styles10.styled)("div")({
+  width: "100%"
+});
+var LegendsContainer = (0, import_styles10.styled)("div")({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 12,
+  marginTop: 8
+});
+var LegendItem = (0, import_styles10.styled)("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+});
+var LegendColor = (0, import_styles10.styled)("div")(({ bgColor }) => ({
+  width: 12,
+  height: 12,
+  borderRadius: 2,
+  backgroundColor: bgColor,
+  flexShrink: 0
+}));
+var FrontendLiabilitiesChart = ({
+  defaultTitle,
+  color = "#131c24",
+  parts = []
+}) => {
+  const colors = (0, import_react9.useMemo)(
+    () => generateColorGradient(color, parts.length),
+    [color, parts.length]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Root2, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      FrontendPercentageBar,
+      {
+        defaultTitle,
+        chartColors: colors,
+        parts,
+        showFullCategory: true
+      }
+    ),
+    parts.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        style: {
+          height: 22,
+          backgroundColor: "#e9edf2",
+          borderRadius: 2,
+          marginTop: 8
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LegendsContainer, { children: parts.map((part, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(LegendItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LegendColor, { bgColor: colors[index] || "#ccc" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material7.Typography, { variant: "body2", children: part.title })
+    ] }, part.id || part.title)) })
+  ] });
+};
+FrontendLiabilitiesChart.displayName = "FrontendLiabilitiesChart";
+
+// src/charts/FrontendScenarioLineChart.tsx
+var import_react10 = require("react");
+var import_styles11 = require("@mui/material/styles");
+var import_chart9 = require("chart.js");
+var import_chartjs_adapter_date_fns5 = require("chartjs-adapter-date-fns");
+var import_react_chartjs_29 = require("react-chartjs-2");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+import_chart9.Chart.register(
+  import_chart9.CategoryScale,
+  import_chart9.LinearScale,
+  import_chart9.PointElement,
+  import_chart9.LineElement,
+  import_chart9.LineController,
+  import_chart9.Title,
+  import_chart9.Tooltip,
+  import_chart9.Legend,
+  import_chart9.TimeScale
+);
+var ChartContainer5 = (0, import_styles11.styled)("div")({
+  position: "relative",
+  width: "100%"
+});
+var LineChartSize = (0, import_styles11.styled)("div")(
+  ({ chartHeight }) => ({
+    flex: "auto",
+    height: chartHeight || 270,
+    position: "relative",
+    width: "100%"
+  })
+);
+var LoadingOverlay2 = (0, import_styles11.styled)("div")({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.8)"
+});
+var SECONDARY_COLOR_40 = "rgba(22, 32, 41, 0.4)";
+var BORDER_COLOR2 = "#A1B9BD";
+var buildChartOption4 = (customOptions = {}) => {
+  const defaultOptions = {
+    scales: {
+      x: {
+        grid: { display: false },
+        stacked: true,
+        ticks: {
+          maxTicksLimit: 15,
+          autoSkip: false,
+          maxRotation: 0,
+          minRotation: 0,
+          beginAtZero: false,
+          source: "auto"
+        },
+        bounds: "data",
+        type: "time",
+        time: { unit: "month" },
+        distribution: "linear"
+      },
+      y: {
+        grid: { drawOnChartArea: false },
+        display: true,
+        stacked: false,
+        position: "left",
+        ticks: {
+          beginAtZero: true,
+          display: true,
+          callback(value) {
+            return formatNumberWithText(Number(value), 1);
+          }
+        }
+      }
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      legend: {
+        display: true,
+        position: "top",
+        align: "end",
+        fullSize: true,
+        reverse: false,
+        labels: {
+          usePointStyle: true,
+          boxWidth: 200,
+          padding: 10
+        }
+      },
+      tooltip: {
+        enabled: true,
+        mode: "nearest",
+        intersect: false,
+        backgroundColor: "#fff",
+        titleColor: "#000",
+        bodyColor: "#000",
+        displayColors: false,
+        borderColor: "#000",
+        borderWidth: 1,
+        padding: 8,
+        cornerRadius: 4,
+        titleSpacing: 4,
+        bodySpacing: 4,
+        callbacks: {
+          title(tooltipItems) {
+            var _a;
+            const tooltipItem = tooltipItems[0];
+            if ((_a = tooltipItem == null ? void 0 : tooltipItem.parsed) == null ? void 0 : _a.x) {
+              const date = new Date(tooltipItem.parsed.x);
+              return date.toLocaleDateString("en-US", {
+                month: "short",
+                year: "numeric"
+              });
+            }
+            return "";
+          },
+          label(tooltipItem) {
+            const xLabel = tooltipItem.dataset.label;
+            const { parsed = { y: 0 } } = tooltipItem;
+            const yLabel = parsed.y;
+            const chartValueWithCommas = formatNumber(Math.abs(yLabel));
+            return `${xLabel}: ${yLabel >= 0 ? `$${chartValueWithCommas}` : `-$${chartValueWithCommas}`}`.trim();
+          }
+        }
+      }
+    },
+    interaction: { mode: "nearest", intersect: false }
+  };
+  return __spreadValues(__spreadValues({}, defaultOptions), customOptions);
+};
+var buildChartData3 = (data, secondaryData, primaryColor, borderWidth, desiredLoanAmount) => {
+  const desiredLoanLine = data.map((item) => __spreadProps(__spreadValues({}, item), {
+    y: desiredLoanAmount
+  }));
+  return {
+    datasets: [
+      {
+        label: "Based on Current Expenses",
+        fill: false,
+        backgroundColor: BORDER_COLOR2,
+        borderColor: "#5E6266",
+        borderCapStyle: "butt",
+        borderDash: [],
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBackgroundColor: "#5E6266",
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "#5E6266",
+        pointHoverBorderColor: SECONDARY_COLOR_40,
+        pointHoverBorderWidth: 8,
+        borderWidth,
+        pointRadius: 0,
+        pointBorderColor: "#5E6266",
+        pointHitRadius: 3,
+        pointStyle: "line",
+        tension: 0.4,
+        data
+      },
+      {
+        label: "Optimised Estimate",
+        fill: false,
+        backgroundColor: BORDER_COLOR2,
+        borderColor: "#A1B9BD",
+        borderDash: [2, 2],
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBorderColor: "#A1B9BD",
+        pointBackgroundColor: "#A1B9BD",
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "#A1B9BD",
+        pointHoverBorderColor: SECONDARY_COLOR_40,
+        pointHoverBorderWidth: 8,
+        pointRadius: 0,
+        borderWidth,
+        pointHitRadius: 3,
+        data: secondaryData,
+        tension: 0.4,
+        pointStyle: "line"
+      },
+      {
+        label: "Desired Loan Amount",
+        fill: false,
+        backgroundColor: "transparent",
+        borderColor: primaryColor,
+        borderCapStyle: "butt",
+        borderDash: [5, 5],
+        borderDashOffset: 0,
+        borderJoinStyle: "miter",
+        pointBorderColor: primaryColor,
+        pointBackgroundColor: primaryColor,
+        pointBorderWidth: 2,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: primaryColor,
+        pointHoverBorderColor: primaryColor,
+        pointHoverBorderWidth: 8,
+        borderWidth,
+        pointRadius: 0,
+        pointHitRadius: 3,
+        data: desiredLoanLine,
+        tension: 0,
+        pointStyle: "line"
+      }
+    ]
+  };
+};
+var DEFAULT_DESIRED_LOAN_AMOUNT = 5e5;
+var FrontendScenarioLineChart = ({
+  data = [],
+  secondaryData = [],
+  isLoading = false,
+  isError = false,
+  height = 300,
+  desiredLoanAmount,
+  primaryColor = "#04f73d",
+  customChartOptions = {}
+}) => {
+  const chartRef = (0, import_react10.useRef)(null);
+  const chartData = (0, import_react10.useMemo)(
+    () => buildChartData3(
+      data,
+      secondaryData,
+      primaryColor,
+      1,
+      desiredLoanAmount != null ? desiredLoanAmount : DEFAULT_DESIRED_LOAN_AMOUNT
+    ),
+    [data, secondaryData, primaryColor, desiredLoanAmount]
+  );
+  const options = (0, import_react10.useMemo)(
+    () => buildChartOption4(customChartOptions),
+    [customChartOptions]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartContainer5, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(LineChartSize, { chartHeight: height, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_chartjs_29.Chart,
+      {
+        ref: chartRef,
+        type: "line",
+        data: chartData,
+        options
+      }
+    ),
+    (isLoading || isError) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingOverlay2, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingChartBackdrop, { isLoading, isError }) })
+  ] }) });
+};
+FrontendScenarioLineChart.displayName = "FrontendScenarioLineChart";
+
+// src/charts/mock-data.ts
+var generateMonthlyPeriods = (months = 12) => {
+  const periods2 = [];
+  const now = /* @__PURE__ */ new Date();
+  for (let i = months - 1; i >= 0; i--) {
+    const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    periods2.push(d.toISOString().split("T")[0]);
+  }
+  return periods2;
+};
+var randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+var periods = generateMonthlyPeriods(12);
+var mockLineChartData = [
+  {
+    label: "Portfolio Value",
+    data: periods.map((p) => ({ x: p, y: randInt(1e5, 5e5) })),
+    customOptions: {
+      borderColor: "#2B72FB",
+      backgroundColor: "#2B72FB1A",
+      fill: true
+    }
+  }
+];
+var mockMobileLineChartData = [
+  {
+    label: "Portfolio Value",
+    data: periods.map((p) => ({ x: p, y: randInt(1e5, 5e5) })),
+    color: "#162029"
+  },
+  {
+    label: "Benchmark",
+    data: periods.map((p) => ({ x: p, y: randInt(8e4, 45e4) })),
+    color: "#A1B9BD",
+    lineSpacing: [5, 5]
+  }
+];
+var mockBarChartData = {
+  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+  datasets: [
+    {
+      label: "Income",
+      data: Array.from({ length: 12 }, () => randInt(3e3, 8e3)),
+      backgroundColor: "#39FD99"
+    },
+    {
+      label: "Expenses",
+      data: Array.from({ length: 12 }, () => -randInt(2e3, 6e3)),
+      backgroundColor: "#F44336"
+    }
+  ]
+};
+var mockDoughnutData = {
+  data: [35e3, 22e3, 18e3, 12e3, 8e3, 5e3],
+  title: [
+    "Property",
+    "Shares",
+    "Superannuation",
+    "Cash",
+    "Crypto",
+    "Other"
+  ],
+  colors: ["#2B72FB", "#64BDC6", "#EECA34", "#FE6A35", "#7B47E9", "#3FDC7E"]
+};
+var mockMixedChartDatasets = [
+  {
+    type: "line",
+    label: "Estimate Value",
+    data: periods.map((p) => ({ x: p, y: randInt(4e5, 6e5) })),
+    borderColor: "#131C24",
+    backgroundColor: "#131C24",
+    borderWidth: 3,
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect"
+  },
+  {
+    type: "line",
+    label: "Suburb Average",
+    data: periods.map((p) => ({ x: p, y: randInt(45e4, 55e4) })),
+    borderColor: "#e8e8eb",
+    backgroundColor: "#e8e8eb",
+    borderWidth: 1,
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect"
+  },
+  {
+    type: "bar",
+    label: "Debt",
+    data: periods.map((p) => ({ x: p, y: randInt(2e5, 35e4) })),
+    backgroundColor: "#E9EDF2",
+    borderColor: "#E9EDF2",
+    fill: false,
+    tension: 0.4,
+    pointRadius: 0,
+    pointStyle: "rect"
+  }
+];
+var mockPercentageBarParts = [
+  { title: "Groceries", percentage: 0.25 },
+  { title: "Transport", percentage: 0.18 },
+  { title: "Entertainment", percentage: 0.15 },
+  { title: "Utilities", percentage: 0.12 },
+  { title: "Dining", percentage: 0.1 },
+  { title: "Shopping", percentage: 0.08 },
+  { title: "Healthcare", percentage: 0.07 },
+  { title: "Education", percentage: 0.05 }
+];
+var mockPercentageBarColors = [
+  "#2B72FB",
+  "#64BDC6",
+  "#EECA34",
+  "#FE6A35",
+  "#FA4B42",
+  "#EE60E0",
+  "#7B47E9",
+  "#3FDC7E"
+];
+var mockLiabilitiesParts = [
+  { id: "1", title: "Home Loan", percentage: 0.55 },
+  { id: "2", title: "Car Loan", percentage: 0.25 },
+  { id: "3", title: "Credit Card", percentage: 0.12 },
+  { id: "4", title: "Personal Loan", percentage: 0.08 }
+];
+var mockScenarioData = periods.map((p) => ({
+  x: p,
+  y: randInt(5e5, 8e5)
+}));
+var mockScenarioSecondaryData = periods.map(
+  (p) => ({
+    x: p,
+    y: randInt(6e5, 9e5)
+  })
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackofficeSwitchableChart,
+  FRONTEND_STACKED_CHART_MOCK_COLORS,
+  FRONTEND_STACKED_CHART_MOCK_DATA,
+  FRONTEND_STACKED_CHART_MOCK_LABELS,
+  FRONTEND_STACKED_CHART_MOCK_X_AXIS_LABELS,
+  FrontendBarChart,
+  FrontendDoughnutChart,
+  FrontendIncomeExpenseHorizontalBarChart,
+  FrontendLiabilitiesChart,
+  FrontendLineChart,
+  FrontendLineChartMobile,
+  FrontendMixedChart,
+  FrontendPercentageBar,
+  FrontendScenarioLineChart,
+  FrontendStackedChart,
+  LoadingChartBackdrop,
+  buildChartDataFromObject,
+  convertToFloat,
+  formatNumber,
+  formatNumberWithDollar,
+  formatNumberWithText,
+  getChartOptions,
+  mockBarChartData,
+  mockDoughnutData,
+  mockLiabilitiesParts,
+  mockLineChartData,
+  mockMixedChartDatasets,
+  mockMobileLineChartData,
+  mockPercentageBarColors,
+  mockPercentageBarParts,
+  mockScenarioData,
+  mockScenarioSecondaryData,
+  tooltipsBaseOption
+});