@wealthx/ui 0.0.1 → 1.0.1

package/src/button-group.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiButtonGroup, {
+  type ButtonGroupProps as MuiButtonGroupProps,
+} from "@mui/material/ButtonGroup";
+
+export type ButtonGroupProps = MuiButtonGroupProps;
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  (props, ref) => {
+    return <MuiButtonGroup ref={ref} {...props} />;
+  }
+);
+
+ButtonGroup.displayName = "ButtonGroup";

package/src/button.tsx

@@ -1,9 +1,14 @@
-import MuiButton, { type ButtonProps as MuiButtonProps } from "@mui/material/Button";
+import React from "react";
+import MuiButton, {
+  type ButtonProps as MuiButtonProps,
+} from "@mui/material/Button";
 
 export type ButtonProps = MuiButtonProps;
 
-export function Button(props: ButtonProps): JSX.Element {
-  return <MuiButton {...props} />;
-}
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return <MuiButton ref={ref} {...props} />;
+  }
+);
 
 Button.displayName = "Button";

package/src/card-actions.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiCardActions, {
+  type CardActionsProps as MuiCardActionsProps,
+} from "@mui/material/CardActions";
+
+export type CardActionsProps = MuiCardActionsProps;
+
+export const CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(
+  (props, ref) => {
+    return <MuiCardActions ref={ref} {...props} />;
+  }
+);
+
+CardActions.displayName = "CardActions";

package/src/card-content.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiCardContent, {
+  type CardContentProps as MuiCardContentProps,
+} from "@mui/material/CardContent";
+
+export type CardContentProps = MuiCardContentProps;
+
+export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(
+  (props, ref) => {
+    return <MuiCardContent ref={ref} {...props} />;
+  }
+);
+
+CardContent.displayName = "CardContent";

package/src/card-header.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiCardHeader, {
+  type CardHeaderProps as MuiCardHeaderProps,
+} from "@mui/material/CardHeader";
+
+export type CardHeaderProps = MuiCardHeaderProps;
+
+export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(
+  (props, ref) => {
+    return <MuiCardHeader ref={ref} {...props} />;
+  }
+);
+
+CardHeader.displayName = "CardHeader";

package/src/card-media.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import MuiCardMedia, {
+  type CardMediaProps as MuiCardMediaProps,
+} from "@mui/material/CardMedia";
+
+export type CardMediaProps = MuiCardMediaProps;
+
+export const CardMedia = React.forwardRef<HTMLDivElement, CardMediaProps>(
+  (props, ref) => {
+    return <MuiCardMedia ref={ref} {...props} />;
+  }
+);
+
+CardMedia.displayName = "CardMedia";

package/src/card.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import MuiCard, { type CardProps as MuiCardProps } from "@mui/material/Card";
+
+export type CardProps = MuiCardProps;
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (props, ref) => {
+    return <MuiCard ref={ref} {...props} />;
+  }
+);
+
+Card.displayName = "Card";

package/src/charts/BackofficeSwitchableChart.tsx

