@wealthx/shadcn 1.4.1 → 1.5.0

package/src/components/ui/backoffice-alert-matching-chart.tsx

@@ -0,0 +1,320 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  hexToRgba,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  ChartLegendItem,
+  ChartPeriodButton,
+} from "./chart-shared";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * One month of alert-matching data showing how many contacts fall into each
+ * alert-status bucket.
+ */
+export interface AlertMatchingDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  /** Contacts with no active alerts (healthy). */
+  healthy: number;
+  /** Contacts matching at least one Watch-level alert. */
+  watch: number;
+  /** Contacts matching at least one Need-Action alert. */
+  needAction: number;
+}
+
+export type AlertMatchingPeriod = 3 | 6 | 12;
+type AlertMatchingChartType = "line" | "bar";
+
+export interface BackofficeAlertMatchingChartProps {
+  chartData?: AlertMatchingDataPoint[] | null;
+  title?: string;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  defaultPeriod?: AlertMatchingPeriod;
+  height?: number;
+  width?: number | string;
+  className?: string;
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PERIODS: AlertMatchingPeriod[] = [3, 6, 12];
+const SLICE_COUNT: Record<AlertMatchingPeriod, number> = { 3: 3, 6: 6, 12: 12 };
+
+const HEALTHY_COLOR = "#166d42";
+const WATCH_COLOR = "#EF6C00";
+const NEED_ACTION_COLOR = "#F44336";
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+function AlertMatchingLegend() {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <ChartLegendItem
+        label="Healthy"
+        color={HEALTHY_COLOR}
+        lineStyle="solid"
+      />
+      <ChartLegendItem label="Watch" color={WATCH_COLOR} lineStyle="solid" />
+      <ChartLegendItem
+        label="Need Action"
+        color={NEED_ACTION_COLOR}
+        lineStyle="solid"
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BackofficeAlertMatchingChart({
+  chartData,
+  title = "Alert Matching History",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: BackofficeAlertMatchingChartProps) {
+  const [period, setPeriod] = useState<AlertMatchingPeriod>(defaultPeriod);
+  const [chartType, setChartType] = useState<AlertMatchingChartType>("line");
+
+  const themeVars = useThemeVars();
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<AlertMatchingDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const isBar = chartType === "bar";
+
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "Healthy",
+        data: sliced.map((p) => p.healthy),
+        borderColor: HEALTHY_COLOR,
+        backgroundColor: isBar ? HEALTHY_COLOR : hexToRgba(HEALTHY_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Watch",
+        data: sliced.map((p) => p.watch),
+        borderColor: WATCH_COLOR,
+        backgroundColor: isBar ? WATCH_COLOR : hexToRgba(WATCH_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Need Action",
+        data: sliced.map((p) => p.needAction),
+        borderColor: NEED_ACTION_COLOR,
+        backgroundColor: isBar
+          ? NEED_ACTION_COLOR
+          : hexToRgba(NEED_ACTION_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+    ];
+  }, [sliced, chartType, isBar]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.[idx]?.date) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: ${formatCount(val)}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+          },
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v)),
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
+        <CardAction>
+          <div className="flex items-center gap-2">
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              size="sm"
+              value={chartType}
+              onValueChange={(v) =>
+                v && setChartType(v as AlertMatchingChartType)
+              }
+            >
+              <ToggleGroupItem value="line" aria-label="Line chart">
+                <LineChart className="size-3.5" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="bar" aria-label="Bar chart">
+                <BarChart2 className="size-3.5" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+            <div className="flex gap-0.5 sm:gap-1">
+              {PERIODS.map((p) => (
+                <ChartPeriodButton
+                  key={p}
+                  period={p}
+                  active={period === p}
+                  onClick={() => setPeriod(p)}
+                />
+              ))}
+            </div>
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && <AlertMatchingLegend />}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+              <Chart
+                key={chartType}
+                type={chartType as any}
+                data={{ labels, datasets } as any}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <AlertMatchingLegend />
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/backoffice-contact-matching-chart.tsx