@@ -0,0 +1,325 @@
+import React, { useMemo, useRef } from "react";
+import { Button, ButtonGroup } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import StackedLineChart from "@mui/icons-material/StackedLineChart";
+import EqualizerIcon from "@mui/icons-material/Equalizer";
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  TimeScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import "chartjs-adapter-date-fns";
+import { Bar, Line } from "react-chartjs-2";
+import { LoadingChartBackdrop } from "./LoadingChartBackdrop";
+import {
+  tooltipsBaseOption,
+  formatNumber,
+  formatNumberWithText,
+} from "./chart-utils";
+import { FOUNDATION_COLORS } from "../theme";
+import { format } from "date-fns";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+export type ChartType = "line" | "bar";
+
+/**
+ * Default chart options for the backoffice switchable (line/bar) chart.
+ * Uses time scale on x, shared tooltip/legend styling, and optional theme colors.
+ */
+export function getChartOptions(options?: {
+  primaryColor?: string;
+  textColor?: string;
+}): ChartOptions {
+  const primaryColor = options?.primaryColor ?? FOUNDATION_COLORS.brand.primary;
+  const textColor = options?.textColor ?? FOUNDATION_COLORS.text.primary;
+
+  return {
+    scales: {
+      x: {
+        grid: {
+          display: false,
+        },
+        stacked: false,
+        type: "time",
+        time: {
+          unit: "month",
+        },
+        ticks: {
+          callback: (value: string | number) => {
+            if (typeof value === "number" && value > 0) {
+              return format(new Date(value), "MMM").toUpperCase();
+            }
+            const parsedValue = Number(value);
+            return Number.isNaN(parsedValue)
+              ? ""
+              : format(new Date(parsedValue), "MMM").toUpperCase();
+          },
+        },
+      },
+      y: {
+        grid: {
+          display: false,
+        },
+        stacked: false,
+        ticks: {
+          stepSize: 1,
+          maxTicksLimit: 5,
+        },
+      },
+    },
+    maintainAspectRatio: false,
+    responsive: true,
+    plugins: {
+      tooltip: {
+        ...tooltipsBaseOption,
+        mode: "nearest" as const,
+      },
+      legend: {
+        display: false,
+      },
+    },
+    interaction: {
+      mode: "nearest" as const,
+      intersect: false,
+    },
+  };
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        labels: {
+          color: textColor,
+          usePointStyle: true,
+        },
+      },
+      tooltip: {
+        ...tooltipsBaseOption,
+        titleColor: textColor,
+        bodyColor: textColor,
+        borderColor: primaryColor,
+        callbacks: {
+          label(tooltipItem: any) {
+            const value = tooltipItem.parsed?.y ?? 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: unknown) {
+            return formatNumberWithText(Number(value), 1);
+          },
+        },
+      },
+    },
+  };
+}
+
+export interface BackofficeSwitchableChartProps {
+  chartTitle?: string;
+  datasets: any[];
+  /** When provided, merged with getChartOptions(); when omitted, only getChartOptions() is used. */
+  chartOptions?: ChartOptions;
+  isLoading: boolean;
+  isError: boolean;
+  chartType: ChartType;
+  onChartTypeChange: (type: ChartType) => void;
+  primaryColor?: string;
+  textColor?: string;
+}
+
+/* Match backoffice contact.scss: .line-chart-container, .switchable-chart-container */
+const ChartContainer = styled("div")({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  minWidth: 0,
+  flexDirection: "column",
+});
+
+/* Match .switchable-chart-header */
+const ChartHeader = styled("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginBottom: "1rem",
+  flexWrap: "wrap",
+  gap: "0.5rem",
+});
+
+const ChartTitle = styled("div")({
+  fontSize: 16,
+  fontWeight: 600,
+  "@media (max-width: 768px)": { fontSize: 14 },
+});
+
+/* Match .chart-controls (inline style from original) */
+const ChartControls = styled("div")({
+  display: "flex",
+  justifyContent: "flex-end",
+  marginBottom: 12,
+});
+
+/* Match .line-chart-size */
+const ChartWrapper = styled("div")({
+  flex: 1,
+  position: "relative",
+  minHeight: 250,
+  width: "100%",
+  height: "100%",
+  "@media (max-width: 768px)": { minHeight: 200 },
+  "@media (max-width: 480px)": { minHeight: 180 },
+});
+
+/* Match .loading-chart-indicator */
+const LoadingOverlay = 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" },
+});
+
+export const BackofficeSwitchableChart: React.FC<
+  BackofficeSwitchableChartProps
+> = ({
+  chartTitle,
+  datasets,
+  chartOptions: chartOptionsOverride,
+  isLoading,
+  isError,
+  chartType,
+  onChartTypeChange,
+  primaryColor = FOUNDATION_COLORS.brand.primary,
+  textColor = FOUNDATION_COLORS.text.primary,
+}) => {
+  const chartRef = useRef(null);
+
+  const chartData = useMemo(() => ({ datasets }), [datasets]);
+
+  const responsiveChartOptions = useMemo(() => {
+    const base = getChartOptions({ primaryColor, textColor });
+    return {
+      ...base,
+      ...chartOptionsOverride,
+      plugins: {
+        ...base.plugins,
+        ...(chartOptionsOverride?.plugins ?? {}),
+      },
+      scales: {
+        ...base.scales,
+        ...(chartOptionsOverride?.scales ?? {}),
+      },
+    } as ChartOptions;
+  }, [primaryColor, textColor, chartOptionsOverride]);
+
+  return (
+    <ChartContainer>
+      <ChartHeader>
+        {chartTitle ? <ChartTitle>{chartTitle}</ChartTitle> : <div />}
+        <ChartControls>
+          <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" },
+              },
+            }}
+          >
+            <Button
+              variant={chartType === "line" ? "contained" : "text"}
+              onClick={() => onChartTypeChange("line")}
+              aria-label="Line chart"
+            >
+              <StackedLineChart sx={{ fontSize: 14 }} />
+            </Button>
+            <Button
+              variant={chartType === "bar" ? "contained" : "text"}
+              onClick={() => onChartTypeChange("bar")}
+              aria-label="Bar chart"
+            >
+              <EqualizerIcon sx={{ fontSize: 14 }} />
+            </Button>
+          </ButtonGroup>
+        </ChartControls>
+      </ChartHeader>
+
+      <ChartWrapper>
+        {!isLoading &&
+          !isError &&
+          (chartType === "line" ? (
+            <Line
+              ref={chartRef}
+              data={chartData as any}
+              options={responsiveChartOptions as any}
+            />
+          ) : (
+            <Bar
+              ref={chartRef}
+              data={chartData as any}
+              options={responsiveChartOptions as any}
+            />
+          ))}
+        {(isLoading || isError) && (
+          <LoadingOverlay>
+            <LoadingChartBackdrop isLoading={isLoading} isError={isError} />
+          </LoadingOverlay>
+        )}
+      </ChartWrapper>
+    </ChartContainer>
+  );
+};
+
+BackofficeSwitchableChart.displayName = "BackofficeSwitchableChart";