@@ -0,0 +1,341 @@
+import React, { useMemo, useState } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { BarChart2, LineChart } from "lucide-react";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle, CardAction } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  hexToRgba,
+  formatTooltipDate,
+  formatMonthLabel,
+  formatCount,
+  ChartLegendItem,
+  ChartPeriodButton,
+} from "./chart-shared";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  LineController,
+  LineElement,
+  PointElement,
+  BarController,
+  BarElement,
+  Tooltip,
+);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * One month of contact-matching data showing how many contacts are in each
+ * account-status bucket.
+ */
+export interface ContactMatchingDataPoint {
+  /** ISO date string e.g. "2024-01-01" */
+  date: string;
+  /** Total contacts across all statuses. */
+  total: number;
+  /** Contacts with an active account. */
+  active: number;
+  /** Contacts with a pending account. */
+  pending: number;
+  /** Contacts with an inactive account. */
+  inactive: number;
+}
+
+export type ContactMatchingPeriod = 3 | 6 | 12;
+type ContactMatchingChartType = "line" | "bar";
+
+export interface BackofficeContactMatchingChartProps {
+  chartData?: ContactMatchingDataPoint[] | null;
+  title?: string;
+  showLegend?: boolean;
+  legendPosition?: "top" | "bottom";
+  showXAxis?: boolean;
+  showYAxis?: boolean;
+  defaultPeriod?: ContactMatchingPeriod;
+  height?: number;
+  width?: number | string;
+  className?: string;
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const PERIODS: ContactMatchingPeriod[] = [3, 6, 12];
+const SLICE_COUNT: Record<ContactMatchingPeriod, number> = {
+  3: 3,
+  6: 6,
+  12: 12,
+};
+
+const TOTAL_COLOR = "#162029";
+const ACTIVE_COLOR = "#166d42";
+const PENDING_COLOR = "#EF6C00";
+const INACTIVE_COLOR = "#F44336";
+
+// ---------------------------------------------------------------------------
+// Legend
+// ---------------------------------------------------------------------------
+
+function ContactMatchingLegend() {
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1.5 pb-2">
+      <ChartLegendItem label="All" color={TOTAL_COLOR} lineStyle="solid" />
+      <ChartLegendItem label="Active" color={ACTIVE_COLOR} lineStyle="solid" />
+      <ChartLegendItem
+        label="Pending"
+        color={PENDING_COLOR}
+        lineStyle="solid"
+      />
+      <ChartLegendItem
+        label="Inactive"
+        color={INACTIVE_COLOR}
+        lineStyle="solid"
+      />
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function BackofficeContactMatchingChart({
+  chartData,
+  title = "Contact Matching History",
+  showLegend = true,
+  legendPosition = "top",
+  showXAxis = true,
+  showYAxis = false,
+  defaultPeriod = 6,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: BackofficeContactMatchingChartProps) {
+  const [period, setPeriod] = useState<ContactMatchingPeriod>(defaultPeriod);
+  const [chartType, setChartType] = useState<ContactMatchingChartType>("line");
+
+  const themeVars = useThemeVars();
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const sliced = useMemo<ContactMatchingDataPoint[] | null>(() => {
+    if (!chartData?.length) return null;
+    const count = Math.min(SLICE_COUNT[period], chartData.length);
+    return chartData.slice(chartData.length - count);
+  }, [chartData, period]);
+
+  const labels = useMemo(
+    () => sliced?.map((p) => formatMonthLabel(p.date)) ?? [],
+    [sliced],
+  );
+
+  const isBar = chartType === "bar";
+
+  const datasets = useMemo(() => {
+    if (!sliced) return [];
+    return [
+      {
+        type: chartType,
+        label: "All",
+        data: sliced.map((p) => p.total),
+        borderColor: TOTAL_COLOR,
+        backgroundColor: isBar ? TOTAL_COLOR : hexToRgba(TOTAL_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Active",
+        data: sliced.map((p) => p.active),
+        borderColor: ACTIVE_COLOR,
+        backgroundColor: isBar ? ACTIVE_COLOR : hexToRgba(ACTIVE_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Pending",
+        data: sliced.map((p) => p.pending),
+        borderColor: PENDING_COLOR,
+        backgroundColor: isBar ? PENDING_COLOR : hexToRgba(PENDING_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+      {
+        type: chartType,
+        label: "Inactive",
+        data: sliced.map((p) => p.inactive),
+        borderColor: INACTIVE_COLOR,
+        backgroundColor: isBar
+          ? INACTIVE_COLOR
+          : hexToRgba(INACTIVE_COLOR, 0.08),
+        fill: !isBar,
+        tension: 0.3,
+        pointRadius: 0,
+        borderWidth: 2,
+      },
+    ];
+  }, [sliced, chartType, isBar]);
+
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 300 },
+      layout: { padding: 0 },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          mode: "index",
+          intersect: false,
+          padding: 12,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            title: (tooltipItems) => {
+              const idx = tooltipItems[0]?.dataIndex;
+              if (idx != null && sliced?.[idx]?.date) {
+                return formatTooltipDate(sliced[idx].date, "monthly");
+              }
+              return tooltipItems[0]?.label ?? "";
+            },
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              if (val === 0) return;
+              return ` ${ctx.dataset.label}: ${formatCount(val)}`;
+            },
+          },
+        },
+      },
+      scales: {
+        x: {
+          display: showXAxis,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxRotation: 0,
+            minRotation: 0,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+          },
+        },
+        y: {
+          display: showYAxis,
+          grid: { display: false },
+          border: { display: false },
+          beginAtZero: true,
+          ticks: {
+            padding: 8,
+            maxTicksLimit: 5,
+            color: FALLBACK_TICK,
+            font: { size: 10 },
+            callback: (v) => formatCount(Number(v)),
+          },
+        },
+      },
+    }),
+    [showXAxis, showYAxis, sliced],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
+        <CardAction>
+          <div className="flex items-center gap-2">
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              size="sm"
+              value={chartType}
+              onValueChange={(v) =>
+                v && setChartType(v as ContactMatchingChartType)
+              }
+            >
+              <ToggleGroupItem value="line" aria-label="Line chart">
+                <LineChart className="size-3.5" />
+              </ToggleGroupItem>
+              <ToggleGroupItem value="bar" aria-label="Bar chart">
+                <BarChart2 className="size-3.5" />
+              </ToggleGroupItem>
+            </ToggleGroup>
+            <div className="flex gap-0.5 sm:gap-1">
+              {PERIODS.map((p) => (
+                <ChartPeriodButton
+                  key={p}
+                  period={p}
+                  active={period === p}
+                  onClick={() => setPeriod(p)}
+                />
+              ))}
+            </div>
+          </div>
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !sliced ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {showLegend && legendPosition === "top" && (
+              <ContactMatchingLegend />
+            )}
+            <div style={{ height, width: "100%", position: "relative" }}>
+              {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+              <Chart
+                key={chartType}
+                type={chartType as any}
+                data={{ labels, datasets } as any}
+                options={options}
+                aria-label={title}
+              />
+            </div>
+            {showLegend && legendPosition === "bottom" && (
+              <ContactMatchingLegend />
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}