package/src/charts/FrontendBarChart.tsx

@@ -0,0 +1,134 @@
+import React, { useMemo } from "react";
+import { styled } from "@mui/material/styles";
+import {
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { tooltipsBaseOption, formatNumber, formatNumberWithText } from "./chart-utils";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  BarController,
+  Title,
+  Tooltip,
+  Legend
+);
+
+export interface BarChartDataset {
+  label: string;
+  data: number[];
+  backgroundColor?: string | string[];
+  borderColor?: string | string[];
+  borderWidth?: number;
+}
+
+export interface FrontendBarChartData {
+  labels: string[];
+  datasets: BarChartDataset[];
+}
+
+export interface FrontendBarChartProps {
+  data: FrontendBarChartData;
+  customChartOptions?: Record<string, any>;
+}
+
+const ChartWrapper = styled("div")({
+  position: "relative",
+  height: 300,
+  width: "100%",
+});
+
+const baseChartOptions = {
+  maintainAspectRatio: false,
+  responsive: true,
+  plugins: {
+    legend: { display: false },
+    tooltip: {
+      ...tooltipsBaseOption,
+      callbacks: {
+        label(tooltipItem: any) {
+          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" as const,
+      grid: { display: false, drawBorder: false },
+      ticks: {
+        padding: 10,
+        callback(value: any) {
+          return formatNumberWithText(Number(value), 1);
+        },
+      },
+    },
+  },
+};
+
+const mergeOptions = (
+  base: Record<string, any>,
+  custom?: Record<string, any>
+): Record<string, any> => {
+  if (!custom) return base;
+  return deepMerge(base, custom);
+};
+
+const deepMerge = (
+  target: Record<string, any>,
+  source: Record<string, any>
+): Record<string, any> => {
+  const result = { ...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;
+};
+
+export const FrontendBarChart: React.FC<FrontendBarChartProps> = ({
+  data,
+  customChartOptions,
+}) => {
+  const options = useMemo(
+    () => mergeOptions(baseChartOptions, customChartOptions),
+    [customChartOptions]
+  );
+
+  return (
+    <ChartWrapper>
+      <Chart type="bar" data={data} options={options as any} />
+    </ChartWrapper>
+  );
+};
+
+FrontendBarChart.displayName = "FrontendBarChart";